100のプロンプトで学ぶAI活用法：入門編
sarc
生成AI時代、誰もが使えるが、うまく使いこなす人は違う。 GPT、Gemini、Claudeを初めて使う方のために 実際に入力しながら学ぶ100の実践的なプロンプトで、AIの世界を完全に理解できるようになります。
입문
AI, ChatGPT, Generative AI
NEW
物語で学ぶJavaScript
HTMLとCSSで美しく完成したカフェホームページにJavaScriptでインタラクティブな機能を追加する実戦プロジェクト講義です。 ボタンクリック、メニューフィルタリング、予約フォーム、ダークモードトグルからAPI連動まで、JavaScriptのすべての基礎をミンジとコード先生のストーリーを追いながら自然に学ぶことができます。 5時間の学習で初心者も動的なWebアプリケーションを作ることができます。
受講後に得られること
JavaScriptの全ての基本文法を実戦プロジェクトを通じて体得することができます
DOM操作でWebページを動的に制御することができます
イベント処理でユーザーインタラクションを実装することができます
実務でよく使われるJavaScriptパターンを学ぶことができます
APIを連携してリアルタイムデータを表示することができます
物語で学ぶJavaScript - ミンジのカフェホームページに命を吹き込む
この講義は退屈な暗記の代わりに、生き生きとした「ミンジのカフェ」を直接作りながらJavaScriptをマスターできるようにしてくれます。
ウェブサイトをクリックし、動かし、反応させる「生命力」を吹き込む実戦経験を通じて、就職ポートフォリオにそのまま使える完成度の高いプロジェクトを確保することができます。
html/cssの基礎さえあれば、このストーリーテリングベースのコースがあなたを「ウェブサイトビルダー」から「ウェブ開発者」へと確実にアップグレードしてくれるでしょう。
1. 退屈な「文法暗記」の代わりに「カフェ作り」
ほとんどの一般的なJavaScript講座は変数、関数、繰り返し文のような文法をバラバラに丸暗記させるため面白くなく、実戦でどのように使えばいいのか途方に暮れてしまいます。
まるで建築に必要なのこぎり、ハンマー、釘の名前と定義だけを学んで、肝心の家を建ててみないのと同じです。
この講義は「ミンジのカフェホームページを完成させる」という一つの大きなストーリーに沿って進むため、文法を学んだらすぐに実習に適用し、結果を目で確認することができます。
この方法を通じて皆さんは「これをどこで使うの？」という悩みの代わりに、すぐに使える実用的な機能を作る経験をすることになります。
2. 生きているWebサイトとは何だろうか？
웹사이트가 [[STRONG_1]]'살아있다'[[/STRONG_1]]는 것은 사용자(클라이언트)의 행동에 즉각적으로 [[STRONG_2]]반응하고 움직이는 능력[[/STRONG_2]]을 말합니다 .
HTMLとCSSがウェブサイトの骨組みと外観（家の構造とインテリア）を作るとすれば、JavaScriptはそのウェブサイトに命を吹き込む役割（電気、水道、動くドア）を果たします。
JavaScriptを学ぶと「クリックして、動いて、反応する」動的なWebサイトを作ることができるようになります。
例えば、ボタンを押したときにメニューが変わったり、予約フォームに間違った情報を入力すると警告メッセージが表示されるすべての機能がJavaScriptの領域です。
3. 5週間で学ぶ核心ロードマップ：DOM操作が核心です
この講義は全5セクション、15エピソードで構成されており、総学習時間は約5.3時間（320分）と短く集中的です。
最初の2週間（Section 1, 2）はプログラミングの基礎文法を固めながらJavaScript言語そのものを理解します。
本当にウェブサイトに生命を吹き込むのはDOM操作（Document Object Model Manipulation）セクションから始まります（Week 3, Section 3）。
DOM操作は、Webページの「要素の検索」「スタイルの変更」「要素の追加・削除」を学ぶ過程で、Webページの特定の部分を自由に操作できる能力を意味します。
graph TD
A["Section 1 & 2: プログラミング基礎 (Week 1-2)"] --> B["Section 3: DOM操作 (Week 3)"];
B --> C["Section 4: インタラクション (Week 4)"];
C --> D["Section 5: 実戦機能 (Week 5)"];
style B fill:#f9f,stroke:#333,stroke-width:2px4. 実戦ですぐに通用する、「コードブルーカフェ」核心機能5つ
講義を完走すると、就職ポートフォリオに誇らしく載せることができる「コードブリューカフェホームページ」が完成します。
作成する機能は単純な例題ではなく、実際に運営されるウェブサイトに必要な実用的な機能です。
皆さんはメニューフィルタリング（コーヒーのみ表示、デザートのみ表示）、予約フォーム検証（電話番号が正しいかチェック）、ダークモードトグルなどを直接実装してみます。
特にリアルタイム天気表示機能は、外部API（他のサーバーの情報）を取得して連携する高度な技術を学ぶ経験を提供します。
5. 完璧な学習サイクルと準備物チェックリスト
学習効率を最大化するため、各エピソードごとに3段階ミッションが与えられます：基礎、深化、ボーナスミッションです。
基礎ミッションは講義内容を復習し、応用ミッションは学んだ内容を創造的に応用し、ボーナスミッションは次の内容を少し予習してみる構造です。
このコースを始めるためにプログラミング経験は必要ありませんが、HTML/CSSの基礎知識は必須で知っている必要があります。
絵を描く時にキャンバス（HTML）と絵の具（CSS）が準備されていてこそ、筆遣い（JavaScript）を学ぶことができるのと同じですね。
こんな方に
おすすめです
学習対象は
誰でしょう？
HTML/CSSでWebサイトを作ったけれど、静的で物足りない方
ボタンをクリックすると何かが起こるようにしたい方
ユーザーとインタラクションするウェブサイトを作りたい方
プログラミングが初めてだけどWeb開発から始めたい方
カフェ、レストランのホームページに予約機能、メニューフィルターなどを追加したい社長さん
前提知識、
必要でしょうか？
HTML/CSSの基礎知識が必要です！HTMLタグの基本構造とCSSスタイリングを知っている必要があります。「物語で学ぶHTML」と「物語で学ぶCSS」講座を先に受講するか、最低限ウェブページの構造とスタイリング方法を知っていれば十分です。
129
受講生
11
受講レビュー
3
回答
3.8
講座評価
5
講座
안녕하세요. 소셜아카이브 입니다.
소셜 아카이브에서는 '장기 보존의 가치를 지닌 고품질 자료들의 보관소'를 운영하며, 여러분의 업무 방식을 혁신할 세 가지 역할을 수행합니다.
[소프트웨어 엔지니어]카카오 엔터프라이즈에서 백엔드 API를 개발하며 업무 시스템의 근본적인 효율화를 고민했습니다. 이 경험이 AI 자동화 프로세스를 가장 견고하게 설계하는 기반이 됩니다.
[AI 파일럿] 저는 GPT와 AI 툴을 활용하여 실무에서 가장 빠르고 정확한 성과를 도출하는 선행 사용자입니다. 검증된 노하우만을 선별하여 여러분에게 최적의 비행 경로를 제시합니다.
[전문 강사]KB국민은행 IT 아카데미와 구름에듀의 주강사로서, 복잡한 기술을 실무에 바로 적용 가능한 쉬운 지식으로 풀어내는 전달력을 갖추었습니다.
이 강의는 세 가지 페르소나의 최고 역량이 집약된 고품질의 업무 혁신 자료입니다. 저와 함께 AI를 단순한 도구가 아닌, 미래의 핵심 자산으로 만들어 갑시다.
カリキュラム
全体
15件 ∙ (2時間 49分)
講座資料（こうぎしりょう）:
授業資料
講座掲載日:
最終更新日:
受講レビュー
まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください！
期間限定セール、あと3日日で終了
￥1,762
28%
￥2,467
sarcの他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]강의 썸네일](https://cdn.inflearn.com/public/course-326306-cover/4ea213de-f786-4af1-a9d0-b8932263885a?f=avif&w=420)
![[コードキャンプ]ブートキャンプで作られた高濃縮バックエンドコース강의 썸네일](https://cdn.inflearn.com/public/courses/329996/cover/2be99a0c-5d5a-4e15-b85b-53c09879058a/thumbnail-backnew.png?f=avif&w=420)
