はじめに
React 公式ドキュメント にある、「チュートリアル：三目並べ」や REACT を学ぶ 以下の項目「UI の記述」などのコードを、TypeScript で実行できる環境を作ってみました。
せっかく学習するなら TypeScript で学習したいな〜と思った自分自身のニーズを実現したものになります。
もし、同じニーズの方がいましたら、ぜひ！使ってみてください☆
使い方
1. 下記ページからコードを Use this template > Create a new repository で自分の Repository に保存する or Code > Download ZIP で PC にダウンロードする
2. VSCode などで開く
3. package.json と同じ階層で npm i を実行する
4. npm run dev を実行して、Top ページを開く
5. Top ページから学習したいページを開く
6. src > component から学習したい項目のファイルを開く
7. 6 で開いたコードを編集しながら、5 で開いたページを確認する
コードの構成
src > component: 各項目に対応するファイルが入っています
src > css: 各ファイルに対応した css ファイルが入っています
おまけ
Prettier を入れているので、npm run lint を実行すると、コードがフォーマットされます(設定はデフォルトのままです)。
ESLint は、Vite を入れたときの状態から変更していません。
作ってみた感想
考えてることがうまくコードに落とせなくて、色々と試したので勉強になりました。
特に、Topページに戻るリンクを、各学習用ページにはリンクのコードを入れたくないが、Topページ以外の全てのページで表示したい というのを、どうコードで表現すればいいのか試行錯誤しました。chatGPT に早々に聞いてもよかったのだけど、自力で解決したかったので、今ある知識を総動員して書いてみました。
ただ、Topページ以外でリロードしちゃうと戻るリンクやタイトルも消えちゃうので作りが甘いな〜って感じです・・・。
とはいえ、１年前の自分だったらきっと出来なかったので、ちょっとずつできることが増えていることが実感できました☆
おわりに
学習環境を作って満足してる感が否めない😅
三目並べはコードを育てるタイプだけど、それ以外はコードを育てるタイプじゃなさそうだからあんまり役に立たないかも〜。コードをコピペしてみてエラーになったとこを直すくらいでしか使えないかも？？まぁいっか😋
まだ「UI の記述」の学習途中だけど、今のところほとんど Web ページだけで事足りてる〜。サジェストがでなかったり、所々書いても動作しないよってところがあったり、不便に感じるところはあるから、そのときだけ作った環境にコピペして動作確認してます☆