inflearn logo
知識共有
inflearn logo

Cursor AIで作って学ぶWeb & Javascript

自分だけの技術を身につけたい方、ウェブ開発を基礎からじっくり学んでみたい方におすすめです。ウェブブラウザと言語の歴史から丁寧にお教えします。

難易度 入門

受講期間 無制限

HTML/CSS
HTML/CSS
JavaScript
JavaScript
LLM
LLM
AI
AI
Cursor AI
Cursor AI
HTML/CSS
HTML/CSS
JavaScript
JavaScript
LLM
LLM
AI
AI
Cursor AI
Cursor AI

受講後に得られること

  • プロンプトでまず開発して、生成されたコードを解析しながら変更してみましょう。

  • ウェブ(Web)は誰が作ったのでしょうか?なぜ作ったのでしょうか?歴史から学んでみましょう。

  • 素早く開発し、ビルドできるCursor AIの機能を一つずつすべてお教えします。

  • Web APIs、ウェブブラウザの仕組み、Javascriptのすべてを教えます。理解できるまで!

  • 私が作ったウェブページ。自分のコンピュータの中だけですか?もうNo!直接デプロイしてユーザーに見せましょう。


🚨 この講座はCursorのバージョンが上がるたびに内容がアップデートされます。 every time a new version of Cursor is released. mỗi khi Cursor có phiên bản mới.

📢 継続的にアップデートされる講義をお探しなら、この講義を選択することをおすすめします。


< AIツールを通じたソフトウェア開発を夢見ていますか? >


📢いつまでも基礎文法ばかり学んでいるわけにはいきません!


これ以上、基礎文法から学ぶのはNo!

AIエディタを使って作りながら学ぶ Yes!


ChatGPTの登場以降、数多くのソフトウェア講座のヒントや開発手法が溢れかえっています。

プロンプト数行でホームページやゲームを制作すること、

さらにはコードを一行もタイピングせず、声で行うバイブコーディング(vibe coding)まで?


しかし、まだAIによる開発には限界があるという意見もあります。

開発をすべて任せてしまうと、持続的なソフトウェア開発を行うことも容易ではありません。


このように多様な意見が鋭く対立する時代には、どのようにコードを学ぶべきでしょうか?


ソフトウェア開発の開始を迷っている方、非専門家だけど自分だけのウェブページを作ってみたい方、

ウェブページがどのように動作するのか知りたい方、LLMでコードは作成したけれど、それを解読してみたい方!


今すぐこの講座で、Web開発の基礎を始めましょう。(Javascript, HTML/CSS)

実際にClaudeの無料版で生成したコードを修正しながら、ウェブの概念、ウェブブラウザの仕組み、その上で動作するJavaScript言語の文法を一つずつ丁寧に解説します。


ただ文法を学ぶだけでなく、自分だけのプロジェクトを直接開発しながらです!


これからAIを通じて生成されるコードやソフトウェアは、ますます増えていくでしょう。

今からでも遅くありません。誰もが走り出している世界で、私たちも一緒に第一歩を踏み出してみませんか?

ChatGPT、Claude、Geminiで生成したコード…解釈して修正してみたいなら?



📌 目の前で直接お見せします!同じようにプロンプトで生成したコード、こうやって解釈するんです!

💻 文法ばかり一生懸命勉強しても意味がありません。何かを作りながら学ばないと! 「本物」のプロジェクトを作りながら学びましょう。

🛠 LLMが生成したコードを修正しながら概念を掴みます。 あ〜、こうやってコードが動くんだ!

前提知識?No!コンピュータ専攻者だけが理解できる専門用語?No!将来、自分の子供にも見せるつもりです。

コードを修正していても上手くいきません…どうすればいいですか? すぐにお答えします!どんどん質問を投稿してください。

💡他の講義との違いは何ですか?

  • この講義は、前後の文脈なしにいきなり文法を押し付けたりしません。私たちは文法だけを学ぼうとしているのではないからです。

  • まず最初にLLMで核心となるアイデアを実装します。その後にコードを解釈しながら学びます。

  • 技術の歴史を一緒に学びましょう。この技術はなぜ生まれたのでしょうか?誰が作ったのでしょうか?どのように発展してきたのでしょうか?

このような方にとても役立つ講義です。

ウェブページ開発を始めたいです

毎回HTML、CSS、Javascriptの文法ばかり何度も見ました。

自分だけのものを作ってみたいです。

LLMをうまく使いこなしたいです
最近AIが話題になっていますが、

何か私が利用できるものはないでしょうか?

新しいツールをどのように使えばいいでしょうか。

Web技術の歴史と起源が気になります
Webページはどうやって動くの?

APIとは何?ウェブブラウザとは?

HTMLは誰が作ったのだろう?

💡LLM(ChatGPT, Claude, Grok)でむやみに生成されたコードを解釈するのが難しいなら?

  • 作成されたプロジェクトを通じて、文法と動作を解釈します。

  • すべてのIT技術は、短所や不便さから誕生しました。ES6とは何でしょうか?HTMLは?

  • 最後まで完成させましょう。自分だけのプロジェクトを実際にアップロードし、実際のユーザーに自分が作ったページを提供します。

実際の講義で学ぶ資料を見て判断してください 😀

Cursor AIコードエディタをセットアップします。

私たちが使用するエディタを直接セットアップします。

個別メニューについて学び、より便利に設定する方法はないか一緒に考えてみましょう。

LLMを通じて作成したコードを修正してみましょう。

むやみにプロンプトで生成したウェブページ!

これはどういう意味だろう?なぜこのように動くのだろう?

JavascriptとHTMLを一つずつ直接修正してみましょう。

例題で学び、分からないことは説明します。

この文法はいつ使うのでしょうか?

本で読んだだけのこと、通りすがりに耳にしただけのことを

直接例題を通して説明します。退屈しないように😃

実際にLLMでコードを生成して応用してみましょう。

21世紀はAIの時代!今や誰もがLLMでコードを作成します。ですが、もし読み方がわからず、修正もできなかったら?それなら、正しく動作するソフトウェアに作り変えてみましょう!

授業を聞くだけではつまらないですよね…!

コーディングをする際に知っておくと良いことには、どのようなものがあるでしょうか?

実際の開発で困難に直面するのはどのような場合でしょうか?


画面でコードを書くだけではありません。

もはやコードを書くだけの授業はNo!

なぜこのように動作するのかを、手書き(筆記)で説明します。


👍この講義を受けると、一体何が身に付くのでしょうか。


この講義は、LLMが生成するコードをベースにCursorプロジェクトを作成しながら、Web開発をステップバイステップで学びます。

しかし!単なるウェブ開発だけでなく、以下のような悩みをお持ちの方にも役立つはずです。


1. 一人でも起業できる方法はないでしょうか?インディーハッカーになりたいです!

<一人が作った10億ドル価値の会社>

出典: https://every.to/napkin-math/the-one-person-billion-dollar-company

<10の印象的な一人で創られた会社たち>

出典: https://hackernoon.com/check-out-these-impressive-1-person-companies

1人企業として10億ドル(1.3兆ウォン)の価値を持つ企業が登場するだろうと予測する人々がいます。

その中の一人がOpenAIのサム・アルトマンですね!AIはこの時代を変える新しい技術だと言われています。

反対に、一人ではそれほど大きな成功を収めるのは容易ではないと言う人もいます。


そんな風に考えたことはありますか?

'一人で世界に影響を与えることができる方法は何だろうか?'

'仕事が終わった後や休職期間中に、時間や場所にあまり縛られずにできる活動はないだろうか?'

起業コストはゼロに近づき、ソフトウェア開発は日に日に簡単になっています。

ソフトウェア開発が、こうした悩みの答えになるかもしれません。


今はLLMの時代です。

Grok、Claude、ChatGPT、Gemini、DeepSeekまで!

複数のLLMモデルを通じて、コードを自動生成し、修正し、解説することを学びます。


2. 何かができてはいるけれど、なぜできているのか分かりません。学びたいです!

< 今や自然な文章一つで簡単なウェブページができる時代です。 >


これで何かを作ってみることはできないでしょうか?

複数のページで構成された企業向けランディングページ、自分をアピールできるポートフォリオサイト、簡単なクイズを出して常識を伝える情報提供ページやブログはどうでしょうか?


何かを作れる世の中で、もう少しだけツールを知れば「本物の製品」を作ることができます!

この講義を通じて、皆さんが直接作ったウェブページを無料ホスティングサービスにアップロードし、実際のユーザーを集めてみてください。


3. ウェブページを作った!その次は...?

タイトル:「一人でSaaSを起業する人に適したツールは?」 出典:Hacker News

ウェブページは誰でも作れるって?

デプロイは?メンテナンスは?データ収集はどうすればいいでしょうか?収益化する方法は何でしょうか?


最初のハードルを越えたら、次のハードルを越えなければなりません。

データ収集、バックエンド開発、DB管理....

まで行く前に!


まず、まともなウェブをアップロードしてデプロイしながら、ウェブページがどのように動作するのかを学ばなければなりません。

この講義では、ウェブページを作る過程とその後にどのようなものが必要になるのかについても、簡単に学んでいきます。

👋 講義を作った理由 & 講師紹介


こんにちは、YouTubeで@weekendcodeとして活動している週末コーディングと申します。

Java開発者として働いた後、現在はプログラミング教育関連のコンテンツを制作しています。


コンピューターを専攻していない方、コンピューターに関心のある高齢者の方、他の仕事を退職された方などを家庭教師として教えた経験があります。これまでの大学での教育方式に対して、多くの疑問を抱いていました。


今回はウェブ開発です!

初めて自分だけのウェブページを開発してみたい方々のために、AからZまで準備したいと思いました。

一歩一歩丁寧に作り上げた高品質な発表資料スライドと、誰も教えてくれないウェブとインターネットの歴史まで!


「最初からどのように誕生したのか」、「なぜこのように使われるようになったのか」を知れば、ずっと理解しやすくなるからです 😃


他の講義は難しかったです。だから、この講義を作りました。


私が初めてウェブ開発を学んだ日のことを、今でも覚えています。

数多くの講義を聞き、学校で授業も受け、塾にも通いました。

しかし、一体なぜこのように使うのか、これらはどのようにして生まれたのかを説明してくれる人は誰もいませんでした。


しかし、現場で直接開発をしてみると、思ったより簡単なことが多く、

そのようなことを一つひとつ集めて、一つの講義としてまとめて提供しようと思います。



学習の理解度を高めるために最善を尽くします。


この講義は私の最初の講義ではありません。

他の動画や講座でのレビューをご紹介します。

適当に作った講座ではなく、一つ一つ理解できるまで説明いたします。

わからないことがあれば、すぐに質問を投稿してください!


時代は急速に変化していますが… 知るべきことは学ばなければなりません。


今や誰もがAIについて語っています。生成型AI、LLM、プログラミング...

数多くのキーワードの中で「一発で!自動化!」と叫ぶ前に、基礎を知らなければなりません。

そうすることで、より大規模なウェブページや、整ったコード、メンテナンスのしやすいソフトウェアを作成できるようになります。


私たちはプロダクトを作りながら、JavaScriptの文法とウェブブラウザの仕組みを学んでいきます。

💡わからないことは、すぐに質問してください!

  • 「自分が理解できない内容があるのではないか」と心配されていますか?ご安心ください。誰にでも初めてがあるように、どんな質問に対しても真剣に向き合い、すぐにお答えします😃

  • この講義一つで、ウェブページの制作からデプロイまで全て完結します。難しい分、皆さんの成長のための経験になると信じています。


ボーナス学習資料! <WEB API>で構成したホームページのコードをすべて提供!

ウェブブラウザ(クライアント)Web API、サーバー側の機能資料をすべて提供いたします!

フロントエンド、バックエンドの開発者なら必ず知っておくべきAPIの概念と実習をすべてお教えします。


例題1:ウェブブラウザから接続したクライアントを確認するフロントエンドコード

  • クライアント情報を調べる

  • OS情報、通信状態、ウェブブラウザの機能対応状況の確認

例題2:クライアントURLパース(現在のページ、ポート、パラメータ、パスなど)


ウェブブラウザでアクセスするURLごとに異なる機能を組み込みたいなら?

JavascriptでAPIを通じてどのように値を取得するのか、実際のソースコードで確認してみてください。

例題3:小さな保存領域、クッキーで遊ぶ


ウェブブラウザにおいてクッキーとは何でしょうか?クッキーをどのように操作できるでしょうか?

実際に作成して、削除して、確認してみてください!

作成されたソースコードファイル、まとめられたPDFファイル、すべてまとめて差し上げます!

上記の学習資料は Web APIs セクションで確認しましょう!

🤔 受講前の注意事項

実習環境

  • Cursor AI、ウェブブラウザで実習します。

  • 私たちが作ったウェブページは、Cloudflare Pagesにデプロイします。

  • Windows、MacOSすべての環境について説明します。


学習資料

  • コード(HTML, JS, CSS)はすべてファイル原本のまま提供

  • 一目瞭然にまとめたJavascript文法をPDFで提供

🖋 Tips! 講義を聞くだけではつまらないですよね。

私が開発をしながら経験した面白い話やエピソードで、一息つきながら講義を受けましょう。


  • 自分に合ったプログラミングフォントはどうやって見つけることができるでしょうか?

  • 開発中に行き詰まったらどう解決する?MDN / ECMAドキュメントを見る!

  • ブラウザの互換性で実際に苦労した話を共有します。

  • 私が直接経験した偉大な非専攻者たち(独学で開発して数億ウォンを稼いだですって?!)

  • 思ったより難しくないね?自分が開発したウェブページでお金を稼ぐ方法!


Web開発を初めて経験されますか? おそらくこの講義が、皆さんの人生を変えるかもしれません!

こんな方に
おすすめです

学習対象は
誰でしょう?

  • ウェブページ開発を学んでみたい方

  • JavaScriptは聞いたことがあるけれど、どのように活用すればいいか分からない方

  • うんざりするような言語チュートリアルではなく、「製品開発」をしてみたい方

  • 迅速なプロトタイピング & 自分だけのビジネスを始めたい方

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

  • 初心者レベルのHTML、Javascriptが役に立ちます。

  • Visual Studio Codeというコードエディタを使っていた方は、より使いやすく感じると思います。

こんにちは
weekendcodeです。

5,008

受講生

588

受講レビュー

1,241

回答

4.8

講座評価

3

講座

こんにちは。@weekendcode というYouTubeチャンネルを運営しています。

非専攻者やプログラミングに興味のある学生のために、できるだけ分かりやすく説明しようと努めている講師です。


コンピューター工학を専攻して大学を卒業し、ヒューマンコンピュータインタラクション(HCI)の研究分野で修士号を取得しました。

Java言語でAndroid開発者として働き、Python講師として活動してきました。

いくつかの転職と起業を経験する中で、非専門家の方々に知識を共有する機会を得て以来、本格的に知識共有者として活動しています。分からないことは

何度かの転職と起業の過程で、非専攻者の方々に知識を共有する機会を得てから、

本格的に知識共有者として活動しています。

わからないことは積極的に質問してください。

精一杯お答えさせていただきます。

良い一日をお過ごしください。

本格的に知識共有者として活動しています。分からないことは積極的に質問してください。最善を尽くしてお答えします。良い一日をお過ごしください。

もっと見る

カリキュラム

全体

74件 ∙ (16時間 36分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

7件

5.0

7件の受講レビュー

  • cobaetoo님의 프로필 이미지
    cobaetoo

    受講レビュー 1

    平均評価 5.0

    5

    71% 受講後に作成

    単純なコーディングスキルを超え、開発者として「どのように」思考し成長すべきかを教えてくれるロードマップのような講義です。 ウェブの歴史と哲学で確固たる基礎を築き、最新のAI開発ツールであるCursorを活用して生産性を最大化する方法を学ぶことができました。 ポートフォリオからAPIを活用した為替換算機まで、段階的に難易度が上がるプロジェクトは、学んだ内容を確実に体得させてくれたため、より効果的に学ぶことができました。 特に講師の深い知識と経験が込められた様々なコーナーは、技術以外の成長についても考えさせる最高のメンタリングでした。 AI時代の開発者にとって本当に完璧な講義です。

    • alscjf13722767님의 프로필 이미지
      alscjf13722767

      受講レビュー 2

      平均評価 5.0

      5

      32% 受講後に作成

      • dallovp3192님의 프로필 이미지
        dallovp3192

        受講レビュー 3

        平均評価 5.0

        5

        23% 受講後に作成

        とても助かりました

        • pcj855585님의 프로필 이미지
          pcj855585

          受講レビュー 3

          平均評価 5.0

          5

          61% 受講後に作成

          • yujinseok3246님의 프로필 이미지
            yujinseok3246

            受講レビュー 9

            平均評価 5.0

            5

            61% 受講後に作成

            weekendcodeの他の講座

            知識共有者の他の講座を見てみましょう!

            似ている講座

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

            期間限定セール

            ¥68

            19%

            ¥13,898