更新日 2021.07.30

#9 jsフレームワークを使う(vue.js)

そもそも「フレームワーク」とは

本CBCの応用編を一通り受講して頂いた方は記憶にあるかもしれませんが、Web制作の界隈ではCMSと並び「フレームワーク」を導入したアプリケーション開発が主流になっています。

「フレームワーク(framework)」とは、読んで字のごとく「枠組み」のことを指します。

Web制作の現場において言えば、「アプリケーション開発を楽に行えるように用意された、プログラム等のひな形」と置き換えることができます。

アプリケーションを実装するうえで考慮しなければならない様々な機能を予め内包しているため、 本来であれば真っ新な状態から始めなければならない実装工程をぐっと短縮することができます。
また、それぞれの機能が半完成品として内包されている為、実装する機能の内容に応じてカスタマイズを加えることも可能です。

ほぼ完成したサービスを提供してくれるCMSと比べると、自由度の高さ故に学習コストがかかるのがネックですが、それを踏まえてでも導入する価値がフレームワークにはあります。

jsフレームワーク

フレームワークといっても様々で、基本的にはプログラミングに使用する言語に合ったものを選択します。
Javaという言語であれば「Struts」や「Spring」、PHPであれば「CakePHP」や「Laravel」といった具合にラインナップがあり、その中から最適なものを選択するのが一般的でしょう。
本講義においては、その中でもJavaScript用に開発された「jsフレームワーク」について取り上げます。

jsフレームワークはJavaScriptで作成されたフレームワークです。
JavaScript自体がクライアントサイドで動くプログラミング言語であることから、フロントエンドエンジニアと呼ばれる職種が触れることが多いでしょう。

DOMの操作や、イベントのハンドリング、データのバインディングやルーティング等、1から実装しようと思うと大変骨が折れる機能を最初から備えてくれています。

#2 vue.js

有名なjsフレームワーク

jsフレームワークが何なのか分かったところで、現在フロントエンドエンジニア界隈で流行っているjsフレームワークを見てみましょう。

AngularJS

Google社が提供しているフルスタックのjsフレームワーク。
フルスタックなので、作り自体が堅牢であり、最初からアプリケーション開発に必要と思われる機能はほぼ全て備わっているため、大抵の事は全て実現可能なポテンシャルがあります。
多機能な為、大規模なアプリケーション開発には最適ですが、反面、小規模なサービスに使用するにはオーバースペックな感があります。
使用している言語がJavaScriptではなくTypeScriptというものであり、書きっぷりが若干異なるため、その分の学習コストがかかります。
また、Angular独特の実装ルールが存在するため、諸々の学習コストが非常に高くなってしまうのがネックです。

React.js

Facebook社が提供している、主に画面周りの表示系処理機能が優秀なフレームワーク(※厳密には、フレームワークみたいなライブラリ)。
AngularJSよりも比較的学習コストが低く、導入しやすいという点が好まれています。
ライブラリが豊富に存在するため、開発するアプリケーションの規模間に合わせて必要な機能を取捨選択できる点も良いポイントです。
しかし裏を返せば、必要な機能を実装するためのライブラリを取捨選択する知識が必要となってくる為、その点初学者向けではないかもしれません。
また、JSXという記法を採用していて、jsファイルの中にHTMLタグを記述していきます。これを感覚的に嫌がる人もいるとか(特にデザイナー上がりの方には嫌われる傾向があるようです)。

vue.js

元GoogleのAngularJS開発チームだったEvan You氏が提供している非常にシンプルなjsフレームワーク(※こちらも厳密にはフレームワークみたいなライブラリ)
Reactのようなシンプルさがあり、部分的にも導入しやすく、また公式サイトも日本語で解説を行ってくれている為、導入のハードルが非常に低く設定されています。
フレームワーク群を組み合わせれば、Angularの様に大規模開発にも使いやすいという点も高評価を集めているポイントとなっています。
フロントエンドンジニア界隈において、今一番人気で勢いのあるjsフレームワークと言っても過言ではないでしょう。

本講義では「vue.js」を学んでいきます。
コピーしました
RSS https://cbc-study.com/rss.xml 
質問などあればSlackで! 誰でも無料でできます。
勧誘とかしないよー
cbc-study.slack.com