inflearn logo
知識共有
inflearn logo

[電子書籍] 1万円で学ぶJavaScript — 文法から実践UIまで

こんにちは、4年目のフロントエンドエンジニアのカムジャ(じゃがいも)です。 私が初めてJavaScriptを学んだ時のことを思い返すと、YouTubeや本を見ながらコードを写している時はすべて理解したつもりになっていたのに、いざ真っ白なエディタを開くと頭が真っ白になってしまう経験が何度もありました。 最初はただググって見つけたコードをコピー&ペーストすることに必死でした。そのため、エラーが発生するとどこから手をつければいいのか分からず、徹夜をして何日も挫折を味わうこともありました。その時、身に染みて悟りました。「他人のコードを100回コピーするよりも、自分で原理を理解して1行書いてみることこそが本当の実力だ」ということを。 多くの入門者の方々が、JavaScriptの高い壁を前にこのように悩んでいます。 🚨 "HTML/CSSで画面は綺麗に作れたけれど、動かそうとすると途方に暮れてしまいます。" 🚨 "変数や関数の文法は全部覚えたけれど、これを実戦でどう組み合わせればいいのか分かりません。" 🚨 "イベントバブリング、DOM操作といった用語を聞くだけで頭が痛くなります。" そこで、この講義を準備しました。私が数多くの試行錯誤の末に習得した「最も確実な近道」だけを整理してお伝えします。 資料を準備するにあたって、難しい開発用語を並べ立てることはしませんでした。分厚い専門書に出てくるような、今すぐには使わない文法は思い切って捨てました。代わりに、実務で呼吸をするように使う核心的な原理を、「ベルトコンベア」や「絵の具のパレット」といった日常的な比喩を通して、皆さんの頭の中に直感的に叩き込みます。 この講義では、単に理論だけを学ぶのではありません。 理論を学んだらすぐに、アコーディオン、タブメニュー、ダークモードの切り替えなど、フロントエンドの実務で必ず遭遇する4つの核心的なUIを、私と一緒にゼロから直接作ってみます。 講義を完走した後は、もう他人のコードをコピーして祈りながら実行ボタンを押すような人ではなくなっているはずです。画面をどう構成するかを自ら設計し、自分の意図通りにJavaScriptのコードを書き進めていける、本物のフロントエンドエンジニアへと生まれ変わることでしょう。 私の実務ノウハウをすべて詰め込みました。真っ白なエディタの前で、もう立ち止まらないでください。さあ、始める時間です。

9名 が受講中です。

難易度 初級

受講期間 無制限

frontend
frontend
JavaScript
JavaScript
vanilla-javascript
vanilla-javascript
uicomponents
uicomponents
a11y
a11y
frontend
frontend
JavaScript
JavaScript
vanilla-javascript
vanilla-javascript
uicomponents
uicomponents
a11y
a11y

受講後に得られること

  • JavaScriptの核心的な動作原理の理解(変数、関数、制御文)

  • DOM操作とイベント処理の完全な理解

  • HTML/CSSで作った静的な画面に命を吹き込む方法

  • アコーディオン、タブメニュー、ダークモードなど、実務で使うUIコンポーネントを直接実装

  • 他人のコードを「コピペ」することを超えて、自分の意図通りにコードを書く能力

📌 このような方におすすめです

  • HTML/CSSはできるけれど、JSの前で立ち止まってしまった方

  • 講義動画の代わりに、読みながら自分のペースで学習したい方

  • コードをコピペすることはできるけれど、なぜ動いているのか分からない方

  • エラーが発生したとき、どこから手をつければいいか分からない方


🚨 もしかして、このような経験はありませんか?

"YouTubeの講義を見ながらコードを写している時はすべて理解したつもりだったのに、いざ空のエディタを開くと何もできません。"

"変数や関数の文法は覚えたのに、実践でどう組み合わせればいいのか分かりません。"

"イベントバブリング、DOM操作... 用語を聞くだけで頭が痛いです。"

このようなもどかしさ、私も経験しました。JSを初めて学んだ時、ググって見つけたコードをコピー&ペーストするのに必死で、エラーが出ればどこから手をつければいいか分からず、徹夜して挫折したこともありました。

その時、痛切に悟りました。

"他人のコードを100回コピーするよりも、原理を知って1行を自分で書くことこそが本当の実力だ。"

この講義はその経験から始まりました。

📖 この講義はどのように進められますか?

この講義は電子書籍形式で提供されます。動画なしで読みながら学習できます。

HTMLとCSSは完成された状態で提供し、JSコードのみを一行ずつ一緒に書き進めていきます。コードを追加するたびに「なぜこのコードを使うのか」をまず説明し、実行結果を確認する方式で進められます。

単に書き写すのではなく、原理を理解してからコードを作成するため、講義が終わった後も新しい状況に応用することができます。

また、各チャプターには直接クリックして操作できるライブデモが含まれています。読みながらすぐに結果を自分の目で確認できるので、理解がより一層深まります。

🗂️ カリキュラム

Part 1. JS基礎文法 — 言語の骨組みを作る

  • Chapter 1. JavaScriptとは何か — ブラウザでJSがすること、コンソールの使い方

  • Chapter 2. 変数とデータタイプ — let/const、プリミティブタイプ、typeof、型変換

  • Chapter 3. 演算子 — 算術/代入/比較/論理演算子、短絡評価、オプショナルチェイニング

  • Chapter 4. 条件文と繰り返し文 — if/else, switch, for/while/for...of, break/continue

  • Chapter 5. 関数の基礎 — 宣言型/表現型/アロー関数、スコープ、引数パターン

Part 2. DOMとイベント — ブラウザを思い通りに操作する

  • Chapter 6. DOMとは何か — DOMツリー構造、documentオブジェクトの役割

  • Chapter 7. DOMの選択と操作 — querySelector, textContent/innerHTML, classList

  • Chapter 8. イベントシステム — addEventListener、イベントオブジェクト、バブリング、イベント委譲

Part 3. 実践例 — 学んだことを自分で作る

  • Chapter 9. アコーディオン — classList.toggleとイベント委譲パターン

  • Chapter 10. タブメニュー — インデックスでタブとパネルを紐付けるパターン

  • Chapter 11. ダークモードトグル — CSS変数、bodyクラスの切り替え、localStorage

  • Chapter 12. 文字数制限カウンター — inputイベント、リアルタイムの状態反映

🛠️ 実践例題はこのように進められます

すべての実践例はHTML、CSS、JSファイルを分離して提供します。

HTML/CSS — 完成された状態で提供します。まず構造とデザインを確認してから始めましょう。

JS — ステップごとに一行ずつ追加しながら、直接作っていきます。各ステップで「なぜこのコードが必要なのか」を説明し、次の行へと進みます。

機能追加 — 基本機能が完成したら、追加機能まで実装してみます。例えば、アコーディオンなら「すべて開く/閉じるボタン」を、タブなら「キーボードの方向キーでの移動」を追加します。

ライブデモ — 各チャプターごとに、直接クリックして操作できるデモが含まれています。コードを読みながら、すぐに結果を目で確認することができます。

✅ 受講後に得られるもの

知識の側面

  • JSの基本文法全体 — 変数、型、演算子、条件文、繰り返し文、関数を理解し、自ら書くことができます。

  • ブラウザがHTMLをDOMに変換する原理を理解します。

  • querySelectorclassListaddEventListenerなど、実務で毎日使うDOM APIを自由に活用できます。.

  • イベントバブリングとイベント委譲パターンを理解し、適用することができます。

実践能力の側面

  • アコーディオン、タブメニュー、ダークモード切り替え、文字数カウンター — 実務ですぐに使える4つのUIコンポーネントを自分の手で作成できます。

  • HTML/CSS/JSファイルを分離して、構造的に作成する習慣が身につきます。

  • JSはクラスの切り替えのみを行い、視覚的な変化はCSSが担当するという役割分担のパターンを体得します。

  • localStorageでユーザー設定を保存し、システムダークモードを検知する方法を学びます。 and detect system dark mode.

思考のプロセス側面

  • コードを見て「なぜこのように書いたのか」を説明できるようになります。

  • 新しいUIを作成する際、どのような手順でアプローチすべきか感覚がつかめるようになります。

  • もう他人のコードをコピーしてくる必要はありません。

💬 Q&Aのご案内

講義を視聴していて、つまずく部分があればいつでも質問を残してください。

営業日基準で2〜3日以内に回答いたします。一人で何日も悩んで諦めないでください。行き詰まったところを一緒に解決します。. Please do not give up after struggling alone for days. We will help you solve the problems where you are stuck.

ただし、以下のような場合は回答が難しいことがあります。

  • 講義の範囲を超えた高度な内容

  • 個人プロジェクトの全コードレビュー依頼

⚠️ 受講前にご確認ください

このような事前知識が必要です

  • HTML基本タグ(divbuttoninputなど)を読める必要があります。

  • CSSでclassidを使ってスタイルを適用する概念を理解している必要があります。

このようなことは知らなくても大丈夫です

  • JSを全く知らなくても大丈夫です。最初から一緒に始めましょう。

  • プログラミングの経験がなくても大丈夫です。

  • 開発環境の設定なしで、ブラウザ一つあればすぐに始められます。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • HTML/CSSはできるけれど、JSの前で立ち止まってしまった方

  • 講義動画を見るのがもどかしい方

  • 検索でコードをコピーして使っているけれど、なぜ動くのか分からない方

前提知識、
必要でしょうか?

  • HTMLとCSSに関するごく初歩的な知識が必要です。(タグ、クラス、idの概念さえ分かれば十分です!)

  • 以前のプログラミング経験がなくても大丈夫です。最初から一歩ずつ丁寧にお教えします。

こんにちは
kamjaaaaaaaです。

こんにちは、4年目のフロントエンドエンジニアのジャガイモ(カムジャ)です。

現在はグローバルモビリティサービスを開発しています。多言語サービスの構築を通じて実務経験を積み、世界中の開発者が使用するオープンソースライブラリreact-hook-formのグローバルTop 30コントリビューターでもあります。

ですが、私も最初からこうだったわけではありません。

JSを初めて学んだ時、YouTubeの講義を見ながらコードを写している時はすべて理解したつもりでしたが、いざ空のエディタを開くと頭が真っ白になる経験を何度もしました。最初はただググって見つけたコードをコピー&ペーストするのに精一杯で、エラーが出ればどこから手をつければいいのか分からず、徹夜をしながら数日間挫折することもありました。

その過程で本当にたくさん迷いました。DOMが何かも分からないままコードを書き、イベントがなぜ2回実行されるのか分からず数時間を無駄にすることもありました。当時の私に最も必要だったのは、膨大な文法の暗記ではありませんでした。「このコードがなぜ動くのか」を説明してくれる誰かでした。

4年間の実務を通じて積み上げてきたもの、そして私が初心者時代に最も迷った部分を整理して、この講義を作りました。私のように遠回りする必要はありません。私が先に経験してきたからです。

もっと見る

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

似ている講座

同じ分野の他の講座を見てみましょう!

期間限定セール

¥6

28%

¥1,264