강의

멘토링

커뮤니티

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

受講生

689

受講レビュー

395

回答

4.8

講座評価

11

講座

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

저서: 코어 자바스크립트

유튜브 채널: FE재남

아티클 및 인터뷰 영상:

カリキュラム

全体

49件 ∙ (12時間 7分)

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

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

受講レビュー

全体

24件

5.0

24件の受講レビュー

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

    受講レビュー 2

    平均評価 5.0

    5

    7% 受講後に作成

    Với tư cách là người sưu tầm bài giảng, tôi đã tham gia nhiều bài giảng nhưng tôi nghĩ đây là bài giảng hay nhất! Trước hết, người hướng dẫn thành thạo cú pháp TypeScript và cú pháp React mới nhất, vì vậy tôi cảm thấy như kỹ năng của mình đang được cải thiện chỉ khi xem anh ấy sử dụng nó vào những lúc như vậy. Ban đầu, tôi không hiểu rõ nếu chỉ nhìn vào sách và tài liệu, nhưng một lần nữa tôi nhận ra rằng mình đang áp dụng những gì đã học chỉ qua tài liệu. Tôi nghĩ trình độ sẽ tốt hơn đối với những người mới có 1-3 năm kinh nghiệm hơn là người mới. Trước hết, bản thân bài giảng có thể được áp dụng trực tiếp vào thực tế và thậm chí cả những phần nâng cao của React cũng được áp dụng~ Tôi chắc chắn giới thiệu nó cho những ai muốn phát triển từ cấp dưới lên cấp dưới bằng cách nghĩ về cách tạo mã tốt hơn thay vì chỉ thực hiện đơn giản. Bây giờ, tôi tự tin rằng mình có thể triển khai bất kỳ giao diện người dùng nào mà tôi gặp phải. Ngay cả khi tôi không hiểu nó 100%, tôi nghĩ thật tuyệt khi tôi có thể áp dụng nó vào thực tế bằng cách nhìn lại mã được sắp xếp theo chương. Trước hết, tôi nghĩ chỉ cần có mã UI hoàn chỉnh trong khi nghe bài giảng này là xứng đáng với giá trị của bài giảng haha. Tôi hy vọng phần tiếp theo sẽ sớm ra mắt!

    • jaenam
      知識共有者

      Cảm ơn bạn đã đánh giá khóa học chân thành của bạn 😃 Tôi rất vui và được khích lệ vì những gì tôi mong đợi khi lập kế hoạch cho bài giảng này đã được thực hiện tốt! Chúng tôi sẽ tăng tốc độ edit video phần tiếp theo để có thể ra mắt trong thời gian sớm nhất 😂

  • myne님의 프로필 이미지
    myne

    受講レビュー 2

    平均評価 5.0

    5

    13% 受講後に作成

    Thật hữu ích khi bạn không chỉ dạy chúng tôi một cách thực hiện mà còn giới thiệu nhiều cách!! Và ngoài việc chỉ đơn giản triển khai các thao tác cơ bản của các thành phần giao diện người dùng, họ thậm chí còn giải thích các thao tác rất chi tiết, chẳng hạn như các chức năng được mở khi tìm kiếm bằng tổ hợp phím ctrl+F và cách hiển thị chú giải công cụ trên màn hình. Khi phát triển một giao diện người dùng mà trước đây tôi chưa từng triển khai, tôi thường theo dõi qua Google hoặc YouTube, nhưng sau khi nghe bài giảng, tôi có cảm giác rằng 'giao diện người dùng này nên được triển khai theo cách này và tôi đã có được sự tự tin trong quá trình thực hiện tôi nghĩ có rất nhiều điều đã xảy ra. So với mức giá, có vẻ như bạn có thể nhận được nhiều lợi ích hơn so với các khóa học khác. Phần 1 rất hữu ích, nhưng tôi thực sự mong được xem danh sách các thành phần trong Phần 2!!! Tôi nghĩ đây là bài giảng hay nhất dành cho các nhà phát triển front-end cấp dưới haha. Cảm ơn bạn vì những bài giảng luôn tuyệt vời :)

    • jaenam
      知識共有者

      Minhye, cảm ơn bạn đã đánh giá bài giảng có giá trị của bạn! Mình thấy bạn giới thiệu nội dung bài giảng hay hơn mình haha ​​:D

  • pangoons3126님의 프로필 이미지
    pangoons3126

    受講レビュー 8

    平均評価 5.0

    5

    15% 受講後に作成

    Thực ra tôi không phải là người thường xuyên để lại nhận xét, nhưng khi xem bài giảng này, tôi nghĩ nó thực sự rất hay. Ở phần đầu, chúng tôi sẽ cung cấp cho bạn bản xem trước của Next 14, thiết lập dự án và cách suy nghĩ về việc tạo thanh bên trái. Sau đó, anh ấy sẽ dạy bạn thông qua mã hóa trực tiếp cách viết mã vanilla trong React cũng như cách triển khai và suy nghĩ về từng thành phần có thể tái sử dụng. Ban đầu tôi định viết bài đánh giá sau khi nghe hết bài giảng, nhưng giờ tôi mới viết đây haha. Tôi nghĩ sẽ là một ý kiến ​​hay nếu chỉ học một bài giảng mỗi ngày. Cảm ơn bạn đã tạo ra một khóa học tuyệt vời!

    • jaenam
      知識共有者

      Cảm ơn bạn đã đánh giá khóa học chân thành của bạn 😄 Tôi lo lắng rằng việc xem từng phần một ngày sẽ trở nên khó khăn hơn theo thời gian. Chúng tôi hy vọng rằng bạn sẽ hoàn thành khóa học khá đều đặn đến cuối mà không cố gắng quá sức.

  • didgusdhdk3님의 프로필 이미지
    didgusdhdk3

    受講レビュー 1

    平均評価 5.0

    5

    12% 受講後に作成

    Tôi nghĩ đây là khóa học mang lại cái nhìn sâu hơn để tìm hiểu khía cạnh bản chất của JS. Sách và bài giảng của giảng viên luôn hữu ích. Cảm ơn.

    • jirehmuze님의 프로필 이미지
      jirehmuze

      受講レビュー 3

      平均評価 5.0

      修正済み

      5

      31% 受講後に作成

      Đây là một bài giảng thú vị và bổ ích. Bạn có thể học cách áp dụng các khái niệm cơ bản về React, TS, JS vào thực tế và thực hiện cùng một UI theo nhiều cách khác nhau, điều này rất hữu ích vì bạn có thể học được nhiều phương pháp hay cho từng yêu cầu. Tôi nghĩ đây là một bài giảng theo phong cách của một người cố vấn, người đưa ra những định hướng thực tế nhưng không cho bạn biết mọi thứ, mà là một giáo sư giúp bạn phát triển khả năng tư duy. Vì vậy, khi nghe bài giảng, bạn sẽ tự nhiên có suy nghĩ "Nếu là mình thì mình sẽ làm như thế này?" và bạn có thể nghe một cách thú vị trong khi suy nghĩ "Tại sao phần này lại được viết như thế này?". Ví dụ, trong phần thuộc tính hidden được viết bằng chữ hoa vì React ép kiểu, tôi đã nghĩ "Vì mình đã truy cập bằng ref rồi, mình có thể gán thuộc tính bằng phương thức setAttribute không?", và tôi đã có cơ hội để suy nghĩ, đồng thời học được rất nhiều mẹo thực tế như cách sử dụng closure, cách xử lý kiểu của GNB một cách an toàn và dễ đọc hơn. Cảm ơn bạn đã tạo ra một bài giảng hay. Nhờ đó mà tôi đã học được rất nhiều điều!

      • jaenam
        知識共有者

        이레님, cảm ơn bạn vì bài đánh giá chân thành! Bạn tự mình suy nghĩ và học tập, đó chính là hình mẫu lý tưởng mà tôi mong muốn! Nếu bạn có bất kỳ nội dung nào mà bạn cho là phương pháp tốt hơn trong quá trình học, hãy chia sẻ lên cộng đồng để giúp đỡ mọi người nhé.

    ¥8,648

    jaenamの他の講座

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

    似ている講座

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