• フリーランス、エンジニアの求人案件TOP
  • フリーエンジニアなびとは
  • ご利用ガイド
  • ジョブプランナー紹介
  • アプリ塾
  • お問い合わせ
  • 新規会員登録

フリーランスエンジニア・フリーエンジニアになる方法、スキルアップ・キャリア形成、確定申告の方法など、お役に立つ情報をお届けします。

フリーランスエンジニアお役立ちブログ
  • メルマガ登録はこちら
  • 無料会員登録はこちら

Reactをマスターして、今風フロントエンドの実装をしよう!

ここ数年、Web側で一定のクオリティを担保するために、jQueryを使ったフロントエンド実装は欠かせないものとなりつつあります。jQueryは導入が容易かつ、様々なライブラリが用意されていることもあり、これまで多くのフロントエンドエンジニアの助けになってきました。

しかし、jQueryであらゆる処理を済ませてしまおうと試みると、どうしても行数が増えてしまい、複雑なソースコードになりがちとなってしまいます。どうせJavaScriptで書くことになるのであれば、最初からJavaScriptで書いた方が良いという方向性から、JavaScriptでHTMLを出力するフレームワークが登場し始めました。中でも、2011年にFacebookが開発してきたフレームワークで「React」が有名です。

今回は、Reactを初めて聞いた OR 聞いたことはあるけど、まだ使ったことがないというエンジニアに向けて、「Reactとは、一体どんなものなのか」をクリアに理解できるように、分かりやすく説明していきたいと思います。

そもそも、Reactって

ReactはWebサイトを構築する上で必要なUI実装を担う、JavaScriptライブラリの一つです。2011年にFacebookがオープンソースプロジェクトとしてスタートしましたが、今では数多くの企業に採用されています。

Reactの特徴の一つに「コンポーネント志向」という考え方があります。HTMLで実装する際は、class分けや、HTML5タグで調整していたのですが、Reactでは、ヘッダー、メニュー、フッター、カードをそれぞれコンポーネント(パーツ)ごとに分けて作られています。こうしたコンポーネントは一つのプロジェクトに限らず、別のプロジェクトを始める際にも再利用できることから、エンジニアらしい構造として好まれています。

Reactを使う理由・メリットについて

Reactを使う大きな理由は、前述したようにパーツ単位で書くことができるため、jQueryのようなどうしても長くなってしまっていた文書を簡潔化できる一点にあります。これは、Virtual DOMとも呼ばれ、HTML(DOM)をJSXという書き方によって定義することによって、オリジナルのDOMを作成し、これをサイト内で再利用することができるのです。

また、Reactには「React Native」と呼ばれるスマホアプリをビルドすることができるフレームワークもまた登場しています。React Nativeは、Reactと同じルールでコードを書くことができるため、Reactが書けるようになればスマホアプリも同様に開発が可能となることになります。また、React NativeはiOS、Androidの両方を同時にビルドできるため、スタートアップ開発に最適だということになります。

Reactの開発環境を構築する

さっそく、Reactの開発環境を構築していきます。

まずは、Node.jsをインストールします。Node.jsは、スケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動のJavaScript環境です。Macを利用しているのであれば、Homebrewのコマンドからインストールが可能です。

$ brew install node.js

また、Reactで使うライブラリやツールなどは「npm」コマンドでインストールすることになります。npmコマンドはNode.jsをインストールした際に一緒にインストールされているはずです。それぞれ、インストールされているか確かめる方法は下記になります。

$ node -v
$ npm -v

コマンドを叩いて、バージョンがそれぞれ表示されれば問題ありません。Nodeのバージョンは、ライブラリによって合わせていく必要があるので、適宜確認するようにしましょう。

続いて、Reactの開発環境を構築していきます。ここでは、「create-react-app」と呼ばれるReact環境をコマンド一発で構築してくれるCLIツールが推奨されています。

$ npm install -g create-react-app

これでインストールが無事完了すると、create-react-appが使えるようになります。

$ create-react-app test-app

コマンドを実行すると、指定したしれクトリ名のディレクトリが作られ、開発に必要なビルドツールや構文チェックツールがインストールされます。
続いて、test-appのディレクトリに移動し、「npm start」とコマンドを打つと、自動にReactが立ち上がります。

いかがでしたでしょうか。Reactをまだ触ったことのないというエンジニアの方々も、ぜひこの機会にReactでアプリケーション開発に挑戦してみてはいかがでしょうか。