フォーカスしたいもの
近年のWeb制作には、JavaScriptフレームワーク選びがとても大事な要素のひとつとなっています。
JavaScriptで記述するよりもはるかにコードを短縮でき、動作も軽くなるフレームワークは現在のWeb制作には必要不可欠な存在とも言えます。
しかしJavaScriptのフレームワークの種類はとても多く、「どのフレームワークが1番使いやすいのか」「扱いやすいのか」という段階で迷ってしまいます。
このページでは、多くのJavaScriptフレームワークの中で耳にすることが多く、人気も高い「React.js」をご紹介します。
React.jsの特徴やメリット・デメリット、他のフレームワークとの比較、学習のポイントなどを解説していきます。
ぜひ最後まで読んで頂き、React.jsに対しての知識を深め、Web制作に活用してください。
React.jsとは？
React.jsとは、UI（ユーザーインターフェース）の制作に特化したJavaScriptライブラリです。
React.jsは、SPA（シングルページアプリケーション）やモバイル端末のアプリケーション開発における土台の作成として使われることが多いです。
Facebook社とそのコミュニティにより開発、リリースされました。
React.jsの特徴やメリット
React.jsが多くの有名企業で利用され、根強い人気を誇っている理由として、他のJavaScriptフレームワークなどには真似できない、非常に優れた特徴やメリットを持っている点があげられます。
JSX 記法（HTMLとJavaScriptが合わさったもの）
Reactの一番の特徴として、JavaScriptの中にHTMLのような記法で記述する点が挙げられます。
その事をJSX記法と言います。
React.jsではHTMLでも見かけるタグを活用することがあります。
HTMLとJavaScriptがひとつになったものが、React.jsの最も特徴的な部分です。
HTMLとJavaScriptが近い距離でいられることによってJSONなどのデータを、HTMLに反映することもかなり簡単に行えます。
JSX記法を避け、JavaScriptのみでReact.jsを使用することも可能です。
jQueryとの違い
jQueryとReact.jsでは大きな違いがあります。
それは、HTMLを自分で更新する必要があるかないかという点です。
React.jsは変数の値に対してJSXを記述するため、データの更新をすることで自動的にHTMLが更新されます。
jQueryの場合、データの更新作業とHTMLの書き換えを同時に行わなくてはいけないため、コードが難解になりがちです。
それに対して、React.jsはデータの更新も自動で行え、コードの管理も簡単なのです。
高速稼働
React.jsでは、仮想DOM（ドキュメントオブモデル）という技術が使用されています。
仮想DOMは、Webページの一部分を更新したい時に全ページを更新するのではなく、変更された一部分だけを変更するという画期的な仕組みです。
仮想DOMのおかげで、高速で表示を切り替えることが可能となっています。
コンポーネント指向
他のJavaScriptフレームワークなどと同様に、React.jsではHTMLの一部を切り取って、その内容を簡単な記述だけで呼び出すことが可能です。
部品として定義することで、再利用が可能となりコードの記述が簡素化されメンテナンスコストを下げることにも繋がります。
大規模な開発に向いている
規模の大きなWeb開発にとって、一番重要なことは管理が徹底できるかどうかです。
Webサイトのページ数が増加すると、サイト内に存在するコンテンツを可能な限り同一サイズにする等の工夫をしなければ、作成する時間やチェックする際の工数も膨大になってしまいます。
各Webページ間でのページ遷移、コンテンツを介したページ遷移が多くなればなるほど、処理は複雑化していきます。
しかしReact.jsは、複雑な条件の組み込みが可能な点や設計自体の見やすさ、カスタマイズ性の高さなどの特徴から、上記のような問題点も比較的容易に行えます。
React.jsは大規模なWeb開発にも十分耐えることができるライブラリなのです。
React.jsのデメリット
さまざまなメリットのあるReact.jsですが、もちろんデメリットも存在します。
日本ではまだReact.jsの認知度が低い
世界的にも日本でもReact.jsの人気は高まっています。
近年では日本でもVue.jsと肩を並べる存在として認知・利用されているReact.jsですが、先進的な機能を導入したり、できることの幅を拡張したりしているため、少し敷居が高いのも事実です。
Vue.jsは安定的かつシンプルで学習コストの低さから、実際にWeb制作の現場でも多く利用が進んでいます。
しかしReact.jsは未だ発展・成長をしている状態であり、学習コストが高くなることもあり、日本ではあまり活用事例が少ないのも事実です。
React.jsに向かないWebがある
特徴・メリットの部分で解説していますが、React.jsは仮想DOMという機能を持ち合わせています。
しかしこの機能は、メモリを大量に使用する点やWebサイト等への初期アクセス時に膨大な量のデータ読み込みが必要となります。
仮想DOMの機能を活かせるWebサイトであればReact.jsの特徴を最大限に活かせるので良いのですが、ニュースサイトなどの記事を読むだけのサイトを、React.jsを使って開発してもほとんど意味がありません。
むしろ読み込みの時間が多くなってしまうため、初見のユーザーには不満しか与えないといったことになりかねません。
React.jsの書き方フロー
React.jsは他と比較して覚えることの少ないライブラリです。
とてもシンプルな構造になっているため、要点を押さえていけばストレスなくコードを書くことが可能となります。
JSX 記法を理解することから始まる
最初の難関であるJSX記法。JSX記法はHTMLをタグと同じように記述できますが、HTMLとの明確な違いがあります。
以下、覚えておくべき3つのポイントを解説します。
タグはclassName
React.jsでは、JavaScriptの文法であるclassと区別するために、HTMLタグのclassを「className」と記述します。
|
HTMLタグに変数や数値などを入れる時の注意点
React.jsでは、HTMLタグに文字以外の変数や数値などを入れる際に「{}」を用います。
|
1. const str =’test’; 2. <div className={str} contentEditable={false}></div> |
箇条書きリストの出し方
「ul」や「ol」などのリストの中でアイテムをループして表示したい場合、以下のような構文が用いられます。
|
const color = [‘赤’,’黄色’,’青’,’緑’]; <ul className=”color”> {color.map(item => <li>{item}</li>)} </ul> |
変数を理解する
次に変数を理解していきましょう。変数とはプログラムのソースコードにおいて、データを読み書きする記憶領域のことを意味する言葉です。
React.jsの代表的な変数に「props」と「state」というものが存在します。
props
propsは、外部から注入される変数で、親コンポーネントから子コンポーネントへ値を渡すための仕組みです。
親コンポーネントが子コンポーネントを指定する時、propsを用いることで子コンポーネントに値を渡すことができます。
主な使い方として、子コンポーネントは「親から値をもらう時にpropsを定義」します。親コンポーネントの場合、「子コンポーネントを指定する時に、子に渡したい値を設定する」というものとなります。
propsで渡すことが可能な値は文字列・スタイル・イベントなどです。propsを用いる利点は、1つのコンポーネントをさまざまなシチュエーションで流用できることです。
state
対してstateは各コンポーネントが所持し、コンポーネントの状態を管理する仕組みのことを意味します。
コンポーネント上でやりとりされる情報を管理し、その管理した状態の変化によってstateの値を変更できます。
ライフスタイルについて理解する
ライフスタイルとは、コンポーネントが作成されてから削除されるまでの間の一連の流れのことを指す言葉で、React.jsではこのライフスタイルの間のタイミングで処理を行うためのメソッドが準備されています。
生成時、更新時、消滅時それぞれのタイミングで用いられるメソッドを紹介していきます。
生成
コンポーネントを呼び出した時、「constructor」が呼び出されます。constructorとは「class」の初期化メソッドです。
次に「getDerivedStateFromProps」というメソッド。
親コンポーネントから渡されたpropsを計算し、自身の「state」を導き出すためのものです。
更新
コンポーネントの更新時のメソッドです。
内部のstateが変更された際、または親コンポーネントから新たなpropsが送られてきた時、コンポーネントの一連の更新処理がされます。
生成時と同様に「getDerivedStateFromProps」が実行された後、コンポーネントを再度書き出す必要があるかどうかを判定するための「shouldComponentUpdate」というメソッドが必要です。
再度書き出しが必要である場合には、メソッドの中でtrueを返します。
書き出しをしたくない場合はfalseを返すこととなります。
消滅
仮想DOMからこのコンポーネントが消えた瞬間に、「componentWillUnmount」というメソッドが自動的に実行され、その後実際の DOM から削除されます。
React.jsを導入している有名なサービスや会社
ここでは実際にReact.jsを用いて作られたWebサイトを5つご紹介します。
Instagram（インスタグラム）は、世界的にも日本国内でも圧倒的人気のSNSです。写真や動画を投稿したり、誰かが投稿した写真や動画を見ることがメインとなります。
Netflix
Netflix（ネットフリックス）は、ドラマ・映画などの月額制ストリーミングサービスでず。登録メンバーは、登録したデバイスを用いていつでもドラマや映画などを視聴できます。
abema TV
多種多様な番組を提供しており、自分で見たい番組を選んで視聴することができます。基本的な視聴方法としては、あらかじめ配信時間の決まった番組を視聴する、テレビ番組と同様の視聴スタイルとなります。
有料会員になることで、好きな時間に好きな番組を選んで視聴する事も可能です。
世界的に最も知名度のあるSNSで、他のSNSと違い実名での登録がベースという一風変わった存在です。
しかし、それにより個人間のつながりやリアルな場での交流にもFacebookが不可欠となりました。
楽天市場
日本では1位、2位を争うECサイトで、バーチャルモールをイメージしたサイトデザインとなっています。
商品の販売以外にも、旅行や保険、不動産なども取り扱っています。
Vue.jsなど他のフレームワークとの違いとは？
JavaScriptのフレームワークであるVue.jsやAngularJSとの違いを簡単に解説します。
Vue.jsは、シンプルなコード入力で開発が可能なため、学習コストも比較的低く、初心でも簡単に利用可能なフレームワークです。
AngularJSは、Vue.jsと構文が似ていますが、学習コストが比較的高めです。
またAngularJS（Angular 1）とAngular（Angular 2）では仕様が大幅に異なるため、習得するためにかなりの時間を要してしまうことでしょう。
Vue.jsは中～小規模開発に向いているJavaScriptフレームワーク、React.jsは大規模開発と相性の良いJavaScriptライブラリという住み分けになるでしょう。
React.jsの導入方法
React.jsのことがある程度理解でき、「実際に触ってみたい！」となったら自身のPCにReact.jsを導入するところから始めます。
Node.jsを導入する方法が便利
React.jsを使うにはNode.jsというツールが最も適しています。
Node.jsとは、Webブラウザでしか動かせなかったJavaScriptを、サーバーサイドで動かすためのツールです。
Node.jsは上記URLよりダウンロード可能です。
Create React Appをインストール
Node.jsのインストールが終わったら「Create React App」のインストールも行います。Create React Appは、難しい設定などをしなくてもスムーズにReact.jsを導入できるツールです。
慣れてきてより細かい設定が必要になると、Create React Appでは難しい場合がありますが、「まず使ってみたい」という人であればCreate React Appで全く問題ありません。
https://ja.reactjs.org/docs/create-a-new-react-app.html
上記の公式サイトに導入手順の詳細がありますが、以下のコマンドをターミナルに入力するだけでReact.jsの環境構築は完了となります。
|
1. npx create-react-app my-app 2. cd my-app 3. npm start |
React.jsの学習の進め方やポイント
Vue.jsと比較するとReact.jsは学ぶためにある程度の時間が必要です。ここでは、簡単にReact.jsの効率的な学習の進め方を紹介します。
JavaScriptの学習（復習）
まずは自身のJavaScriptのレベル感を把握することから始めましょう。
React.jsの教材はほとんどがJavaScriptのES6以降で書かれているものがほとんどです。
ES6の機能の理解や書き方を知らない状態でReact.jsを学ぼうとしても、理解するのが難しい部分もあるでしょう。
JavaScriptは、映像学習講座やJavaScriptの書籍などを購入して学習するのがおすすめです。
React.js関連の書籍で学習する
自分のJavaScriptの理解度が一定数担保できている状態であれば、React.jsを学び始められます。
React.jsに関する書籍を購入し、読みながら実際に自分自身でReact.jsを使いながら開発をしていきましょう。
書籍を読みながら、実際にコードエディターでReact.jsに触れつつ、学んでいきましょう。
時には自分自身で「こういうことをしてみたい」と思ったことを頭の中で組み立て、実際にコードを書いてみることもおすすめです。
React.jsの映像学習講座を購入し、最短で身に付ける
書籍を読みながら、自分でWebサイトやアプリなどを作るのが技術を身に付けるためには効率の良い方法です。
とはいえ書籍だけでは、調べるだけで時間が掛かってしまい、飽きてしまう可能性も考えられます。
そんな時は映像学習講座などでReact.jsの入門講座や応用編などの講座を購入し、学習していきましょう。
講座の中では実際にアプリを作りながら勉強をしていく流れになっているので、楽しみながら機能なども理解していくことが可能です。
React.jsまとめ
React.jsは、根強い人気があり、多くの有名企業が利用しています。
しかしReact.jsはVue.jsと比較すると、学習コストが高く敷居が高いJavaScriptライブラリという点は注意が必要です。
フロントエンドエンジニアとして、React.jsを理解し使いこなせる状態になれば、大規模開発でも活躍できることでしょう。
日本でもReact.jsを用いているWebサイトは年々増えており、React.jsの市場での価値も比例してたかまっています。
React.jsに関心があるのなら、ぜひ学習し自身のスキルアップに繋げ、さまざまな開発が可能なエンジニアを目指しましょう。
デパート採用情報
株式会社デパートでは一緒に働く仲間を募集しています
