当記事では、フロントエンドアプリで人気のReactの開発環境構築からアプリケーションを動作する方法を紹介します。
初めてReactを触るので、環境の構築方法から動かし方まで知りたい！！
と、思ってる方におすすめです。
この記事では、以下のことを紹介してます。
- Reactについて
- Reactで開発するにあたって知っておくべき単語
- Reactの開発環境構築の方法
- Reactアプリケーションの作成方法
- Reactアプリケーションの動かし方
当記事では、Reactアプリの入門記事として、Reactの開発環境構築から実際にアプリケーションを実行するまでの作業を手順を追って紹介します。また、React開発する上で、頻出する単語も紹介してますので、当記事を読むことでReactに関する入門知識を知ることができます。
Reactとは
ReactはSPA開発に特化したJavaScriptライブラリです。
JQueryでもSPA方式のアプリケーションを作成することができますが、JQueryに比べて生産性が高いとされています。また、コンポーネント単位でコードを書くライブラリのため、コードが読みやすくなり保守性も向上します。
ReactのようにSPA方式に特化したライブラリにVueやAngulerがあります。SPAでの開発を行う際、上記どれを採用するかはプロジェクト特性に合わせて判断する必要がありますが、VueやAngularといった他のライブラリと比較しても、Reactは扱いやすく、将来性があると筆者は考えています。
※この記事を執筆した時点では、GoogleアナリティクスでVueとReactは同じくらいの人気です。
Reactに関しての詳細な情報は以下の公式サイトを参照ください。
Reactの公式サイト
学習経緯
筆者がReactを学んだ経緯について記載します。
筆者は、フロントエンド側もJQueryの経験しかなかったエンジニアでしたが、ある日突然SPA方式のアプリ開発に取り組むことになり、Reactでの開発方法を確立する役目を承ったのがきっかけで、Kindle本やネット記事を通じて独学でReactを学びました。
Reactで開発するにあたって頻出する用語
Reactで開発中にエラーが発生した際、ネットで調べる時に適切なキーワードで検索をかけないと期待した記事にたどり着けません。
その際に知っておいた方が良い単語を紹介します。
まずは基本の「JSX」
ReactといえばJSXというくらい関連が高い用語です。
JSXとは、構文のことです。
ReactはJSX構文で記述します。このJSX構文は、一部のエンジニアには不人気の構文らしいですが、私は気になりませんでした。
各技術の構文なので覚えるしかない、といったスタンスで学ぶのがいいと思います。
JavaScriptと比較したJSX
詳しくは後述しますが、Reactのコンポーネントはhtmlのタグみたいに記述していきます。
その際にReactが利用するものとhtmlの属性を区別するために、Reactではhtmlとは少し異なった書き方となります。
例えば、htmlでスタイルを設定する時に利用する「class」属性ですが、JSX構文で 記述する場合「className」となります。他の属性も同様で、ほんの少しずつ属性の書き方が異なります。覚えるのが大変と思うかもしれませんが、VSCodeで開発する場合だとReact開発用のプラグインを導入するとシンタックスが利くようになるので、なんとなくこの属性を使えばよいのかなー、と予測がつくので、特に問題ではないと思ってます。
VSCode上に表示された候補からそれっぽい属性を選べばOKです。
Reactはトランスパイルが必要
Reactで開発していると、トランスパイルという単語に遭遇します。
トランスパイルとは簡単にいうと、どの環境でも動作するJavaScriptの構文に変換することです。
利用者のブラウザは古いものから新しいものまでいろいろな環境が存在します。
開発者は、利用者の環境を意識して開発する必要がありません。それはReactがトランスパイルという技術を使って、様々なブラウザのバージョンで動く記述に変換しているためです。
つまり、トランスパイルとは開発者が記述したコードをどのバージョンのブラウザでも解釈できる構文に変換することです。
なお、Reactをデプロイする時にビルドが必要なのですが、JQueryしか使ってこなかったエンジニアからするとHTML、JavaScriptをなぜビルドしなければいけないんだろう、と疑問に思ってましたが、上記の仕組みで納得ができました。
JavaScriptの記法
トランスパイルに関連して、JavaScriptの記法について少し補足します。
上で「様々なブラウザのバージョン」といってますが、具体的には「ブラウザのバージョンによって異なるJavaScriptの記法」のことを指します。
JavaScriptはCommonJS記法、ES6記法というものがあります。CommonJSが古い書き方で、ES6が新しい書き方です。
この記法が混在する理由の一例として、Reactアプリケーションのプロジェクトにサードパーティ製のライブラリを利用している場合、そのライブラリがCommonJSで記載されていたり、ES6で記載されていたりと混在している場合があります。
それらをどのブラウザでも動くようにReactでは、古い記法であるCommonJS記法にトランスパイルしています。
Babel
Reactアプリケーションを実行するとコンソール上のメッセージにBabelという単語が表示されます。
Babelとは、トランスパイルするために利用する技術のことです。ReactのJSX構文をブラウザで理解できる言語に変換するためにトランスパイルするために利用する技術です。Babelというメッセージが出てきたらトランスパイルのことです。
Reactの開発環境構築
ここからはReactの開発環境を構築していく手順を紹介します。既にインストール済みのソフトウェアがある場合は、飛ばして構いません。
必要なソフトウェア
Reactを開発するのに必要なソフトウェアを紹介します。
※2023年12月時点で筆者がこれが一番スタンダードだと思う環境を記載します。
VSCode
知名度がとても高いMicrosoft製の高機能エディタです。
エディタですが、プラグインを導入することで様々な言語に特化した開発環境にすることができます。
インストールの設定はこだわりがなければ全てデフォルトの設定でインストールしてOKです。
VSCodeのダウンロードは以下から可能です。
VSCodeプラグインのインストール
上述したように、VSCodeはプラグインで様々な言語の開発環境にカスタマイズできます。
Reactの開発環境とするために、以下のプラグインの導入が必要です。
以下手順でVSCodeに導入します。
- VSCodeをインストール後、VSCodeを起動します。
- VSCode上から以下のプラグインを導入します。VSCodeのプラグインメニューで「react」と検索すると、出てくる下記をインストールします。
Reactアプリケーションの作成
開発環境ができたので、実際にReactのアプリケーションを作成していきます。
プロジェクトの作成
Reactアプリケーションは、プロジェクトという単位で作成していきます。
プロジェクトは「create-react-app」ツールを使って作成します。
VSCodeのターミナルで以下コマンドを実行することでプロジェクトが作成されます。
npx create-react-app プロジェクト名コマンドを実行した結果、コンソール上に「Happy hacking!」というメッセージが表示されればReactプロジェクトの作成完了です。
「create-react-app」コマンドは、インターネット上から必要なライブラリをダウンロードするので、完了まで5分くらい時間がかかよ。
Reactアプリケーションの起動
以下のコマンドでReactアプリケーションを起動します。
内部的にローカルサーバが起動し、3000番ポートでReactアプリケーションが起動します。
npm startReactアプリケーションの確認
利用PCのブラウザを起動し、「http://localhost:3000」にアクセスします。
以下の画面が表示されたら無事Reactアプリケーションが起動しています。
これでプロジェクトの雛形の作成が完了したので、あとは作成したいアプリケーションのプログラムを記述していきます。
まとめ
開発環境構築からアプリケーション起動するまでのまとめ
本記事では、Reactの開発環境の構築から、アプリケーションを起動するまでの手順を記載しました。また、Reactでアプリケーションを開発するにあたり、知っておくべき単語や開発中に頻出する単語についても紹介しました。
今後は、Reactアプリケーションを本格的に開発するためのコンポーネントの種類やフックなど、より深い内容を紹介していきます。
皆様の参考となりましたら幸いです。
コメント