강의

멘토링

로드맵

Programming

/

Web Development

Cursor AIで作りながら学ぶWeb & Javascript

自分だけのスキルを身につけたい方、ウェブ開発を段階的に学んでみたい方におすすめです。ウェブブラウザと言語の歴史からお教えします。

  • weekendcode
cursorai
HTML/CSS
JavaScript
LLM
Generative AI
Cursor AI

こんなことが学べます

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

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

  • 迅速に開発・ビルドできるCursor AIの機能を一つずつ全てご紹介します。

  • Web APIs、Webブラウザの原理、JavaScript全てお教えします。理解できるまで!

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


🚨この講義は Cursor のバージョンが上がるたびに内容が更新されます。

📢継続的に更新される講義をご希望の場合は、この講義を選択することをお勧めします。


< AI Toolによるソフトウェア開発を夢見ていますか? >


📢いつまでも基礎文法だけを学ぶことはできません!


もはや基礎文法まず学ぶのはNo!

AIエディタを使って作成しながら学習するYes!


ChatGPT以来、多くのソフトウェアコースのヒントと開発方法論が注目されています。

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

でも、コードをひとつもタイピングせずに声にするバイブコーディングまで?


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

開発をすべて任せれば、継続的なソフトウェアを開発することも容易ではありません。


このように様々な意見が先鋭に分かれる時代には、どのようにコードを学ぶべきでしょうか。


ソフトウェア開発開始を躊躇している方、非専攻者なのに自分だけのWebページを作ってみたい方、

Webページがどのように動作するのか知りたい方、LLMでコードは作ったのですが解釈をしてみたい方!


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

直接Claude無料版で生成したコードを修正しながら、次々とWebの概念、Webブラウザの動作方法、その上で動作するJavascript言語の文法を説明します。


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


今後、AIを通じて生成するコードとソフトウェアはますます多くなるでしょう。

今も遅れませんでした。みんなが飛び込む世界に、私たちも一緒に第一歩を踏み出すのはどうでしょうか?

ChatGPT、Claude、Geminiで生成されたコード..解釈して修正したい場合は?



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

💻文法だけが一生懸命勉強したらどうしますか。何かを作って学ぶべきです! 「本物の」プロジェクトを作成しながら学びます。

🛠LLMが生成したコードを修正しながら概念をつかみます。あ~こんなコードが動作するんだね!

先行知識?いいえ!コンピュータ専攻者だけが理解できる専門用語?いいえ!未来の私の子供にも見せてくれます。

コードを修正してもうまくいきません。すぐに答えてください!たくさん質問してください。

💡他の講義と差別点は何ですか?

  • この講義は前後の文脈なしですぐに文法を聞かせません。私たちは文法だけを学ぶつもりはありません。

  • まず、LLMでコアアイデアを実装します。それからコードを解釈しながら学びます。

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

こんな方々に大いに役立つ講義です。

Webページの開発を開始したい

毎回HTML、CSS、Javascriptの文法だけ何回も見ました。

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

LLMをよく試してみたい
要塞AIがホットだったが、

私は何か利用できませんか?

新しいツールをどのように書くべきでしょうか。

Web技術の歴史と根源が気になります。
Webページはどのように動作しますか?

APIとは何ですか? Webブラウザは?

HTMLは誰が作りましたか?

💡馬小屋でLLM(ChatGPT, Claude, Grok)で生成されたコードを解釈するのが難しいとしたら?

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

  • すべてのIT技術は欠点と不快感から生まれました。 ES6とは何ですか? HTMLは?

  • 最後まで完成します。私自身のプロジェクトを直接見て、実際のユーザーに私が作ったページを提供します。

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

Cursor AIコードエディタを設定します。

私たちが使用するエディタを直接設定します。

個々のメニューについて学んでみて、より楽にセッティングする方法はないか一緒に悩んでみてください。

LLMで書いたコードを修正してみましょう。

ランダムなプロンプトで作成したWebページ!

これはどういう意味ですか?なぜこのように動作するのですか?

JavascriptとHTMLを一つずつ直接修正してみてください。

例として学び、知らないことは説明します。

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

本だけで読んだ、通り過ぎて聞くだけだったことを

直接の例を通して説明します

直接LLMでコードを生成してみてください。

21世紀はAIの時代!

授業だけ聞くと面白くないでしょう…!

コーディングをするときに知っておくと良いことは何ですか?

実際の開発をしながら困難を経験する場合は何ですか?


画面にコードだけを書きません。

これ以上コードだけを書く授業はNo!

なぜこのように動作するのかを手書きで説明しましょう。


👍この講義を聞くと一体何が残るのでしょうか。


このレッスンでは、LLMが生成するコードに基づいてcursorプロジェクトを作成しながら、Web開発を徐々に学びます。

しかし、単純な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のサム・アルトマンです!

逆に、一人ではそれほど大きく成功しにくいという人もいます。


そのようなことを考えたことがありますか?

「自分で世界に影響を与える方法は何ですか?」

「退勤してから、休職期間に、時間と場所に影響を受けにくい活動はないだろうか?」

創業コストはゼロに落ち、ソフトウェア開発は日々簡単になっています。

ソフトウェア開発がこのような悩みの答えになることができます。


今はLLMの時代です。

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

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


2. 何かになるのに、なぜなるのか分からないです。

<今は自然言語の文章で簡単なWebページが出てくる世界です。


これで何かを作ることはできませんか?

複数ページの企業型ランディングページ、私を知らせるポートフォリオホームページ、簡単なクイズを出して常識を知らせる情報性ページやブログは?


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

このレッスンを通じて、自分で作成したWebページを無料のホスティングサービスにアップロードし、実際のユーザーを集めてください。


3. Webページを作った!

タイトル:「一人でSaaSを創業する人に良いツール?」出典:ハッカーニュース

ウェブページは誰でも作れますか?

デプロイは何ですか?メンテナンスは何ですか?


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

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

まで行く前に!


まず、適切なWebをアップロードし、配布しながらどのようにWebページが動作するかを学ぶ必要があります。

このレッスンでは、Webページを作成するプロセスとそれ以降に何が必要なのかを簡単に学びます。

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


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

Java開発者として働いて、現在はプログラミングトレーニング関連のコンテンツを作成しています。


コンピュータを専攻していない方、コンピュータに関心のある老年層の方、他の業をして引退した方を課外で教えた経験があります。


今回はウェブ開発です!

初めて自分だけのWebページを開発してみたい方のためにAからZまで準備してみたかったです。

一汗一汗製作したクオリティ発表資料スライドと、誰も知らせないウェブやインターネットの歴史まで!


「最初からどのように誕生したのか」、「なぜこのように使うことになったのか」を知ると、はるかに理解しやすくなりますから😃


他の講義は難しかったです。


私が最初にWeb開発を学んだ日をまだ覚えています。

数多くの講義を聞いて、学校で授業も聞いて、学園も通いました。

ところが、一体なぜこう書くのか、こういうものはどのように生じたのか説明してくれる人が誰もいませんでした。


しかし、現場で直接開発をするので、思ったより簡単なものが多く、

そのようなものを一つ一つ集めて一つの講義でまとめて提供しようとします。



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


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

他の映像と講座でのレビューをお見せします。

ホツル作った講座ではなく、一つ一つ理解できるまで説明いたします。

わからない場合は、すぐに質問してください!


時代が急速に変わっていますが…知っておくべきことは学ばなければなりません。


今は誰もがAIを話しています。生成型AI、LLM、プログラミング...

数多くのキーワードの中で「漢方に!自動化!」を叫ぶ前に基礎を知る必要があります。

そうすれば、より大きなウェブページ、よく整頓されたコード、メンテナンスしやすいソフトウェアを書くことができます。


私たちは製品も作成しながらJavascript文法とWebブラウザの動作を学びます。

💡知らないのはすぐに質問してください!

  • 「私が理解できない内容があるのではないか」と思いますか?心配しないでください。みんなに初めてのように、どんな質問にも十分悩んですぐに答えます😃

  • この講義のひとつで、Webページ制作から配布まですべて終わります。難しいほどあなたの成長のための経験になると信じています。


ボーナス学習資料!で構成したホームページコード全て提供!

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

フロントエンド、バックエンドの開発者であれば、無条件に知っておくべきAPIの概念と実践の両方を教えてください。


例1:Webブラウザでアクセスしたクライアントを確認するフロントエンドコード

  • クライアント情報を学ぶ

  • オペレーティングシステム情報、通信の有無、Webブラウザ機能のサポートの確認

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


WebブラウザでアクセスするURLごとに異なる機能を入れたい場合は?

JavascriptでAPIを介してどのように値を取得するかを直接ソースコードで確認してください。

例3:小さな保管エリア、クッキーで遊ぶ


WebブラウザでCookieとは何ですか? Cookieをどのように操作できますか?

自分で作成、削除、確認してみてください!

作成されたソースコードファイル、まとめられたPDFファイルともにまとめてお届けします!

上記の学習資料はWeb APIセクションで会いましょう!

🤔受講前の注意

練習環境

  • Cursor AI、Webブラウザで練習します。

  • 作成したWebページはCloudflare Pagesにデプロイします。

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


学習資料

  • コード(HTML、JS、CSS)はすべてファイルソースのまま提供されます

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

🖋 Tips!講義だけ聞けばあまり面白くないじゃないですか。

私が開発をしながら経験した面白い話と、そりで休みながら講義を聞きます。


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

  • 開発して障害物に遭遇したらどうやって解決しますか? MDN / ECMA文書を見る!

  • ブラウザの互換性で直接苦労したスライスをいたします。

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

  • 思ったより難しくない?私が開発したWebページでお金を稼ぐ方法!


Web開発を初めて体験していますか?おそらくこの講義があなたの人生を変えることができます!

こんな方に
おすすめです

学習対象は
誰でしょう?

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

  • Javascriptは聞いたことあるけど、どう活用すればいいか分からない人

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

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

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

  • 初歩レベルのHTML、JavaScriptは役には立ちます。

  • Visual Studio Codeというコードエディターを使っていた方は、より楽でしょう。

こんにちは
です。

4,341

受講生

455

受講レビュー

1,078

回答

4.7

講座評価

2

講座

안녕하세요. @weekendcode 라는 유튜브 채널을 운영하고 있습니다.

비전공자, 프로그래밍에 관심 있는 학생들을 위해 최대한 쉽게 설명하고자 노력하는 강사입니다.

 


컴퓨터 공학으로 대학교를 졸업하고, 인간-컴퓨터 상호작용 관련 석사 학위를 받았습니다.

Java 언어로 안드로이드 개발자로서 일했고, Python 강사로 활동했습니다.

몇 번의 이직과 창업을 하는 과정에서 비전공자 분들께 지식을 공유할 기회가 생긴 이후,

본격적으로 지식공유자로 활동하고 있습니다.

 

모르는 것은 적극적으로 질문 부탁드립니다.

최선을 다해서 답변 드리겠습니다.

 

좋은 하루 보내세요.

 

カリキュラム

全体

71件 ∙ (14時間 19分)

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

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

受講レビュー

全体

3件

5.0

3件の受講レビュー

  • cobaetoo님의 프로필 이미지
    cobaetoo

    受講レビュー 1

    平均評価 5.0

    5

    71% 受講後に作成

    Beyond simple coding skills, this lecture is like a roadmap that teaches 'how' to think and grow as a developer. I was able to build a solid foundation with the history and philosophy of the web, and learn how to maximize productivity using Cursor, the latest AI development tool. Projects that gradually increased in difficulty, from a portfolio to an exchange rate converter using API, allowed me to effectively internalize what I learned, making the learning process more effective. In particular, the various segments filled with the instructor's deep expertise provided the best mentoring, prompting contemplation of growth beyond technical skills. This is truly a perfect lecture for developers in the AI era.

    • iceman74님의 프로필 이미지
      iceman74

      受講レビュー 1

      平均評価 5.0

      5

      31% 受講後に作成

      • jinwoo83009821님의 프로필 이미지
        jinwoo83009821

        受講レビュー 1

        平均評価 5.0

        5

        30% 受講後に作成

        ¥13,114

        weekendcodeの他の講座

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

        似ている講座

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