プログラミング

JavaScriptフレームワークは何使ってる?自分はReact使ってます

投稿日:2019年5月30日 更新日:

HTML、CSSの勉強が一通り終わり、次はそろそろJavascriptに手を出そうと思っている人は多いと思います。また、これまでPHPやRails等サーバーサイドをメインでやってきた人が、フロントエンドの勉強をしたいなと思っている人もいるでしょう。

そんな方達が、まずはどれから手をつければ良いか、自分の経験や友人の意見、それにトレンド等も加味して纏めてみました。

Javascriptだけでゴリゴリ開発することは無い

まず、現在ライブラリー等を使わずにJavascriptをゴリゴリ書くことは殆ど無いのではないのでしょうか?少なからず自分はありません。SPAでないサイトを作成する際もjQueryは最低限組み込みます。

※SPAとはSinglePageApplicationの略で画面遷移時に画面全体を読み込まずに必要な部分だけを更新してアプリライクに作ったウェブサイトの事

さて、現在のJavascriptの主流のフレームワークはReactAngularVue.jsがあります。自分はゴリゴリのフロントエンド開発者ではないので、この3つ以外だと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の伸びが半端ないですね。

https://zendev.com/2018/06/19/react-usage-beating-vue-angular.html

これから何を使えば良い?

これまでの経験値、また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でいくのか決めたら良いかと思います。

最後に

中々一人で学習を進めていくのは厳しいと思うので、そんなときなオンライン学習等を利用すればモチベーションも維持しやすくなると思います。

色々な物を活用して、自分をうまくコントロールしながらスキルアップしていきましょう。

-プログラミング
-

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

あなたは技術志向のエンジニアになりたいのか?

あなたは技術大好きなエンジニアでしょうか?それとも、企画者と一緒にサービスを作っていきたいエンジニアでしょうか? 周りのエンジニアの方達を見てると、技術志向寄りか、サービス志向寄りかのどちらかに分かれ …

プログラミング教育必修化を考える。プログラミング的思考はなぜ必要なの?

2020年からプログラミング必修化されることは皆さんご存知だと思います。 文部科学省から出された「学習指導要領解説」によると「プログラミング的思考」を育むためというのが一つの指針としてあるようです。 …

僕が個人開発でサービスを作る理由と継続するためにしている事

こんにちは、はんぺらです。 皆さんはプログラミングを学んで何をしたいのでしょうか AIの開発チームに加わりたいのか、ロボットを作りたいのか、ただ、何となくエンジニアとして就職できればよいのか。 僕は今 …

プログラミング始めるならMac、windowsどちらを買えばいい?

プログラミングを始めたいんだけど、パソコン持ってないから買わないといけないんだけど、Macとwindowsのどっちがいいのかわからない。って疑問にお答えします。 お金に余裕があるならMacbookを買 …

プログラミング学習で行き詰まってる人。現状を打破する方法教えます

プログラミング学習をはじめようと決意して、実際に本を買って始めたは良いものの、今一理解できてる気がしない。 本は取り敢えず読み進めてるけど、意味不明なエラーが全然解決できない。心が折れそう。。。 その …

はんぺらのプロフィール

神奈川県在住、30代web系プログラマー

情報系の大学卒業後、工場勤務、引っ越し業者、アパレル販売員等を得て、web系のエンジニアに落ち着く。その後海外で3年ほど働き、帰国後日本でエンジニアを行いつつ、フリーランスになる機会を伺っている。