前回の話
よし構築と動作確認ができた！次回はコードをいじっていくぞ！というところでした。
チュートリアルに取り掛かる
私はNext.jsのことを何も知らない・・・
何も知らなければ何も書けない、そもそもUIのコンポーネントを使ってうんぬんかんぬん、というレベルではない・・・！
英語ではありますが幸いにもチュートリアルが用意されているので、それに取り組んでいます。
更新に日数がかかっているのは、最初記事を書くつもりがなかったのと、5章でつまずいているからです。
チュートリアルはこちら↓
chapter1
構築方法が書かれています。今回は割愛します。
chapter2
スタイルの設定方法
Global styles
/app/uiフォルダにあるglobal.cssが全体のcssを取り仕切るお偉いさん。
トップレベルのコンポーネントで読み込むのが良い習慣
（予測：配下のコンポーネントでも読み込みされるため？）
Tailwind
開発を高速化するためあらかじめ作成されている、CSSのフレームワーク。
あらかじめ記述が決められているので、同じフレームワークを導入していればどこでもその記述を使えることが利点だと感じました。
サイトに飛ぶとすぐプレビューが始まる。すごくわかりやすい。
CSS Modules
TailWindを使用していても、モジュールを作成することで自由にCSSを設定できる。
/app/uiにhome.module.cssを作成、CSSスタイルを定義。今回の例では.shape
/app/page.tsxの上部にimport styles from '@/app/ui/home.module.css';と記述。
すると、stylesとして/app/page.tsxにインポートされる。
使用する際は、<div className={styles.shape} />のように、クラス名を記述する
Using the clsx library to toggle class names
条件に基づいてクラス名を変更することができる。
チュートリアルの例だと、pendingの場合は灰色、paidの場合は緑色に設定する内容でした。
イメージしやすいものだと、Excelの条件付き書式みたいな感じですかね？
Chapter3
フォントと画像の最適化に関するチャプター
Why optimize fonts?
なぜ最適化するのか？フォントの読み込みで画面の乱れが発生するのであまりよろしくない。
翻訳が「Googleがウェブサイトのパフォーマンスとユーザー体験を評価するために使用する指標です。」なので、SEO的にもよくないんでしょうね。
Adding a primary font
カスタムGoogleフォントを適用する。
/app/uiにfonts.tsを作成。後は書かれている通りに実行すればフォントの変更が完了する。
Interとしてnext/font/googleをインポート
インポートしたinter（サブセット：latin）をinterとして定義する。これでinterのlatinを使うことができるようになる。（ややこし～～）
そのあと、/app/layout.tsxにinterをインポートして、body要素にinterクラスを使用するよう定義する。
フォントが滑らかになる機能も適用しているらしい・・・！すごい進化
Practice: Adding a secondary font
セカンダリフォントを追加してみましょうという内容。
/app/ui/fonts.tsにてlusitanaをインポート、定義
page.tsxにてlusitanaをインポート、
要素にフォントスタイルを適用。
Why optimize images?
さまざまな画面サイズ・デバイスへの対応
読み込み時のレイアウトのズレ
閲覧者の画面上で見えていない画像を遅延ロードする（ロード時間の短縮につながる）
The component
読み込み時のレイアウトのズレを防ぐ
画面サイズに応じた画像サイズの自動調整（小さい画面に大きな画像を読み込ませないなど）
デフォルトで遅延ロードを有効化する
ブラウザに応じて最新のフォーマットで画像を読み込ませる（WebPやAVIFなど）
Adding the desktop hero image
Imageコンポーネントの実践。
レイアウトのズレを防ぐために、width と height を設定するようにしましょう。
アスペクト比(縦横の比率)は画像と同じにしよう
ここで追加した画像は、デスクトップ：表示 モバイル：非表示 になっている。
Practice: Adding the mobile hero image
前項ではモバイル画像を表示しないようにしたので、今度は逆をやってみましょう。
デスクトップ：非表示 モバイル：表示 で追加する。
チュートリアルに取り組んでみて
英語が一番の壁ですね・・・・翻訳があるってとってもありがたいし、壁も一段階下がってくれます。
またとてもわかりやすく書かれているので、ここまでは大体見たままやっていけばすんなり進むし理解できました。
理解した先のなぜそれをする必要があるかについてはまだ勉強は必要になりますが、ひとまずものを作れるようになることが目標なので、それは追々、ですね。
エルシアでした。ではまた。