Merge pull request #37 from Atotti/Ritsu

10~13

Ritsu/chapter10/README.md

@@ -0,0 +1,10 @@
+# サーバー・クライアントのコンポーネント
+## サーバー、クライアント環境
+- クライアント
+    アプリケーションコードのリクエストをサーバーに送信するユーザーのデバイス上のブラウザのこと。サーバーから受信した応答を、ユーザーが操作できるインターフェースに変換する。
+- サーバー
+    アプリケーションコードを保存し、クライアントからのリクエストを受信し、計算を実行し、適切な応答を返す。
+
+レンダリングとデータの取得をサーバーに移動すれば、クライアントに送信されるコードの量が減り、アプリケーションのパフォーマンスが向上するが、UIをインタラクティブにするには、クライアント上のDOMを変更する必要あり。
+
+## ネットワーク環境

Ritsu/chapter11/README.md

@@ -0,0 +1,6 @@
+## フォルダ構造
+- `/app`:アプリケーションのすべてのルート、コンポーネント、ロジックが含まれている。
+- `/app/lib`:再利用可能なユーティリティ関数やデータ取得関数など、アプリケーションで使用される関数が含まれる。
+- `/app/ui`:アプリケーションのすべてのUIコンポーネントが含まれる。
+- `/public`:画像など、アプリケーションのすべての性的アセットが含まれる。
+- `/scripts`:データベースにデータを設定するために仕様するシードスクリプトが含まれる。

Ritsu/chapter12/README.md

@@ -0,0 +1,11 @@
+# CSS スタイル
+## グローバルスタイル
+`/app/ui` フォルダの`global.css` ファイルにより、アプリケーション内のすべてのルートにCSSを追加することが可能。
+任意のコンポーネントにインポートできるが、通常は最上位コンポーネントに追加すると良い。
+
+## tailwind
+追加した分のクラスしか適用されないからCSSの容量が増える心配はしなくていい...ッテコト？
+
+## clsx
+クラス名を切り替えることができる？
+`status.tsx`コンポーネントと`pagination.tsx`コンポーネントは、`clsx`を使用して条件付きでクラス名を適用する。

Ritsu/chapter13/README.md

@@ -0,0 +1,49 @@
+# フォントと画像の最適化
+
+## なぜフォントを最適化するのか？
+カスタムフォントを使用すると、フォントファイルを新しくロードする必要がある場合にパフォーマンスに影響を与える可能性がある。
+
+
+### CLS(Cumulative Lyaout Shift)
+ページコンテンツにおける「視覚的な安定性を示す指標」。この評価は0~1の数値で表され、「0」は移動無し、「1」は移動量が最大であることを示す。
+
+
+フォントの場合、ブラウザが最初にフォールバックフォント、またはシステムフォントでテキストをレンダリングし、読み込まれた後にカスタムフォントに置き換えるときに、レイアウトの移動が起こる。このとき、テキストのサイズ、間隔、レイアウトが変更され、ズレが生じる恐れがある。
+
+Next.jsは、`next/font`モジュールを使用すると、アプリケーション内のフォント自動的に最適化する。ビルド時にフォントファイルをダウンロードし、ほかの静的アセットとともにホストすることで、ユーザーがアプリケーションにアクセスしたときに、パフォーマンスに影響を与えるようなフォントに対する追加のネットワークリクエストをなくすことができる。
+
+
+### フォントフォールバック
+ひとつのフォントに収録できるグリフの最大数は仕様上65536個であるが、対応するグリフが存在しない場合に他のフォントからグリフを持ってきて穴埋めする処理。
+
+
+## アプリのベースとなるフォントを追加する
+```
+import { Inter } from 'next/font/google';
+ 
+export const inter = Inter({ subsets: ['latin'] });
+```
+「Inter」の中にある「latin」を取り出してロードすることで容量が大きくなってしまうのを防いでいる...?
+
+また、フォントを適用させる際にTailwindの「antialiased」クラスをbody要素に追加しておくと、文字を滑らかにしてくれる！
+
+
+## なぜ画像を最適化するのか？
+通常のHTMLでは、画像を追加したのち、以下のことを手動で行わないといけない。
+- 画像が様々な画面サイズで表示されるかの確認。
+- デバイス毎の画像サイズの指定。
+- 画像読み込み時にレイアウトがズレるのを防ぐ。
+- 遅延読み込み。
+    - 表示されている画像だけを先に読み込むやつ。
+
+Next.jsではこれらの動作を`next/image`コンポーネントにより自動的に最適化してくれる。
+
+Next.jsは、画像などの静的アセットを最上位の`/public`フォルダに置くことで、アプリケーションで参照できる。
+
+### `<Image>`コンポーネントの設定
+HTMLの`<img>`みたいなかんじ。
+- src : 表示させたい画像のリンクを指定
+- width : 表示させる画像の幅
+- height : 表示させる画像の高さ
+- alt : 代替テキスト
+width と height は画像のアスペクトにする。