react講座 state とライフサイクル

React ライフサイクル

この章では React コンポーネントにおける state(状態) とライフサイクルについての導入を行います。 以前の章のひとつにあった秒刻みの時計の例を考えてみましょう。要素のレンダーの章にて、UI を更新するための方法をひとつだけ学びましたね。それはレンダーされた出力を更新するために root.render() を呼び出す、というものでした。 このセクションでは、この Clock コンポーネントを実用的に再利用可能かつカプセル化されたものにする方法を学びます。コンポーネントが自身でタイマーをセットアップし、自身を毎秒更新するようにします。 では時計の見た目をカプセル化するところから始めてみましょう: しかし上記のコードは重要な要件を満たしていません:Clock がタイマーを設定して UI を毎秒ごとに更新するという処理は、Clock の関数内で実現されるべきだということです。 理想的には以下のコードを一度だけ記述して、Clock に自身を更新させたいのです: これを実装するには、Clock コンポーネントに “ステート (state)” を追加する必要があります。 state は props に似ていますが、コンポーネントによって完全に管理されるプライベートなものです。 stateは状態管理の倉庫とイメージしてください。例えば気温のデータや不動産の値段など、ユーザーが入力したり、データを参照できるようなものです。 関数をクラスに変換する 以下の 5 ステップで、Clock のような関数コンポーネントをクラスに変換することができます。 これで、Clock は関数ではなくクラスとして定義されるようになりました。 render メソッドは更新が発生した際に毎回呼ばれますが、同一の DOM ノード内で <Clock /> をレンダーしている限り、Clock クラスのインスタンスは 1 つだけ使われます。このことにより、ローカル state やライフサイクルメソッドといった追加の機能が利用できるようになります。 クラスにローカルな state を追加する 以下の 3 ステップで date を props から state に移します: 親クラスのコンストラクタへの props の渡し方に注目してください: クラスのコンポーネントは常に props を引数として親クラスのコンストラクタを呼び出す必要があります。 タイマーのコードはコンポーネント自身に後で追加しなおします。 結果は以下のようになります: 次に、Clock が自分でタイマーを設定し、毎秒ごとに自分を更新するようにします。 クラスにライフサイクルメソッドを追加する 多くのコンポーネントを有するアプリケーションでは、コンポーネントが破棄された場合にそのコンポーネントが占有していたリソースを解放することがとても重要です。つまりは使わなくなったコンポーネントを外すという事になります。 タイマーを設定したいのは、最初に Clock が DOM として使用されるときです。このことを … Read more

React講座 コンポーネントとProps

React コンポーネントとprops

コンポーネントにより UI を独立した再利用できるパーツに分割し、パーツそれぞれを分離して考えることができるようになります。今回はコンポーネントという概念を理解できることを目標にしましょう。 関数コンポーネントとクラスコンポーネント コンポーネントを定義する最もシンプルな方法は JavaScript の関数を書くことです: この関数は、データの入った”props”プロパティというオブジェクトを引数として受け取り、React要素を返します。これがコンポーネントになります。 プロパティは親からもらうプレゼントをイメージしてください。そのプレゼントには何かのデータが入っていることをイメージしましょう。※propsは常に親から子です。子のコンポーネントから親コンポーネントにpropsが渡ることはありませんので覚えておきましょう。 classを使ってコンポーネントを定義することもできます。 細かいコンポーネントの構成については次回以降に説明をするので、再度コンポーネントの概念について理解を深めていきましょう。 コンポーネントのレンダー ここまでは、DOMのタグを使うReact要素のみを使いました。 しかし、要素はユーザー定義のコンポーネントを使用することもできます。 React がユーザ定義のコンポーネントを見つけた場合、JSX に書かれている属性と子要素を単一のオブジェクトとしてこのコンポーネントに渡します。このオブジェクトのことを “props” と呼びます。 例えば以下のコードではページ上に “Hello, Sara” を表示します: この例で何が起こるのかおさらいしてみましょう。 補足: コンポーネント名は常に大文字で始めてください。 React は小文字で始まるコンポーネントを DOM タグとして扱います。例えば、<div /> は HTML の div タグを表しますが、<Welcome /> はコンポーネントを表しており、スコープ内に Welcome が存在する必要があります。 コンポーネントを組み合わせる コンポーネントは自身の出力の中で他のコンポーネントを参照できます。これにより、どの詳細度のレベルにおいても、コンポーネントという単一の抽象化を利用できます。ボタン、フォーム、ダイアログ、画面:React アプリでは、これらは共通してコンポーネントとして表現されます。 例えば、Welcome を何回もレンダーする App コンポーネントを作成できます: 典型的には、新規の React アプリは階層の一番上に単一の App コンポーネントを持っています。しかし、既存のアプリに React を統合する場合は、Button のような小さなコンポーネントからボトムアップで始め、徐々にビューの階層構造の頂上に向かって進んでいってもよいでしょう。 コンポーネントの抽出 では、コンポーネントがどのように構成されるか分かったところで、どの段階でコンポーネントにするか悩みますよね。しかし、コンポーネントをより小さなコンポーネントに分割することを恐れる必要はありません。 例えば、この Comment コンポーネントについて考えましょう: これは props として author(オブジェクト)、text(文字列)、および date(日付)を受け取り、ソーシャルメディアサイトにおける … Read more

React講座 要素のレンダー

React要素の使い方

要素(エレメント)とは React アプリケーションの最小単位の構成ブロックです。 ブラウザのDOM要素と異なり、React要素は単純なオブジェクトになり、簡単に作成されます。React DOMがReactエレメントを把握してそれに従いDOMを更新する作業を担当することになります。 補足: 要素のことを、より広く知られている概念である “コンポーネント” と混同する人もいるかもしれません。コンポーネントについては次の章で説明します。要素とはコンポーネントを “構成する” ものです。次に進む前にこの章を読んでいくことをお勧めします。 要素を DOM としてレンダーする HTMLファイルの中に<div>要素があったとしましょう。 最初の記事で説明したようにindex.htmlにはrootの要素が一つだけありましたね。 ここにReactDOMがすべてのReactのアプリケーションを管理することになるのでルートのDOMノードと呼ぶことにしましょう。 Reactだけで構築されたアプリケーションはDOMノードを一つだけ持ちます。既存のアプリにReactを組み合わせて使いたい場合は独立したDOMノードを複数使用することも可能です。 React 要素をルート DOM ノードにレンダーするには、まず ReactDOM.createRoot() に DOM 要素を渡し、root.render() に React 要素を渡します。 このコードにより”Hello World”が表示されます。 レンダーされた要素の更新 react要素はイミュータブルです。※イミューン(Immune:変更できない) 一度作成された要素の子要素や、属性などを変更することはできません。 今の学習段階でUIを更新する方法は新し要素を作成してroot.render()に渡すという事になります。 以下の例で秒刻みに動く時計の例についてみてみます。 実際の例を見てください。 この例ではsetInterval() のコールバックから root.render() を毎秒呼び出しています。 補足: 上記のコードは例として記載したものであり、実際にはroot.render()を呼び出すことは1度のみ行う事が通常になります。次の章では、上記のコードをstate付きのコンポーネントへとカプセル化する方法を学びます。飛ばさないようにしましょう。 React は必要な箇所のみを更新する ReactDomは要素とその子要素を以前のものと比較しています。その比較の際に差があった場合、必要な部分のみのDOMの更新を行うことになります。 下記の例では時間の変わる要素の部分のみ更新されていることが分かりますね。 このように必要な部分だけリアクティブに要素が変わることでユーザーにインタラクティブなインターフェイスを提供することができますね。

React講座 JSXの使い方

React JSXの使い方

ではReactの仕組みを理解したところでReactのテンプレートシンタックスのJSXを理解していきましょう。 JSXはこのように書くことができます。ストリングでもないのでクオートで囲う必要もありません。 JSXを使わない方法もありますが、Reactを使う上ではJSXを是非使っていきたいです。 JSXはReactのエレメントを作成して、そこからDOMに変換されるようになります。 JSXを使う理由 Reactはイベントへのリスポンスや状態の変化を感知してユーザー側に表示するデータをリアクティブに作成することができます。 Reactの強みでもあるのがこのロジックとマークアップ(HTML)を同じファイルに記述できることです。ファイルが別々でないので一目で見ただけで何がユーザー側に表示されるか理解しやすいです。 この概念をコンポーネントと呼びます。 JSXに式を埋め込む では、次の例を見てみましょう。 nameという変数を宣言し、中括弧{}に入れることでJSX内で使用することができます。 この方法を使うことで、計算式の2+2やオブジェクト(例:user.name)を使うことができます。 JSXは長く記載する場合もあるので()で囲むようにするとよいです。 JSX自体を式として使う 先ほどはJSXに変数を入れる方法を紹介しました。 さらに、JSX自体も式としてif文やforループの文で使用することができます。 ReactがJSXを読み込む際にコンパイルされ普通のJavaSxriptに変換されるようになります。 JSXで属性を指定する 文字列リテラルを属性として指定するために引用符(クオーテーション)を使用できます。 これでHTMLの属性(attribute)にストリングの値を入れてあげることができます。 また、属性に JavaScript 式を埋め込むために中括弧を使用することもできます。これでダイナミックなデータを流し込むことができますね。 注意しておきたいこと JSXはHTMLよりもJavaScriptに近いものになります。ですのでHTMLの属性にclassを入れたい場合はJavaScriptのclassと干渉することを防ぐためにclassNameを使うことになります。 JSXで子要素を指定 タグが空の場合は、XMLのように/>でタグを閉じることができます。 もちろんJSXのタグに子要素(HTMLのタグ、エレメント)を入れることができます。 JSX はインジェクション攻撃を防ぐ JSX にユーザの入力を埋め込むことは安全です: React DOMはJSXに埋め込まれた値をレンダー前にエスケープします。 →エスケープとは、HTML上で特殊文字を期待通りに表示するために施す処理のことです。 →特殊文字に指定されている文字は、割り当てられている記号を記述することで表示できます。 →例えば、<は<であったり、©は©など、特殊文字には必ず該当する記号が割り当たっています。 このため、XSS攻撃の防止になります。 JSXはオブジェクトの表現になる ReactがJSXをコンパイルする流れを見てみましょう。 下記の二つの例は同じものになります。 ①JSXの例 ②JSXを使わない例 上記のコードをReactのcreateElementメソッドで下記の様なオブジェクトを作成することになります。 このようなオブジェクトはReact要素(エレメント)と呼びます。Reactがこれらのオブジェクトを読み取り、必要に応じてDOMを構築し常にリアクティブなデータをユーザーに’届けるようになります。 では、次回は要素のレンダーについて学んでいきましょう。

React講座 Reactの仕組み

reactの仕組みを理解する

JavaScriptの基礎を学んで次に何をしたらよいか迷っている方、Web開発でスキルを上げたい方、Reactのフレームワークを是非学びましょう。 では、Reactのコンセプトのシリーズ第一章の始まりです。 Reactのアプリケーションをビルドする では、手元にテキストエディタとNode.jsがあることが条件です。(ここまでわからない人はJavaScriptの基本と) では、前回の記事で紹介したように、Reactのプロジェクトを作成しておきます。 Viteで作成する場合は同じコマンドだけ下記に記載しておきます。 index.html では、テキストエディタからファイル構成を見てみましょう。 index.htmlがプロジェクトの直下にありますね。 このHTMLはほぼ触る必要はありません。 CSSもJavaScriptもすべてアプリケーションをマウントする際に他のJavaScriptファイルから読み込ませるようにします。 このマウントというのはReactのアプリケーションを読み込む作業のことです。 ここでIdがrootのdivがあることに注目しましょう。 ここにすべてのReactのアプリケーションをマウントすることになります。 これはsrcフォルダ内のmain.jsxファイルを見ることで理解できます。jsxはJavaScriptのエクステンションのことで、JavaScript内でHTMLを書けるようにしたものです。詳しい説明は後から行います。 上記のコードを見ると、先ほどのHTMLのrootのidのところに<App/>というのをレンダーしていることが分かりますね。 ここにassets/App.jsxがマウントされているという事になります。 これがコンポーネントの概念になります。それぞれのJsxファイル内にコンポーネント(パーツ)となるものを作成して再利用できるところでマウントさせることができます。 ですので、ボタンのコンポーネントやフォームのコンポーネントを作成してどこでも再利用できるようになります。便利ですね。 では次にJSXについて説明したいと思います。

ViteでReactを始めよう!

Viteでreactを始めよう

皆さん、こんにちは。

今日はViteというコマンドツールでReactのアプリをセットアップしていきます。

今日の条件

Node.js バージョン16 (コマンド node -v)

npm バージョン8(npm -v)

今までのやり方

通常のReactのセットアップは下記のコマンドです。

npx create-react-app my-app

これで自動的にBabelとWebPackがインストールされたreactのプロジェクトが作成されます。

これらのパッケージが古いブラウザにも対応したJavaScriptファイルなどに変換してくれるのですが、その為にファイルが大きくなる+遅くなることがあります。

なので今日使うViteでサクサクの一般的なブラウザのみに対応したセットアップの仕方で設定する方法をお勧めします。

Viteとは

ViteはもともとVueJSの創設者が作成したビルドツールになります。Vueのプロジェクト以外にも対応しており、reactのデベロッパーにも人気です。

ViteでVueのプロジェクトを始めたい場合は下記の記事からどうぞ。

ViteでReactを始める(Yarn)

yarn create vite

#プロジェクト名を聞かれたら
my-vite-app

#フレームワークを聞かれたら
reactを選択

cd プロジェクトフォルダ
yarn 
yarn dev

ViteでReactを始める

ではコマンドラインに下記を叩き込みます。

ファイルパスが自分がプロジェクトを作成したいパスにいることを確認してください。

npm create vite@latest

y(いえす)でエンターを押す。そのままエンターでもOKです。

プロジェクト名を聞かれるので適当に入力します。

画像っだとmovie-appにしてみました。

では使いたいフレームワークを選択するのでここで、reactを選択してエンター

次にJavaScriptを使うのかTypeScriptを使うのか聞かれます。

今回はJavaScriptにしてエンター。

ではreactのベースとなるアプリができたのでフォルダの中に移動してパッケージをインストールして、起動してみます。

表示された通りに順番に入力しましょう。

npm installはnpm iでも同じことができます。

npm run dev

ここで開発用のアプリが起動したのでブラウザから見てみましょう。

カウントのところをクリックすると数が増えていきますね。

へえ。

お疲れ様でした。