HTML、CSSの勉強が一通り終わり、次はそろそろJavascriptに手を出そうと思っている人は多いと思います。また、これまでPHPやRails等サーバーサイドをメインでやってきた人が、フロントエンドの勉強をしたいなと思っている人もいるでしょう。
そんな方達が、まずはどれから手をつければ良いか、自分の経験や友人の意見、それにトレンド等も加味して纏めてみました。
Contents
Javascriptだけでゴリゴリ開発することは無い
まず、現在ライブラリー等を使わずにJavascriptをゴリゴリ書くことは殆ど無いのではないのでしょうか？少なからず自分はありません。SPAでないサイトを作成する際もjQueryは最低限組み込みます。
※SPAとはSinglePageApplicationの略で画面遷移時に画面全体を読み込まずに必要な部分だけを更新してアプリライクに作ったウェブサイトの事
さて、現在のJavascriptの主流のフレームワークはReact、Angular、Vue.jsがあります。自分はゴリゴリのフロントエンド開発者ではないので、この３つ以外だとjQueryくらいしか使用した事がありません。
それ以外にもBackbone.js、Ember.js等など調べれば沢山出てくると思うので、気になった方は調べてみるのも良いかと思います。
jQueryと今主流のフレームワークってどう違うの？
さて、2010年頃から段々とJavascriptのフレームワークというものが出始めてきたのですが、そもそもそれまで主流で使われてきたjQueryとは何が違うのでしょうか？
サイトへの組み込み方違う
JQueryはHTMLのヘッダー等でJQueryを読み込んで、javascriptでコーディングさえすれば、直ぐにブラウザ上で動作を確認できます。
ですが、Javascriptのフレームワークはそう簡単にはいきません。まず、開発環境の構築からやります。そして、開発環境の構築ができたら、やっとそれぞれのフレームワークのルールに則ってプログラミングができる環境が整います。プログラミング言語はJSXやTypescript等を使います。プログラミングが完了したらビルドを行い、ブラウザが読み込めるjavascriptに変換し、それをHTMLに読み込ませて初めてブラウザ上で動作を確認できます。
フレームワークだとSPAが容易に作成できる
フレームワークを使用する最大のメリットは何よりも、SPAになると思います。SPAとはシングルページアプリケーションの略で、画面遷移を行わずに、必要な部分だけを更新して、アプリライクに作ったウェブサイトのことです。Jqueryだけでも頑張ればそんなサイトは作れるとは思いますが、かなり骨が折れると思います。僕にはムリゲーです。そこで、React、Angular、Vue.js等を活用して、SPAを簡単に作りましょうって事です。
React、Angular、Vue.jsの特徴
Reactって？
ReactとはFacebookとコミュニティが開発しているJavascriptのフレームワークです。
Webアプリケーションのユーザーインターフェース部分を容易に構築することができますし、Reactルーター等を使用すればルーティング等も行えるので、大規模サイトを構築することも可能です。
Instagram等で使用されていて、よく使用される開発言語はJSXです。
Angularって？
AngularとはGoogleコミュニティが中心に開発しているReact同様のJavascritのフレームワークです。
フルスタックフレームワークでこれ単独でフロントエンドでやりたい事はある程度はできちゃいます。
AngularJSはAngularの前身なんですが、似て非なるものなので、調べ物をする際はAngularJSかAngularのどちらについて書いてる記事なのかキチンと区別して調べないと大変なことになっちゃいます。たまにAngularなのにAngularJSと書いてる記事があったりするので混乱の元です。。。
Adwords等で使用されていて、推奨される開発言語はTypescriptになります。
Vue.jsって？
Vue.jsとはエヴァン・ヨーというGoogleでAngularJSの開発に関わった方によって開発されました。
AngularJSの好きな部分を抽出して、余分な機能を省いて作るっていうのが理想としてあったみたいです。
githubでのスター数は？
2019年5月31日時点で、Vue.jsがトップみたいです。
facebook/react 130k
angular/angular 48.6k
vuejs/vue 140K
下記記事によると、2018年6月にVue.jsがReactを抜いたそうです。Vue.jsの伸びが半端ないですね。
これから何を使えば良い？
これまでの経験値、またSPAを作りたいかどうかで変わって来ます。
PHP、Rails等、サーバサイドがメインの人
これまで、サーバーサイドをメインでやっていた人が一番直感的に理解できるのはAngularだと思います。
MVCモデルやRoutingの設定方法などが、Reactよりも直感的に理解できると思います。実際に自分もそうでした。
また、オールインワンで開発でき、公式サイトの情報も豊富なので、公式サイトを見ればある程度はゴールに辿り着けると思います。
ただ、今はReactに人気を持っていかれてしまった印象です。インターネット上の情報もReactの方が豊富ですし、ReactNativeを使えば、ネイティブアプリも作成することができるので、開発者としての幅も広がりそうです。
ですが、Reactはオールインワンではないので、やりたい事に応じて自分で部品を選んでいかなければいけないですし、Reduxという強敵もいますので、学習コストはAngularより高いと思います
ただ、サイトに埋め込む一部品を作るだけなのであれば、vue.jsがより簡単に、また直感的に理解できると思います。
ですので、SPAでサイトを作成したいと思われている方であれば、React。Jqueryの代わりで取り敢えず流行りのjavascriptフレームワークでも触っとこう位でしたら、Vue.jsをオススメします。
HTML、CSSのコーディングがメインの人
プログラミングのスキルが無い方が最初に学習するとしたら断然vue.jsをオススメします。
SPAを最初から作ろうとするのは結構ハードルが高いと思うので、サイトの一部分をVue.jsで置き換えたりしてみて、まずはjavascriptフレームワークとは？を理解して先に進んだ方が、モチベーションも保てると思います。
いきなり高い壁を登ろうとしても、挫折するだけです。それからSPAを作りたいとなったら、その時にReactなのかAngularなのか、そのままVue.jsでいくのか決めたら良いかと思います。
最後に
中々一人で学習を進めていくのは厳しいと思うので、そんなときなオンライン学習等を利用すればモチベーションも維持しやすくなると思います。
色々な物を活用して、自分をうまくコントロールしながらスキルアップしていきましょう。
