FrontEnd

【初級者向け】Reactの開発環境の構築

投稿日:

はじめに

いままで、フロントエンドに関してはあまり勉強してきませんでしたが、近々、業務でReactを使う予定があるので勉強を始めています。

今回はReactの開発環境をMac上に構築する方法について書いてみようと思います(参考までに、OSはSierraです)

Reactとは

ReactはUIを構築するためのJavaScriptライブラリです。FacebookがOSSとして公開しています。

Reactの特徴として「Declarative」、「Component-Based」、「Learn Once, Write Anyway」という3つのキーワードがあります。

Declarative

Reactでは、Declarative(宣言的)にComponentを組み合わせてViewを構築します。宣言的という言葉の通り、ある状態に対してのあるべき姿を宣言するように定義します。

あるイベントに対する処理を命令的に記述した例と宣言的に記述した例は下記のとおりです。

宣言的に記述した例では、初期表示の場合でもイベントによる更新でも、render関数は受け取ったstateに応じてViewを構築するだけです。

Component-Based

Reactはコンポーネント志向という思想で設計されています。Webページは一般的にヘッダー、メニュー、リストなどの様々なパーツで構成されています。ReactではこれらのパーツをComponentとして扱います。そして、様々なComponentを組み合わせてUIを構築します。

Componentは、 View = Component(State) のような、Viewを作る関数として考えることができます。 Componentが返す View は、ReactElementのツリーとなります。 作成したReactElementのツリーは、ReactDOMによってDOMへと反映されます。 更新時は、更新前のReactElementのツリーと比較して、差分だけがDOMに反映されます。 これがVIRTUAL DOM(仮想DOM)と呼ばれる部分です。

Learn Once, Write Anyway

「Learn Once, Write Anywhere(一度学べば、どこでも書ける)」は、ReactにとってDOMは react-dom によるただの1つの環境であることを表しています。 react-native などを使うことで、「同じReactの考え方」でiOSやAndroidのような、DOM以外の環境をターゲットにしたアプリケーションを開発できます。

Reactのメリット、デメリット

前述の通り、Reactは仮想DOMを採用しています。一般的にDOMの更新には時間がかかりますが、これによりレンダリングする前後の状態を比較して最小限変更のみをDOMに適応するため、高速にレンダリングすることができます。Reactの仮想DOMについては詳しくはこちらを御覧ください。

他にもコンポーネントの再利用が容易であるなどのメリットがあります。

反面、デメリットとしては、トランスパイルが前提のため導入に手間がかかったり、JQueryなどと比べて学習コストが高い点があげられます。

環境構築

それでは、Reactアプリケーションを開発する環境を整えていきましょう。まずはじめにNode.jsをインストールします。

Node.jsのインストール

Homebrewを使ってNode.jsをインストールします。ターミナル上で下記のコマンドを実行してnodebrewをセットアップしてください。

続いて、Node.jsをインストールします。

Yarnのインストール

次にYarnをインストールします。Yarnはnpmより高速に動作するJavaScriptのパッケージマネージャです。Yarnについては詳しくはこちらをご覧ください。

Node.jsと同様にHomebrewを使ってインストールします。ターミナル上で下記のコマンドを実行してください。

create-react-appのインストール

create-react-appはReactの雛形を簡単に作ることができるコマンドラインツールです。Facebookがこちらで公開しています。

ターミナル上で下記のコマンドを実行してください。

Reactアプリの作成

それでは、実際にReactアプリを作ってみます。ターミナル上で下記のコマンドを実行してReactアプリの雛形を作ります。

その後、作成したディレクトリ内で $yarn start を実行するとReactアプリケーションが実行されます。以下の画像のような画面が表示されれば成功です。

react

コードの修正

少しページを修正してWelcome to Reactの文字を変えてみましょう。App.jsを下記のように修正します。

すると、即座にページが更新されます。

react2

おまけ

create-react-appは何がよいのか

前提として、ReactはJSXやES6を使うことが推奨されています。しかし、これらを使うにはBabelやWebPack、ESLintなどのツールが必要不可欠なので、どのパッケージを入れたら良いのか悩んだり、依存管理が面倒になるなどの問題があります。

そこで、create-react-appを実行するとReactアプリケーションに必要なファイルやディレクトリの生成やWebpack、Babelなどを設定してくれます。

create-react-appで生成されるファイル

create-react-appを実行後のディレクトリ構成は下記のとおりです。

それぞれのファイルの役割は下記のとおりです。

manifest.json スタートページのURL、アイコン情報、背景色などの設定
App.css タイトルやロゴなどページ全般のスタイルの定義
App.js Reactの各コンポーネントの定義
App.test.js テストコードのサンプル
index.css bodyに関わるスタイルの定義
index.js index.htmlにReactのコンポーネントをレンダリングする
logo.svg スタートページに表示されているロゴ
registerServiceWorker.js assetsをキャッシュする

さいごに

React特徴や開発環境の構築などについて紹介しました。Reactを使って開発を行っていくためにはES6について知っておいたほうが良いと思いますので、よろしければこちらもご覧ください。

参考

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

react-icon

React Hook Form (v7) とMUI (v5) だけでバリデーションを実装

1 はじめに2 バリデーションエラーをMUIのhelperTextに表示する2.1 バリデーション実装の全体感3 他のフィールドに関連するバリデーション4 CodeSandbox5 さいごに6 おすす ...

Vue.js入門その2〜Vueインスタンスってなんぞ?〜

1 はじめに2 Vueインスタンス3 プロパティとメソッド4 インスタンスライフサイクルフック5 フィルター6 算出プロパティ6.1 例文6.2 算出プロパティを使用した書き換え6.2.1 HTML6 ...

laravel logo

Inertia使ってみた②

1 はじめに2 フォームヘルパー2.1 ポイント2.2 他機能3 ローディング表示4 さいごに5 おすすめ書籍 はじめに 前回はInertiaの基本的な内容について書いてみました。今回はもう少し実践的 ...

フロントエンドで動画デコレーション&レンダリング

1 はじめに2 レンダリング方法の検討3 背景部分のキャプチャ3.1 modern-screenshotの導入3.2 DOMのキャプチャ4 ffmpeg.wasmで画像と動画を合成4.1 ffmpeg ...

Cordovaの実機デバッグでハマった話

1 はじめに2 Cordovaとは2.1 React Nativeとの違い3 Cordovaでモバイルアプリを作る3.1 Node.jsをインストール3.2 Cordovaのコマンドラインツールをイン ...

フォロー

blog-page_side_responsive

2018年9月
 1
2345678
9101112131415
16171819202122
23242526272829
30  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。