新人､忘年会でなにかできる？
やりたくないです､楽したいです
私､某社に入社したぴかぴかの新入社員です｡最近やっと配属されたところです｡
学生時代はネットワークの研究を主にしていたので､C､C++を主に使っており､JavaやPythonは授業でかじった程度､JavascriptはJavaと違う言語って認識でした｡
あまり体育会系ではないので､趣味の延長でできるようなことなら楽できるのでは､と考えて提案｡
スマホでできるクイズ大会みたいなん作らへん？
え~､一発芸よりしんどくないけど大変そう~
微妙な反応だったので､とりあえず案のひとつにとどめておきました｡
で､内容を確定するまでに実際に1ヶ月半後の忘年会に間に合うかもわからなかったのでとりあえず最低限の機能の実装を確認するためにJSに入門しました｡
ちなみにアイデアの着想はZOZOタウンの某記事
みたいなアプリケーションでオールスター感謝祭的なものをイメージ｡
アプリ以外は当日の用意だけで済みそうという浅はかな考えで提案しました｡
さて､なにをつかってどう作ろう
- ZOZOのアプリを基本的に習ってつくろう
- Firebase(RDBはよく知らないけどNoSQLはKey-Valueだから深く考えなくていいのでは？)
- Vue.JS（調べたら､Reactは玄人仕様､Vueはビギナー向けとのこと） とりあえずこの2つの勉強（+そもそもJavaScriptの勉強）をはじめました｡
つまづいたこと
Typescriptが初心者にはハード
静的型付け言語で育った人間なのでJS互換でMS製の型付け言語Typescriptを使いたい！とモチベからVue+TSという構成で初め検討してたが､
- Vue.tsはVue.jsと書き方が大きく異る
- だいたいネットで転がっているサンプルはJS
- ライブラリもTSで書いてなかったり？
- JSも知らないのにTSは無茶おじさん
という経緯で諦めてJSに改宗｡
そもそも環境構築がちょーーめんどくさい
VScodeで書いていたが､なによりESlintとPrettierがお互いに邪魔し合うのでCtrl+SのたびにESlintが " を ' に置き換えて､Prettierが ' を " に置き換えてコンパイルエラーを吐き出すのようなことを大量にやってくれます｡
Firebaseのデータ更新を画面に表示させることが確認できた時点で計画を実行に移すことになりました｡
JSの概念が謎
なんですか？ES6だったりcommonJSだったりexport defaultだったり
Promiseを返す関数であることを教えてくれず謎のエラーに1日消えたりしました｡
→振り返ってみるとPromise､とても便利ですね｡thenメソッドチェーンとかすごい便利
VueRouter（ルーティング）とかVuex（クライアントサイドのデータ+共通関数ストア的な）とかよくわからん
最終的に意図していることはわかりましたけど､Vuexの必要性がいまいちわからなかった｡
簡易VuexとしてMixinがあるらしいが､Mixinを使ってimportするとxxx.hogehoge()のような形でxxxがサフィックスとして足されるが､HTML部分に@click="xxx.hogehoge()"などと書くと参照されない
→うまいググり方がわからず断念
よかったこと
Vuetifyが便利
デザインセンス０でもすぐにそれっぽい画面を構築できる｡これはひじょーにいいものでした｡生でHTMLを書くよりも遥かに簡単です｡
コンポーネント化できるので再利用性が高い
HTMLがスパゲティ化せざるを得ない言語なので､シンプルな記述で複雑な機能を持った部品を記述できるのがすごい楽でわかりやすい｡
Firebaseが勝手にデータ同期してくれる
今回はFirebase Real time database を採用しました｡（課金タイミングがデータの読み書きのみで接続だけでは発生しないとのこと）
実際にはFirestoreでいいと思います｡DB内データの集約などができて便利ですし｡
しかし､Firebaseは一行書くだけで､この程度のアプリだとなにも気にせず､常に最新のデータを取得できるのでありがたい｡
Vueがデータの反映を勝手にしてくれる
面倒なデータの反映を全く気にしなくていい｡正直これがVueの一番いいところ
できたもの
- FirebaseでDBを操作すると
- クイズ
- 待機
- 任意メッセージ に切り替え可能にして､任意の問題､選択肢､メッセージなどを表示可能にした｡
- コメント入力機能
- ユーザが任意のコメントをニコニコ動画風にコメントを打てる｡その内容が他のユーザのスマホに流れる
- ライブラリを使いたかったが､うまくできなかったのでスクラッチ実装
- 正直いらなかった｡
- ユーザ認証
- 認証レベルは雑でよかったので､静的HTMLでかんたんなエントリー画面を作成
- 名前とすきなものの組み合わせで重複を回避
- 点数計算
- 画面右上に正解数を表示させていた｡
- Firestoreなら計算機能を使えたがRealTimeDBだったので､管理側でJSで直接すべてのユーザの正否を算出
結果
- 思ったより盛り上がったけど､もう少し企画を詰めるべきだった
- 同接100超えるかな？と思ったがギリ超えなかったので無料枠で済んだ
- VueはJS知らないHTMLよく知らないレベルでもなんとかなったので初学者にはひじょーーーにいいフレームワークだと思います｡
- ただ､JS界隈は派生が多すぎて､記事の量が偏っているのでGooglabilityが一番大事
- ネットワークアプリ作るよりも目に見えるのでひじょーーーに楽しい
おわり