開発スタッフがアプリ関連の最新技術やニュースをご紹介します。

前回に引き続きJavaScriptフレームワークのVue.jsの基本について説明します。
Vue.jsは、HTMLに動きをつけたり、ユーザー操作に応じてリアルタイムに画面を更新したりするためのフレームワークです。
この記事では、Vue.jsの中でも特によく使われる テンプレート構文（HTML側） と ロジック（JavaScript側）を紹介します。

JavaScript側の基本構造

Vue 3 では Composition API（setup関数） と Options API（data, methods, computedなど） の2通りがあります。
今回は Options API（data, methods, computedなど）について簡単に紹介します。

data()：Options APIでデータを定義する

export default {
  data() {
    return {
      message: 'こんにちは！',
      count: 0
    };
  }
};

data() は画面で使うデータを定義します。
戻り値のオブジェクトがVueインスタンスの状態になります。

computed：計算済みプロパティ（リアクティブな値の加工）

export default {
  data() {
    return { price: 100, taxRate: 0.1 };
  },
  computed: {
    totalPrice() {
      return this.price * (1 + this.taxRate);
    }
  }
};

computed は、他のデータから自動的に計算される値を定義します。
キャッシュされるため、無駄な再計算を防ぎます。

methods：関数（イベント処理など）

export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

イベント時の動作などを関数としてまとめておく場所です。
テンプレートからは @click=”increment” のように呼び出せます。

mounted：コンポーネントが画面に表示されたあとに実行

export default {
  mounted() {
    console.log('コンポーネントがマウントされました！');
  }
};

mounted() はVueコンポーネントが実際にDOMに描画された直後に呼ばれます。
APIデータ取得や初期設定などに使います。

木曜日担当：nishida

Tweet

前回に引き続きJavaScriptフレームワークのVue.jsの基本について説明します。
Vue.jsは、HTMLに動きをつけたり、ユーザー操作に応じてリアルタイムに画面を更新したりするためのフレームワークです。
この記事では、Vue.jsの中でも特によく使われる テンプレート構文（HTML側） と ロジック（JavaScript側）を紹介します。

JavaScript側の基本構造

Vue 3 では Composition API（setup関数） と Options API（data, methods, computedなど） の2通りがあります。
ここでは両方を簡単に紹介します。

setup()：Composition APIのエントリーポイント

import { reactive  } from 'vue';

export default {
  setup() {
    // reactiveを使ってオブジェクト全体をリアクティブにする
    const state = reactive({
      count: 0,
      message: 'こんにちは！'
    });

    const increment = () => {
      state.count++;
    };

    return { state, increment };
  }
};

テンプレート側の使い方

<template>
  <div>
    <p>{{ state.message }}</p>
    <p>クリック回数：{{ state.count }}</p>
    <button @click="increment">カウントアップ</button>
  </div>
</template>

reactive() は オブジェクト全体をリアクティブ（反応的）に変換 します。
⇒ state.count のように直接プロパティを参照できます（ref のように .value は不要）。

ref() は単一の値をリアクティブにするのに便利ですが、
複数の状態をまとめて管理するなら reactive() のほうがスッキリします。

return { state, increment } により、HTML（テンプレート）側で state と increment を使えるようになります。

次回はOptions APIのdataとcomputedについて説明します。

木曜日担当：nishida

Tweet

今回はJavaScriptフレームワークのVue.jsの基本について説明します。
Vue.jsは、HTMLに動きをつけたり、ユーザー操作に応じてリアルタイムに画面を更新したりするためのフレームワークです。
この記事では、Vue.jsの中でも特によく使われる テンプレート構文（HTML側） と ロジック（JavaScript側）を紹介します。

HTML側の基本構文

Vueでは、HTML内に「ディレクティブ」と呼ばれる特別な属性を使って、動的な動作を実現します。

v-if：条件によって要素を表示・非表示にする

<p v-if="isShow">このメッセージは表示フラグがtrueのときだけ見えます。</p>

v-if は 条件式 が true のときだけ、その要素をDOMに描画します。
v-else や v-else-if も組み合わせて使えます。

v-for：リストを繰り返し表示する

<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ index + 1 }}: {{ item }}
  </li>
</ul>

v-for は配列やオブジェクトをループ表示します。

v-model：双方向データバインディング

<input v-model="message" placeholder="メッセージを入力">
<p>入力中の内容：{{ message }}</p>

v-model は 入力フォームの値とデータをリアルタイムで同期 します。
テキストボックス、チェックボックス、セレクトボックスなどに使えます。

@input：入力イベントを検知する

<input @input="onInputChange" placeholder="文字を入力">

@input はフォーム入力のたびにイベントを実行します。

@click：クリックイベントを実行する

<button @click="count++">クリック回数：{{ count }}</button>

@click はクリック時の処理を定義します。
上の例では、ボタンを押すたびに count の値が1ずつ増えます。

次回はJavaScriptの基本構造について説明します。

木曜日担当：nishida

Tweet

VRゴーグルが広く普及する上で大きな課題となっているのは、その「重さ」や「サイズ」、そして「装着感」です。現状のデバイスはどうしても重く、熱がこもりやすく、長時間の使用で蒸れてしまうという問題があります。もしメガネのように快適に装着できるようになれば、VRはさらに身近な存在になるでしょう。

そんな中、Metaとスタンフォード大学が共同で、厚さわずか3mm未満という超薄型の「VRグラス」を実現するためのホログラフィックディスプレイ技術の研究を進めているとのニュースがありました。

詳細はこちらの記事で紹介されています：
■Metaとスタンフォード大、3mm未満のVRグラス研究
https://www.moguravr.com/meta-stanford-thin-vr-glasses-holographic-display-research/

この記事を読んで、VRの未来が一気に現実味を帯びてきたように感じました。
現在のVRゴーグルはどうしても「装着するガジェット感」が強いですが、メガネのように自然に身につけられる薄さになれば、日常生活の中にVRが溶け込む日もそう遠くないかもしれません。
まだ研究段階とのことですが、この技術が実用化されれば、VR体験のハードルが大きく下がり、利用シーンも一気に広がっていくのではないでしょうか。

木曜日担当：nishida

Tweet

Docker 上で Laravel 環境（Laravel 12 + PHP 8.4）を構築する手順をまとめました。
以下の手順で、Apache + MySQL + PHP + Laravel の開発環境を作成することができます。

事前準備・前提条件

以下のセットアップが完了している必要があります：

・Docker Desktop をインストール済みであること
・Docker が起動中であること
・docker-compose.yml にて Apache + PHP8.4 + MySQL + phpMyAdmin を定義済みであること

動作確認項目

phpMyAdmin にアクセスできるか確認
　→ http://localhost:8001/

index.html が表示されるか確認
　→ ファイルパス：D:\docker_workspace\project_name\laravel-app\index.html
　→ 表示URL：http://localhost:8000/

Laravel プロジェクトの作成手順

１．コンテナの起動
まず、docker-compose.yml があるディレクトリに移動し、Docker コンテナを起動します。

cd D:\docker_workspace\project_name
docker compose up -d

２．コンテナに入る

docker-compose exec project_name bash

３．Laravel プロジェクトの作成（PHP 8.4 対応）

composer create-project laravel/laravel . –prefer-dist

４．権限の設定

chown -R www-data:www-data storage bootstrap/cache
chmod -R 775 storage bootstrap/cache

５．.env ファイルの編集

テキストエディタで .env を開き、以下のように編集してください（データベース情報は任意設定）。

DB_CONNECTION=mysql
DB_HOST=mysql_db
DB_PORT=3306
DB_DATABASE=project_name
DB_USERNAME=（任意の設定をおこなってください）
DB_PASSWORD=（任意の設定をおこなってください）

６．Laravel 初期設定

php artisan key:generate
php artisan config:cache
php artisan migrate

７．Laravel の動作確認

以下URLにアクセスし、Laravel のウェルカムページが表示されればOKです。
http://localhost:8000/public/

A5:SQL Mk-2（A5m2）からの DB 接続確認

以下の設定で接続可能です：

ホスト：localhost
ポート：3308
ユーザー名：（任意の設定をおこなってください）
パスワード：（任意の設定をおこなってください）

Laravel からの DB 接続テスト

以下のようなコードでデータが取得できれば、Laravel からの DB 接続も正常に確認できています。

// DB connection test
$testcon = DB::select(‘SELECT * FROM migrations’);
dd($testcon);

バージョン確認コマンド

Laravel のバージョン確認：
php artisan –version

PHP のバージョン確認：
php -v

以上で、Laravel 12 + PHP 8.4 の Docker 開発環境の構築は完了です。

木曜日担当：nishida

Tweet