この記事は何

Reactの勉強をかねて、Flask（Pythonのウェブフレームワーク）とReactを使ったアプリケーションを作成してみることに。その際に調べたことや気になったことを雑多にメモする記事。 あくまで自分の理解や考えていることなので正確性は保証しかねます。

作成するアプリケーション

チェックボックスをいくつかクリックして、チェックした内容に基づいて点数を計算するアプリ。twitterなどでのログイン機能も追加したい。 Vue.jsでも良いかもしれないですが、あくまで学習目的なので特にどのフレームワークが良いかは気にせずに勉強。

React

Reactは本当に事前知識がないので、以下の本を購入してはじめから読みつつ、公式のドキュメントも並列して読んでいきたいと思います。

React 実践入門: React の基礎を理解してシンプルなアプリケーションを作る

作者:soarflat
発売日: 2020/05/20
メディア: Kindle版

React用語

SPA(Single Page Application)：単一のページでコンテンツ切り替えを行うウェブアプリの構造の総称。例：GoogleMap
宣言型UI：宣言的UIはReact Hooksで完成に至り、現代的設計論が必須の時代になる - Qiita
ECMAScript - Wikipedia
パッケージマネージャ：npm、yarnなどを指す。
JSX：Javascriptの拡張構文でありJavaScript XMLの略称。Reactのコンポーネント内でマークアップ言語を記述するために用いる。JSX無しだと<p>などの要素ごとに React.createElement 等を使用する。参考文献：JSX の導入 – React
React要素：イミュータブル（作成後にその状態を変えることのできないオブジェクト）な、画面上に表示したい要素。
React のコンポーネント：再利用可能なページ上に表示されるReact要素、ボタンなど繰り返し使用する要素。returnされるものはJSXで記述された要素。
- props：Reactコンポーネントへの入力
- state：Reactコンポーネントに紐づいた時間とともに変化するデータ、日本語で言うところの「状態」
ライフサイクル：クラスコンポーネントにはMounting(マウント)・Updating(更新)・Unmounting(マウント解除)の三つのライフサイクルと呼ばれる期間がある
- Mounting：Componentが表示されるまでの時間
- Updating：Componentが表示されてからstateの更新を終えるまでの時間
- Unmounting：現在のコンポーネントから他のコンポーネントに移動する時間
- ライフサイクルメソッド：各期間で実行できる特別な関数
- React lifecycle methods diagram
フック：フックの導入 – React
- state などの React の機能を、クラスを書かずに使えるようになります
- 初学者の段階ではフックを使用する動機（フックの導入 – React）はまだ理解できないので軽く読む程度に済ます

開発環境のセットアップ

node.js：JavaScript実行環境
Yarn：JavaScriptパッケージマネージャ
Create React App：新しい React アプリを作る – Reactより
vscode：エディタ

最低限の機能を持つGUIを作成する

create-react-appを用いてはじめのテンプレートを作成できる。

DOM要素

テンプレを修正していく中で、JSXの構文とルールを理解する必要がある。 JSXのreturn内では、ルート要素は一つしか指定できない。td要素などをまとめる場合はフラグメントという仕組みを利用する。他の細かいルールについては以下のページを参照した。

checedによるデフォルトのチェックの指定は defaultChecked で指定
classはclassNameで指定
dangerouslySetInnerHTML、HTMLをコードから指定することはクロスサイトスクリプティング (XSS) 攻撃の影響を受ける可能性があることを自覚する
htmlFor、React要素のためのfor
styleはドキュメント内ではたまに使用されるものの、推奨しているわけではない（DOM 要素 – React）
ユーザ定義のコンポーネントの名前は大文字（参照）、小文字始まりは div などの既存の要素を指すため。
スプレッド構文を用いてimgなど複数の属性がある要素で属性の値を指定できる
- スプレッド構文 - JavaScript | MDN

JSX

JSX = React.createElement(component, props, ...children)のsyntax sugar。

props

コンポーネントと props – React

props = 関数コンポーネントが受け取るデータ。propsは受け取った後に変更することはできない。

参考文献

javascript

javascriptは普段自分で書くことはほぼ無いため、基本から確認。

IIFE (Immediately Invoked Function Expression; 即時実行関数式)

IIFE (即時実行関数式) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

グローバルの名前空間を汚すことなく関数を実行できる、もちろんJSXでもこれを用いた条件分岐など記述可能。

map

Array.prototype.map() - JavaScript | MDN

<li>などの繰り返す要素の表示に使用する。

アロー演算子

アロー関数 - JavaScript | MDN

2 つの理由から、アロー関数が導入されました。1 つ目の理由は関数を短く書きたいということで、2 つ目の理由は this を束縛したくない、ということです。

普段pythonを使用していると見慣れない表現だが、慣れると便利。引数が存在しない場合は () => { statements } と書くことになる。また、引数が一つしかない場合は引数の前後の () を省略できるので element => { return xxx; } となることもある。さらに、ステートメントがreturnのみならばreturnと{}も省略できるため、 element => xxx; とも記述できる。