索引

  • フレームワークとは
  • 主な JavaScript フレームワーク
  • ライブラリとフレームワーク
  • Vue.js の特徴
  • Vue.js を利用するための準備

フレームワークとは

本格的なアプリを開発していくと、どこかで似たような問題に遭遇することはよくありますが、これらの問題を場当たりに解決していくのは望ましくありません。

また人によってコードが散乱するのも良くありません。

かといって、開発現場で定石を一から検討し直すのは無駄なことです。

そこで登場するのが、フレームワークです。

フレームワークとは、良くある定石や設計面での方法論を「再利用可能なクラス」としてまとめたものです。

要は設計開発で良く利用するコードを予め用意しているものがフレームワークで、アプリ開発者は、フレームワークが用意する枠組みに沿って、固有のコードを書き加えていくことによってアプリを組み上げることができます。

主な JavaScript フレームワーク

JavaScript フレームワークとは、何もVue.js だけではありません。Vue.js は代表的な JavaScript フレームワークではありますが、唯一のというわけではなく、近年 JavaScript では、様々なフレームワークが提供されています。

以下が代表的な良く目にする JavaScript フレームワークです。

  • Angular
  • React
  • Vue

Angular はビューからサービスまで幅広くサポートした高機能フレームワークですが、導入のハードルが高いというデメリットがあります。最初から Angular を採用すること前提に、きちんと設計された環境でこそ強みを発揮すると言えます。

対して Vue.js はビューに特化している為、導入のハードルが低く簡単で、学ぶことも少なく Angular に比べて原始的であるだけに、気軽に後乗せできるという手軽さがあります。

ライブラリとフレームワーク

ビューに特化したフレームワークで React がありますが、React は「UI 開発のための JavaScript ライブラリ」を称されています。フロントエンド開発の道に進むなら、Vue.js では無く、React を学習すべきだと筆者は思っています。

しばし、ライブラリとフレームワークは、文脈によっては同じ意味で使われることがありますが、本質的には異なる物です。

ライブラリはユーザーのコードから呼び出されることを想定しています。なので、当然コードを管理しているのは、ユーザー側であると言えます。

対して、フレームワークは、ユーザーのコードはフレームワーク側から呼び出されます。用意されたフレームワークという枠組みの中で「何をすべきか」を、ユーザーコードに問い合わせる形になっているのです。どちらかと言えばコードの管理はフレームワークがしているといってもいいです。

ライブラリとフレームワークのように、プログラムの実行の主体が逆転することを、「制御の反転 (IoC: Inversion of Control)」といいます。本来は、ライブラリとフレームワークはこのIoCに基づいて使い分けるキーワードです。

Vue.js の特徴

底学習コスト

HTMLベースのテンプレート構文を採用している為、HTMLやJavaScript に触れた事のある人であれば理解しやすくなっています。

アプリの段階的な成長に対応できる

テンプレート機能、コンポーネント、プロジェクト管理・ビルド環境、ルーティング機能、データ管理、いづれもアプリの規模に応じて段階的に機能を追加することができます。

コンポーネント指向

部品化されたコンポーネントを組み合わせることで、ページを構成していくのが基本で、これをコンポーネント指向と言います。

Vue.js アプリは複数コンポーネントによって構成されており、こうした意味で、Vue.js を学ぶということは、コンポーネントを学ぶとういことと言えます。

ドキュメントが充実している

下の URL より公式ドキュメントに跳べます。

https://jp.vuejs.org/v2/guide/

Vue.js を利用する為の準備

Vue.js を利用するには、CDN (Content Delivery Network) 経由でライブラリをインポートするのが最も手軽な方法です。

以下がCDNを利用する為の最小構成になります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Vue app</title>
  </head>
  <body>
    <script 
src="https://cdn.jsdeliver.net/npm/vue/dist/vue.js"
></script>
    <script src="js/template.js"></script>
  </body>
</html>

本番環境では、vue.js を vue.min.js に書き換える事でより読み込みを早くすることができます。

CDN以外で Vue.js を利用する方法については、追々する予定です。

次回があれば…

次回

  • Vue.js アプリの作成
  • ディレクティブ
  • 算出プロパティ
  • ライフサイクルフック
  • リアクティブデータ
  • ウォッチャーによる明示的な監視

林 裕大Hayashi Yuto
麻雀 / コーディング / 東方 / V-Tuber / 書道 /
  • CentOS
  • AmazonWebServices
  • SQLite
  • Docker
  • Python
  • Ruby
  • PHP
  • Laravel
  • WordPress
  • Nodejs
  • JavaScript
  • Sass
  • HTML5
  • Bootstrap
  • adobe Illustrator
  • adobe Photoshop
お問い合わせ

大変申し訳ありませんが、現在お問い合わせフォームは機能しておりません。お手数ですが、お問い合わせの際は、下記アドレスまでよろしくお願いいたします。

h3yukomah1y1k1m@gmail.com