2018の7日目は、株式会社エイチームライフスタイルでWebエンジニアをしている@turkeyzawaが担当します。はじめにここ最近、エイチームライフスタイルではフロントエンドにReactの導入を進めようという動きが活発になってきています。そこで、まずはReactを動かすための開発環境の構築から始められるように手順をまとめました。この記事はWebデザイナーや非エンジニアの方々にも読んでいただけるよう、なるべくゼロベースからの手順をまとめています。分かりづらい箇所があればコメントでどんどんご指摘ください。下記環境で動作を確認しています。18B75事前準備ここからは開発に必要なツールを準備していきます。インストールされている方は適宜読み飛ばしてください。本稿では$から始まる行を実行するコマンド、それ以外をコマンドの実行結果として記載しています。そのため、Terminalでは$から始まる行の$以降のみを実行してください。brewMacで利用できるメジャーなパッケージマネージャです。この記事ではMacユーザを想定しているためbrewを使用します。わかり易い記事がありますので、インストール方法は割愛させていただきます。リンク先を参考にインストールしてください。macOSにHomebrewをインストールnodeJavaScriptをマシン上で動かすために必要な実行環境です。ここではnodebrewを使用してインストールします。nodebrewとは?nodebrewとはnodeの複数のバージョンを管理してくれるツールです。nodeのバージョンを上げたいときや、プロジェクトによって使用しているバージョンが違う時など、バージョンを切り替えて使いたい場合とても便利です。以下のコマンドを実行してください。setup次に、nodebrewを使い始めるために以下のコマンドをTerminalで実行してください。bash以外のシェルを使用している方は適宜読み替えてください。~/.bashrc以下のコマンドでインストールされたかどうか確認ができます。~~~無事nodebrewがインストールされました。実際にnodebrewを使ってnodeをインストールしましょう。ここでは安定版を使用します。以下のコマンドを実行してください。stable正常にインストールされたかを確認します。現在(2018/12/7)はv10.14.1がインストールされますが、バージョンが違っていても大丈夫です。lsv10.14.1インストールされたnodeを使い始めるために以下のコマンドを実行してください。v10.14.1以下のコマンドでバージョンが表示されれば無事インストール完了です。--versionv10.14.1yarnnodeやJavaScriptから利用できるライブラリを管理してくれるパッケージマネージャです。以前はnpmを使ってグローバルな1パッケージとしてインストールしていましたが、今はbrewでインストールする方法に変わっています。以下のコマンドを実行してください。--without-nodenodeはすでに上記でインストールしているため--without-nodeオプションをつけてインストールします。以下のコマンドでバージョンが表示されれば無事インストール完了です。Startedここからは実際にReactの開発環境を構築していきます。わからないツール達webpackやbabelなど、名前だけは知ってる!という方は多いのではないでしょうか。Reactやここ最近のモダンなフレームワークなどを導入したい時は必ずと言っていいほどこれらのツールが絡んできます。これらのツールを自分でセットアップして動く状態にするためには、ある程度のツールの知識が求められます。Reactを使ってみたいだけなのにツールの使い方を覚える必要がある、この事実が非エンジニアにとってReactの勉強などの妨げになってきたのではと思います。そこで、今回の開発環境の構築ではFacebookが公開しているcreate-react-appというツールを使ってReactの環境を構築していきます。Facebookが公開しているReactの環境を構築するためのツールです。facebook/create-react-app実際に使ってみましょう。以下のコマンドを実行してください。36.98s.たったこれだけです。このコマンドを実行するだけで、前述したwebpackやbabelなど、必要なツールをセットアップしてくれた状態で環境をつくってくれます。作成された環境のディレクトリは以下のようになっています。yarn.lock開発環境を立ち上げるさっそく作成された開発環境を動かしてみましょう。以下のコマンドを実行してください。startブラウザ上で新しいタブが自動的に開かれ、以下のような画面が表示されているはずです。編集してみる無事に開発環境が立ち上がったのでサンプルページにある通り、動作確認もかねてsrc/App.jsを編集し、保存してみましょう。className="App-link"保存した後にブラウザを見に行くと......おや......?スタイルも編集してみましょう。100vh;ブラウザを更新していないにもかかわらず変更が反映されているではありませんか。このように、create-react-appで作成された環境ではJavaScriptやCSSを編集した後に、わざわざブラウザを更新しなくてもすぐに変更が反映されるため、とてもスピーディに開発を進めることができます。使わずに開発環境を構築する場合は自分で設定しないといけません。よって設定されているため実現できています。build、eslintなど様々な機能が予め設定されていますので、興味のある方はぜひ調べてみてください。startしましょう。おわりにかなりのボリュームとなってしまいましたが、最後まで読んでいただきありがとうございます。今あなたの目の前には、あなただけが好きに使える、あなただけのReactの開発環境が構築できているかと思います。今まで試したかったけれどできなかったことなどを思う存分発散していただければと思います。無茶をして環境を壊してしまっても大丈夫です。この記事のまとめを参考にしていただければ、数コマンドでまた新しい環境をつくることができます。開発環境はつくれたけれどこの後どう勉強を進めれば良いかわからない、そういった方向けのReact入門記事なども投稿していきたいと考えています。ついてもっと踏み込んだ内容を書きます。Appの始め方エイチームグループでは、一緒に働けるチャレンジ精神旺盛な仲間を募集しています。興味を持たれた方はぜひエイチームグループ採用サイトを御覧ください。https://www.a-tm.co.jp/recruit/npmやyarnでは、ライブラリのインストール先にグローバルかローカルを選択することができます。グローバルにインストールされたライブラリは、brewなどでインストールされたコマンドと同じようにTerminalなどで使用できるようになります。対して、ローカルにインストールされたライブラリはそのプロジェクト内でしか使用できません。requestStockLike17@turkeyzawa株式会社エイチームライフスタイルでWebエンジニアをしています。役割をMMORPGに例えるとDPS職。upLoginユーザーは見つかりませんでした。