こんにちは。
タダケン(@tadaken3)です。
今年はフロントエンドをきちんと学んで、個人開発でサービスをリリースしたいと考えてます。いろいろ調べてみて、その中でもReactの学習を進めたいなと感じました。
調べていく中で感じたReactのメリットとReactの開発環境構築についてをまとめます。1
Reactとは
ReactはWebサイト上のUIパーツを構築するためのJavasciptのライブラリです。Facebook社が開発しておりで、Facebookを始め米国のいくつかの有名なWebサービスでも使われています。
Reactは「コンポーネント志向」という思想で設計されています。WEB画面は、ヘッダー、メニュー、商品一覧、ショッピングカートなどの様々なパーツに分かれて作らています。Reactではこららをパーツをひとつのコンポーネントとして扱います。様々なコンポーネントを組み合わせて、UIを構築します。
なぜ、Reactを学ぼうと思ったのか。 Reactを学ぶメリット
フロントエンド技術には、Reactの他にVueやAngularといったフレームワークやライブラリがあります。
Reactの特徴のひとつに「Learn Once, Write Anywhere」(一度学べば、どこでも書ける)という考えがあります。Reactには、プラットフォームをまたいでコードを活用できるエコシステムが存在しています。例えば、以下のような範囲でReactの知識を活かすことができそうだと感じました。
- WEBフロントエンド: React
- モバイルアプリ（iOS,Android）: ReactNative
- デスクトップアプリ（Mac,Windows): React + Electron
- サーバーサイド: Node.js + React
学習の目標として、サービスをひとりで立ち上げたいなと思っています。個人で開発することを考えているため、学習や開発に使える時間が平日の仕事終わりや土日に限られています。
「Learn Once, Write Anywhere」の考えにより、Reactに加えて、Node.jsやelectronを学べば、javascriptでかなりの範囲をカバーすることができます。効率よく開発をすすめることが重要な個人開発において、非常に大きなメリットに感じました。
学習のための戦略
また、本業がデータアナリストであり、フロントエンドの業務経験は全くありません。自分のまわりに詳しい人がいるわけでもないので、基本独学で、Reactを習得していくことになります。
Reactはフロントエンドのライブラリとしては、比較的歴史があり、書籍やネット上の情報が充実している印象があります。このあたりもReactを学ぼうと思ったメリットです。
Reactを学習するための戦略としては、inkdropというメモアプリをひとりで開発しているTAKUYAさんのブログを参考にしました。
上記のブログ記事を参考に
- まず、入門書を写経して、基本を学ぶ
- 基本が理解できたら、有名なプロダクトをForkして、開発のノウハウを盗む
という流れで学習を進めて行くつもりです。
Reactの開発環境を構築する
ということで早速、Reactの開発環境を構築していきます。
Node.jsのインストール
まずは、Reactの開発環境の土台作りです。Javacriptの処理系であるNode.jsをインストールします。Macを使用しているのでHomebrewを使っていインストールしました。
$ brew install node.js
$ node -v
v9.3.1
Javasriptのライブラリやツール類はnpmというパッケージ（ライブラリ）で配布・管理されています。npmパッケージのインストールはnpmコマンドで行います。npmコマンドはNode.jsと一緒にインストールされています。npmのバージョンを確認します。これで土台が整いました。
$ npm -v
v5.3.0
create-react-appを使って、Reactの開発環境を構築する
Reactの開発環境は、Facebook製ツール「create-react-app」を使うことにしました。コマンド一発でReactの開発環境を構築してくれるCLIツールです。参考にしたのは以下の記事です。
以下のコマンドでグローバルにcreate-react-appをインストールします。
$ npm install -g create-react-app
create-react-appがインストールできたら、create-react-appコマンドが使えるようになります。
create-react-appコマンドの後にこれから作成するプロジェクトのディレクトリ名を指定して、コマンドを実行します。
$ create-react-app my-first-app
create-react-appコマンドを実行すると、指定したディレクトリ名のディレクトリが作られ、その中に開発に必要なビルドツールや構文チェックツールがインストールされます。
作成されたプロジェクトのディレクトリに移動します。
$ cd my-first-app
以下のコマンドを実行してみます。
$ npm start
すると、サーバーが立ち上がります。
http://localhost:3000/にアクセスすると、以下のページが表示されます。
これでReactの開発環境が整いました。srcディレクトリ内のApp.jsを変更すると、ブラウザの画面が更新されます。さっそく、じゃんけんアプリを試しに動かしてみました。
まとめ
Reactを学ぶメリットとReactの開発環境についてまとめました。今後はReactの要素を学び、学習した内容をブログにアウトプットとしてきたいと思います。
読者登録をお願いします
本ブログではプログラミングについてボクが学んだことを公開しています。よろしければ読者登録していただけると更新の励みになります。ぜひ一緒にプログラミングを学びましょう。
-
フロントエンドは全くの初心者なので、間違えなどありましたらご指摘いただけますと幸いです。↩
