강의

멘토링

커뮤니티

Programming

/

Front-end

[React/VanillaJS] UI要素を直接作成する Part 2

代表的なUI要素をReactバージョンと純粋なJavaScriptバージョンにして、Web APIを活用したさまざまな視点と方法を体験し、フロントエンド開発のスキルを一層引き上げてみてください。

  • jaenam
실습 중심
바닐라JS
React
vanilla-js
ui
TypeScript
DOM

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

受講後に得られること

  • React 実務知識

  • DOM API

  • その他のさまざまなWeb API活用能力

🎉ロードマップで受講時に25%割引🎉

ロードマップリンク: https://inf.run/cNuxY

(すでに2つの講義のうち1つのみが受講中であっても、残りの講義について25%割引が適用されます。)

様々なUI要素を自分で作ろう!

純粋なJavaScript(vanilla-js)バージョンとReactバージョンで作成し、さまざまな方法を導入してみてください。

  • さまざまなバージョンのコンポーネントを作成しながら、それぞれの特徴を比較体験してください。


  • 現業でよく使われるAPIを適用しながら、実務感覚を育ててみてください。

こんな方におすすめです

UIコンポーネントはライブラリのみに依存し、開発自信が不足しているフロントエンド開発者

最新のHTML5 APIとDOM APIに精通していない方

UIコンポーネントの開発能力向上に渇きを感じる方

受講後は

  • この川の一つでUI要素は終わり! UI要素については、シニアフロントエンド開発者レベルの開発知識を積むことができます。

  • この講義で取り上げる要素を組み合わせ/発展させると、新しいUI要素もいくらでも直接作成できる自信が生まれます。

このような内容を学びます。

Part2 既存のコンポーネントを再利用する方法を考える講義です。

パート1

  1. アコーディオン

  2. タブメニュー

  3. ツールチップ

  4. レスポンシブテキストボックス

  5. 複数行の言葉

  6. 遅延ロード

  7. 無限スクロール

  8. 横スクロールボックス

  9. スクロールスパイ

Part 2 (本講義)

  1. スナックバー

  2. モーダル

  3. ポップオーバー

  4. 画像スライド

  5. カルーセル

  6. ギャラリー

  7. セレクトボックス

  8. オートコンプリート

  9. ドラッグ&ドロップリスト

この講義の特徴

鮮やかなライブコーディング

オンラインスタディで行ったライブコーディングをそのまま録画・編集した講義で、鮮やかな臨場感と素早いフィードバックをメリットとします。定められた枠組みに閉じ込められていない様々な視点を提示したり、予期せぬ問題に対する解決策を体験してみることもできます。

段階的な難易度調整、最新のAPIの紹介と適用

必要な技術が似たような要素同士で結ばれ、徐々に難易度が段階的に上昇するように講義を構成しました。また、最新のHTML5とDOM APIを紹介し、適用しながら慣れることに注力しました。

受講前の注意

練習環境

次の各バージョンまたはそれ以上の環境が揃っていればいいです。

  • Node.js 16

  • React 18

  • Next.js 13

  • TypeScript 4

学習資料

  • サンプルコードを圧縮ファイル形式で提供します。

選手の知識と注意事項

  • 基本的なHTML / CSS、JavaScript文法、リアクト文法は熟知しているという前提の下で授業を進めます。

  • Next.jsやTypeScriptなどは作業の便宜上、ツールとして活用しただけで、詳細には取り上げません。

  • 本講義は、知識共有者が行ったスタディの録画、編集した講義です。


関連講義📺

こんな方に
おすすめです

学習対象は
誰でしょう?

  • フロントエンド開発志望生

  • フロントエンドジュニア開発者

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

  • HTML

  • CSS

  • JavaScript(ES6+)

  • React

  • TypeScript

こんにちは
です。

32,812

受講生

688

受講レビュー

395

回答

4.8

講座評価

11

講座

안녕하세요, 시니어 프론트엔드 개발자 정재남 입니다.
서로 돕고 함께 발전하는 건전한 공유문화를 지향하여 다양한 활동을 하고 있습니다.

저서: 코어 자바스크립트

유튜브 채널: FE재남

아티클 및 인터뷰 영상:

カリキュラム

全体

42件 ∙ (10時間 35分)

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

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

受講レビュー

全体

8件

5.0

8件の受講レビュー

  • wonse님의 프로필 이미지
    wonse

    受講レビュー 6

    平均評価 5.0

    5

    7% 受講後に作成

    単に情報を伝える講義ではなく、受講生とコミュニケーションする感じが入って集中がより良くなる講義でした! !

    • jaenam
      知識共有者

      元税ありがとうございます!スタディと映像はもう少し違うんじゃないですか? ㅎㅎ

  • withkey님의 프로필 이미지
    withkey

    受講レビュー 2

    平均評価 5.0

    5

    32% 受講後に作成

    デザインシステムを構築しながら数ヶ月間悩んでいた問題、特にヘッドレス、コンパウンドなどの問題がセクション7ですべて解決されました。から始めて、いくつかのエフェクティブタイプスクリプト、リアクト公式文書スタディ、コンポーネント講義まで..良い講義と資料ありがとうございます。 😭👍

    • jaenam
      知識共有者

      過分な賞賛に身の回りがわかりませんね 😅 役に立ったのは幸いで、今後ももっと面白くて有益なコンテンツを用意しようと努力します!

  • imhass님의 프로필 이미지
    imhass

    受講レビュー 2

    平均評価 5.0

    5

    31% 受講後に作成

    • eddie85님의 프로필 이미지
      eddie85

      受講レビュー 7

      平均評価 5.0

      5

      100% 受講後に作成

      UIを開発する際に、ブラウザ、HTML、React、Vanillaを活用する方法と基準がわかる講義でした。 付加的に講義を見ながらUI開発をする際の流れを見ることができ、大変 도움이 되었습니다.

      • zimablue14님의 프로필 이미지
        zimablue14

        受講レビュー 14

        平均評価 4.4

        5

        100% 受講後に作成

        受講期間が少し残念ですが、内容は100点です。

        ¥8,641

        jaenamの他の講座

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

        似ている講座

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