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

Vue.jsを使って開発していると、コードを修正したのに画面に反映されないということがあります。
そんなときに関係してくるのがコンパイルです。

今回は、Vue.jsでコンパイルするときのポイントを紹介します。

コンパイルとは何か？

簡単にいうと、自分が書いたVue.jsのコードを、ブラウザが動かせる形に変換する作業です。

イメージとしては、

Vue.jsのコード
↓
コンパイル
↓
ブラウザで動くJavaScript

という流れです。

そのため、Vue.jsのコードを修正したあとは、コンパイルを実行しないと変更が画面に反映されません。

npm run devは開発用

開発中にVue.jsをコンパイルするときは、以下のコマンドを使います。

npm run dev

コードを修正したので、動作確認したい場合に使うコマンドです。

本番環境ではnpm run prod

本番環境へ公開するためのファイルを作る場合は、

npm run prod

を使います。

npm run dev
↓
開発・動作確認用

npm run prod
↓
本番公開用

というイメージです。

ただし、プロジェクトによって使えるコマンドが違うので、package.json の scripts の確認が必要です。

反映されない場合の確認ポイント

Vue.jsのコードを修正したのに画面に反映されない場合は、次の順番で確認します。

1. １．コンパイルしたか？
   npm run dev

を実行してみます。

2. ２．エラーが出ていないか？

コンパイル中にコンソールにエラーが出ていないか確認します。

3. ３．ブラウザのキャッシュが残っていないか？

ブラウザに古いファイルが残っている場合があります。

Chromeなら、

Ctrl + Shift + R

で強制リロードして改善するか確認します。

Dockerを使っている場合は注意が必要

Docker環境では、npm run devをどこで実行するかも重要です。

docker exec -it docker_container_name bash

でDockerコンテナに入ってから、

npm run dev

を実行する必要があります。

木曜日担当：nishida

Tweet

スマートフォンやスマートウォッチに続く次世代デバイスとしてスマートグラスが注目されています。
一見すると普通のメガネですが、レンズ内に情報を表示できるディスプレイを搭載し、日常生活を大きく変える可能性を秘めています。

以下のような製品があります。

Rokid スマートAIグラス
https://jp.rokid.com/pages/rokid-glasses

・視界に情報を表示するディスプレイ

通知やナビゲーション、翻訳結果などを視界に直接表示。スマートフォンを取り出さなくても必要な情報を確認できます。

・度付きレンズにも対応

専用の度付きレンズを装着できるため、普段メガネを使用している人でも利用できます。

・AIアシスタントが「見て」答える

内蔵カメラで見ている景色をAIが認識し、建物や物体について質問すると、その場で回答を表示・音声案内してくれます。

・リアルタイム翻訳・字幕表示

外国語の会話をリアルタイムで字幕表示したり、看板やメニューを翻訳したりと、海外旅行やビジネスシーンでも活躍が期待されます。

・ハンズフリーカメラ

写真や動画をハンズフリーで撮影可能。スポーツや旅行など、両手がふさがる場面でも自然な視点で記録できます。

・Googleマップによるナビゲーション

ルート案内を視界に表示できるため、スマホを見る回数を減らせます。
目的地までスムーズに移動できるのも魅力です。

・まとめ

スマートフォンは「手に持って操作する」デバイスですが、スマートグラスはハンズフリーで「見るだけで情報を得る」という新しい体験を提供します。

まだまだ発展途上の製品ではあるものの、翻訳、AI検索、ナビ、カメラを日常的に利用する人にとって、スマホに代わる次世代デバイスとなる可能性を感じさせる製品です。

木曜日担当: nishida

Tweet

Googleのメールサービス「Gmail」で、これまで不可能だったメールアドレスの変更機能がついに提供され始めています。長年使ってきたアドレスをそのまま使い続けるしかなかった状況に、大きな変化が起きようとしています。

今回の特徴は、単にアドレスを変えられるだけではなく、メールや写真、各種サービスのデータをそのまま維持できる点です。これにより、これまで必要だった「新しいアカウント作成＋データ移行」といった手間が不要になります。

Tweet

前回に引き続き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