Django+Reactで学ぶプログラミング基礎(19): Reactチュートリアル(準備とReact概要)

[前回] Django+Reactで学ぶプログラミング基礎(18): Django高度なチュートリアル(再利用可能アプリの書き方)

はじめに

前回まで、Djangoチュートリアルを使用し、基礎知識を勉強しました。
今回から、Reactチュートリアルを使用し、React基本を勉強します。

今回の内容

• チュートリアルの準備
• Reactの概要

チュートリアルの準備

• チュートリアルの目的

  • Reactアプリの基本構文と技法を学ぶ
  • マスターすることで、Reactへの深い理解が得られる

• チュートリアルのセクション

  • チュートリアルの準備
    • チュートリアルの開始地点
  • チュートリアルの概要
    • コンポーネント/props/state、といった基礎概念
  • ゲームを完成させる
    • Reactの開発技法
  • タイムトラベル機能
    • React独自の利点について深い洞察が得られる

• チュートリアルで作るもの

  • インタラクティブな三目並べゲーム(tic-tac-toe)
  • 最終的な結果を確認できる
  • 三目並べゲームで遊んでみる
    

• 前提知識

  • HTMLとJavaScript(ES6)に多少慣れている
  • 関数/オブジェクト/配列/クラス、といったプログラミング概念
    • アロー関数
      • 関数定義を=>記号を用いて、より短く記述できる記法
    • クラス
      • オブジェクト指向プログラミングおいて、オブジェクトを生成するための設計図あるいはひな形で、抽象データ型の一つ
    • letステートメント
      • ブロックスコープのローカル変数を宣言
      • 任意で値を代入し初期化
    • constステートメント
      • 定数を宣言
      • 再代入による変更ができず、再宣言もできない
  • Babel
    • Babelとは、OSSのJavaScriptトランスコンパイラ
      • 主にECMAScript 2015+コードを、下位互換バージョンのJavaScriptに変換し
        • 古いJavaScriptエンジンで実行可能にする
    • Babel REPL
      • ES6のコードがどのようにコンパイルされるか確認できる

• ローカルのVS Code開発環境

  • 構築手順をご参照
  • VS Codeのファイルメニューからフォルダーを開く
    
  • 上記構築手順で作成したReactアプリのディレクトリを選択
    
  • npm startコマンドで、Webサーバーを起動
    
  • しばらく経つと、コンパイル成功
    
  • ブラウザで、URLhttp://localhost:3000/からReactアプリが表示される
    

Reactの概要

Reactとは

• UI(ユーザインターフェイス)を構築するためのJavaScriptライブラリ
  • 宣言型
  • 効率的
  • 柔軟

Reactコンポーネントとは

• 複雑なUIを組み立てるための、小さく独立した部品
• Reactに何を描画したいか伝える
• データが変更されると
  • Reactはコンポーネントを効率よく更新し、再レンダリング
• 異なる種類のコンポーネントが存在

Reactコンポーネントの例: React.Componentサブクラス

• ShoppingListはReactコンポーネントクラス(Reactコンポーネント型)
  • props(propertiesの略)と呼ばれるパラメータを受け取る
    • 使用例: this.props.name
  • renderメソッドにより、React要素を返す
    • React要素は、画面ビューの階層構造
      • 描画すべき要素の軽量な記述形式
  • ReactはReact要素を受け取って画面に描画

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Example usage: <ShoppingList name="Mark" />

JSX言語を使用し、React要素を記述

• JSXとは、DeNAによって開発されたWebアプリ向けのプログラミング言語
• JSX構文はビルド時に、React関数呼び出しに変換される
  • 例えば、<div />は、React.createElement('div')に変換される
• JSXでは、JavaScriptのすべての構文を使用可能
  • JavaScriptの式を、JSX内で中括弧に囲んで記入
• React要素は、JavaScriptのオブジェクト
  • 変数に格納可能
  • プログラム内で受け渡し可能

Reactコンポーネントのレンダリング

• 方法1: 組み込みDOMコンポーネントを使用しレンダリング
  • 上記ShoppingListコンポーネントは、<div />や<li />などのHTML要素でレンダリング
• 方法2: 自分で書いたカスタムReactコンポーネントをHTMLに差し込む
  • 例えば、事前にShoppingListコンポーネント(クラス)を作成し
    • <ShoppingList />と記述することで、ショッピングリストをレンダリング
• それぞれのReactコンポーネントはカプセル化され、独立して動作
  • これにより単純なコンポーネントから複雑なUIを作成可能

おわりに

Reactチュートリアルをスタートしました。
次回も続きます。お楽しみに。

[次回] Django+Reactで学ぶプログラミング基礎(20): Reactチュートリアル(データ受渡しと状態記憶)