現場では、純粋なJavaScriptのみを使ってフロントエンドを実装することはあまりなく、何らかのフレームワークの上での実装が行われています。
未経験からエンジニアを目指すのであれば、少なくとも1つのフレームワークは「使える」ようになっておき、そのフレームワークでUIを組み立てられるようになっておいたほうがいいです。
JavaScriptはGithub上で最も盛んにOSS活動が行われている言語であり、フレームワークもたくさんのものがあります。
今回ではそのすべてを紹介することはせず、実務で出会うであろう3つのフレームワークを紹介します。
Contents
長年使われてきた、信頼と実績のjQuery
The Write Less, Do More,(より短いコードでより大きなことをやろう)
jQuery(ジェイクエリー)は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリです。2006年1月に最初のバージョンがリリースされました。
厳密にはライブラリとフレームワークは違うのですが、今回は定義詳細部分には触れません
2006~2014年あたりに爆発的な人気を誇り、様々なプロダクトが作られました。
jQueryで作られたUIパーツは検索すればいくらでも出てくるので、その気になればインターネットで拾ってきたパーツだけでUIを構築することができます。
また、CSSフレームワークで有名なBootstrapは裏でjQueryを使ってポップアップ画面などを動かしています。
JavaScriptのトレンドは今ではReact,Vueなどの言語が優勢ですが、今でも現場ではjQueryを見ることになると思います。習得も簡単なので、覚えておいて損はありません。
Facebook製のOSSライブラリReact.js
A JavaScript library for building user interfaces(ユーザーインタフェースを構築するためのJavaScriptライブラリ)
React.js(React)は、facebookによって開発されたJavaScriptフレームワークです。facebookという後ろ盾はあるものの、ソースコードは公開されているので誰でもフレームワークの中身を見ることができます。
React.jsは仮想DOMという仕組みによってデータ・コンポーネントを保持しています。あるコンポーネントの値が変わったら、従属する他のコンポーネントの値も自動で変わってくれる高性能な仕組みです。(jQueryではその処理をいちいち書かなければいけませんでした)
ただし、環境構築がjQueryの場合と比べて難しいので、慣れていないと環境構築でハマってしまうこともありますので注意してください。
後述するVue.jsとシェアを争っていますが、より厳密に書きたい方にはReact.jsを使用するのをオススメします。
急成長中でありながら厳密にもシンプルにも書ける柔軟性Vue.js
The Progressive JavaScript Framework(漸進的なJavaScriptフレームワーク)
2018年急速に使用者を伸ばしているのが中国製のOSSフレームワークVue.jsです。
チュートリアルが非常にシンプルな上、日本語訳までされていて読みやすいのが嬉しいポイントです。
「Progressive」の名の通り、既存のjQueryで保守してきたwebアプリにもすぐ入れられることができます。
もちろん、条件が許せば、すべてをVueのアーキテクチャで管理することができます。
VueもReactと同じく仮想DOMの構造を持っています。Vueチュートリアルで簡単な仕組みを試すことができるので、ぜひ試してみてください。
フレームワークまで教えてくれるプログラミングスクールはあるの?
先程紹介したReact.jsに関するカリキュラムがあるスクールは調べてみたところなさそうでした。
プログラミングスクール「TechAcademy」ではjQueryに対応
オンラインスクール「TechAcademy」の「フロントエンドコース」では、jQueryを使った開発を学ぶことができるようです。
TechAcademyへの申込みは↓↓こちら↓↓
「Tech Boost」がVue.jsに対応
人材系ベンチャーBranding Engineerが展開するプログラミングスクール「Tech Boost」 では、最近ではVue. jsに対応しました。
まとめ
- JavaScriptでメジャーなフレームワークは、jQuery, React, Vueの3つ
- TechAcademyがjQueryに対応
- Tech BoostがVue.jsに対応