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

今回は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

AMDの最新GPU「Radeon AI PRO R9700」が、日本国内でも一部の販売店やBTOメーカーを通じて入手可能になりつつあります。
一部ショップではおよそ26万円前後（税込）の価格帯で案内されており、AI開発や生成AI処理を“ローカル”環境で行いたいクリエイター・エンジニアにとって、ついに手が届く本格的な選択肢が見えてきました。
（参考：AMD公式サイト）

Tweet

JSpreadsheetを使えば、ExcelライクなUIでWeb上のスプレッドシートを実装できます。
今回は、その中でも重要な 「カラム設定（columns設定）」のポイントをまとめましたのでシェアします。

基本構造

JSpreadsheetでは、各カラムの設定は columnsプロパティで行います。

例）

jspreadsheet(document.getElementById(‘spreadsheet’), {
data: [],
columns: [
{ type: ‘text’, title: ‘Name’, width: 150 },
{ type: ‘numeric’, title: ‘Price’, width: 100 },
{ type: ‘calendar’, title: ‘Date’, width: 120 },
]
});

各カラムはオブジェクトで定義し、
type, title, width などを指定します。

よく使う type

type：text
説明：テキスト入力
主なオプション：readOnly

type：numeric
説明：数値入力
主なオプション：decimal

type：dropdown
説明：プルダウン選択
主なオプション：source, autocomplete

type：calendar
説明：日付入力（カレンダー）
主なオプション：format, type, readonly

type：checkbox
説明：チェックボックス
主なオプション：true, false

カレンダー（type: ‘calendar’）の使い方

JSpreadsheetではカレンダーの挙動を制御できます。

例：年月だけ選択（type: ‘month’）

{
type: ‘calendar’,
title: ‘Invoice Month’,
width: 120,
options: {
type: ‘month’,
format: ‘YYYY/MM’,
}
}

出力例： 2025/10

ポイント
カレンダーが「年月モード」で表示できる。
値は “2025-10-01” のように日付形式で保持される

通常の日付選択（type: ‘calendar’）
{
type: ‘calendar’,
title: ‘Invoice Date’,
width: 120,
options: {
format: ‘YYYY-MM-DD’,
}
}

出力例： 2025-10-15

dropdown（プルダウン選択）の設定例

{
type: ‘dropdown’,
title: ‘Currency’,
width: 100,
source: [‘JPY’, ‘USD’, ‘EUR’],
autocomplete: true,
}

選択候補を sourceに配列で指定します。
DBから取得したリストを渡すことも可能です。

数値カラム（numeric）

{
type: ‘numeric’,
title: ‘Amount’,
width: 100,
decimal: ‘.’, // 小数点区切り
mask: ‘#,##0.00’, // 表示フォーマット
}

出力例： 12,345.67

ポイント
maskで桁区切りや小数点表示を指定できる
decimalで小数点記号（. or ,）を変更可能です。

読み取り専用カラム

{
type: ‘text’,
title: ‘ID’,
width: 80,
readOnly: true,
}

背景がグレーになり、ユーザーは編集できません。

木曜日担当：nishida

Tweet

AIの開発で知られるOpenAIが、半導体大手のBroadcom（ブロードコム）と協力して
「独自のAIチップ」を開発するというニュースがありました。
報道によると、2026年ごろに量産を開始する可能性があり、
この動きはAI業界全体に大きなインパクトを与えると見られています。
今回は、この提携がどんな意味を持つのでしょうか。

Tweet

最近、デスクワーク中の肩こりがひどくなってきました。特に右肩だけが強くこることが多いことから、原因はマウスにあるのではないかと考えていました。

そこで試してみたのが、ケンジントン社の「Slim Blade Pro」です。正直最初は「マウスで肩こりが軽くなるの？」と半信半疑でしたが、使ってみると少し肩こりが改善してきたので、今回はその体験をシェアします。

写真で比較

今回購入したSlim Blade Proと、これまで使用していたMicrosoft社のマウスを並べてみました。

Slim Blade Proの特徴

ボール: 中央に直径55mmの大きなボールが搭載。一般的なトラックボール（34mm）より大きく、ビリヤードの玉（57mm）とほぼ同じサイズです。

価格: 16,000円

接続方法: Bluetooth、ドングル接続、有線Type-C（充電兼用）に対応。

スクロール機能と操作方法

Slim Blade Proには通常のマウスにあるようなスクロールホイールはありません。
スクロールは『ボールを水平方向に回す（Z軸回転）』ことで行います。慣れるまではクセがあります。

カーソル速度の設定

通常のマウスでは、カーソル速度を速く設定したほうが快適でしたが、Slim Blade Proは遅めの設定が使いやすいです。

遅く設定すれば精密な作業もラクに行えます。

遠距離移動（慣性の利用）

マウスカーソルを高速移動させたい場合は、ボールを弾くように転がすのがコツです。
重いボールが慣性で回転するので、カーソルが目的地まで素早く到達します。

Slim Blade Proのメリット

カーソル操作性: 遅い設定での精密操作と、慣性を使った高速移動が両立します。

身体的負担の少なさ: 腕を動かさずに操作でき、肩の負担を軽減。

両利き対応: 左右対称デザインで左手でも操作可能。

Slim Blade Proのデメリット

ドラッグ操作が難しい: ボールでカーソルを操作する性質上、クリックしたままドラッグする操作は難しいです。特に長距離のドラッグでは、ボールの慣性を活かしつつストップさせる操作に慣れるまで時間がかかります。

クリックが重くて指が疲れます: ボタンのクリック感がやや硬めのため、ドラッグ操作など長時間ボタンを押したままにする操作をおこなう場合、指が疲れます。
→ドラッグはできるだけ使用せず、キーボードショートカットで対応するようにしています。

埃やゴミが挟まる: 昔のボール式マウスのように、使用しているとボールと周囲の間に埃や細かなゴミが挟まることがあります。ゴミが挟まるとボールの慣性が鈍ります。ときどき掃除が必要です。

まとめ

Slim Blade Proは、毎日長時間マウスを使う人におすすめです。
肩や腕への負担が少なく、精密操作も快適に行えるため、長時間作業が楽になります。
もちろんデメリットもあるので通常のマウスと併用もアリです。

もし肩こりに悩んでいるなら、一度試してみる価値はあると思います。

木曜日担当：nishida

Tweet