Webフロントエンドに入門すべくVue.jsとSVGでメタ自己分析ツールを作った
Anarise (PC推奨, Chrome と Firefox で動作確認済み) というメタ自己分析ツールを作りました．ソースコードはGitHub - noimin0610/anarise: メタ自己分析ツールで公開しています．
Analyze + Summarize + Arise で "Anarise" です．
開発のきっかけ
今までもハッカソンや AtCoder Performances の開発でWebのバックエンドは最低限は書いていました．が，フロントは一度も書いたことがなく，共同開発者やチームメイトに丸投げして生きてきました．
そんな状況を打破すべく，ドットインストールのプレミアムサービスに課金してJavaScriptとVue.jsを学び始めたのが10月ごろ．
11月は就職活動が忙しくてフロントエンドの勉強もあまりやっていませんでしたが，ちょうど就職活動中に実装してみたいWebアプリのアイディアが浮かんだのでこれ幸いと実装を始めました．
"Anarise"とは
何をするWebアプリ？
「エピソード・経験」「性格・スキル・能力」「志望先の特徴」の3つのカテゴリに "カード" を追加したりカード同士を繋げたりして何かしらの志望動機などを考えるのに役立てるWebアプリです．「メタ自己分析ツール」を名乗っているのは，各種自己分析ツール等でわかったことをまとめるのに使えるかなあというお気持ちが込められています．ちなみに私がES提出前に紙の上でやっていたメモが元になっているので，この方法がどれだけ良い方法なのか，悪い方法なのかは保証できません．
典型的には就職活動の志望動機や自己PRの文章を考えるときに補助的に使うことなどを想定しています．エピソードを考えてからそれを自分のスキルを抽象化した言葉で表して志望先の特徴に繋げてもいいですし，他の自己分析ツールでわかった自分の性格からエピソードや志望先の特徴を連想してもいいと思います．
使い方
Anarise の下部に書いてあることがほぼ全てです．
- 各カテゴリの "+" ボタンをクリックするとそのカテゴリのカードが追加できます．カードの名前 (カードに書かれるテキスト) は最大20文字までで，同じカテゴリに同じ名前のカードは作ることができません．カードは1カテゴリ7枚までです．
- カードの左上の "x" ボタンをクリックすると，そのカードと，そのカードにつながっていた線が削除されます．そのカードより下にあるカードはそれにつながっている線も含めて上に詰められます．
- カードの右上の "edit" ボタンをクリックすると，そのカードの名前を編集できます．
- 2枚のカードを続けてクリックすると，それらのカードの間に線が引かれます．
- カードの間に引かれた線をクリックすると，その線は消えます．
使った技術
vue-cli (Vue.js)
Vue.js は React などのような JavaScript フレームワークの1つです．比較的小規模なWebアプリケーションに向いていると言われています．vue-cli は Vue.js を使ってアプリケーションを開発するためのツールです．
Scalable Vector Graphics の略です．XML ベースでグラフィックが記述できます．Anarise はカードもボタンも線も全部 SVG で記述しています．それぞれは XML タグに過ぎないので，JavaScriptでの扱いが楽チンです．
Firebase
現在のところはホスティングにしか使用していませんが，いずれはユーザ別にデータを保存できるようにしたいなあと思って使っています．ホスティングが簡単過ぎてびっくりしました．
改良したい点
ユーザ別のデータ保存
何らかの手段でブラウザ別またはユーザ別にデータを保存して，次回開いた時に前回作ったカードや線を呼び出せるようにしたいです．
各種ブラウザ・端末への対応
Firefox と Chrome 以外のブラウザやスマートフォンでは意図したように表示されていないようなので，原因を調査して改善したいです．
自由度を上げる (?)
1カテゴリカード7枚まではさすがに少ない気がしますし，同じカテゴリのカードを繋げたい場面も出てきそう．画面の見やすさや操作のしやすさを損なわずにカードを増やしたり同じカテゴリ同士のカードを繋げたりできるようにしたいです．
