最近(?)作ったwebアプリ
(一応)マイクロマウスをメインでやっているが、周りの友人や、所属しているサークルにはWeb屋が多く、Webのこと多少分かってないと話についていけない部分が多々あった。そのため、Web実際に触らなくてはという思いがあった。また個人的にもWebには技術的興味があったので、2つ程Webアプリを作ってみた。自分の周りはLalavel+Reactをメインで使う人が多かったが、学習にそれほど時間をかけられなかったため、とりあえずReactよりは学習コスト低めと言われるVueで作ってみた。(本当はReactで作ってみたかったが、ReactHooksリリース以降関数コンポーネント？で作るのが主流っぽく、公式のチュートリアルはクラスコンポーネントだったり、当時、関数コンポーネントで開発する体系的な教材が見当たらなかった。今だったらりあクト！とか見ながら作るかも)
QuizApp
https://quizapp-a6850.web.app/
作る題材を探していたら、友人が、「スプレッドシートで作問したものをそのままクイズにしてくれるサービスない？ GoogleFormで作ってもいいんだけど、手打ちがめんどいのよね」と言われた。折角の機会なので作ってみた。最初、spreadsheetをGASでjsonに変換して、Web API公開、Vue側でgetして表示という形をとろうかなと思ったが、spreadsheetの共有urlの一部を書き換え、クエリでcsvを指定すると、直接csvでダウンロードできることを知った。GASでAPI作るよりも使い勝手が良く、実装が楽なので、GASは使わず直接CSVをダウンロードしてVue側でjsonに変換、処理してみた。
一応クイズアプリなので、作問者用のページ(クイズ生成確認、集計)と回答者用のページを作る必要があった。ページのルーティングが必要なのでVue Routerを用いた。開発当初、Vuexも使うかと考えていたため、Router Vuex全部入りのNuxt.jsで開発した。(結局Vuexは使わなかったが)
また、回答を集計して表示という機能を追加するには、何かしらのDBが必要だったため、Cloud Firestoreを用いた。
20HoursTimer
２０時間タイマー。何かのスキルや技術は２０時間あればある程度は把握できる、みたいなことをTedかなにかの記事で読んで、それをサポートするためのアプリを作ってみたくなって作った。私自身、熱しやすく冷めやすいタイプで、色々手出しては途中で辞めがち。20時間くらいは一つのことに集中したいなという思いもあった。 一つのプロジェクト(20時間でやりたいこと)に対し、一つの20時間タイマ、todoリストを紐づける。ユーザ認証をつける。といったことを実現したかったため、バックエンド側の実装も必要だった。当初、Nuxt.js+Django(Django Rest Framework)+ MySQLで作ろうと考えていたが、CORSエラーや認証周りに手こずってしまった。また、学業やマイクロマウスで忙しくなってきてしまったので、バックエンド側はFirebaseに頼ることにした。しかし、中途半端に作ったバックエンドを時間があるときに完成させて移植したかったので、FirebaseSDKを使わず、REST APIを用いた。FireStore NoSQLであるため、入れ子でDBを作る必要があった(コレクションの生成)REST APIだとコレクションの生成の度、APIを叩かなくてはいけなく、ちょっと実装が大変だった。特別な理由がなければSDKを使った方が楽だなと思った。 現在バリデーションとエラーハンドリングが甘かったり、todoリストのソートがおかしかったりするので修正したいが、卒論とマイクロマウスで忙しく、一旦開発を止めている。
