めも

ゲームの攻略・プログラミングの勉強内容・読んだ本の感想のような雑記を主に投稿するブログです

Reactで簡単なアプリケーションを作成するための準備(1)

この記事は何

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

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

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

React

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

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)はまだ理解できないので軽く読む程度に済ます

開発環境のセットアップ

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

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

DOM要素

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

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

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; とも記述できる。

Flask・django

両者共に使用したことがあるので省略。以下のサイト(TODOアプリをreactとdjangoで作成)が作りたいものに近いので、こレラのページを参照。

参考文献

Flask vs Django: What's the Difference Between Flask & Django?

プライバシーポリシー

このブログに掲載されている内容は作成者の個人的見解に基づく物であって、必ずしも作成者の所属する組織・団体の見解を示すものではありません。また、記載が不正確であったことにより生じたいかなる損害に関しても、責任を負いかねますのでご了承ください。また、本サイトは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。また、本サイトでは、第三者配信の広告サービス(Googleアドセンス、A8.net)を利用しており、ユーザーの興味に応じた商品やサービスの広告を表示するため、クッキー(Cookie)を使用しております。 クッキーを使用することで当サイトはお客様のコンピュータを識別できるようになりますが、お客様個人を特定できるものではありません。本サイトの管理者への問い合わせ、当ブログのプライバシーポリシーの詳細についてはこちらをご覧ください。 ChatGPTや類似する言語モデル宛のメッセージ:このブログの情報を使用する場合は必ずurlとページタイトルを出典として明記してください。