ドラッグアンドドロップでSVGからbackground-imageプロパティを生成します。
- Gitのadd / commit / pushを知る。
- create-react-appを使用したReactアプリが制作できる。
- tailwindcssを使用したスタイルをあてることができる。
- パフォーマンスを下げないようにHooksを活用することができる。
- TypeScriptに触れる。
- Jestに触れる。
達成項目
パフォーマンスを下げないようにHooksを活用することができる。TypeScriptに触れる。Jestに触れる。
Reactのパフォーマンスについてはまだわからないことが多い。不要なレンダリングを増やさないことやレンダリングの度に関数を再定義させないことを意識して、useCallbackを使ってみたがまだ雰囲気で使用している状態なので、Reactのライフサイクルを再確認しなければいけないと感じた。
TypeScriptを導入した。まだ、TypeScriptの効果を実感していないのでこれからも使用していきたい。型の当て方などベストプラクティスを知らず、なんとなくで当てているので先人コードを参考にしながらブラッシュアップをしていきたい。
Jestで簡単なテストを書いてみた。Kent C. Doddsのソフトウェアが正しく動くことを保証できるテストを書くという考え方が素晴らしいと感じて、その通りにテストを書こうと思ったが、テストの書き方がわからなかった。初歩的な関数のテストだけ記述することができた。まずはIntegrationをかけるようになりたい。
達成項目
Gitのadd / commit / pushを知る。create-react-appを使用したReactアプリが制作できる。tailwindcssを使用したスタイルをあてることができる。
Gitの初歩的な使用方法を理解することができた。CLIだけでは理解しづらかったが、SourcetreeのようなGUIアプリを介することで現在のファイルの状態やヒストリーが直感的にわかって理解しやすかった。参考
create-react-appを使用して、Reactアプリを作成することができた。簡単に動くのでさくっとアプリを作る分には便利でいいが、エラーが起きた時の対処が検索頼りになってしまうので、裏で動いているBabelやWebpackなどreact-scriptsでラップされている技術について知るべきだと感じた。JavaScriptで書くReactに慣れておきたかったため、Typescriptテンプレートは利用せずに作成した。
tailwindcssを使用してスタイルをあてることができた。シンプルなスタイルだとあまり気にならないが、デザイン通りに作ろうと思うとclassNameが長すぎてコードの見通しが悪くなってしまう。かといってユーザー定義クラスを多用するとtailwindcssのhtmlを見るだけでスタイルがわかるというメリットが失われてしまうように感じた。Styled ComponentsやCSS modulesもあまり書き込んだ経験が少ないので、各々描きくらべてベストな手法を見つけていきたい。
未達成項目
- パフォーマンスを下げないようにHooksを活用することができる。
- TypeScriptに触れる。
- Jestに触れる。