レッスンライブラリ
目標やスキルに合ったレッスンを探せます。キーワードやカテゴリで絞り込みできます。
...
全 - 件
atom.web-builder.ai-coding-tool-overview
「AI がプログラムを書いてくれるらしいけど、ツールが多すぎてどれを使えばいいかわからない…」――そんな悩みを持つあなたに向けた Atom（＝学習単元）です。 この Atom を終えると、代表的な AI codin...
atom.common.ai-copyright-basics
AI 生成物の著作権と商用利用ルール の学習内容を確認します。
atom.web-builder.how-ai-changes-learning
旅行先で言葉が通じないとき、昔は辞書を片手に一語ずつ調べていました。今はスマホの翻訳アプリに話しかけるだけで、すぐに意味が伝わりますよね。 プログラミングの学び方にも、まったく同じ変化が起きています。AI（＝人工知...
atom.web-builder.deploy-ai-app-to-vercel
あなたがAIの力を借りて作ったWebアプリ、まだ自分のパソコンの中だけで眠っていませんか？ たとえるなら、 美味しい料理を作ったのに、お皿に盛ってテーブルに出していない 状態です。 このレッスンでは、あなたのアプリ...
atom.web-builder.build-app-shell
マンションを建てるとき、いきなり壁紙やインテリアを選ぶ人はいませんよね。まず「柱」や「壁」の配置を決めて、建物の骨組み（＝構造）を作ります。Webアプリも同じです。見た目の細かいデザインの前に、「どのページがあるか...
atom.web-builder.ai-code-review
料理を作ったあと、味見をプロの料理人にお願いする――それがコードレビュー（＝自分の書いたコードを別の人にチェックしてもらうこと）です。今回はその「別の人」をAIに担当してもらいます。 あなたがAIツール（Claud...
atom.web-builder.api-json-basics
あなたがレストランに入ったところを想像してください。 じつは、Webサイトやアプリも裏側でまったく同じことをしています。 このレッスンでは、この「お店の注文」のたとえを使いながら、AIツールを実際に動かしてAPIと...
atom.ai-freelancer.chatgpt-claude-comparison
たとえば、あなたが料理をするとします。フライパンは「炒める・焼く」が得意で、鍋は「煮る・茹でる」が得意です。どちらも調理器具ですが、作りたい料理に合わせて道具を選ぶのは当たり前ですよね。 AIツールも同じです。Ch...
atom.web-builder.why-claude-code-or-codex
料理をするとき、すべてを一人でこなすのもよいですが、便利な道具や助手がいればずっとラクにおいしいものが作れますよね。Webアプリづくりも同じです。AI（＝人工知能で、あなたの指示を理解して作業を手伝うプログラム）を...
atom.web-builder.claude-code-settings-and-memory
新しい料理人をキッチンに迎えたとしましょう。何も伝えないまま作業を任せると、塩と砂糖を間違えてしまうかもしれません。だから「だしは冷蔵庫の右側」「味付けは薄めが好き」と事前に伝えますよね。 CLAUDE.md（＝ク...
atom.web-builder.install-claude-code-and-verify
このレッスンでは、あなたのパソコンに「Claude Code（クロードコード＝文章で指示するとコードを書いてくれるAIアシスタント）」を入れて、ちゃんと動くところまでを15分で確認します。料理で例えるなら、新しい調...
atom.web-builder.install-codex-cli-and-verify
料理をする前に「包丁」や「まな板」を用意するように、AI にコードを書いてもらうためには「道具」をあなたのパソコンに用意する必要があります。このレッスンでは、OpenAI が提供する Codex CLI （＝ターミ...
atom.web-builder.git-github-cli
このレッスンでは、あなたのパソコンで作った作品（コードやファイル）を GitHub（＝世界中の開発者が使う、作品の保管庫＆共有サービス） に送れるようにします。所要時間は 15 分です。 身近な例えで言うと、今のあ...
atom.web-builder.social-login
このレッスンでは、あなたのアプリに「Googleでログイン」や「GitHubでログイン」ボタンを追加します。ソーシャルログイン（＝他のサービスのアカウントを使ってログインできる仕組み）を入れると、ユーザーはメールア...
atom.web-builder.read-data-in-next
レストランでメニューを注文する場面を想像してみてください。あなたがウェイターに注文を伝え、厨房から料理が出てきてテーブルに並ぶ——この流れは、ウェブページがデータを読み込む仕組みとそっくりです。厨房（＝データの置き...
atom.web-builder.create-next-app
このレッスンでは、AIツールの力を借りながら、Webサイトの「土台」をパソコンの中に作って、あなたのブラウザで表示させるところまで進めます。料理にたとえると、 まな板と鍋を用意してお湯を沸かすところ まで。まだ料理...
atom.web-builder.node-pnpm-setup
WebアプリやAIツールを動かすには、まず「作業場」を整える必要があります。 このレッスンでは、 Node.js （＝JavaScriptのプログラムをあなたのパソコンで動かすための土台）と pnpm （＝Webア...
atom.web-builder.install-shadcn
この回では、あなたのNext.jsアプリに「shadcn/ui（＝見た目がきれいなボタンやフォーム部品の詰め合わせ）」を入れて、最初のボタンを画面に出すところまでを15分でやります。料理でいうと、野菜を一から刻むの...
atom.supabase.rls-basics
この Atom では、Supabase（＝データベースなどを用意してくれるクラウドサービス）の「RLS（＝Row Level Security、行ごとのアクセス制限）」を、AIアシスタントと一緒に15分で設定します...
atom.web-builder.file-upload-with-storage
あなたのアプリに「画像を選んでアップロードする」機能を15分で追加します。ここで言う Supabase Storage （＝Supabaseが用意してくれる「画像・ファイル専用の物置」）は、写真や書類を安全にしまっ...
atom.web-builder.make-supabase-ai-ready
新しいキッチンを使い始めるとき、調理器具にラベルを貼ったり、食材を分類して棚にしまったりしますよね。そうしておけば、初めてキッチンに入った人でも「塩はここ、フライパンはあそこ」とすぐに見つけられます。 データベース...
atom.web-builder.vercel-env-and-secrets
料理をするとき、レシピ帳には「塩少々」と書いてあっても、実際に使う塩の量は家庭ごとに違いますよね。Webアプリにも同じように、コード本体とは別に「このアプリ専用の設定値」を渡す仕組みがあります。それが 環境変数 （...
atom.web-builder.how-web-works
レストランでの注文を思い浮かべてください。 Webサイトもまったく同じ流れで動いています。 💡 この「注文→調理→配膳」の流れさえ押さえれば、この先の学習がぐっとスムーズになります。
atom.web-builder.analytics-setup
お店をオープンしたら、「今日は何人お客さんが来たかな？」と気になりますよね。Webサイトでも同じです。あなたのサイトに アクセス解析（＝サイトに誰が、いつ、どれくらい訪れたかを自動で記録する仕組み） を導入して、数...
atom.web-builder.common-install-failures-and-fixes
このレッスンでは、あなたのパソコンに開発ツール（＝Webサイトを作るための道具）を入れるときに、よく起こる失敗を3つのパターンに分けて整理します。失敗を「こういうときはこう直す」というレシピに変えておけば、次に同じ...
atom.web-builder.ask-ai-about-errors
Webアプリを作っていると、急に画面が真っ白になったり、赤い文字がズラッと出たりします。そんなときは、AI（＝あなたの質問に答えてくれる賢い助手）に助けを求めるのが一番の近道です。 でも、AIに「動きません」とだけ...
atom.web-builder.contact-form-with-notification
あなたのWebサイトに「お問い合わせフォーム」を置くのは、お店の入り口に「ご意見箱」を設置するようなものです。お客様がメッセージを書いて投函すると、あなたはその内容を受け取れます。さらに「通知」をつければ、新しいメ...
atom.common.choose-coding-cli
コーディング系 AI ツールを選ぶ の学習内容を確認します。
atom.web-builder.terminal-basics
パソコンの画面をクリックして操作するのは、レストランでメニューを指差して注文するようなものです。一方、ターミナル（＝文字だけの画面でパソコンに直接指示を出すツール）は、シェフに直接「こう作って」と伝えるようなもので...
atom.common.choose-llm-by-task
タスク別に LLM（ChatGPT / Claude 等）を使い分ける の学習内容を確認します。
atom.web-builder.favicon-and-branding
ブラウザのタブに表示される小さなアイコン、あれが「ファビコン（favicon）」です。お店でいえば看板のようなもの。看板がないお店はなんだか不安ですよね。あなたのサイトにもオリジナルの看板を付けて、「ちゃんとしたサ...
atom.web-builder.build-form
カフェで注文を書く「オーダーシート」を思い浮かべてみてください。お客さんが名前と飲み物を書き込む、あの紙です。Webページのフォーム（＝ユーザーが情報を入力して送信できる仕組み）も、まったく同じ役割を果たします。...
atom.web-builder.legal-pages
レストランを開業するとき、メニュー表だけでなく「お店のルール」を入口に掲示しますよね。Webサイトでも同じです。 プライバシーポリシー （＝お客さんの情報をどう扱うかの約束事）と 利用規約 （＝サイトを使う際のルー...
atom.web-builder.nextjs-routing
このレッスンでは、あなたが作った Next.js アプリに 新しいページを1つ追加し、ブラウザのアドレス欄から開けるようにする ところまでを体験します。所要時間は 15 分です。
atom.common.benchmark-case-study
ベンチマーク事例を AI で分析する の学習内容を確認します。
atom.web-builder.email-notification
Webサイトやアプリで「お問い合わせがありました」「注文を受け付けました」といったメールが自動で届く仕組み、見たことがありますよね。あれは裏側でプログラムが動いています。 たとえるなら、お店に「郵便係」を一人雇うよ...
atom.web-builder.image-and-assets
このレッスンでは、あなたが作ったホームページに画像やアイコンを「ちゃんと表示される形」で配置します。料理でいえば、盛り付けの段階です。素材（画像ファイル）を正しい場所に置き、正しい名前で呼び出してあげると、ページに...
atom.web-builder.understand-env-variables
あなたがレストランを経営しているとしましょう。お客さんには「メニュー」だけを見せますが、厨房の「秘密のレシピ」や「仕入れ先の連絡先」は見せたくありませんよね。 プログラミングの世界でもまったく同じです。公開するWe...
atom.web-builder.layout-and-navigation
レストランのメニュー表を想像してみてください。表紙にはお店のロゴ、裏表紙には住所と電話番号があって、中身のページだけが次々と変わりますよね。Webサイトもまったく同じ仕組みです。すべてのページで共通する「枠組み」を...
atom.web-builder.design-consistency
レストランのメニューを想像してみてください。前菜は和風の皿、メインは洋食のプレート、デザートは中華の器……いろんな雰囲気が混ざっていると、「このお店は何のお店なんだろう？」と迷ってしまいますよね。 Webサイトも同...
atom.web-builder.define-mvp-pages
レストランをオープンするとき、最初から50品のフルメニューは必要ありません。「これがうちのお店です」と伝える、最少限のメニューがあればオープンできますよね。あとの料理は、お客さんが来てから増やしていけば大丈夫。 W...
atom.web-builder.first-project-and-basic-ai-requests
料理を始めるとき、まずはキッチン（＝作業場所）を用意して、レシピ（＝作りたいもののメモ）を決めますよね。AIを使った開発もまったく同じです。 このレッスンでは、あなたのパソコン上に「プロジェクト（＝作品をまとめるフ...
atom.web-builder.create-homepage
ホームページを作るのは、はじめての料理に似ています。レシピ（＝作り方の手順）を見ながら材料を合わせていけば、誰でも一品は完成します。今回は、AIツール（＝人工知能の力であなたを助ける便利な道具）がレシピを考えてくれ...
atom.web-builder.choose-project-goal
旅行に出かける前に「どこへ行くか」を決めますよね。地図を開くにも、宿を予約するにも、行き先がはっきりしていないと何も始まりません。 Webサイトを作るときもまったく同じです。「何のために、誰のために作るのか」をたっ...
atom.web-builder.showcase-your-work
料理を作り終えたら、一番おいしそうな瞬間を写真に撮ってSNSに投稿しますよね。Webアプリも同じです。せっかく作った作品は、ちゃんと見せ場を作って発信することで「自分の実績」になります。 このレッスンでは、デプロイ...
atom.web-builder.implementation-checklist
料理をするとき、レシピがなければ「なんとなく」進めることになりますよね。塩を入れるタイミングを忘れたり、野菜を切りながらお湯を沸かすのを忘れたり……。Webアプリ制作も同じです。「なんとなく作り始める」と、途中で何...
atom.web-builder.learning-roadmap-next-steps
おめでとうございます！ここまでたどり着いたあなたは、AIを使ってWebアプリを企画・開発・公開できるスキルを身につけました。 でも「トラックが終わった。次は何をすればいい？」と迷うのは自然なことです。旅行にたとえる...
atom.web-builder.custom-domain-setup
あなたのWebサイトがVercelで公開できたら、次のステップは「自分だけのインターネット上の住所」を手に入れることです。 たとえば、お店を開いたあとに看板を掲げるようなものです。〜.vercel.app という仮...
atom.web-builder.choose-ai-tool-by-goal-os-cli
AI ツール（＝文章やコードを自動で書いてくれるアシスタント）はたくさんあって、最初は「どれを使えばいいの？」と迷いますよね。料理で言えば、包丁・鍋・電子レンジを目的に応じて使い分けるのと同じです。 刺身を切るのに...
atom.common.ad-law-basics
薬機法・景表法の要点を理解する の学習内容を確認します。