ITとかCockatielとか

技術のこととか。飼鳥(オカメインコ)のこととか。気になったこととか。基本的には備忘録。

【実践】Reactチュートリアル

はじめに

業務でReactというキーワードが出てきたので、触ってみることにしました。
チュートリアルを触ってどんなものかを簡単に理解しつつ、記録を残しておきたいと思います。

公式サイトのチュートリアル

チュートリアル:React の導入 – React

3x3のマルバツゲームですね。
最終的にはゲームの履歴も表示できるようになります。

Reactとは

https://ja.reactjs.org/ ユーザインターフェース構築のための JavaScript ライブラリ。(FacebookOSSとして公開)
複雑な UI を、「コンポーネント」と呼ばれる小さく独立した部品から組み立てることができる。

特徴(公式より)

  • 宣言的な View
    React はデータの変更を検知し、関連するコンポーネントだけを効率的に更新、描画します。
    宣言的な View を用いてアプリケーションを構築することで、コードはより見通しが立ちやすく、デバッグのしやすいものになります。

  • コンポーネントベース
    自分自身の状態を管理するカプセル化されたコンポーネントをまず作成し、これらを組み合わせることで複雑なユーザインターフェイスを構築します。

  • 一度学習すれば、どこでも使える
    React と組み合わせて使用する技術に制限はありません。React を使って新しい機能を追加する際に、既存のソースコードを書き換える必要はありません。

開発環境

ローカル環境を使います。

TypeScriptの警告ダイアログ(VSCode

警告が出る場合は以下の設定。

ファイル > 基本設定 > 設定 > 基本設定の上書き欄に以下を追記
※パスは実際の環境に合わせる。

{
    "typescript.npm": "C:\\Program Files\\nodejs\\npm.cmd"
}

準備

以下のコマンドで、カレントディレクトリにプロジェクト作成。

npx create-react-app my-app

作成したプロジェクトの src/ 内にあるファイルをすべて削除後、
チュートリアルの指示通りにファイルを作成し、JSファイルに数行追記。

プロジェクトフォルダ内で以下のコマンドを実行し、サーバーを起動。

npm start

少々時間がかかるため、しばらく待ってからブラウザで http://localhost:3000 を開く。
※私の環境では、サーバー起動時に勝手にブラウザが開かれた。

こんな画面が出てきたら成功。

f:id:sik_bug:20200209212222p:plain

Reactの基本処理まとめ

renderメソッドとは

  • renderメソッドには画面上に表示したいものの「説明書き」を実装する。
  • 説明書きの実装には、JSXと呼ばれる構文を使用する。
  • renderメソッドは最終的に、描画情報を「React要素」として返却する。

JSXとは

  • リファレンス:https://react.keicode.com/basics/jsx.php
  • Reactで通常使われるもので、JavaScriptの拡張版である。
  • 利用は必須ではないが、非常に便利なものとなっている。
  • React要素を簡単な形式で記述できるというのが最大のメリット。
// JSXなし
var greeting = React.createElement('h1', null, 'Hi!');
// JSXあり
var greeting = <h1>Hi!</h1>;

チュートリアルを進める

  • あとは、チュートリアルに沿って実装と学習を進めていきます。
  • VSCodeでJSを保存すると、ブラウザの描画は自動で更新されます。(コンポーネントの更新が反映される)
  • 特に突っかかるところはなかったので、サクサク行きました。

以下、ポイントメモ。

state

  • Reactコンポーネントはそれぞれ state というものを持っている。
  • この中で状態を管理(値を保持)することができる。

コンポーネント間の情報の受け渡し

イミュータビリティ(不不変性)の重要性

例えば配列の値を書き換える場合、直接書き換えることもできるが得策ではない。
対象の配列をコピーして値を入れ替えてから、オブジェクト参照を切り替える方がよい。

それは以下の理由による。

  • 複雑な機能が簡単に実装できるようになる(ex.履歴保管・利用機能)
  • 変更の検出が容易になる(オブジェクト参照だけでよい、値まで見る必要がない)
  • Reactの再レンダータイミングを決定できる(オブジェクト切り替えのタイミングなので分かりやすい)

関数コンポーネント

  • renderメソッドのみを有したコンポーネントのこと。
  • 自分のstateを持たない。
  • Classではなくfunctionとして実装する。

できました

よくできています。
わかりやすいチュートリアルで、いい勉強になりました。

f:id:sik_bug:20200209212234p:plain