本文へ移動

記事を読む

AI駆動開発やローカルLLMなど、気になる言葉やテーマから記事を探せます。

42件の記事

開発環境

自分のアプリからGeminiのAPIを呼び出す方法と、APIキーの置き場所

アプリにAIの機能を組み込むときは、画面から自分のサーバーへ質問を送り、サーバーがAPIキーを付けてAIの会社へ頼みます。Next.jsのRoute HandlerからGeminiを呼ぶコードと、キーの置き場所をまとめます。

  • Gemini API
  • 生成AI
  • Next.js

生成・制作

Reactのコンポーネント・props・stateの書き方

Reactは、画面を部品に分けて作る仕組みです。部品にあたるコンポーネントの書き方、外から値を渡すprops、部品が覚えておく値のstateを、メンバーカードとボタンの例で説明します。

  • React
  • JavaScript
  • TypeScript

情報検索・整理

検索に入れる言葉の選び方と、公式ドキュメントで答えを確かめる方法

分からないことは、道具の名前とやりたいことで検索し、公式ドキュメントで答えを探します。公式のページの見分け方と読み方、英語のページの翻訳、ブログ記事を読む前に確かめる4つのことをまとめます。

  • 検索
  • 公式ドキュメント
  • 調べ方

開発環境

URL を開いてから Web ページが表示されるまでの流れを、ターミナルで確かめる

ブラウザで URL を開くと、DNS で住所を調べ、サーバーにページを頼み、届いた HTML を画面に描きます。6段階の流れと URL の3つの部分、ステータスコードを説明し、nslookup と curl で実際に確かめます。

  • インターネット
  • URL
  • DNS

開発環境

ターミナルでフォルダを作り、その中に移動して中身を見る基本の命令

ターミナルは、ふだんクリックでしている操作を文字の命令で行う画面です。1行の読み方、今いる場所という考え方、pwd・ls・mkdir・cd など Windows と Mac で共通の6つの命令を説明します。

  • ターミナル
  • PowerShell
  • zsh

開発環境

VS Code を入れてメニューを日本語にし、フォルダを開いてファイルを保存するまで

プログラムを書くための無料のアプリ VS Code を公式サイトから入れ、メニューを日本語にします。画面の4つの部分、フォルダごと開いて使う理由、左の一覧とパスの関係、保存とタブの ● の意味を説明します。

  • VS Code
  • エディタ
  • パス

開発環境

最初に覚えるショートカットキー10個と、スクリーンショットの撮り方

コピー・貼り付け・元に戻す・保存など、プログラムを書くときに何度も使う10個のショートカットを Windows と Mac で並べます。日本語入力と英字入力の切り替えと、スクリーンショットの撮り方と保存場所もまとめます。

  • ショートカットキー
  • スクリーンショット
  • 日本語入力

開発環境

ソフトを公式サイトから安全に入れる手順と、入れた後の更新のしかた

ソフトはストアか公式サイトから入れます。Windows の .exe と Mac の .dmg で手順がどう違うか、警告の画面が出たときに何を確かめるか、OS とアプリの更新をどこで行うかをまとめます。

  • インストール
  • アップデート
  • 情報セキュリティ

開発環境

ファイル・フォルダ・拡張子の意味と、ファイルの場所を表すパスの書き方

保存したものはすべてファイルで、フォルダはその入れ物です。拡張子でファイルの種類を見分ける方法と、ファイルの場所を文字で書くパスの書き方を、Windows と Mac の両方で確認します。

  • ファイル
  • フォルダ
  • 拡張子

対話AI

AI がもっともらしい間違いをする理由と、確かめ方・入れてはいけない情報

続きの言葉を予想するという LLM の仕組みから、もっともらしい間違いが起きる理由を考えます。コードを頼んだときの間違い、一次情報での確かめ方、AI に入れてはいけない情報、答えの偏りを扱います。

  • ハルシネーション
  • LLM
  • ファクトチェック

開発環境

AI が書いたコードを確かめる:動かす・差分を読む・テストを走らせる

AI が「できました」と報告したコードを、自分で動かす、変わった所を読む、テストを頼んで走らせる、の3つで確かめます。境界の値でだけ間違えるコードを使い、確かめないと見逃す間違いを実際に見つけます。

  • コードの検証
  • テスト
  • git diff

開発環境

コーディングエージェントへの頼み方と資料の渡し方

AI エージェントに開発を頼むとき、何をどう伝えるとねらいどおりに動くかを、頼み比べながら確かめます。ルールのファイルの書き方と、エラー文・画面・ファイル・公式ドキュメントの渡し方も扱います。

  • コーディングエージェント
  • プロンプト
  • AGENTS.md

開発環境

コーディングエージェントを入れて頼む:Codex のデスクトップアプリ

自分のパソコンのファイルを直接書き換えてくれる AI エージェント、Codex のデスクトップアプリを無料で入れ、小さな Web ページを作ってもらいます。頼む前に戻れる地点を作り、変わった所を確かめ、気に入らなければ戻すところまで練習します。

  • コーディングエージェント
  • Codex
  • ChatGPT

数理

AI を読むための統計の基本:平均・分散・確率・正規分布

平均・分散・標準偏差・確率・正規分布を、小さなデータの手計算で確かめます。それぞれが AI のどこで使われているかも合わせて見ます。

  • 統計
  • 平均と分散
  • 標準偏差

数理

AI の学習で使う微分と積分:傾きから勾配降下法まで

AI が重みを直すときに使う微分を、グラフの傾きとして小さな数で確かめます。勾配降下法を紙の上でまわし、最後に積分が何を表すかを短く見ます。

  • 微分
  • 勾配降下法
  • 連鎖律

数理

AI で使うベクトルと行列:内積と行列の掛け算を手計算する

AI の中で最も多く行われているベクトルと行列の計算を、小さな数の手計算で確かめます。最後にニューラルネットワークの層1つ分の計算を紙の上で行います。

  • 線形代数
  • ベクトル
  • 行列

開発環境

Node.js のインストール方法:Windows と Mac で LTS 版を入れる

Node.js とは何かを説明し、公式サイトの LTS 版を Windows と Mac に入れる手順を示します。node -v と npm -v で入ったことを確かめ、うまくいかないときの対処も載せます。

  • Node.js
  • npm
  • インストール

数理

ニューラルネットワークの構造② 多層パーセプトロンとNNの学習

多層パーセプトロンでXORを解く構造から、損失関数・勾配降下法・誤差逆伝播法・勾配消失・正則化までを数式で説明する教材

  • 理論
  • 数理
  • AI

数理

ニューラルネットワークの構造① 単層パーセプトロンができるまで

形式ニューロンからヘブ則、パーセプトロンの誤差訂正学習、線形分離とXORまでを、歴史的な違いと数式を区別して説明する教材

  • 理論
  • 数理
  • AI

数理

ニューラルネットワークの構造⓪ AIを理解するための前提知識

ニューラルネットワークを学ぶための前提知識として、入力・重み・行列・微分・勾配・連鎖律を基礎から説明する教材

  • 理論
  • 数理
  • AI

開発環境

①実践する自動化 — 毎回AIに説明するのをやめ、文脈をファイルで管理する

AIチャットで毎回前提を説明し直していた状態を、フォルダとファイルで文脈を管理する形に変えた記録です。

  • Git
  • Markdown

開発環境

AI駆動開発で困らないためのAPI

HTTP APIのリクエストとレスポンス、メソッド、JSON、status code、CORS、timeoutに加えて、APIの契約をTypeScriptの型と実行時の検証で守る方法までを扱う案内です。

  • AI開発
  • API
  • HTTP

データとモデル

神経科学とショート動画中毒

ショート動画にハマるメカニズムを理解しながら、脳とニューラルネットワークの思考の性質について考える。

  • LLM

情報検索・整理

学期中に増える記録を、AIに持たせる

欠席回数や口頭で言われた評価基準のように、学期の途中で増えていく情報の置き場所についてまとめます。チャットに書いたものは次の会話に残りません。

  • Gemini Notebook
  • Google
  • 履修

情報検索・整理

履修登録を、成績と要項の2つのPDFで決める

卒業要件の残りを数える作業を、成績のPDFと入学年度の要項をチャットに渡して済ませる方法です。年度の取り違えに注意が要ります。

  • Gemini
  • Google
  • 履修登録

情報検索・整理

Gemini Notebookで、資料から学習用の教材を作る

入れた資料だけを根拠に答え、そこから9種類の形に作り替えるサービスです。入れられるもの、作れるもの、資料の扱われ方をまとめます。

  • Gemini Notebook
  • Google
  • 試験対策

開発環境

Claude Codeで、予想問題と解説を作る

出力の形を指示で決められて、作ったものがファイルとして残る道具です。何を渡し、何を指定できるかをまとめます。

  • Claude Code
  • 試験対策
  • Markdown

開発環境

AI駆動開発で困らないための運用と監視

Webアプリ公開後のログ、メトリクス、トレース、アラート、障害対応、バックアップ、Cron、Queue、料金と定期保守を理解するための案内です。

  • AI開発
  • 運用
  • 監視

開発環境

AI駆動開発で困らないためのnpmとパッケージ

エージェントがpackage.jsonやpackage-lock.jsonを変更したときに、npm、依存関係、バージョン、npm installとnpm ci、auditの意味を確認するための案内です。

  • AI開発
  • npm
  • パッケージ

開発環境

AI駆動開発で困らないためのセキュリティ

エージェントが作ったWeb機能について、外部入力、XSS、CSRF、権限、ファイルアップロード、Secrets、依存関係などの安全性を確認するための案内です。

  • AI開発
  • セキュリティ
  • XSS

開発環境

AI駆動開発で困らないためのエラー調査

Webアプリの不具合を再現手順へ変え、ブラウザのConsole、Network、サーバーログから失敗地点を切り分け、エージェントの修正を確かめるための案内です。

  • AI開発
  • デバッグ
  • エラー調査

開発環境

AI駆動開発で困らないためのデプロイ

HTML/CSSでWeb制作ができる人が、localhostとデプロイの違い、Vercel・Cloudflare・AWSの選び方、CI/CD、GitHub Actions、Secrets、永続化、ロールバックを理解し、エージェントが作った公開設定を確認できるようになるための案内です。

  • AI開発
  • デプロイ
  • GitHub Actions

開発環境

AI駆動開発で困らないためのテスト

エージェントが報告するLint、型チェック、単体・結合・E2Eテスト、ビルドの違いを理解し、何が確認済みで何が未確認かを判断するための案内です。

  • AI開発
  • テスト
  • Next.js

開発環境

AI駆動開発で困らないための認証と権限

ログイン機能をエージェントへ作ってもらう人が、認証と認可、Cookie、Session、Token、OAuth、role、所有者確認を区別し、権限漏れを確認するための案内です。

  • AI開発
  • 認証
  • 認可

開発環境

AI駆動開発で困らないためのデータベース入門

HTML/CSSでWeb制作ができる人が、SQLの種類、データベースサービス、マイグレーション、N+1などを知り、コーディングエージェントが作ったデータベース仕様と変更を確認できるようになるための入門です。

  • AI開発
  • データベース
  • SQL

開発環境

AI駆動開発で困らないためのTypeScript

HTML/CSSからNext.jsへ進んだ人が、TypeScriptの値とオブジェクトの型、null、Promise、型エラーを読み、エージェントがanyや型アサーションで問題を隠していないか確認するための案内です。

  • AI開発
  • TypeScript
  • Next.js

開発環境

AI駆動開発で困らないためのGit・GitHub用語

Gitの基本を知った人向けに、status、stage、branch、push、pull、PR、restore、revertなどを、AIに安全に指示する観点で整理します。

  • Git
  • GitHub
  • AIコーディングエージェント

開発環境

AI駆動開発で困らないためのNext.js

Next.jsを開いたときに並ぶフォルダーや設定ファイルの役割、Reactとの関係、ページとコンポーネントの仕組み、エージェントの変更を確かめる見方を解説します。

  • Next.js
  • React
  • TypeScript

開発環境

ローカルLLMを動かす道具の役割

PythonからローカルLLMを動かすとき、Terminal、VS Code、Python、pip、Ollama、AIモデルはそれぞれ何をしているのか。文章整形アプリの処理をたどりながら説明します。

  • VS Code
  • Python
  • pip

開発環境

ローカルLLMを自分のPCで動かす

LLMとクラウド型AIチャットの仕組みから始め、PCに合うモデルの探し方、Ollamaの基本コマンド、APIとPythonからの呼び出しまでを順に案内します。

  • Ollama
  • ローカルLLM
  • Python

開発環境

GitとGitHubとは何か、なぜ使うのか

Gitは変更を記録する仕組み、GitHubはその履歴を共有する場所です。完全初学者向けに、一つの変更が記録・共有されるまでを順に説明します。

  • Git
  • GitHub
  • AIコーディングエージェント

対話AI

「AIがアプリを作った」って、実際には何をしているの?

ChatGPTしか使ったことがない人向けに、Codexのようなコーディングエージェントが実際に何をしているのかを説明する

  • ChatGPT
  • Codex
  • コーディングエージェント