はじめに
現在「JISOU」というプログラミングのアウトプットコミュニティで活動しています。その中で学習アプリ作成と言う課題があったためつくってみました。
作成したアプリの紹介
課題の内容として、学習内容と学習記録時間を入力して登録ボタンをクリックすると登録された学習記録が表示されるアプリを作成する、といったものになっております。
以下に画面の写真をのせます。
-
初期画面
-
学習記録を入力後
作成途中で工夫した点
CSSによるスタイリング
課題にはcssでのスタイリングはいらないとあったのですが、肩慣らしでtailwindcssを用いてスタイリングを行いました。
その際、tailwindcssの学習効果を高めるため claude codeのカスタム出力スタイルを利用してAIと協調しながらスタイリングを学びました。詳しい取組みは下の記事を参照してください。
学習記録を更新する際に使用したスプレッド構文
学習記録を配列で管理し、新しい記録を追加する際にReactの状態更新のベストプラクティスを意識して実装しました。
具体的には、setRecordsの中で以下のようにスプレッド構文を使用しています：
setRecords(prev => [...prev, newRecord]);
この実装の工夫点は以下の通りです：
- イミュータブルな更新: 既存の配列を直接変更するのではなく、新しい配列を作成することでReactの再レンダリングが正しく動作する
-
関数型更新パターン:
prev => [...prev, newRecord]という書き方により、前の状態に基づいて新しい状態を計算している -
スプレッド構文の活用:
...prevで既存のレコードをすべて展開し、その後にnewRecordを追加することで、簡潔で読みやすいコードになっている
このように実装することで、Reactの状態管理の原則に従いつつ、配列への要素追加を効率的に行うことができました。
作ったソースコード↓
https://gist.github.com/mkiin/44b670ad1abf400438999e7ed8c1c548
おわりに
「JISOU」でのアウトプットの最初の取り組みとして、良いスタートダッシュを切れていると感じます。とにかく手を動かしながら今後も活動していきます!!
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼