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

アメリカのAI企業OpenAIが、日本政府や産業界との協力を深めるための「日本向けAI政策枠組み（Japan Economic Blueprint）」を発表しました。
ChatGPTなどの生成AIが生活やビジネスに浸透する中で、国や企業、教育機関と連携し、「安全で信頼できるAI社会」を築くことを目的としています。
（参考：OpenAI公式発表）

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

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