フルスタックのための確かなフロントエンドブートキャンプ(HTML、CSS、バニラJavaScript + ES6)[フルスタック Part2]

実務で実際にWebサービスを開発した経験をもとに、入門者向けに、実際に商用化できるレベルのWebサービスやアプリサービスを開発することを目標としたフルスタックシリーズ講座です。 そのためのPart2講座として、さまざまな技術が存在するフロントエンド技術の中から、レスポンシブ対応や互換性まで考慮した最新のHTML5、CSS3、Vanilla JavaScript(Javascript)+ES6について、すべてをしっかりと網羅して整理する講座です。

難易度 入門

受講期間 無制限

HTML/CSS
HTML/CSS
JavaScript
JavaScript
ES6
ES6
HTML/CSS
HTML/CSS
JavaScript
JavaScript
ES6
ES6

学習した受講者のレビュー

4.9

5.0

hanyn

100% 受講後に作成

実際のサイトで見たウェブ技術(スライドなど)を直接実装してみることができてよかったです。 フロントエンドを勉強する道は幕膜だったが、講義を通じてある程度感を掴んだようです。 インターネット講義の限界をほとんど感じられないほど充実した講義資料の提供、質のある講義の構成や時間分配など、いろいろなことで集中もでき、学ぶことが多い講義です。 フロントエンドの勉強に対する自信と興味を吹き込む講義だと思います。 この講義を足場として、今後も開発勉強を続けていき、いつか必ず残材ミコーディング様の開発者になりたいです!ありがとうございます。

5.0

opert93

100% 受講後に作成

フロントエンドの基礎をしっかり身につけることができてよかったです。フロントのフレームワークをすぐに扱わずに基本基盤を固めることが私にもっと役に立ったと思います。これを基にReact/Flutterなど最新のフレームワークを学習しましょう。講師はいつもありがとうございます。

5.0

jypark3152

100% 受講後に作成

じっくり基礎から説明されており、最初から分からなくてもわかりやすく講座が構成されています。

受講後に得られること

  • 簡単かつ堅牢にフロントエンドの基礎を身につける

  • レスポンシブ対応・クロスブラウザ対応のウェブサービス開発

  • 高度なモダンHTMLとCSS機能

  • 互換性まで考慮したVanillaJS(Javascript)

  • 最新の商用サービス開発のためのHTML/CSS/JS+ES6フルセット

ネカラグペも社内研修として選ぶ公式講義! 
入門者のためにフロントエンドWeb技術の基礎力を鍛える
完成度の高い講義シリーズ(フルスタック Part2)

本講義はフルスタック講義シリーズ Part2の講義で、Pythonバックエンド(Part1)講義に続き、フルスタック開発に必要な確かなフロントエンドの基礎を身につける講義です。商用化も可能なWebサービス開発のために、HTML5、CSS、Javascript(VanillaJS、バニラJavaScript)+ES6を詳しく整理し、習得する講義です。

一般的なIT講義よりも、できる限り受講者の立場を考えて作られた特別な講義です。さまざまな資料や例を通じて、関連技術を知らない状態から始め、関連技術を自分の履歴書に記載できるほど、核心となる技術を確実に身につける講義です..

本講義は、これまで多くの方に学んでいただき、好意的なご意見も寄せられている実績のある講義です。
万が一問題があった場合は、今後もこれまでと同様に随時アップデートされることがあります。

フロントエンドの基礎力をしっかり身につけたいなら?
프론트엔드 기본 기술을 탄탄히 정리해야 합니다. 프론트엔드 기본은 HTML, CSS, Javascript 입니다. React 를 익히더라도, 프론트엔드 기본이 필요합니다. 탄탄한 프론트엔드 기본기가 핵심입니다. 꼼꼼하게 잘 쌓은 기본기 위에, React 든 Flutter 든 익히면 프론트엔드를 원하는대로 만들 수 있습니다. 여기에 최신 웹페이지는 반응형, 호환성등 정리해야할 배경지식과 관련 지식이 있고, 오래전 기술인 Jquery 를 깔끔한 Javascript 로 대체해야 합니다.

本講義では、HTML、CSS、JavaScript、レスポンシブ対応、互換性、ES6など

必ず知っておくべき、散在するフロントエンドの基本技術を丁寧に扱います!
なんとなく知ってはいるものの、整理できていない気がします

HTML、CSS、Javascriptは一応使えるように思えても、実際に使ってみると、思いどおりに扱うのは難しいものです。レスポンシブ対応、互換性、ES6など、散在する数多くの文法や技術、特にフロントエンドは、一度きちんと整理して学ばなければ、思った以上に難しい分野です。

フルスタックになれば、Webサービスを一人でも作れるそうですが…, you can build web services on your own... thì có thể tự mình tạo ra dịch vụ web...

ウェブであれアプリであれ、最近のサービスを実装するにはバックエンド、フロントエンド、デプロイ技術が必要です。これをフルスタックと呼びます。フルスタックになれば、ひとりでも最新のウェブサービスを作れるようになり、競争力のある開発者にもなれます。

これを最も効果的かつ実践的に進めるには、フルスタック講義Part1でPythonとバックエンド技術を身につけ、Part2でフロントエンドの基礎を磨く必要があります。 基礎がしっかり身についてこそ!単に講義に出てきたウェブサービスをそのまま写すのではなく、確かなフルスタック開発者になれます。本講義では、フロントエンドの基礎をしっかり身につけられるよう、HTML5、CSS、Javascript(バニラJavaScript、VanillaJS)+ES6を詳しく扱います。

最新のフルスタックロードマップ全体を、最短で学べるようYouTube動画にまとめました。この動画を参考にすれば、この技術にとどまらず、独学でも短時間でWeb/アプリ開発ができるようになるためのロードマップもご理解いただけます。

 

確固とした実践的なフロントエンドの基礎力を身につけるために作成しました。.

無数にある文法や機能を前に、フロントエンドは「整理」というキーワードから始めるべきです。
数多くの多様な文法と知識を、以下の条件のもとで整理しました。

  • 最新のウェブサイト開発のための基礎知識をすべて整理し
  • 見栄えのよいウェブページに欠かせないCSSを丁寧に整理し
  • 最新のウェブページでは使われていないJqueryは扱わず
  • すべて標準のVanilla JavaScript + ES6に置き換えて扱い
  • レスポンシブに対応し
  • 互換性まで考慮します

HTMLタグは軽く、セマンティックタグまで含めて本当に必要なタグを中心に整理し、
見栄えのよいWebページの実装に欠かせないレスポンシブ対応や互換性まで考慮した、詳細なCSS機能を扱い、
VanillaJS(バニラJavaScript)と呼ばれるように、最近のトレンドではjQueryを使用しないため、互換性まで考慮したJavaScript + ES6の構文だけでWebページを実装します。
各機能ごとに、互換性の問題で使用できない最新すぎる構文や、代替可能な技術は除外し、核心となる技術に集中します。

時間を無駄にしないでください!
私たちは情報がないからできないわけではありません!
実績のある講義で学べば、素早く整理できます!

JavaScript만 배우면 되지 않나요?

フルスタック開発における最大のボトルネックはCSSです。HTMLとCSSは中学生でも知っていると言われます。
しかし、よほどのフロントエンド開発者でなければ、レスポンシブ対応や互換性を確保し、見栄えのする最新のWebページを作ることはできません。
数え切れないほど多くの細かなCSS機能を整理する必要があります。HTMLも標準に合わせて、一度は整理しておく必要があります。
また、国内にはパブリッシャーという職種がありますが、海外ではフロントエンドまたはフルスタック開発者がCSSまですべて担当します。
競争力のあるフロントエンド/フルスタック開発者になるためには、CSSの機能を詳しく整理することが必須です。

 
ReactやVueを習得しないとウェブサービスは作れないのではありませんか? to build web services?

これらのフレームワークは、Javascriptの物足りない点を改善するために、Javascriptで作られたフレームワークです。これらのフレームワークを使う際にもJavascriptを使うため、どのフレームワークであっても、Javascriptの基本文法をしっかり整理して身につけておく必要があります。本講義で扱うHTML、CSS、Javascriptの基礎をしっかり身につけてこそ、これらを土台にReactやVueなどのフレームワークを学ぶことができます。
そのため本講義は、フロントエンドの基礎に集中する講義です。本講義では、確かな基礎力を身につけるために、関連技術の中で必ず必要となる技術を一通り整理し、練習します。 

 

初心者でもできますか?

初心者の方にも受講していただけるよう、詳しく丁寧に順を追って説明する講義です。
IT講義の中で最も難しいのは、プログラミングをまったく知らない方にプログラミングを教えることです。そのような方々も、私が開講したPython入門とクローリング基礎ブートキャンプ講義を通じて、プログラミングだけでなくクローリング技術も身につけられました。合理的に考え、お互いに配慮できる方であれば、十分可能です。

フロントエンド技術だけを早く整理したい場合は、本講義だけを受講していただいても構いません。ただし、プログラミングに一度も触れたことのない完全な初心者の方であれば、Python入門とクローリングブートキャンプ講義とあわせて、ロードマップに沿ってフルスタック講義を順を追って学んでいくことをおすすめします。必要なスキルをより着実に身につけていただけます。

入門者にも理解できるように
簡潔でありながら、丁寧に作成された資料をもとに、
講義中に、それぞれテストもできるように
機能別のサンプルコードを使ってテストまでその場ですぐ行えます

• 各機能のサンプルコードをプロジェクトとして作成して提供し、実践的なWebページのコードファイルも提供します。
• 講義資料はオンラインでいつでもご確認いただけるよう提供します。(ただし、著作権上の問題により、コピーおよびダウンロードは制限しています。)

 

体系的に学べるでしょうか??

初心者から始めてフルスタックエンジニアになるまでの全過程を、少しずつ難易度を上げながら、詳しく体系的に学べるよう講義を作っています。該当する文法や知識の理解を助けるため、簡潔なコードと十分な説明を用意しています。また、理解が必要な部分については、その都度コンピューターサイエンスの内容まで解説し、優れた開発者になるための基礎力を身につけていただけます。

本講義はフルスタック講義シリーズ全体のPart2で、本講義では、次のサービス開発に向けた特定のWebページを選び、フレームワークやライブラリを一切使わず、空のファイルから始めて、HTML、CSS、Javascript + ES6を使い、一つひとつコードを完成させるまで一緒に取り組みます。

'あ!本当に違うんだ!'と感じていただけるよう
こだわって作った講座です
そのままついてきていただければ大丈夫です!


体系的に学ぶ
残りの楽しさコーディング Dave Leeのロードマップ

本講義に続いて、目標に合わせて学べるAI・開発・データ・CSロードマップ that you can learn according to your goals giúp bạn học theo đúng mục tiêu.

IT技術は相互につながっています。
関連する技術を選んで学び、そこにAIを組み合わせれば、目標により早く到達できます。

すべてのロードマップでは、技術をどのように組み合わせて活用するかまで扱い、
初心者レベルから専門家レベルまで難易度を高めるよう設計されており、
長年にわたって継続的にアップデートされています。

単体の講座として受講するよりも、さらに割引が適用されます。

3.開発とデータの基礎、コンピュータサイエンス(CS)の核心知識

コンピュータアーキテクチャ・オペレーティングシステム・ネットワーク・システムソフトウェア・ソフトウェア工学・アーキテクチャ・データ構造・アルゴリズムまで

← 左右にスワイプしてCS講義と全体ロードマップを確認してください →

コンピュータサイエンスの完全ロードマップを詳しく見る

4. 最も確実で最強のAI活用ロードマップ(2026)

Claude Code(Claude Code)による業務自動化から、バイブコーディング、Codex(Codex)、OpenClaw、Claude Codeを基盤としたデータ分析、エージェンティック・ハーネス・ループエンジニアリングなどのClaude Codeの高度なテクニック、さらにはAIエージェント開発まで

← 左右にスワイプしてAI講義と参考コースを確認してください →

最も確実な最強AI活用ロードマップ(2026)を詳しく見る

こんな方に
おすすめです

学習対象は
誰でしょう?

  • フルスタック開発のためのPart2講義

  • フロントエンドの基礎力を身につけたい方

  • 最新の商用化も可能なウェブサービスを開発したい方

  • レスポンシブ対応や互換性など、さまざまなフロントエンド技術の整理が必要な方

  • フロントエンド入門

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

  • 可能であれば、フルスタックPart1講義と並行しての受講を強くおすすめします。

こんにちは
funcodingです。

インフラン認証

キャリア認証

34,483

受講生

2,592

受講レビュー

1,952

回答

4.9

講座評価

13

講座

ジャンジェミコーディング、Dave Lee

  • フルスタック/データサイエンス/AI関連の無料資料を共有するサイトです。

  • その他: Fun-Coding YouTubeチャンネル [クリック]

    • IT学習に役立つヒントや短い無料講義を共有しようと、少しずつ始めています〜

最新の実務とIT講義を並行しながら、8年間にわたり一貫して堅実なフルスタック、データサイエンス、AI講義を作り続けています。

 

もっと見る

カリキュラム

全体

79件 ∙ (17時間 36分)

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

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

受講レビュー

全体

184件

4.9

184件の受講レビュー

  • madsong님의 프로필 이미지
    madsong

    受講レビュー 7

    平均評価 5.0

    5

    63% 受講後に作成

    よく聞きました!フロントエンド開発者として取り組んでいますが、多くの役に立ちました。 今私のものにするために復習を頑張らなければなりません。 次の講義も楽しみですね!

    • funcoding
      知識共有者

      そうです、私のもので作るように練習もしてみて、またこれからは初めてフロントエンドに関してはクローンコーディング?

  • michaelaeon5592님의 프로필 이미지
    michaelaeon5592

    受講レビュー 13

    平均評価 4.9

    5

    99% 受講後に作成

    こんにちは。 Web関連開発に関心があり、あちこちで講義を聞いて定着した講座が残材ミコーディング様講座です。 Web関連技術が関連分野も多く、学ばなければならない部分も多様でしっかりやるにはやることが多すぎて、これまで早急な心にあちこち講座を聞くなど難しさが多かったです。 講座を聴きながら特に良かった部分は、私が学んだことをどのように使用でき、次のステップに進むときに私が何を学ばなければならないのかなど、フルスタックに行く中心をとることができ、個人的に役立ちました。パート1ではサーバー側に関する技術にもう少し集中したら、パート2ではUI段のさまざまな技術を学ぶことができます。派手ではなく失望する方もいるでしょうが、派手な技術は基本がうまくいけばすぐに学べると思います。 HTML/CSSの深さも十分に深く教えてくれて、CSSで実装できなかった部分をJavaScriptでカバーしようとしていろいろな数字やフレームワークを使わなくてもいいのでよかったです。ウェブ技術が多様であると、弱い部分を他の技術やフレームワークで非常には場合がしばしば生じることがあると思いますが、基本に集中した説明と実習があってよかったです。 JavaScriptも必要な部分を簡潔に説明してくれて理解するのに役立ちました。もちろん個人的にはさらに勉強が必要ですが、実習と連携しているので覚えておくのに役立ちました。講義で実装した実習が小さくて現職者のような経験が少ないのですが、基本的な機能に対する実装方法やアイデアが得られてよかったです。 上半期にオープン予定のVueも楽しみにしています。バニラJSで実装する部分をVueとして使うと、どのように楽に実装できるかを比較する方法で講義をしてくれれば、私のような初心者たちが学ぶのに役立つようです。ぜひ反映していただければ幸いです。 ^^ ちなみに個人的な経験をお話ししたら、Pythonの基本講座を聞き、パート1、パート2の順に聞くことをお勧めします。その後、Webサーバーにクロールやデータ分析などの機能を追加したい場合は、該当する関連講座を聞くと良いと思います。

    • funcoding
      知識共有者

      良い受講評価ありがとうございます。本講義はほぼ底から一汗汗のようなモダンなウェブページを作ることで、すでに作られている一本行のコードで華やかなUIに沿って作る講義とは違うんですよ。そのような技術は後で必要なときに使用することができますが、現業ではそのような技術を使用しません。特に、規模のあるウェブページを作る時はね。完璧に作るために、一発汗を作ってみて、基本基をしっかりと積み重ねなければならないし、そんな部分がぜひ役に立ってほしいです。 あまりにもIT関連情報が多く、講義が多く、広告が多いので、ただしたがってコードを打つと、こんな派手なことになる?という講義も多いのですが、私もそんな講義の前に聞いてみましたが、私に残るものが一つもありませんでした。それで、全く別々に長時間整理していくことで身につけた記憶があります。このような学習方法がはるかに良く、能力のある開発者になる近道になることを願っています。

  • mozzzi2님의 프로필 이미지
    mozzzi2

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    大好きです先生

    • funcoding
      知識共有者

      ㅎㅎㅎㅎㅎありがとうございます。 ㅎㅎウィットがありますㅎㅎ

  • dudley님의 프로필 이미지
    dudley

    受講レビュー 2

    平均評価 5.0

    5

    100% 受講後に作成

    他の講師様のフロント講義を聞いてプロジェクトを進行しようとしましたが幕末年でしたが、友人の推薦で残材未講師様の講義を見るようになりました。 基礎からゆっくり講義していただき、一つも抜けずに理解して行きました。その結果、幕屋だったプロジェクトもすっきり仕上げ、おかげで自信も得ました。 まだ悩んでいるなら、ぜひ聞くのがオススメです! 本当にありがとうございますインストラクター〜!

    • funcoding
      知識共有者

      うわー、本当に嬉しいです。自信は本当に重要です。まあ完璧ではないとしても、私ももうできそうで、このままだけ着実にすれば、うまくできそうだと自信!これが感じられたら、本当に大きなステップを超えたのです。本当におめでとうございます、助けてくれて私もとても嬉しいです。 ㅎㅎ

  • ith13579님의 프로필 이미지
    ith13579

    受講レビュー 19

    平均評価 5.0

    5

    99% 受講後に作成

    前の部分はcssとhtmlだけを見ましたが、実際の実務で適用する以上に細かく詳しく、さまざまに教えてくれます。さらに、講師が授業で使用する講義資料の質が本当に良いです。最近では実務でspaライブラリやフレームワークを使用しているので、jqueryよりも純粋なJavaScriptを使ってuiを操作する方法を知ることが重要ですが、この講義はこの点でも強みがあります。もう長い言葉はしません。このくらいの値段で、これほど講義ならば、だと思います。他のクローンコーディング講義ではなく、これを聞いてください。

    • funcoding
      知識共有者

      こんなに良い受講評を残してくれてありがとう。 私が以前にこの部分を身につけるとき、なぜこんなに細かい機能が多いのかと思って疲れたりしながらも、やむを得ないようにしなければならないので、汗だいた汗整理したのですから。私がフルスタックになるために、身につけた方法をそのまま講義で作った部分です。細かい機能が気にならないときは、提供していたGoogleドライブフォルダに行って、上部に検索をしてみてください。それでは講義も聞かれたので、関連キーワードを持った資料をすぐにご覧いただけます。これにより、はるかに速くまた実装することができます。この部分は今後YouTubeで私が撮って別途共有してみたいと思います。 ありがとうございます。

funcodingの他の講座

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

似ている講座

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