1. JSONの基礎

JSON（JavaScript Object Notation）は、JavaScriptオブジェクトを文字列形式にシリアライズするための軽量なデータ交換フォーマットです。

主な用途

Webアプリケーションにおけるクライアントとサーバー間のデータ送受信に広く利用されます。

JavaScriptオブジェクトとJSON文字列の相互変換

<script>
  // JSON文字列 → JavaScriptオブジェクト
  const userJson = '{"username":"田中","score":95}';
  const userObj = JSON.parse(userJson);
  document.write(`ユーザー名: ${userObj.username}, スコア: ${userObj.score}<br>`);

  // JavaScriptオブジェクト → JSON文字列
  const profile = { username: "佐藤", score: 88 };
  const profileStr = JSON.stringify(profile);
  document.write(profileStr + "<br>");
</script>

Javaとの連携

バックエンド側では、リクエストとして受信したJSON文字列をJavaオブジェクトにデシリアライズし、レスポンスではJavaオブジェクトをJSON文字列にシリアライズして返します。代表的なライブラリにはJacksonやGsonがあります。

2. Vue.jsの基本機能

Vue.jsはMVVMパターンに基づいたプログレッシブなJavaScriptフレームワークで、DOM操作を抽象化し、データ駆動型のUI開発を可能にします。

v-text と v-html ディレクティブ

<div id="app">
  <p>補間構文: <span>{{ content }}</span></p>
  <p>v-text: <span v-text="content"></span></p>
  <p>v-html: <span v-html="content"></span></p>
</div>

<script src="js/vue.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
    content: '<strong>VueでHTMLをレンダリング</strong>'
  }
});
</script>

• {{ }} および v-text はプレーンテキストとして表示（innerText 相当）
• v-html はHTMLとして解釈・レンダリング（innerHTML 相当）

その他の主要ディレクティブ

• v-if / v-show：条件分岐
• v-for：リストの反復レンダリング
• v-on：イベントハンドリング（例: v-on:click）
• v-bind：属性の動的バインディング（例: v-bind:href）
• v-model：フォーム入力要素とデータの双方向バインディング

3. Vueインスタンスのライフサイクル

Vueインスタンスは、生成（beforeCreate, created）、マウント（beforeMount, mounted）、更新（beforeUpdate, updated）、破棄（beforeDestroy, destroyed）の各フェーズでフック関数を提供します。

4. Element UI

Alibaba傘下のEle.me（フードデリバリーサービス）が開発した、Vue.js向けのコンポーネントライブラリです。ボタン、テーブル、フォームなどのUI部品を提供し、管理画面などの開発を効率化します。