こんにちは、箕浦です。

フロントエンド開発をしていると、「Figma でデザインを確認 → エディタに戻ってコード実装 → また Figma で確認…」という往復作業に時間を取られていませんか？
デザイナーとの連携では「デザインファイルのバージョン管理ができない」「最新版がどれかわからない」といった課題も、よく耳にします。

今回は、そんな開発者の悩みを根本から解決してくれる新しいデザインツール Pencil（pencil.dev）を紹介します。

Pencil とは​

Pencil は "Design on canvas. Land in code."（キャンバスでデザインし、コードに着地する）をコンセプトに掲げるデザインツールです。

最大の特徴は、IDE の中で直接デザインができること。
VSCode や Cursor の拡張機能として統合されるほか、macOS / Linux / Windows 向けのデスクトップアプリも提供されており、デザインツールとエディタを行き来する必要がなくなります。

しかも 現在完全無料 で利用できます。

従来のデザインツールとの違い​

「Figma や Sketch と何が違うの？」という疑問に、一覧表で答えます。

Pencil はエンジニアの開発ワークフローに自然に溶け込むことを最優先に設計されています。

主な機能​

1. IDE 統合デザインエディタ​

Pencil は IDE の拡張機能、またはスタンドアロンのデスクトップアプリとして動作します。
無限キャンバス上でフレーム、テキスト、シェイプなどのベクター要素を自由に配置でき、Figma と同様のレイヤーパネルも備えています。

利用方法は以下の通りです。

コードを書いている最中に、すぐ隣のタブでデザインを調整できるため、コンテキストスイッチのコストが大幅に削減されます。

2. Git ネイティブなファイル管理​

Pencil のデザインファイルは .pen という拡張子の JSON ベースのテキストファイルです。
これにより、以下のことが当たり前にできます。

• git diff でデザインの変更差分を確認
• ブランチ を切ってデザインのバリエーションを試す
• プルリクエスト でデザインレビュー
• マージ でデザイン変更を統合

# デザインファイルの差分を確認
git diff design/dashboard.pen

# デザイン変更をコミット
git add design/dashboard.pen
git commit -m "ダッシュボードのサイドバーレイアウトを更新"

デザインファイルがコードと同じリポジトリで管理できるため、「デザインの最新版はどこ？」という問題が解消されます。

3. AI エージェント連携（MCP）​

Pencil の最も革新的な機能が、MCP（Model Context Protocol） を通じた AI エージェントとの連携です。

対応する AI プラットフォームは以下の通りです（2026年2月時点）。

• Claude Code（CLI・IDE 版）
• Claude Desktop
• Cursor
• Windsurf IDE
• Codex CLI
• Antigravity IDE
• OpenCode CLI

自然言語でデザインの指示を出すだけで、AI が .pen ファイルを直接操作します。

> 「サイドバー付きのダッシュボード画面を作成して」
> 「このフォームにメールアドレスの入力フィールドを追加して」
> 「カラーテーマをダークモードに切り替えて」

全ての処理はローカルで実行されるため、デザインデータがクラウドに送信されることはありません。

4. コンポーネントシステムとデザイントークン​

再利用可能なコンポーネントを作成でき、メインコンポーネントを変更すると全てのインスタンスに自動反映されます。
Figma のコンポーネント機能に馴染みがある方なら、直感的に使えるはずです。

また、バリアブル（変数）システム により、デザイントークンを一元管理できます。
CSS カスタムプロパティや Tailwind の設定値と連動させれば、デザインとコードの間でトークンが常に同期された状態を保てます。

5. プリビルトUIキット​

ゼロからコンポーネントを作らなくても、すぐに使える UI キットが用意されています。

特に Shadcn UI キットは、Next.js + Tailwind CSS のプロジェクトとの相性が抜群です。

実践：開発ワークフローに組み込む​

Pencil を日常の開発に取り入れると、ワークフローがどう変わるかを見てみましょう。

Before（従来）​

1. Figma でデザインを確認
2. エディタに切り替えてコーディング
3. ブラウザで動作確認
4. Figma に戻ってデザイン調整
5. デザイン変更をスクリーンショットで共有
6. 以上を何度も繰り返す

After（Pencil 導入後）​

1. IDE 内で .pen ファイルを開いてデザインを確認・編集
2. 同じ IDE でコーディング
3. AI に「このコンポーネントのレイアウトを修正して」と指示
4. 変更を git commit でまとめて管理
5. プルリクエストでデザイン・コード両方をレビュー

コンテキストスイッチが激減し、デザインとコードの整合性が自然に保たれるようになります。

実際に使ってみた​

Pencilのデスクトップアプリをインストールして起動した画面がこちら。
Figmaを触ったことある人であれば、なじみある画面構成です。

デザインシステムとして最初からいくつか組み込まれています。
今回は「Shadcn」を使って、簡単なログインフォームを作成してみます。

画面左下にプロンプトを入力します。

AIが「Shadcn」を使ってログインフォームを作成してくれます。

作成されたログインフォームがこちら。
ここまでは正直Figmaでもできます。

Claude Code に移って、先ほど作成したフォームを選択した状態で、Reactのコードを作成してもらいます。

コードが作成されました。
テストコードも作成してくれています。

ブラウザで確認するとこちら。 忠実とまではいかないですが、だいたいこんな感じです。

まとめ​

Pencil は「デザインとコードを一つの世界に統合する」という明確なビジョンを持ったツールです。

Figma がデザイナーのためのツールだとすれば、Pencil は明確にエンジニアのためのデザインツールです。
フロントエンド開発の効率化を考えている方は、ぜひ試してみてください。

公式サイト: https://pencil.dev

こんにちは。開発一部の善明です。
今回は私が情報処理試験に合格したときに勉強方法を紹介したいと思います。
※一応、基本情報、応用情報、DBスペシャリストに合格しています。

とにかくひたすら過去問​

私の勉強方法はひたすら過去問をやるというものでした。
まず過去問を実施して、分からなかった問題だけ解説を読んで理解を深めていきました。
ポイントは先に参考書を読むのではなく、問題集を先にやり、分からない箇所だけ参考書を読む方が頭に入りやすいです。

少し考えて理解できない問題は気にせず次の問題に移る。​

解説を見て10分経過して理解できないときは気にせずに次問題にやるようにしました。最初は解説をみて理解できるのは20%くらいでしたが、繰り返し過去問をやっていくうちに不思議と理解できるようになってきます。最後まで理解できなった問題もありますが、テストは6割取れれば合格なので、一つの問題に時間をかけるより、割り切って量をこなした方が効率的だと思います。
出題傾向が似ているため、私の場合は直近3年分の過去問を3回繰り返すと、合格圏に到達にしました。

どうしても覚えられないときは語呂合わせで覚える。​

私はOSI7階層がどうしても覚えらなかったのですが、語呂合わせにすると覚えられるようになりました。人によって刺さる、刺さらないがあり、補助的な手段ではあるが、どうしても覚えらないものがあるときにやってみるといいかもしれません。

（参考：OSI7階層）
🟣 第7層：アプリケーション層（人が触る）
🔵 第6層：プレゼンテーション層（翻訳・暗号化）
🟢 第5層：セッション層（会話の管理）
🟡 第4層：トランスポート層（届ける・順序を保証）
🟠 第3層：ネットワーク層（どこに届ける？）
🔴 第2層：データリンク層（近くの機器と通信）
⚫ 第1層：物理層（物理的な信号）
語呂合わせの例：「物好きなデートはネットでトラブル！センスあるプレゼントでアプローチ」

最後に​

情報処理試験の勉強をした当初は試験内容が業務にあまり役立たないと感じて、試験のモチベーションが低かったです。ですが、経験を積むに連れて、あの内容はこういうことだったのだなと理解でるようになり、基礎知識が向上しているのに気づきました。私のように感じる方もいると思いますが、食わず嫌いとならずにとりあえず勉強してみることをおススメします。

こんにちは、箕浦です。

最近、AIコーディングエージェント（Claude Code、GitHub Copilot など）を使う場面がどんどん増えてきていますが、
「毎回同じような指示を出すのが面倒」「特定の分野でもっと精度の高いサポートが欲しい」と感じたことはないでしょうか？

今回は、そんな悩みを解決してくれる Skills という仕組みを紹介します。

Skillsとは​

Skills は、AIエージェントの能力を拡張するためのモジュール型パッケージです。
簡単に言うと「AIに特定分野の専門知識やワークフローを教え込むプラグイン」のようなものです。

たとえば以下のようなスキルがあります。

スキルをインストールすると、AIエージェントがそのスキルに記載されたルールや知識を自動的に参照するようになります。
結果として、毎回細かいプロンプトを書かなくても、目的に合った質の高い出力が得られるわけです。

スキルの探し方​

スキルの管理には skills CLI を使います。
Node.js（18以上）がインストールされていれば、npx で手軽に実行できます。

キーワードで検索する​

npx skills find "検索キーワード"

たとえば、テスト関連のスキルを探したい場合はこうです。

npx skills find "testing"

実行すると、名前・URLの一覧が表示されます。

Install with npx skills add <owner/repo@skill>

onewave-ai/claude-skills@technical-writer
└ https://skills.sh/onewave-ai/claude-skills/technical-writer

スキルの公式サイト https://skills.sh/ でもブラウザから検索できます。

よく使う検索キーワード​

目的に合わせて、以下のようなキーワードで探すと見つかりやすいです。

スキルのインストール方法​

気に入ったスキルが見つかったら、add コマンドでインストールします。

npx skills add <owner/repo@skill> -g -y

• -g : グローバル（ユーザーレベル）にインストール
• -y : 確認プロンプトをスキップ

実際にインストールしてみる​

記事作成を支援するスキルを3つインストールする例です。

# 記事の構成案作成
npx skills add onewave-ai/claude-skills@technical-writer -g -y

# 日本語の表現改善
npx skills add ronantakizawa/japanese-copywriting@japanese-copywriting -g -y

# 技術的な事実確認
npx skills add daymade/claude-code-skills@fact-checker -g -y

インストール先は ~/.agents/skills/ 配下になります。
対応しているAIエージェント環境にインストールされます（環境やオプション指定により対象は変わります）。

インストール済みスキルの確認・更新​

# アップデートがあるか確認
npx skills check

# すべてのスキルを最新版に更新
npx skills update

実践：テックブログ執筆でのスキル活用​

弊社のテックブログ執筆でも、上記3つのスキルを導入して活用しています。
以下のようなフローで記事を作成しています。

1. 企画メモを作る​

まずは記事のテーマ・対象読者・伝えたいことを簡単にメモします。

テーマ: Claude Skills
対象読者: AIツールを使い始めたエンジニア
ゴール: スキルの探し方・導入・活用を自分でできるようになる

2. technical-writer でアウトラインを作成​

「この企画メモで記事のアウトラインを作って」とAIエージェントに指示すると、
technical-writer スキルが自動的に適用され、構成案が出力されます。

見出しの順序や粒度を調整するだけで、記事の骨格が完成します。

3. 下書きを作成​

アウトラインをもとに、本文を書いていきます。
コード例やスクリーンショットも入れると読みやすくなります。

4. japanese-copywriting で校正​

書き終えたら「この記事を校正して」と指示します。
冗長な表現、不自然な言い回し、読みにくい箇所を指摘してくれます。

5. fact-checker で技術的な確認​

「この記事の技術的な記述を確認して」と指示すると、
コマンドの書式やバージョン情報、仕様の正確性をチェックしてくれます。

6. front matter を整えて投稿​

最後に記事ファイルの先頭にある front matter（slug、title、date、authors、tags）を確認し、
リポジトリにプッシュすれば完了です。

自作スキルを作ることもできる​

既存のスキルで足りない場合は、自分でスキルを作ることもできます。

npx skills init my-custom-skill

生成されるスキルファイルは Markdown ベースの YAML フロントマター付きファイルで、
特別なプログラミング知識がなくても記述できます。

たとえば「社内コーディング規約に沿ったレビューを自動で行うスキル」や
「特定フレームワークの設計方針を教え込むスキル」など、
チーム固有のノウハウをスキルとして共有できるのが大きなメリットです。

まとめ​

• Skills は AIエージェントに専門知識を追加するプラグイン的な仕組み
• npx skills find で検索、npx skills add でインストールするだけで使える
• 記事作成なら technical-writer / japanese-copywriting / fact-checker の組み合わせが効果的
• 自作スキルでチーム固有の知見も共有可能

AIエージェントを「汎用アシスタント」から「チーム専属の専門家」に変えてくれる仕組みなので、
ぜひ一度試してみてください。

参考リンク​

• Skills CLI: https://skills.sh/
• Claude Code: https://docs.anthropic.com/en/docs/claude-code

こんにちは。開発一部第3課の内田です。

はじめに​

昨今、ChatGPTを始め様々なAIが話題になり、X(旧Twitter)ではGrokを活用する人もたくさん見かけるようになりました。
さらに私生活でAIを活用するだけでなく、AIツールを活用して業務の効率化を実践している職場も増加中かと思います。
すごく身近になってきている感じがありますよねー。

そんな中でAIを活用するだけでなく仕組みなどについても勉強したいなという人も増えてきているのではないでしょうか？
ただ、分厚い参考を買って1ページ目から読んでいくのも難しくて挫折してしまうこともあるかと思います。
基礎から一つ一つ勉強していくのって難しいんだよね。

今回は、何から手をつけたらいいか困っている方に向けて、ぼくが勉強している流れを紹介していきます！

記憶を辿ってみる​

最近になってAIが身近になってきている感じは確かにありますが昔からそんなのなかったっけ？と自分の記憶を辿ってみました。
幼少期(25年くらい前)、父にスーパーファミコンを借りてストリートファイターⅡやマリオカートで遊んでいました。
幼いころから当たり前過ぎて気にもしていませんでしたが、NPCは人間が操作するのではなく勝手に動くものです。
つまり、NPCの動きを制御するAIがあったということです。
昔から意外と身近なところにAIいましたね笑

そういえば昔のPCに入ってたリバーシや将棋でもよく遊んでました。
思えばあの対戦相手もAIか～

今でも将棋は好きなので、将棋AIについて深掘りして調べていきたいと思います！
学生のころ(10年くらい前)に将棋ウォーズというスマホアプリでよく遊んでいました。
今でもたまに遊んでます。
そのアプリにも搭載されている「Ponanza」というAIが強かったはず・・・
当時、プロ棋士といい勝負をしたり電王戦という将棋AI同士が競い合うトーナメントで優勝したり話題になっていました。

将棋AIについて調べてみる​

YouTubeで将棋AIについて、いろいろと動画を見てみました。
将棋AI同士の対局を解説している動画が面白くて、ついついたくさん見ちゃいました笑
AIは人間が指しづらい手を指すことはもちろん、お互いにそれぞれの評価基準で盤面の状態を数値化し有利なのかを判断しながら戦っています。
人間同士の対局を見るのとはまた違った楽しさがあります。

動画の中で「floodgate」というワードを見つけました。
どうやら「floodgate」という場で将棋AI同士の対局が行われているようです。
また、最近は「水匠」という名前の将棋AIが最強格という情報も見つかりました。
この二点を軸に深掘りして、さらに調べていきます！

floodgateとは何なのか？​

floodgateについて調べてみると以下のサイトが見つかりました。

▼コンピュータ将棋連続対局場所 (floodgate)
http://wdoor.c.u-tokyo.ac.jp/shogi/floodgate.html

どうやら将棋AI開発者向けの対局場のようです。
参加のハードルが高そうに思う方もいるかもしれませんが、調べてみるとそんなことはありませんでした。
ただ、まずは将棋GUIソフトについて知る必要がありました。

将棋GUIソフトとは何なのか？​

将棋AIに関する参考書なんかを読んでいるとGUIの作成も込みで書かれていたりします。
盤面を表示するGUIがなければ、駒の動きや局面が人間の目では見えません。
なので、将棋AI開発においてGUIは必須なんですよね。

だた、作りたいのはAI(思考部分)であってGUIではないのでなんか面倒くさいですよね笑
そこで大活躍するのが「将棋GUIソフト」です!!

ここではぼくも実際に使っている将棋GUIソフト「将棋所」を紹介します。

▼将棋所のダウンロードページ
https://shogidokoro2.stars.ne.jp/download.html

▼将棋所のダウンロード方法や使い方などなど
https://shogidokoro2.stars.ne.jp/usage.html#Download

サイトを見てもらえればわかりますが、AI開発のみに専念できるように様々な機能が実装されています。
この「将棋所」を使えば「floodgate」へのアクセスも簡単にできるというわけです。

▼floodgateへのアクセス方法
https://shogidokoro2.stars.ne.jp/usage.html#Floodgate

将棋所を使ってみる​

まずはfloodgateにはアクセスせずにローカルで将棋AI同士を対局させてみました。
以下がその動画です!!

実際にAIが動いているところを見ると興味がわいてきませんか？
使っているAIやその他細かい話は次回以降に紹介します。

さいごに​

今回はAIの勉強の題材として、将棋AIについての調査と実際にAIを動かしてみるところまで紹介しました！
次回以降は「水匠」について調べてみたり、将棋AIの仕組みについて紹介していければと考えています。
どうやら最近の将棋AI開発は参考書に書いているような一から作成するような流れではないようなんですよね・・・
将棋AI界でデファクトスタンダードとなっているAIがあるやらなんやら・・・

また勉強方法に関してはAIを例にあげてみましたが、知らないことを勉強するときは何か一つでも興味がもてるところを見つけて深掘りして調べたり、さらに関連するワードや技術を調べて広げていったりすることで、どんどん勉強がはかどったり少しずつ身につくものもあるかと思います。
参考書を一から順番に読むのはハードルが高いという方はこのような勉強方法も試してみてはいかがでしょうか？
学校のテストで点数をとるための勉強や資格取得のための勉強が苦手な方でも実践できるはずですのでオススメです!!

昨今様々なAIが登場しており、みなさんも業務で活用されていると思いますが、
その中で今回は「AIエージェント」を紹介します。

AIエージェントとは、Googleによると
”人間が与えた目標を達成するために、自ら状況を判断・計画し、さまざまなツールを自動的に利用してタスクを実行する自律的なソフトウェアシステムです。単にテキストを生成する従来の生成AIとは異なり、外部ツールと連携して複雑な問題を解決し、継続的に学習・適応していく点が特徴です”

とのこと。

この分野も「manus」「Gamma」「Felo」などなどいろいろありますが
今回は「Genspark」でサイトマップの作成（Excel）を試してみます。

サイトリニューアルなどを行う際、
現行サイトのサイト構成を調べる必要があります。
ツールはあるのですが、サイトの構造はサイトごとに様々なので完全にこなしてくれるわけではありません。
果たして「AIエージェント」はどこまでやってくれるのか？

ここではGensparkについての解説は省きます。

無料プランで使用します。
毎日200クレジットが付与されるようです。

URLだけでやらせてみる​

まずはどの程度の処理をしてくれるのか敢えて単純な内容でお願いしてみます。
弊社サイトでやってみましょう。

「https://www.dsic.jp/ のサイトのサイトマップをエクセルで作成してください」

Pythonで処理するようです。これ以降、処理内容を逐一報告してくれますがここでは割愛します。

作成してくれました。

サイトマップをダウンロードしてみます。

悪くはないですね。

• 階層構造：レベル0〜3の階層で整理
• ハイパーリンク：各URLはクリック可能なリンク付き
• 視覚的な区別：レベルごとに異なる色とフォントスタイルを適用
• 詳細説明：各ページの説明を記載

といったことまで処理してくれています。
ページ内リンクについてまでも拾い上げて項目に作成してくれていますね。
ここは無くてもよいところです。

●もう少し改善してみたいですね。

下記をお願いしてみます。

• 列には連番を振ってください。
• 階層ごとに列を分けて視覚的に階層構造が把握できるようにしてください。

無料プランでは200クレジットをここで使い切ってしまったようです。。。
どこでどれだけクレジットを消費しているかわからないので言い値ですねw
また明日。

では続きをやってみます。

作成してくれました。
改善点はいろいろありますが一旦本日はここまで。

最後に​

サイトマップの作成は他にも「manus」なども含め、実は何度も使用しているのですが、中規模サイト以上だと、サイトの構築の仕方によってはページが取れていなかったり、誤ったページURLが示されたりすることもありました。
具体的な指示を繰り返せば通常業務で使っている仕様に近い精度までは仕上げてくれます。

また、AIエージェントそのものはもちろん、外部ツールも使用するので入力する内容に秘匿性が高いものや、個人情報を扱う場合は注意が必要、というか避けるべきかなと思っています。
まだまだこちらのプロンプトにも改善の余地がありますが、企画提案書のドラフト作成やアイデア出しなど様々な業務に応用はできそうです。

こんにちは。開発2部の濱上です。

入社後すぐのJava研修でオブジェクト指向に触れたとき、「結局、理解して何が変わるの？」という疑問にぶつかりました。
プログラミング初心者の私にとって、それは大きな壁でした。
ですが、実際にコードを書く中で、オブジェクト指向は、コードの居場所を決めて全体図をつかみやすくする、大切な設計の基礎であることに気づきました。

まだ新入社員として学び途中ではありますが、オブジェクト指向に苦戦した中で見えてきた設計の大切さと、AI時代だからこそ必要な設計の考え方をまとめたいと思います。

オブジェクト指向とは何か​

・“モノをそのままプログラムに持ち込む” という発想​

オブジェクト指向は一言でいうと、

私たちの身の回りにある「モノ（＝オブジェクト）」を、そのままプログラムに置き換える考え方​

と理解しました。

例えば、「商品」、「ユーザー」、「注文」などの概念がそのままオブジェクトになります。

現実世界で 「商品がある → 値段がある → ユーザーが購入する」という流れを、プログラムでもクラスやメソッドを使って表現していくイメージです。

・“情報”と“役割”をセットにする​

オブジェクト指向の大きな価値は、

「情報」と「その情報を扱う処理」を、ひとつのまとまり（オブジェクト）にできること​

だと感じています。

初めて取り組んだ開発では、変数や関数がバラバラに存在していて、時間が経つと、どこに何があるのか分からなくなりました。

ですがオブジェクト指向に慣れてくると、

• 商品クラスなら「商品のデータ」と「商品の振る舞い」
• ユーザクラスなら「ユーザのデータ」と「ユーザの振る舞い」

といったように、自然に整理しやすくなり、担当者を決めるようなイメージで、コードが読みやすくなります。

・初心者こそ助けてもらえる考え方​

理解が進むほど、初心者こそオブジェクト指向に救われるのでは？と思うようになりました。

• コードの居場所がはっきりする
• 重複を書かなくていい
• プログラムの全体図をつかみやすい

など、迷子になりにくくなると感じています。

AI がコードを書く時代でも必要なのか​

オブジェクト指向について調べていると、「AI が出てきたからオブジェクト指向は古い」といった意見を目にすることがありました。

ですが、AI にコードを書いてもらうと、分かりにくいコードが生成されることもあります。

• クラスの役割が曖昧
• 名前の統一感がない
• 1つのクラスに機能が詰め込まれてしまう

など、読んでいて混乱することもあります。

そこで気づいたのは、以下の点です。

• AI にはコードを書いてもらえるが、設計の判断は人間
• オブジェクト指向を理解しているほど、AI が生成したコードも扱いやすい
• AI に質問する際に明確に伝えられれば、返ってくる回答の精度も高くなる

AI 時代だからこそ、設計の基本となる考え方（オブジェクト指向）はもっと大事になるように感じます。

まとめ​

オブジェクト指向はまだまだ勉強中ですが、理解が進むにつれてコードが読みやすくなり、作りやすくなるのを実感しています。
そして AI がどれだけ進化しても、設計の考え方は残るはずです。
これからプロジェクトで実際にコードを書く場面も増えていくので、 AI もうまく使いながら、自分自身の設計力も伸ばしていきます。

こんにちは。開発 2 部１課の大野です。

今回は、Java を学んでみての感想、Java を学ぶ上で参考になったテキストなどを掲載します。
これから Java を学ぼうとしている方々の参考になれば幸いです。

Java とは？​

オブジェクト指向を中心に設計された、大規模開発にも向いている汎用プログラミング言語です。
JVM というソフトウェア上で動作する仕組みにより、プラットフォームに依存せずに実行できる特徴を持っています。
豊富な標準ライブラリやフレームワーク（Spring、JavaFX など）が揃っており、Web アプリ、業務システム、Android アプリなど幅広い分野で利用されています。
また、高い安全性や信頼性からエンタープライズシステムでも長年使用されており、現在も進化を続ける言語です。

Java を学んでみての感想​

今年の４月の外部研修で初めて Java に触って以降、かれこれ半年以上が経ち、Java の仕組みに慣れてきました（まだまだ理解が浅い部分はありますが...）。

初めて Java を学んだときは、覚えることも多く、自分に扱いきれる代物なのかと疑っていました。
特にオブジェクト指向は、研修の講義内で説明されるだけでは何がなんだかさっぱり分からず、概要すらも難しく感じていました。
自作の単語帳を使って通勤中に復習したり、自宅のパソコンに eclipse をダウンロードして実際にコードを書いたりして、何とかオブジェクト指向について理解しようと悪戦苦闘していました。
しかし結局、オブジェクト指向についてほとんど理解できないまま研修が終わってしまいました。

そこで、このままではいけないと感じ、書店で参考書を購入し、自宅でじっくりオブジェクト指向と向き合うことにしました。
その結果、これまでのモヤモヤが払拭され、オブジェクト指向についての解像度が大幅に上がりました。
実際に、『徹底攻略 Java SE 17 Silver 問題集［1Z0-825］対応』（通称：黒本）の「クラスの定義とインスタンスの使用」や「継承とインタフェースの使用」に関する問題で７割以上の正答率を達成することができました。

今後はこれまで学んだことを活かしてチームに貢献し、経験を通じて更なるスキルアップを目指していきたいです。

Java を学ぶ上で参考になったテキスト​

『スッキリわかる Java 入門 第 4 版』​

Java を学ぶ際に初めて購入したテキストです。テキスト詳細
演算子からオブジェクト指向、例外処理まで幅広く扱っており、体系的に Java を学びたい方におすすめしたい一冊です。
今まで Java に触れたことがなかったとしても、ゲームの世界を例にした腹落ち感のある解説で、難しい単元もとっつきやすい印象を受けました。

『徹底攻略 Java SE 17 Silver 問題集［1Z0-825］対応 』​

いわゆる黒本です。テキスト詳細
これまで学んできた分野の復習、兼 Java SE 17 Silver 取得に向けた勉強のために購入しました。
オブジェクト指向や例外処理などの基礎的な部分だけでなく、シール・クラスや try-with-resources 文など Java を便利に活用するために必要な知識も学ぶことができる有益な書籍です。実際のコードを用いて分かりやすく解説してくれるので、初めて触れる仕組みもスムーズに理解できました。
（ちなみに私は、この書籍の問題を３周して Java SE 17 Silver を取得することができました。）

まとめ​

Java は現在でも様々なシステムで使われる言語で、学ぶ価値の高い言語だと思います。
中には理解しにくい部分もありますが、テキストを用いてインプットとアウトプットを繰り返すことで徐々に理解できるようになると思います。

ここまで読んでいただき、ありがとうございました！

こんにちは。開発一部の朝久野です。C#の学習を進める過程で、マイクロソフト社のSQL Serverを簡易的にした「Local DB」に触れる機会がありました。Local DBの存在は先輩に教えていただきました。初心者の私が実際に利用してみて便利だと感じた点、つまずいたポイントを記載していきたいと思います。

環境にインストール済みのツール​

• Visual Studio 2022（ASP.NETとWeb開発、Azureの開発、.NETデスクトップにチェックを入れてインストール済み）

Local DBの使い方​

Local DBはローカル環境でのみ動作する、SQL Serverの簡易版のようなものです。ローカルでありながら、実際と近い動作が可能であるため学習に便利です。

まずVisual Studioを利用してプロジェクトを作成してみます。
新しいプロジェクトの作成→コンソールアプリ→プロジェクト名の設定→フレームワークの設定（今回は.NET 8.0を利用しています）を行い、プロジェクトを作成します。

プロジェクト（techPj）が作成されました。次に、画面上部にある表示ボタンからSQL Serverオブジェクトエクスプローラーを選択します。

SQL Serverのエクスプローラーが開きました。作成したいインスタンス上、データベース上で右クリックを行い、新しいデータベースやテーブルの追加を行うことができます。こちらでLocal DBを利用することができます。

便利だと感じた点​

• データベースの環境準備が簡単でわかりやすい

データベースを利用するための準備は時間がかかるイメージがあったのですが、Local DBの場合「これだけの作業で構築できるのか！」と非常に驚きました。前述したようにローカル環境でのみで動作できるものですが、私のようにまず手を動かしてSQLやテーブルの動きを学習したい方にはもってこいの機能だと感じました。

• GUI操作ができる

テーブルを選択して内容を入力するだけでテーブル定義が行えます。さらに、対応するSQL文も自動で生成してくれるので、「この定義をSQL文で書くとこうなるのか」と理解しやすくなりました。

つまずいたポイント​

• 型の定義

例えば「restaurant_name = 飲食店A」と日本語の文字列の値を入力したいとき、型定義が「varchar」だと認識してもらえず、文字化けした値が入ってしまいました。SQL Server（Local DB）の場合は「nvarchar」と定義する必要があるようで、修正するとうまく値が入るようになりました。
また、真偽値の定義にも注意が必要でした。他データベース、例えばPostgreSQLの場合はboolean型として定義されていますが、SQL Server（Local DB）の場合はbit型として定義する必要がありました。

まとめ​

これまで複雑そうだと思っていたデータベース構築も、Visual Studio 2022とLocal DBを利用することで手軽に始められました。とっつきにくさが少なくなり、学習も取り組みやすくなりました。データベースの学習を始める際はぜひおすすめしたいです。

こんにちは。開発 1 部２課の土井です。
今回は WPF を MVVM モデル（Model-View-ViewModel）を使って、作ってみたいと思います。
自分自身、このモデルを使いながら作ることもあるのですが、作りながらこれってどんな仕組みで動いてるんだっけ？とか思うこともあり、ここで一旦内容をまとめたいと思います。

動作環境

• Visual Studio Community 2022
• .NET8.0

まずそもそも MVVM モデル（Model-View-VIewModel）とは？
アプリケーションを作る際に、Model-View-VIewModel の三つに分けて整理する考え方です。それぞれの役割を分割させることで、作りやすくて、直しやすいアプリができます。

• Model（モデル）

データや計算など、アプリの中身の部分です。
例えば、「売上データを計算する」「ファイルから情報を読む」などを行う部分です。

• View（ビュー）

ユーザーが見る画面の部分です。
こちらは XAML で作成されます。

• ViewModel（ビューモデル）

View と Model の繋ぎ役です。
View からの操作（ボタンを押すなど）を受け取って、Model に伝えたり、Model からのデータを View に渡したりします。

MVVM モデルのメリット

1. 画面と処理を分けられる → 直すときに楽！
2. テストしやすい → 画面を動かさなくても、処理だけ確認できる！
3. チームで作りやすい → 役割が分かれているから、分担しやすい！

では、早速実際のプログラムではどのようになるのか、お見せしようと思います。
「画面のボタンを押すと、テキストが変わる」というシンプルなものを作ってみます。

次のような構成で作成します。

• View

<Window x:Class="MvvmPractice.View.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MvvmPractice.ViewModel"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="300">

    <Window.DataContext>
        <local:MainViewModel />
    </Window.DataContext>

    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
        <TextBlock Text="{Binding Message}" FontSize="10" Margin="10"/>
        <Button Content="メッセージ表示" Command="{Binding ShowMessageCommand}" FontSize="10" />
    </StackPanel>

</Window>

「Window.DataContext」は View と ViewModel を紐づけるための部分です。
「local:MainViewModel」と記載していますが、これは Window タグ内の xmlns:local の部分で、ViewModel までの名前空間を指定してあげる必要があります。
また、今回のプログラムでは XAML 内で記載していますが、MainWindow.xaml.cs 内で ViewModel を紐づけることも可能です。

TextBlock タグの「Binding Message」と書かれている部分ですが、これは「ViewModel の”Message”って名前のプロパティと紐づけるよー！」といった感じです。よくバインディングすると言ったりもします。なので、ここには ViewModel 側にある、Message プロパティの値が表示されます。

• ViewModel

using MvvmPractice.Model;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace MvvmPractice.ViewModel
{
    public class MainViewModel : INotifyPropertyChanged
    {
        private string _message;
        private MessageModel _model;

        public string Message
        {
            get => _message;
            set
            {
                _message = value;
                OnPropertyChanged(nameof(Message));
            }
        }

        public ICommand ShowMessageCommand { get; }

        public MainViewModel()
        {
            _model = new MessageModel();
            ShowMessageCommand = new RelayCommand(ShowMessage);
        }

        private void ShowMessage()
        {
            Message = _model.GetMessage();
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string name) =>
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));

    }
}

これが ViewModel の中身ですが、知らないものが多くあるかと思いますので、一つずつ解説していきます。

• INotifyPropertyChanged

View にデータが変わったことを教えてくれる機能を持ったインターフェースです。今回だとこのクラスの「Message」のプロパティの値が変わった時に、View へとそのことを教える役割があります。WPF で MVVM モデルを使うときは、ほぼ必ず使うインターフェースです。

• ICommand

UI 操作を ViewModel に伝えるためのインターフェースです。
今回で言うと、View 側の button タグ内で「Command="{Binding ShowMessageCommand}"」と記載し、ViewModel 側と紐づけています。

• PropertyChangedEventHandler PropertyChanged

これは INotifyPropertyChanged インターフェースの中で定義されているイベントです。
INotifyPropertyChanged インターフェースを使う際には必ず、このイベントを実装する必要があります。
プロパティの値が変わったときは、この PropertyChanged を通じて View へと通知する必要があります。

• protected void OnPropertyChanged(string name) =>
  PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));

ここが少し複雑ですが、一つ一つご説明します。

「=>」は式形式メソッドと呼ばれる記法です。
これを通常の構文に直すと以下のようになります。

protected void OnPropertyChanged(string name)
{
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

PropertyChanged?は null 条件演算子と呼ばれるものです。この PropertyChanged が null でない場合だけ呼び出すということができます。

Invoke は「このイベントに登録されているメソッドを実行する」という意味です。
今回で言うと、

PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));

・PropertyChanged イベントに登録されているメソッドがあれば
・this（通知元）と PropertyChangedEventArgs(names)（変更されたプロパティ名）を渡して、
・そのメソッドを実行する（＝通知する） という処理になります。

PropertyChangedEventArgs は PropertyChanged イベントが発火されたときに、「どのプロパティが変更されたか」を伝えるための情報を持つ PropertyChanged イベント専用の引数クラスです。引数に変更されたプロパティ名が入ります。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace MvvmPractice.ViewModel
{
    public class RelayCommand : ICommand
    {
        private readonly Action _execute;

        public RelayCommand(Action execute) => _execute = execute;

        public event EventHandler CanExecuteChanged;

        public bool CanExecute(object parameter) => true;

        public void Execute(object parameter) => _execute();
    }

}

こちらはボタンなどの操作を ViewModel に簡単に伝えるためのクラスです。
CanExecute、Execute、CanExecuteChanged はこのインターフェースを使うときには実装する必要があります。

• CanExecute このコマンドが実行可能かどうかを返すメソッドです。
  true を返せば、ボタンなどの UI 要素は有効になります。

• Execute 実際の処理を実行するメソッドです。
  parameter には、XAML から渡された値が入ります。

• CanExecuteChanged CanExecute の結果が変わったときに通知するイベントです。

先ほどの MainViewModel.cs に戻ると次のように書かれている箇所があるかと思います。

ShowMessageCommand = new RelayCommand(ShowMessage);

ここで Model 内で行っている処理を ViewModel のプロパティと紐づけています。
ShowMessageCommand は View の button タグ内でバインディングされているので、ボタンを押すと ShowMessageCommand が呼び出されて、ShowMessage メソッドが実行されるといった動きになります。

• Model

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MvvmPractice.Model
{
    public class MessageModel
    {
        public string GetMessage()
        {
            return "腹筋６LDKかい！";
        }

    }
}

こうして画面を起動して動かしてみましょう。

この画面でボタンを押すと、

こうなります。

実際にこの MVVM モデルを使用するときですが、INotifyPropertyChanged と ICommand を継承した ViewModel の Base のようなインターフェースを用意しておいて、ViewModel のクラスではそれを継承して使っていました。そうすることで ViewModel を作成するたびにインターフェースを継承するたびに、メソッドを実装しなくても良くなり、ViewModel 全体として共通する処理があれば、その中に記述できます。

このような形で MVVM モデルというものが活用できます。
ちなみにこの MVVM モデルでは画面とロジックを分離するという目的があるため、View のコードビハインド（MainWindow.xaml.cs など）には基本的には何も書かないという考えがあるのですが、新しい画面を別ウィンドウで開きたいときや、画面を閉じたいときなんかはどうしてもコードビハインドで実装しないといけなかったりします。（いいやり方あれば教えてほしい）
そこらへんがちょっと不便で、プログラムが複雑になったりもするので注意が必要です。

C#の開発はずっと Visual Studio で行っているのですが、Visual Studio Code でも C#の開発ができるということで、一度使ってみたいと思います。

動作環境​

• Visual Studio Code

Visual Studio Code の拡張機能で、以下のインストールを行います。

• C# Dev Kit

これをインストールすると「C#」という名前の C#用の拡張機能も自動でインストールされます。「C# Dev Kit」は VS Code で C#の開発をしやすくするための拡張機能のセットです。Microsoft が提供しています。
主な特徴としては次のような内容です。

• Visual Studio に近い形で開発ができる
• AI 支援（IntelliCode）によるコード保管や提案
• ソリューションエクスプローラーやテストエクスプローラーなどの GUI 機能を提供

できるだけ Visual Studio に近い使い方をできるようにするものみたいです。

ではプロジェクトを作成してみます。作るときですが、GUI 上で作成する方法とターミナルで作成する方法があります。今回は Visual Studio に近いかたちで行いたいと思ったので、GUI 上で作成します。

次の手順で行います。

1. Ctrl + Shift + P でコマンドパレットを開く
2. 「.NET: New Project」を選択
3. プロジェクトテンプレート（Console App など）を選ぶ
4. ターゲットフレームワーク（Target Framework）の選択

１．Ctrl + Shift + P でコマンドパレットを開く​

「Ctrl + Shift + P」を押してコマンドパレットを開いてください。

２．「.NET: New Project」を選択​

３．プロジェクトテンプレート（Console App など）を選ぶ​

以下のように様々なテンプレートが出てくるかと思います。
今回はコンソールアプリを選択します。

選択後、保存先を指定してください。
保存先を指定したら、プロジェクトの名前を決めてください。

その後、「.sln」を選択してください。

４．ターゲットフレームワーク（Target Framework）の選択​

ここまで進めたら、「すべてのテンプレートオプションを表示する」を選択してください。

その後、「フレームワーク」を選択すると、以下のようにフレームワークを指定することができます。

ここでフレームワークを指定せずに作成した場合は、インストールされている.Net SDK の最も新しいバージョンのもので作成されます。
これで「プロジェクトの作成」を選択すると、新しいプロジェクトが作成されます。

ちなみに、ターミナルで作成する方法ですが、以下のコマンドを入力することで作成できます。
「dotnet new console --framework net8.0（ここで.NET のバージョンを指定） -n プロジェクト名 -o プロジェクト名を含めたパス」

作成されたプロジェクトの中身は次のようになっています。

一度動かしてみましょう！
「Program.cs」を選択して、以下のボタンを押してみてください。

ターミナルに次のように表示されていれば、OK です。

GUI でコンソールアプリを作成、デバックを行うことができました。
他にも ASP.NET Core のプロジェクトだったり、ユニットテスト用のプロジェクトが作成できたりと Visual Studio にある程度は近い感覚で使用することができました。ただ、WPF アプリケーションの項目がなかったので、VisualStudio のように GUI 上で画面を作るのはできないかもしれないです。
触ってみた感想としては、Visual Studio の方が使いやすいな・・・といった印象でした。
慣れとかの問題もある気がします。
特に私は WPF アプリケーションを作ることもあるので、そのあたりの機能もあればありがたかったです。
ただ、環境を作るのはそれほど難しくなかったので、VS Code をよく使用されている方はとても良いかと思います。
みなさんも是非 VS Code で C#を触ってみてください。