コンテンツにスキップ
Twin:te 勉強会 2026

3. 概論

さて、環境構築も終えて早速 Web アプリケーション開発に入っていきたいところですが、まずは Vue 周りのプログラミング言語事情について知っておく必要があります。実際の開発では必ずしも役に立つとは言い切れませんが、良いコードを書くためのプログラミングの手筈や言語そのものについて知っておくことは重要です。本章では、Vue を用いたプログラミングの基礎である宣言型プログラミングや、コンポーネント指向プログラミングについて述べていきます。

3.1 宣言型プログラミング

プログラミング・パラダイムの一つに宣言的プログラミングと呼ばれるものがあります。プログラミング・パラダイムとは、プログラミングを行う際に模範となる考え方を指し、ある側面ではプログラミングそのものに対する見方を与えるものと解釈することもできます。OOP、いわゆるオブジェクト指向プログラミングがその一例で、OOP ではデータとデータに対する操作をオブジェクトとみなしてプログラミングをします。以下にプログラミング・パラダイムの例を挙げます。

  • オブジェクト指向プログラミング
  • 手続き型プログラミング
  • 関数型プログラミング

このようなプログラミング・パラダイムに並べて登場するのが宣言型プログラミングです。宣言型プログラミングでは、プログラムに「どのように（How）」を記述するのではなく、「何（What）」を記述していくのが特徴です。説明だけでは理解するのが難しいので、ここで例を見てみましょう。次のコードは、それぞれ 0 から 9 までのボタンを生成する際の JavaScript と Vue でのプログラムです。

JavaScript

<div id="parent"></div>


<script>
    const parent = document.getElementById('parent');


    for (let i = 0; i < 10; i++) {
        const button = document.createElement('button');
        button.textContent = `${i}`;
        parent.appendChild(button);
    }
</script>

Vue

<div>
    <button v-for="i in 10" :key="i">{{ i - 1 }}</button>
</div>

2 つのコードを見比べてみましょう（v-for などの詳しい構文は後の章で扱うので、今は雰囲気だけで大丈夫です）。JavaScript のプログラムでは「createElement 関数で要素を作って、その要素の値に数字を設定して、id が parent の要素に追加する処理を 10 回行う」という命令を書いています。一方で Vue のプログラムでは、「div の子要素として現れる、0 から 9 の値を持つボタン要素」という処理が記述されています。

これが宣言型プログラミングの本質です。JavaScript の方では「要素を作成しろ」という命令（= How）が数行にわたって記述されていますが、Vue の方では欲しい要素（= What）を記述しただけです。特に appendChild などといった「要素を追加しろ」という命令が明示的に書かれていない部分が特徴的です。このように Vue では、要素の生成・追加の部分が仮想 DOM の仕組みによって隠蔽され、欲しい要素を書くだけでコンポーネントの作成が完了するので、完成したドキュメントの構造やプロダクトの核となるロジックの記述に集中することができます。

他にも、本書とは直接的には関係しませんが SQL においても宣言型プログラミングを見ることができます。次の例は、SQL でテーブル Users から id が 3 のユーザを取り出す場合のプログラムです。

SELECT * FROM Users WHERE id = 3

やはり SQL においても、どのようにデータベースからユーザを取得するかを記述することなく、どのようなユーザが欲しいかのみを記述しています。実際の取得方法はデータベースの管理システムによって最適なアルゴリズムが選択されるため、特段の理由がない限り我々がそこに干渉する必要も理由もないのです。

一方で、プログラミングに慣れていないうちはプログラムに対してこのような見方をすることは難しいかも知れません。様々なプログラミング言語を知り、たくさんプログラムを書くことによってこのような本質的な部分が見えるようになってきます。初めのうちにやるべきことは、ただひたすらにプログラムを書くだけです。

3.1.1 演習

他に知っているプログラミング・パラダイムを 2 つ挙げて下さい。インターネットなどで調べても良いです。

3.2 コンポーネント指向プログラミング

コンポーネント指向プログラミングとは、ソフトウェアを独立したコンポーネントに分割し、それらを組み合わせることによって一つのシステムを構築するというプログラミング・パラダイムです。Vue においては、ソフトウェアの部分が UI 部品にあたります。

Vue ではよく使用される UI 部品をコンポーネントとしてまとめ、それを再利用することによって UI 全体を構築するといったアプローチをとります。コンポーネントを再利用することによって、全体的なプログラム量の削減や、同じプログラムを何度も書かなくて良くなるといった恩恵が得られます。なお、Vue におけるコンポーネントは、一つ以上の HTML 要素または別のコンポーネントの集合から構成されます。

またコンポーネントが再利用されるという前提からも分かるように、コンポーネントどうしは常に疎結合であることが望まれます。疎結合であるとはコンポーネントどうしの依存度合いが低いということを指しますが、疎結合であることによってコンポーネントの再利用性が増し、またリファクタリングや再描画の削減につながります。

例えば YouTube のページを眺めてみると、同じようなカード型コンポーネントが並んでいることが分かります。

YouTube の画面

実際の実装がどうかはさておき、このようにしてコンポーネントを適切に分割しておくことで、宣言型プログラミングの恩恵を受けつつ、パフォーマンス的にもプログラムの読み方的にも優れたプログラムを書くことができます。

3.3 仮想 DOM

Vue は DOM を仮に構築するための仮想 DOM を備えています（これに対して従来の DOM をリアル DOM と表現します） 。従来、JavaScript で直接操作してきた DOM はリアル DOM にあたり、要素を追加するなど DOM に変更を加えるたびに DOM 全体を再構築していたため、比較的再描画が遅いという欠点がありました。一方 Vue では、DOM を変更しようとした際、まずは仮想 DOM の構築を行います。そして変更前の仮想 DOM との差分を抽出し、差分のみを再構築しています。こうすることによって DOM の再構築される部分が限定的になり、結果的に再描画が高速化されます。

従来は一つのページに対して一つの HTML ファイルを用意する MPA（Multi Page Application）が主流でしたが、このような高速化によって SPA（Single Page Application＝ページを遷移せずに DOM の切り替えによってページ遷移を表現する手法） が確立されました。

3.4 用語

  • レンダリング：仮想 DOM 木を生成する処理。
  • SFC（Single File Component）：コンポーネントの見た目（HTML）・ロジック（TypeScript）・スタイル（CSS）を 1 つのファイルにまとめて記述する、拡張子 .vue の Vue 独自のファイル形式。
  • コンポーネント：ボタンやカード、モーダルなどの UI を構成する部品であり、これらのみ、またはこれらを組み合わせて再利用がしやすいように切り出した SFC ファイル。