Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
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,335

受講生

671

受講レビュー

393

回答

4.8

講座評価

11

講座

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

저서: 코어 자바스크립트

유튜브 채널: FE재남

아티클 및 인터뷰 영상:

カリキュラム

全体

42件 ∙ (10時間 35分)

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

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

受講レビュー

全体

8件

5.0

8件の受講レビュー

  • withkey님의 프로필 이미지
    withkey

    受講レビュー 2

    平均評価 5.0

    5

    32% 受講後に作成

    Problems that I had been struggling with for months while building the design system, especially problems with headless and compound, were all solved in Section 7. Especially in the part where generics are used in createContext... I felt a thrill. 🫨 Starting from Core JavaScript, various Effective TypeScripts, React official documentation study, and even component lectures... Thank you so much for the great lectures and materials. 😭👍

    • jaenam
      知識共有者

      I don't know what to do with all the praise 😅 I'm glad it was helpful, and I'll continue to work hard to provide more fun and useful content in the future!

  • imhass님의 프로필 이미지
    imhass

    受講レビュー 2

    平均評価 5.0

    5

    31% 受講後に作成

    • eddie85님의 프로필 이미지
      eddie85

      受講レビュー 7

      平均評価 5.0

      5

      100% 受講後に作成

      This lecture helped me understand how and based on what criteria to utilize browsers, HTML, React, and Vanilla when developing UI. Additionally, it was very helpful to see the overall flow when developing UI while watching the lecture.

      • zimablue14님의 프로필 이미지
        zimablue14

        受講レビュー 14

        平均評価 4.4

        5

        100% 受講後に作成

        I wish the course duration was a little longer, but the content is 100%.

        • tladud1125661님의 프로필 이미지
          tladud1125661

          受講レビュー 2

          平均評価 5.0

          5

          31% 受講後に作成

          It helps a lot in UI design.

          ¥8,209

          jaenamの他の講座

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

          似ている講座

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