独学でプログラミングの勉強をしていて、いつかはwebサービスを作ろうと
活動してきましたが、ついに完成したので作った後の振り返りや気づき、反省などを
書いてみたいと思います。
どんなサービスを作った？
今回作ったサービスは"Engcard(エンカード)"というサービスです。
どんなサービスなのかというと、"web上でオリジナルの英単カードを作って、英単語暗記のサポートをする"というサービスになります。
作ろうと思った動機
自分が英語の勉強(TOEICがメイン)をしているのですが、
単語を覚える際に、ノートや紙で単語集みたいなのを作っていましたが
後から情報を書き足したり、編集するのにあたりノートや紙では不都合に感じる部分がありました。
アプリなどで単語帳を自作できるもの現存そしてますが、私の場合単語とその意味だけではなく、
品詞(動詞や名詞)などをプルダウンで選択して登録できるようにしたい、例文も登録したいなどという
要望を持っていました。しかし、そんなことできるサービスが自分で探した限りでは見つからす、
それなら自分で作ろうと思い立ちました。
機能
主な機能は下記の通りです。
- 会員登録
- 単語帳作成&単語カード作成
- 暗記やクイズなどの学習モード
- 学習状況ダッシュボード
【画面】
当初は、単語のデータだけを登録して閲覧するだけくらいの
サービスで行くつもりでしたが、色々欲張って他の機能もつけてみました。
技術選定
バックエンド
Laravel breeze
フロントエンド
React(TypeScript)
ライブラリ
- Inertia.js
- hashids/hashids
- react-chartjs-2
Laravel Breezeで、ビューをReactにするスターターキットで作っています。
また、TypeScripを採用しています。
会員登録、ログイン、パスワードリセットなどの機能とReactのビューも
セットアップ済みなので、Auth関連は画面のデザイン変更くらいしかやっていません。
あと新規登録時に、メール認証がしたったので、その機能の有効化をしたくらいです。
Inertiaというライブラリが、Laravelでblade.phpでビューを書くのと
同じ感覚でReactにControllerから値を渡せるようにしてくれていて、
また、ルーティングも同様にControllerで表示するReactのビューを指定できます。
React側でのバックエンドとのデータ通信処理やルーティングの処理が不要となり開発が楽になります。
詳細ページや編集ページにアクセスする際、idをそのままURLに含めるのが
セキュリティ的にイマイチかなと思い、hashidsで暗号化するようにしました。
グラフをダッシュボードで表示するのにはreact-chartjs-2を使っています。
振り返り
休日に独学で勉強しながら作っていたので、なんだかんだで1年半くらいにかかってしまいました。
また、当初は、laravelのスターターキットやInertiaを知らず、自力でLaravelにReactを導入したりしていて一度0から作り直した経緯もあり、事前の情報収集はしっかりするべきだったと反省しています。
また、Inertia自体もあんまり普及しているような技術ではないと後々気づいてしまったため、現在は
NEXT.jsでのリプレイスを検討中です。