背景

Next.jsで開発を進めていたが、コンポーネントの部分でつまづきが目立っているため、React.jsの勉強をする
Next.jsがReactのチュートリアルを公開していたのでやってみる

 1. ReactとNextについて

 結論
Next.jsは full-stackなwebアプリケーションを高速に開発するための部品を提供している


 問題意識
Webアプリケーションの構成要素はとても多く、考えることがいっぱい
UI, Routing, Data Fetching, Rendering etc.
それぞれでどのように実現するかを考えないといけない



 Reactについて
UIを構築するのに便利なライブラリで柔軟性が高い
ライブラリはどのように使うのかはユーザーに任せるという意味
柔軟性が高い分、開発のためにユーザー側でやらないといけないことが多い



 Nextについて
Webアプリケーション開発に必要な要素を提供するフレームワーク
フレームワークは、アプリケーション開発に必要な一連の機能を提供するという意味
ReactでUIを構築し、Nextの機能を使ってアプリケーションを一通り開発することができる

fuutot

 2. UIのレンダリング
 背景Reactがどのように動くのかを理解するには、ブラウザーがコードをどのように解釈してUIを作成しているかの理解が必要

 ブラウザーがUIを作成する流れユーザーがウェブページにアクセス
サーバーがHTMLファイルをブラウザに返す
ブラウザがHTMLファイルを元にDOMを構築する
DOMを元に画面を描画

 DOMとはDocument Object Modelの略

HTML要素のオブジェクト表現を表す

ツリー構造をしている

DOMメソッドとJavaScriptを使用してDOMを操作することができる

fuutot

 3. JavaScriptを使ったUI更新
 やることJavaScriptとDOMメソッドをつかってh1タグを追加する

 Howブラウザが自動的に提供してくれるdocumentオブジェクトのDOMメソッドを使う

documentオブジェクトはWebページ全体の内容を表す特別なオブジェクト

 JavaSciptを使ったUI更新の問題点更新内容だけでなく、更新をどのように行うかを記述しないといけない

単純な例ならこれでいいが、実務レベルの複雑な例だと大変

 Reactの良さ更新内容を伝えるだけでいい

更新をどのように行うかはReactの裏側がやってくれる

fuutot

 4. Getting Started with React
 やることReactでDOM操作を行う

 Howreact-domを使う

react-domはReactでDOMメソッドを提供しているもの

JavaScriptとHTMLを一緒に書くためにJSX形式を使う

fuutot

 5. コンポーネントを使ったUIの構築
 目的コンポーネントとは何かを理解する

 コンポーネントとはUIを構築する部品

一つ一つの部品で完結するように作ることで、再利用性が上がる

 コンポーネントの作り方関数を定義する
先頭は大文字にする

<, >で囲う

fuutot

 6. Propsを使ってデータを表示
 目標表示する情報をコンポーネントのソースに手を入れることなく変更する

 Propsとは関数の引数に相当するもの

コンポーネントに何かしらの情報を渡すのに使う

 JSXで変数を使うJSXで変数を使うには、{, }で囲う

 配列のループ処理Reactでは、配列をループ処理するためにはkeypropを与えないといけない

これは、ReactがDOMのどの要素を更新するかを特定するために配列のアイテムを一意に特定する必要があるため
function Content() {
    const names = ["Alice", "Bob", "Charlie"];
    return (
        <div>
            {names.map((name, index) => (
                <p key={index}>Hello, {name ? name : "Guest"}!</p>
            ))}
        </div>
    );
}

fuutot

object destructuring: 分割代入
Propsはオブジェクトなので、分割代入が使える

javasctiptの例

const obj = { a, b, c };
const { a, b, c } = obj;
// 次の文と同等
// const a = obj.a, b = obj.b, c = obj.c;

reactの例

function Header({ title }) {
    return <h1>{title}</h1>;
}

fuutot

ternary operators: 三項演算子
三項演算子を使って与えられたものによって表示を変えることができる

javascriptの例

const age = 26;
const beverage = age >= 21 ? "ビール" : "ジュース";
console.log(beverage); // "ビール"

reactの例

 function Content({ name }) {
    return <p>Hello, {name ? name : "Guest"}!</p>;
}

fuutot

array.map()
配列の各要素に対して関数を適用することができる

const numbers = [1, 2, 3, 4];
const filteredNumbers = numbers.map((num, index) => {
  if (index < 3) {
    return num;
  }
});

// index は 0 から始まるので、 filterNumbers は 1,2,3 および undefined になります。
// filteredNumbers は [1, 2, 3, undefined]
// numbers は [1, 2, 3, 4] のまま