vdeepTweetPocketこんにちは、okutani(@okutani_t)です。Reactを導入する方法・初期設定」について解説しています。今回、導入するツールの説明は以下のとおりです。Webpack:importやexportを利用するためのモジュールバンドラーBabel:新しい記法(ES2015など)で書いたJavaScriptをトランスパイル(コンパイル)するツールReact:UIに特化したJavaScriptライブラリ(+仮想DOMを利用など)かんたんに説明すると、「Webpackを利用することでJavaScriptを分割して管理」することができ、「新しい記述のJavaScriptをどのブラウザでも動くように変換してくれるツールがBabel」、ということですね。今回は、その上でReactが動作する環境を作っていきます。本記事執筆時に導入したツールの各バージョンは以下のとおりです。16.8.6また、本記事の内容で作成したファイルなどはGitHubに公開しています。合わせて確認してみてください。sampleそれぞれのツールのGitHubリポジトリは以下のとおりです。Reactの導入方法についてみていきましょう。まとめ前準備まずはWebpackを導入したいプロジェクトを作成しましょう。myapp今回、Webpackの導入はyarnコマンドを利用します。yarnが入っていない方は先に導入しておきましょう。Homebrew」を利用したyarn導入方法は以下。yarn一応、今回利用するyarnのバージョンを確認しておきます。--version1.16.0それでは、以下のコマンドを実行してpackage.jsonを設置します。-y以下の内容でpackage.jsonが生成されました。"MIT"}それでは実際にWebpackを導入していきましょう。以下のコマンドでWebpackを導入します。Webpack4からはコマンドラインでの実行に「webpack-cli」が必要になったので、合わせて導入しています。--dev--devオプション(もしくは-Dオプション)を付けることで、devDependenciesにパッケージを追加しています。Webpack自体はコードの実行時に必要ないので、devDependenciesとして導入しています。詳しくは以下の記事あたりが参考になります。dependenciesいろいろ。addを実行すると、自動で「node_modulesディレクトリ」が作成され、そこにWebpack関連のファイルがダウンロードされます。プロジェクトをGitで管理する場合、「node_modules/」はGit管理に含めたくないので、以下のコマンドで.gitignoreに記述しておきます。.gitignoreまた。今回は開発をスムーズにおこなえるように開発用Webサーバーとして「webpack-dev-server」も合わせて導入します。--devそれでは、次はBabelの導入についてみていきます。Babelの導入Babelの導入をおこないます。--dev今回導入したパッケージは以下のとおりです。@babel/core:Babel本体@babel/preset-env:ブラウザ環境に応じて変換を自動でおこなうためのプリセットbabel-loader:WebpackからBabelを利用するためのツール「@babel/preset-env」「babel-loader」のGitHubリポジトリは以下です。webpack上記は「WebpackでBabelを利用する際に必要」ぐらいにとらえておけばOKです。これで新しい記述方法でJavaScriptを書けるようになりました。次にReactの導入をおこなっていきましょう。以下のコマンドを実行して、Reactの動作に必要なパッケージを導入していきます。--dev「@babel/preset-react」を導入することで、JSXの記法に対応したReactをBabelから利用できるようにしています。Reactの導入が完了しました。webpack.config.jsの設置Webpackを利用するために「webpack.config.js」を設置します。以下のコマンドでファイルを作成。webpack.config.js今回は以下のように実装しました。}};項目はそれぞれ以下のとおりです。mode:「development」指定でソースマップを出力、「production」指定でminify出力(※実行時に変更可)entry:トランスパイルをおこなう対象ファイルoutput:トランスパイル後のファイルの名前、ディレクトリの指定loader:babel-loaderを指定presets:プリセット(@babel/preset-envと@babel/react)を指定devServer:開発用Webサーバーの起点ディレクトリ、起動時に自動でブラウザを開く、など設定これでwebpack.config.jsが設置できました。実行コマンドを分かりやすくするために、package.jsonにscriptsを追加します。以下のようになりました。}}scriptsに「start」と「build」を追加しました。それ以外は特に変更はありません。上記のscriptsは自由に設定できるので、お好みで記述してみてください。サンプルの一例Reactを実行するため、サンプルファイルを設置してみます。dist/index.htmlそれぞれ以下のように実装してみました。</body></html>「html-webpack-plugin」を利用することで、HTMLの出力も同時におこなうことができますが、本記事では割愛しています。それでは、実際に実行してブラウザに表示させてみましょう。一通りのパッケージの導入が完了したので、実際に実行してみます。以下のいずれかのコマンドを実行して、Webサーバーを立ち上げます。start」のようにかんたんに実行することができます。「http://localhost:8080」にアクセスして、サイトが適切に表示されるか確認してみましょう。ビルドでの実行ビルドをおこない、直接index.htmlを開いて実行してみます。以下のいずれかのコマンドを実行。build上記を実行することで、「dist/main.js」が出力されます。index.htmlを開くと、サイトが表示されるはずです。以下のように表示されればOKです(webpack-dev-serverの場合)。これでWebpackとBabelを利用してES6などの新しい記法でJavaScriptを書くことができ、Reactを使ったモダンな開発などおこなうことができますね。Reactの導入から実行方法について見ていきました。本記事の方法では1つひとつ手動で導入していましたが、「create-react-app」というツールを利用すると、これらの初期設定がかんたんに完了できます。command.ただし、はじめのうちはWebpackやBabelの理解をおこなうために、手動で導入してみて、より各ツールの理解を深めていくのがいいかなと思います。今風のJavaScriptを書きたい方の参考になれば幸いです。ヒトコトokutani_t最近のフロント周りの管理で主流になりつつあるWebpack。これから仲良くしていこうと思います。Web開発のお仕事を募集していますフリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています(現在の業務量によってお受けできない場合もあります)。CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。(@okutani_t)1990年生。2016年8月にWebエンジニアとしてフリーランスに。プログラミング、カメラ、邦楽ロック、ハリネズミがすき。Portfolioをどうぞ。スポンサーリンクvdeepの人気記事Macを完全に初期状態に戻す方法iPhoneで「絶対に」やっとくべきキーボード設定3つ。超簡単だからみんなにやって欲しいよ“たった1つ”の超シンプル禁煙方法。これで僕はノンスモーカーになれたMacの容量を食ってる「その他」を調査してみたMacBookで複数モニターを使う方法。