inflearn logo
知識共有
inflearn logo

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

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

難易度 初級

受講期間 無制限

React
React
vanilla-js
vanilla-js
ui
ui
TypeScript
TypeScript
DOM
DOM
React
React
vanilla-js
vanilla-js
ui
ui
TypeScript
TypeScript
DOM
DOM

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

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

5.0

5.0

신원세

7% 受講後に作成

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

5.0

withkey

32% 受講後に作成

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

5.0

eddie

100% 受講後に作成

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

受講後に得られること

  • 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

こんにちは
jaenamです。

33,163

受講生

694

受講レビュー

395

回答

4.8

講座評価

11

講座

こんにちは、シニアフロントエンドエンジニアのチョン・ジェナムです。
互いに助け合い、共に発展する健全な共有文化を目指して、さまざまな活動を行っています。

著書: コア・JavaScript

YouTubeチャンネル: FEジェナム

記事およびインタビュー動画:

もっと見る

カリキュラム

全体

42件 ∙ (10時間 35分)

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

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

受講レビュー

全体

8件

5.0

8件の受講レビュー

  • zimablue14님의 프로필 이미지
    zimablue14

    受講レビュー 14

    平均評価 4.4

    5

    100% 受講後に作成

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

    • imhass님의 프로필 이미지
      imhass

      受講レビュー 2

      平均評価 5.0

      5

      31% 受講後に作成

      • eddie85님의 프로필 이미지
        eddie85

        受講レビュー 7

        平均評価 5.0

        5

        100% 受講後に作成

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

        • withkey님의 프로필 이미지
          withkey

          受講レビュー 2

          平均評価 5.0

          5

          32% 受講後に作成

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

          • jaenam
            知識共有者

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

        • wonse님의 프로필 이미지
          wonse

          受講レビュー 6

          平均評価 5.0

          5

          7% 受講後に作成

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

          • jaenam
            知識共有者

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

        jaenamの他の講座

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

        似ている講座

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

        期間限定セール、あと13:25:55日で終了

        ¥41

        24%

        ¥8,869