강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

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

代表的な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要素もいくらでも直接作成できる自信が生まれます。


このようなことを学びます。


Part 1 (本講義)

  1. アコーディオン

  2. タブメニュー

  3. ツールチップ

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

  5. 複数行の言葉

  6. 遅延ロード

  7. 無限スクロール

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

  9. スクロールスパイ

Part 2 (5月オープン予定)

  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,647

受講生

680

受講レビュー

395

回答

4.8

講座評価

11

講座

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

저서: 코어 자바스크립트

유튜브 채널: FE재남

아티클 및 인터뷰 영상:

カリキュラム

全体

49件 ∙ (12時間 7分)

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

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

受講レビュー

全体

22件

5.0

22件の受講レビュー

  • 71summernight2199님의 프로필 이미지
    71summernight2199

    受講レビュー 2

    平均評価 5.0

    5

    7% 受講後に作成

    As a lecture collector, I have taken many lectures, but this is the best lecture! First of all, the instructor is proficient in the latest TypeScript grammar and React grammar, so just by looking at it and thinking about when to use that, I feel like my skills are improving. Originally, I didn't understand it well just by looking at the book and the document, but I learned it again by thinking, "Oh, that's how to apply it like that." I think it would be better for juniors with 1-3 years of experience rather than beginners. First of all, the lecture itself can be applied directly to practice, and it even covers the advanced parts of React. I definitely recommend it to those who want to grow from juniors to mid-level developers by thinking about how to make better codes, not just simple implementations. Now, I feel confident that I can implement any UI I encounter. ㅋㅋㅋㅋ Even if I don't understand it 100%, I think it's great that I can apply it to practice by looking at the code organized by chapter again. Just by taking this lecture and having the completed UI code, I think it's worth the lecture. I hope the next part comes out soon!

    • jaenam
      知識共有者

      Thank you for your sincere review 😃 I'm glad and encouraged that what I expected while planning this lecture was conveyed well! I'll also work hard on editing the video for the next part so that I can open it as soon as possible 😂

  • myne님의 프로필 이미지
    myne

    受講レビュー 2

    平均評価 5.0

    5

    13% 受講後に作成

    It's so informative because it doesn't just teach you one way to implement it, but introduces several methods!! And it goes beyond simply implementing the basic behavior of UI elements, and it teaches you really detailed behaviors, such as the function that opens when you search with the accordion ctrl+F, and how to make tooltips appear on the screen. When I was developing a UI that I hadn't implemented before, I would follow along by Googling or YouTube, but after listening to the lecture, I got a sense that 'this UI should be implemented like this', and I think I gained a lot of confidence in implementing it. Considering the price, I think I can get a lot more out of it than other lectures. Part 1 was helpful, but I'm really looking forward to Part 2 after seeing the list of elements!!! It seems like the best lecture for junior front-end developers. Thank you for always giving great lectures :)

    • jaenam
      知識共有者

      Minhye, thank you for your valuable lecture review! I think you introduced the lecture content better than I did. ㅎㅎ :D

  • pangoons3126님의 프로필 이미지
    pangoons3126

    受講レビュー 8

    平均評価 5.0

    5

    15% 受講後に作成

    Actually, I'm not the type to write reviews often, but I thought this lecture was really good. In the beginning, it was about setting up a project as a preview of Next 14, and the methods you can think of when creating a left sidebar, and then, it explains well through live coding how to write vanilla code in React, and how to implement and think about each reusable component. I originally planned to listen to all the lectures and write a review, but I'm writing it now. ㅎㅎ I think it would be good to take just one component lecture a day~ Thank you for making such a great lecture!

    • jaenam
      知識共有者

      Thank you for your sincere course review 😄 I'm worried that it will get harder as you go on, watching one component a day. I hope you can finish it steadily without overdoing it.

  • mamonde4568545님의 프로필 이미지
    mamonde4568545

    受講レビュー 1

    平均評価 5.0

    5

    67% 受講後に作成

    I tend to be careful about buying lectures because I think I won't listen to them, but I bought them because I trust the instructor and I'm watching them. The official React documentation videos were really good, but this lecture is also really good. I've been really interested in UI lately, so I'm watching and learning a lot. In particular, I'm using TypeScript together, and I'm watching it as a way to review by rewriting the logic I wrote in Vanilla. In the process, I can hear the code implementation method that the instructor uses, so it's even better... I want to buy Part 2 when it comes out... It's good. The difficulty level is not easy, but that's why it's better. In particular, I like it even more because I can hear questions and answers from other students. I was surprised that the content I was curious about came up. Haha! Thank you for the great lecture!

    • jaenam
      知識共有者

      Thank you for the detailed course review, mamonde. You've already listened to 2/3 of the course! I don't know what to do with all the good comments hehe Be sure to watch the 'review study video' along with the main course! It contains the process of reviewing the entire code, thinking about and improving better methods, and learning information that you didn't know.

  • jihoson94님의 프로필 이미지
    jihoson94

    受講レビュー 16

    平均評価 5.0

    5

    30% 受講後に作成

    I learned a lot because I was able to participate in the process of implementing basic web elements and applying animations, and I was able to think about it together. :)

    • jaenam
      知識共有者

      Thank you. I hope you enjoy the class :)

¥8,562

jaenamの他の講座

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

似ている講座

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