この記事は何
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要素のためのforstyle
はドキュメント内ではたまに使用されるものの、推奨しているわけではない(DOM 要素 – React)- ユーザ定義のコンポーネントの名前は大文字(参照)、小文字始まりは
div
などの既存の要素を指すため。 - スプレッド構文を用いてimgなど複数の属性がある要素で属性の値を指定できる
JSX
JSX = React.createElement(component, props, ...children)のsyntax sugar。
props
props = 関数コンポーネントが受け取るデータ。propsは受け取った後に変更することはできない。
参考文献
javascript
javascriptは普段自分で書くことはほぼ無いため、基本から確認。
IIFE (Immediately Invoked Function Expression; 即時実行関数式)
IIFE (即時実行関数式) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
グローバルの名前空間を汚すことなく関数を実行できる、もちろんJSXでもこれを用いた条件分岐など記述可能。
map
Array.prototype.map() - JavaScript | MDN
<li>
などの繰り返す要素の表示に使用する。
アロー演算子
2 つの理由から、アロー関数が導入されました。1 つ目の理由は関数を短く書きたいということで、2 つ目の理由は this を束縛したくない、ということです。
普段pythonを使用していると見慣れない表現だが、慣れると便利。引数が存在しない場合は () => { statements }
と書くことになる。
また、引数が一つしかない場合は引数の前後の ()
を省略できるので element => { return xxx; }
となることもある。
さらに、ステートメントがreturnのみならばreturnと{}
も省略できるため、 element => xxx;
とも記述できる。
Flask・django
両者共に使用したことがあるので省略。以下のサイト(TODOアプリをreactとdjangoで作成)が作りたいものに近いので、こレラのページを参照。
参考文献
Flask vs Django: What's the Difference Between Flask & Django?