HTMLとCSSで美しく完成したカフェホームページにJavaScriptでインタラクティブな機能を追加する実戦プロジェクト講義です。 ボタンクリック、メニューフィルタリング、予約フォーム、ダークモードトグルからAPI連動まで、JavaScriptのすべての基礎をミンジとコード先生のストーリーを追いながら自然に学ぶことができます。 5時間の学習で初心者も動的なWebアプリケーションを作ることができます。
受講生 10名
難易度 入門
受講期間 無制限
講座 を紹介して、成長と収益を得ましょう！
マーケティングパートナーズ
講座 を紹介して、成長と収益を得ましょう！
JavaScriptの全ての基本文法を実戦プロジェクトを通じて体得することができます
DOM操作でWebページを動的に制御することができます
イベント処理でユーザーインタラクションを実装することができます
実務でよく使われるJavaScriptパターンを学ぶことができます
APIを連携してリアルタイムデータを表示することができます
物語で学ぶJavaScript - ミンジのカフェホームページに命を吹き込む
この講義は退屈な暗記の代わりに、生き生きとした「ミンジのカフェ」を直接作りながらJavaScriptをマスターできるようにしてくれます。
ウェブサイトをクリックし、動かし、反応させる「生命力」を吹き込む実戦経験を通じて、就職ポートフォリオにそのまま使える完成度の高いプロジェクトを確保することができます。
html/cssの基礎さえあれば、このストーリーテリングベースのコースがあなたを「ウェブサイトビルダー」から「ウェブ開発者」へと確実にアップグレードしてくれるでしょう。
ほとんどの一般的なJavaScript講座は変数、関数、繰り返し文のような文法をバラバラに丸暗記させるため面白くなく、実戦でどのように使えばいいのか途方に暮れてしまいます。
まるで建築に必要なのこぎり、ハンマー、釘の名前と定義だけを学んで、肝心の家を建ててみないのと同じです。
この講義は「ミンジのカフェホームページを完成させる」という一つの大きなストーリーに沿って進むため、文法を学んだらすぐに実習に適用し、結果を目で確認することができます。
この方法を通じて皆さんは「これをどこで使うの？」という悩みの代わりに、すぐに使える実用的な機能を作る経験をすることになります。
웹사이트가 [[STRONG_1]]'살아있다'[[/STRONG_1]]는 것은 사용자(클라이언트)의 행동에 즉각적으로 [[STRONG_2]]반응하고 움직이는 능력[[/STRONG_2]]을 말합니다 .
HTMLとCSSがウェブサイトの骨組みと外観（家の構造とインテリア）を作るとすれば、JavaScriptはそのウェブサイトに命を吹き込む役割（電気、水道、動くドア）を果たします。
JavaScriptを学ぶと「クリックして、動いて、反応する」動的なWebサイトを作ることができるようになります。
例えば、ボタンを押したときにメニューが変わったり、予約フォームに間違った情報を入力すると警告メッセージが表示されるすべての機能がJavaScriptの領域です。
この講義は全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:2px講義を完走すると、就職ポートフォリオに誇らしく載せることができる「コードブリューカフェホームページ」が完成します。
作成する機能は単純な例題ではなく、実際に運営されるウェブサイトに必要な実用的な機能です。
皆さんはメニューフィルタリング（コーヒーのみ表示、デザートのみ表示）、予約フォーム検証（電話番号が正しいかチェック）、ダークモードトグルなどを直接実装してみます。
特にリアルタイム天気表示機能は、外部API（他のサーバーの情報）を取得して連携する高度な技術を学ぶ経験を提供します。
学習効率を最大化するため、各エピソードごとに3段階ミッションが与えられます：基礎、深化、ボーナスミッションです。
基礎ミッションは講義内容を復習し、応用ミッションは学んだ内容を創造的に応用し、ボーナスミッションは次の内容を少し予習してみる構造です。
このコースを始めるためにプログラミング経験は必要ありませんが、HTML/CSSの基礎知識は必須で知っている必要があります。
絵を描く時にキャンバス（HTML）と絵の具（CSS）が準備されていてこそ、筆遣い（JavaScript）を学ぶことができるのと同じですね。
学習対象は
誰でしょう？
HTML/CSSでWebサイトを作ったけれど、静的で物足りない方
ボタンをクリックすると何かが起こるようにしたい方
ユーザーとインタラクションするウェブサイトを作りたい方
プログラミングが初めてだけどWeb開発から始めたい方
カフェ、レストランのホームページに予約機能、メニューフィルターなどを追加したい社長さん
前提知識、
必要でしょうか？
HTML/CSSの基礎知識が必要です！HTMLタグの基本構造とCSSスタイリングを知っている必要があります。「物語で学ぶHTML」と「物語で学ぶCSS」講座を先に受講するか、最低限ウェブページの構造とスタイリング方法を知っていれば十分です。
168
受講生
13
受講レビュー
3
回答
4.0
講座評価
5
講座
こんにちは。ソーシャルアーカイブです。
ソーシャルアーカイブでは、「長期保存の価値を持つ高品質な資料の保管庫」を運営しており、皆様の働き方を革新する3つの役割を担っています。
[ソフトウェアエンジニア]カカオエンタープライズでバックエンドAPIを開発し、業務システムの根本的な効率化を追求してきました。この経験が、AI自動化プロセスを最も堅牢に設計する基盤となっています。
[AIパイロット] 私はGPTとAIツールを活用し、実務で最も速く正確な成果を導き出す先行ユーザーです。検証済みのノウハウだけを厳選し、皆様に最適な飛行ルートを提示します。
[専門講師]KB国民銀行 ITアカデミーとGOORM EDUのメイン講師として、複雑な技術を実務にすぐ適用できる分かりやすい知識へと解きほぐす伝達力を備えています。
この講義は、3つのペルソナの最高の能力を凝縮した高品質な業務革新資料です。私と一緒に、AIを単なるツールではなく、未来の核心資産へと変えていきましょう。
全体
15件 ∙ (2時間 49分)
講座資料（こうぎしりょう）:
全体
1件
知識共有者の他の講座を見てみましょう！
同じ分野の他の講座を見てみましょう！
￥2,451
![フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]講義サムネイル](https://cdn.inflearn.com/public/course-326306-cover/4ea213de-f786-4af1-a9d0-b8932263885a?w=420)
