Merge pull request #22 from Atotti/takuo2

Takuo2
Atotti · Dec 6, 2023 · 9d0d06c · 9d0d06c
2 parents 4f18c53 + 9162a47
commit 9d0d06c
Show file tree

Hide file tree

Showing 11 changed files with 254 additions and 1 deletion.
diff --git a/takuo/chapter01/README.md b/takuo/chapter01/README.md
@@ -0,0 +1,50 @@
+# Chapter 01
+## React と Next.js について
+### Webアプリケーションの構成要素
+ReactとNext.jsはWebアプリケーションに関する事柄なので，まずはWebアプリケーションを作る上で考慮する要素を知る．
+- **UI**
+  - ユーザーがアプリをどのように利用・操作するか．
+- Routing
+  - ユーザーがアプリ内でどのような移動をするか
+- Data Fetching
+  - データがどこにあり，どのように取得するか
+- Rendering
+  - いつ，どこで，静的or動的コンテンツをレンダリングするか
+- Intergrations
+  - 支払い，認証等，どのような外部サービスを使い，接続するか
+- Infrastructures
+  - アプリケーションをデプロイ，保存，実行する場所
+- Performance
+- Scalability
+- Developer Experience
+
+各要素について，自分で実装するか，既存のパッケージ・ライブラリ・フレームワーク等を使用するか，検討する．
+
+### What: React?
+インタラクティブなUIを構築するための，JavaScript**ライブラリ**．
+- **UI**
+  - ユーザーがアプリをどのように利用・操作するか．
+- **ライブラリ**
+  - UIの構築に役立つ関数(API)を提供する．
+
+### What: Next.js?
+Webアプリケーションを作成するための構成要素を提供するReact**フレームワーク**
+- Webアプリに必要な要素をパッケージとして構成してくれるもの．
+  - アプリ内のディレクトリ構造や，必要なファイル・記述等を型として用意してくれる．
+#### ライブラリとフレームワーク
+何がどう違うん？(なんとなく違うのは分かるが…)
+- ライブラリ
+  - 機能や処理の実装済パッケージ
+  - 関数群を提供してくれている
+  - Reactは，UIをWebアプリに実装するための関数群パッケージ
+    - 自分で実装しなくても，パッケージ内の関数を使えば簡単に高クオリティの機能がオールウェイズ実現できる．
+- フレームワーク
+  - Webアプリを構築するための構成要素(機能)をまとめて提供してくれる
+  - Routingとかの決まりがNext.js側で定まっており，これに従えば(パッケージを使えば)これらを1から構築しなくても，簡単に実装できる．
+
+React(ライブラリ)はUIの実装に特化した関数群，Next.jsはもっと高次な，Webアプリケーションの構成要素全般をパッケージとして提供するもの．
+![fig1]
+注目している階層が違くて，Next.jsはWebアプリの構成要素全般をパッケージ化していて，Reactは構成要素のうちUIに関するパッケージ．
+
+
+[fig1]: ./React_Next_focusRange.png "fig1"
diff --git a/takuo/chapter01/React_Next_focusRange.png b/takuo/chapter01/React_Next_focusRange.png
diff --git a/takuo/chapter01/test.txt b/takuo/chapter01/test.txt
diff --git a/takuo/chapter02/HTML2DOM.png b/takuo/chapter02/HTML2DOM.png
diff --git a/takuo/chapter02/README.md b/takuo/chapter02/README.md
@@ -0,0 +1,47 @@
+# Chapter 02
+## ユーザー インターフェイス (UI) のレンダリング
+HTMLからUIが出来上がるまでの流れ．
+1. ユーザがWebページにアクセスする
+2. サーバがHTML(とその関連ファイル)を返す
+3. ブラウザがHTMLを解釈，**DOM(Dovument Object Model)** を生成する．
+4. DOMをもとに，ブラウザがUIを構築，表示する
+5. ユーザが表示を観測
+
+## What: DOM?
+[Document Object Model][whats_dom]．HTML要素のオブジェクト表現，木likeな構造を持つ．
+コード(HTML and JS etc)とUI間のブリッジとして機能する．
+### DOMは操作できる
+DOMメソッドやJavaScriptを使って，ユーザのアクションを取得し，DOMを変更できる．
+- 要素の選択，追加，削除，更新，など
+- スタイルやコンテンツを変更できる．
+#### Chromeの開発者ツールでDOMが見れる
+[ChromeのF12で出てくるやつ][f12]は，DOM．正確にはDOMをHTML形式で書き直したもの．
+Webページ上の要素をクリックしたりすると，Elementの内容が書き変わる
+- アクションによってDOMが変更されたため．
+##### DOMの解釈(個人の感想です)
+UI表示の最終段階，みたいな感じ，多分．コンパイル型言語における実行ファイルみたいな．
+
+- (React, Next.jsにおいては)サーバーはユーザにHTML(とその関連ファイル)を送るだけ．
+  - 基本的にいつも同じ物を送る．
+  - ユーザのアクションに応じて表示を変更する，とかは全部スクリプトで記述されていて，UIの変更はブラウザがやる．
+  - 最終的に表示される形態はクライアント側で出来上がる．
+- ブラウザ(ユーザ)は送られてきたHTMLを基にDOMを構成する．
+  - 素のHTMLならそれに書いてある要素がそのままDOMになる
+  - スクリプトへの参照があったらそこで木の構築を中断，[スクリプトの中身を読み，それに応じたDOMを中断した葉を根として構築する][build_domtree]．
+
+    ![fig2]
+- ユーザのアクション等に応じてDOMを変更する
+  - 開発者ツールを開いた状態で，ページの要素をクリックしたりするとその内容が変わるのはコレ．
+  - 最新の状態のDOMをHTML形式に書き直した物がF12のElement．
+
+基本的な流れはこんな感じ？
+1. サーバから初期状態のHTMLとその関連ファイルが送られてくる．
+2. クライアントはそれを解析してDOMを構築する．
+3. ユーザのアクション等に応じてDOMを変更する．
+4. DOMに基づいて，UIを表示
+5. 3,4を繰り返す
+
+[fig2]: ./HTML2DOM.png
+[whats_dom]: https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction
+[f12]: https://developer.chrome.com/docs/devtools/dom?hl=ja
+[build_domtree]: https://developer.chrome.com/docs/devtools/dom?hl=ja#appendix
diff --git a/takuo/chapter03/README.md b/takuo/chapter03/README.md
@@ -0,0 +1,53 @@
+# Chapter 03
+## JavascriptでUIを更新する
+HTML(クライアントがサーバから受け取った初期状態)から，スクリプトでDOMを変更する．
+
+- 初期状態のHTML
+  ```html
+  <html>
+  <body>
+      <div id="app"></div>
+      <script type="text/javascript">
+          // id="app"のdiv要素を選択
+          const app = document.getElementById("app");
+
+          // h1の要素を作成
+          const header = document.createElement("h1");
+
+          // h1につけるtext nodeを定義
+          const text = "Develop. Preview. Ship. 🚀";
+          const headerContent = document.createTextNode(text);
+
+          // headerにtext nodeをappend
+          header.appendChild(headerContent);
+          
+          // app(初期HTMLのdivノード)にheader nodeをappend
+          app.appendChild(header);
+      </script>
+  </body>
+  </html>
+  ```
+
+- 変更されたDOM
+  ![fig_dom]
+
+DOMを見ると，初期状態には何も要素が無かった`<div>`セクションに`<h1>`とその文章が追加されている．
+DOMがスクリプトによって変更されたことが確認出来る．
+
+---
+今回は生のJavaScriptでDOMの更新をしたが，これは結構冗長(実際，h1タグの一行を記述するのにかなりの**手続きを踏んでいる**)．
+
+## React: 宣言型UIライブラリ
+先の例ではh1タグを追加するための**手続きを記述した**．つまり，どのように動作するかを指示した．いくつかの手続きを記述した結果は`<h1>`タグの一行のみで，スマートでない．
+
+本質的にやりたいのは`<div>`に`<h1>Develop. Preview. Ship. 🚀</h1>`を追加すること．
+プログラムによって
+「〇と△をしてください！(その結果欲しいものが得られる)」
+を記述するのではなく，
+「これをここに追加したいです！(細かい処理は任せますよ)」
+と記述したほうが簡潔で便利ですよね？
+これを実現したのが**React**．JavaScriptは前者．
+
+
+[fig_html]: ./html.png
+[fig_dom]: ./dom.png
diff --git a/takuo/chapter03/dom.png b/takuo/chapter03/dom.png
diff --git a/takuo/chapter03/html.png b/takuo/chapter03/html.png
diff --git a/takuo/chapter03/index.html b/takuo/chapter03/index.html
@@ -0,0 +1,24 @@
+<html>
+
+<body>
+    <div id="app"></div>
+    <script type="text/javascript">
+        // id="app"のdiv要素を選択
+        const app = document.getElementById("app");
+
+        // h1の要素を作成
+        const header = document.createElement("h1");
+
+        // h1につけるtext nodeを定義
+        const text = "Develop. Preview. Ship. 🚀";
+        const headerContent = document.createTextNode(text);
+
+        // headerにtext nodeをappend
+        header.appendChild(headerContent);
+
+        // app(初期HTMLのdivノード)にheader nodeをappend
+        app.appendChild(header);
+    </script>
+</body>
+
+</html>
diff --git a/takuo/chapter04/README.md b/takuo/chapter04/README.md
@@ -0,0 +1,64 @@
+# Chapter 04
+## React を始める
+Reactを書くぞー！
+Reactを使うには，`unpkg.com`というサイトからスクリプトをロードする必要がある．
+- pythonでいうimportみたいなもん
+```html
+<html>
+<body>
+    <div id="app"></div>
+    <script src="https://unpkg.com/react@17/umd/react.development.js">
+        // react.developmentはReactライブラリのコア
+    </script>
+    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js">
+        // act-domはDOMでReactを使用できるようにするメソッド群
+    </script>
+    <script type="text/javascript">
+    const app = document.getElementById('app');
+    </script>
+</body>
+</html>
+```
+
+Reactのコード(**宣言型**)とJavaScript(**命令型**)を比較してみる．
+- React
+```html
+<script type="text/jsx">
+  const app = document.getElementById("app")
+  ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app)
+</script>
+```
+- JS
+```html
+<script type="text/javascript">
+  const app = document.getElementById('app');
+  const header = document.createElement('h1');
+  const text = 'Develop. Preview. Ship. 🚀';
+  const headerContent = document.createTextNode(text);
+  header.appendChild(headerContent);
+  app.appendChild(header);
+</script>
+```
+
+少ない宣言で，やりたいことがわかりやすい！
+
+### What: JSX?
+JavaScriptの構文拡張機能．[3つのルール][jsx_3rules]に従えば，HTMLとJavaScript以外に学ぶ必要はない．
+ただ，ブラウザがJSXを理解できないため，`Babel`等のコンパイラを必要とする．
+```html
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+<script type="text/jsx">...</script>
+```
+
+---
+Reactで重要なJavaScript関数，見ておきたい．
+- [Functions](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Functions) and [Arrow Functions](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
+- [Objects](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)
+- [Arrays and array methods](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)
+- [Destructuring](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
+- [Template literals](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Template_literals)
+- [Ternary Operators](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)
+- [ES Modules and Import / Export Syntax](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules)
+
+
+[jsx_3rules]: https://react.dev/learn/writing-markup-with-jsx#the-rules-of-jsx
diff --git a/takuo/chapter04/index.html b/takuo/chapter04/index.html
@@ -0,0 +1,16 @@
+<html>
+
+<body>
+    <div id="app"></div>
+    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
+    <!-- Babel Script -->
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <!-- なんか良いフォーマッタないですか？ -->
+    <script type="text/jsx">
+        const app = document.getElementById('app'); ReactDOM.render(
+        <h1>Develop. Preview. Ship. 🚀</h1>, app);
+    </script>
+</body>
+
+</html>