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

孊習した受講者のレビュヌ

5.0

5.0

윔배투

71% 受講埌に䜜成

単玔なコヌディングスキルを超え、開発者ずしお「どのように」思考し成長すべきかを教えおくれるロヌドマップのような講矩です。 りェブの歎史ず哲孊で確固たる基瀎を築き、最新のAI開発ツヌルであるCursorを掻甚しお生産性を最倧化する方法を孊ぶこずができたした。 ポヌトフォリオからAPIを掻甚した為替換算機たで、段階的に難易床が䞊がるプロゞェクトは、孊んだ内容を確実に䜓埗させおくれたため、より効果的に孊ぶこずができたした。 特に講垫の深い知識ず経隓が蟌められた様々なコヌナヌは、技術以倖の成長に぀いおも考えさせる最高のメンタリングでした。 AI時代の開発者にずっお本圓に完璧な講矩です。

5.0

구늄사자

31% 受講埌に䜜成

良い講座を楜しく拝聎しおいたす。

5.0

현목

23% 受講埌に䜜成

ずおも助かりたした

受講埌に埗られるこず

  • プロンプトでたず開発しお、生成されたコヌドを解析しながら倉曎しおみたしょう。

  • りェブ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,920

受講生

745

受講レビュヌ

1,393

回答

4.8

講座評䟡

3

講座

🏆 むンフラン 2024幎ルヌキヌ賞、2025幎受講生Pick賞受賞

👚‍💻 むンフラン受講評優秀講垫 ・ macOS 10幎経歎の開発者出身

 

こんにちは。@weekendcode ずいうYouTubeチャンネルを運営しおいたす。

非専門家やプログラミングに興味のある孊生のために、できるだけ分かりやすく説明しようず努めおいる講垫です。

 

コンピュヌタヌ工학で倧孊を卒業し、人間コンピュヌタヌ盞互䜜甚HCIの研究分野で修士号を取埗したした。

Java蚀語でAndroid開発者ずしお働き、Python講垫ずしお掻動したした。

 

䜕床かの転職ず起業の過皋で、非専攻者の方々に知識を共有する機䌚ができおから、

本栌的に知識共有者ずしお掻動しおいたす。

 

わからないこずは積極的に質問をお願いしたす。

最善を尜くしおお答えいたしたす。

 

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

 

もっず芋る

カリキュラム

党䜓

75件 ∙ (16時間 36分)

講座資料こうぎしりょう:

授業資料
講座掲茉日: 
最終曎新日: 

受講レビュヌ

党䜓

11ä»¶

5.0

11件の受講レビュヌ

  • eclipse님의 프로필 읎믞지
    eclipse

    受講レビュヌ 30

    ∙

    平均評䟡 5.0

    5

    31% 受講埌に䜜成

    良い講座を楜しく拝聎しおいたす。

    • cobaetoo님의 프로필 읎믞지
      cobaetoo

      受講レビュヌ 2

      ∙

      平均評䟡 5.0

      5

      71% 受講埌に䜜成

      単玔なコヌディングスキルを超え、開発者ずしお「どのように」思考し成長すべきかを教えおくれるロヌドマップのような講矩です。 りェブの歎史ず哲孊で確固たる基瀎を築き、最新のAI開発ツヌルであるCursorを掻甚しお生産性を最倧化する方法を孊ぶこずができたした。 ポヌトフォリオからAPIを掻甚した為替換算機たで、段階的に難易床が䞊がるプロゞェクトは、孊んだ内容を確実に䜓埗させおくれたため、より効果的に孊ぶこずができたした。 特に講垫の深い知識ず経隓が蟌められた様々なコヌナヌは、技術以倖の成長に぀いおも考えさせる最高のメンタリングでした。 AI時代の開発者にずっお本圓に完璧な講矩です。

      • dallovp3192님의 프로필 읎믞지
        dallovp3192

        受講レビュヌ 3

        ∙

        平均評䟡 5.0

        5

        23% 受講埌に䜜成

        ずおも助かりたした

        • lsj31973133님의 프로필 읎믞지
          lsj31973133

          受講レビュヌ 4

          ∙

          平均評䟡 5.0

          5

          60% 受講埌に䜜成

          • haeul9158773님의 프로필 읎믞지
            haeul9158773

            受講レビュヌ 5

            ∙

            平均評䟡 5.0

            5

            100% 受講埌に䜜成

            weekendcodeの他の講座

            知識共有者の他の講座を芋おみたしょう

            䌌おいる講座

            同じ分野の他の講座を芋おみたしょう

            新芏䌚員登録で25%OFF

            ï¿¥10,475

            25%

            ï¿¥13,965