inflearn logo
知識共有
inflearn logo

コアフロントエンドUI - Part 1

代表的なUI要素をReactバージョンと純粋なJavaScriptバージョンで作ってみながら、Web APIを活用した多様な視点と方法を経験し、フロントエンド開発の実力を一段と引き上げてみてください。

難易度 初級

受講期間 無制限

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

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

5.0

5.0

이레

31% 受講後に作成

面白くて内容の濃い講義です。React、Ts、Jsの基本的な概念を実際にどのように適用できるのかを学ぶことができ、同じUIを異なる方式で多く実装してみながら、要求事項別に良い方式をたくさん学ぶことができ、非常に有益でした。 まるで指導者のように現実的な方向性を示してくださりながらも、すべてを教えてくれるわけではない(?)思考力を養ってくれる教授のようなスタイルの講義だと思います。 そのため、講義を聴いていると「私ならこうしてみるだろうな?」という考えが自然と浮かび、「この部分はなぜこのように作成したのだろうか?」と考えながら楽しく聴くことができます。 例えば、hidden属性をReactが強制的に型変換するため、属性を大文字で記述して終わる部分で、私は「どうせrefでアクセスしたのだから、setAttributeメソッドで属性を割り当てればいいのではないか?」と試してみるなど、考える機会がありました。また、クロージャーの活用、GNBのタイプを可読性良く、より安全に扱う方法など、実務的なヒントもたくさん学ぶことができました。 良い講義を作ってくださりありがとうございます。おかげでたくさん学んでいます!

5.0

보나

100% 受講後に作成

知らない概念、慣れていないものが多くて訪れて勉強するのに時間はかかりましたが、UI要素の作成に自信があるだけでなく、リアクト、バニラのJavaScript、TypeScriptの両方を勉強するのにとても良かったです。 そしてUI要素を作りながら様々な状況について考慮して判断基準を悩むのも常に明確な基準がなくてストレスを受けていましたが、講義でそんなことを一緒に悩んでいるので、もともとそのように悩みながらするのが当たりたいと思い、講義のおかげで今後はそんな悩み過程が楽しくなると思いますㅎㅎ スタディ映像なので、他の受講生たちの意見を聞くのもとても面白くて有益に聞きました。 たくさん学びます。

5.0

지니지니

7% 受講後に作成

講義コレクターとしていくつかの講義を聞いたが本物の最高の講義のようです!とりあえず講師様が最新のタイプスクリプト文法、リアクト文法に上手なので、こういう時にあんなことを書くんだって見ているだけでも実力が遅いようです。もともと本と文書だけ見てはよく理解できないのですが、文書だけで学んだ内容をああああそう適用するんだし、もう一度体得することになります。 レベルは新すぎるよりは1~3年目のジュニアたちが見ればいいと思います。一度講義自体が実務にすぐに適用でき、リアクトの深化部分まで溶かしてみるからです~ 単純な実装にとどまらず、どうすればもっと良いコードになるのか悩んでみながら、ジュニアから中ニアに一段階成長したい方にはぜひおすすめです。 今どんなuiに会っても、今実装できるという自信ができました。いったんこの講義を聞きながら完成した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要素もいくらでも自ら作成できる自信がつきます。


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


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の文法、Reactの文法は習得しているという前提で授業を進めます。

  • Next.jsおよびTypeScriptなどは作業の便宜上、ツールとして活用しただけであり、詳しく扱っていません。

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


知識共有者の
他の講義が気になるなら?

こんな方に
おすすめです

学習対象は
誰でしょう?

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

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

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

  • HTML

  • CSS

  • JavaScript (ES6+)

  • React

  • TypeScript

こんにちは
jaenamです。

33,461

受講生

703

受講レビュー

395

回答

4.8

講座評価

11

講座

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

著書: コア・JavaScript

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

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

もっと見る

カリキュラム

全体

49件 ∙ (12時間 7分)

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

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

受講レビュー

全体

26件

5.0

26件の受講レビュー

  • jirehmuze님의 프로필 이미지
    jirehmuze

    受講レビュー 3

    平均評価 5.0

    修正済み

    5

    31% 受講後に作成

    面白くて内容の濃い講義です。React、Ts、Jsの基本的な概念を実際にどのように適用できるのかを学ぶことができ、同じUIを異なる方式で多く実装してみながら、要求事項別に良い方式をたくさん学ぶことができ、非常に有益でした。 まるで指導者のように現実的な方向性を示してくださりながらも、すべてを教えてくれるわけではない(?)思考力を養ってくれる教授のようなスタイルの講義だと思います。 そのため、講義を聴いていると「私ならこうしてみるだろうな?」という考えが自然と浮かび、「この部分はなぜこのように作成したのだろうか?」と考えながら楽しく聴くことができます。 例えば、hidden属性をReactが強制的に型変換するため、属性を大文字で記述して終わる部分で、私は「どうせrefでアクセスしたのだから、setAttributeメソッドで属性を割り当てればいいのではないか?」と試してみるなど、考える機会がありました。また、クロージャーの活用、GNBのタイプを可読性良く、より安全に扱う方法など、実務的なヒントもたくさん学ぶことができました。 良い講義を作ってくださりありがとうございます。おかげでたくさん学んでいます!

    • jaenam
      知識共有者

      イレさん、心のこもったレビューありがとうございます!自ら考えながら受講されたとのこと、まさに私が望む理想的な姿です!途中でより良い方法だと思われる内容があれば、コミュニティでご紹介いただけると皆さんの 도움이 될 것 같아요.

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

    受講レビュー 4

    平均評価 5.0

    5

    7% 受講後に作成

    講義コレクターとしていくつかの講義を聞いたが本物の最高の講義のようです!とりあえず講師様が最新のタイプスクリプト文法、リアクト文法に上手なので、こういう時にあんなことを書くんだって見ているだけでも実力が遅いようです。もともと本と文書だけ見てはよく理解できないのですが、文書だけで学んだ内容をああああそう適用するんだし、もう一度体得することになります。 レベルは新すぎるよりは1~3年目のジュニアたちが見ればいいと思います。一度講義自体が実務にすぐに適用でき、リアクトの深化部分まで溶かしてみるからです~ 単純な実装にとどまらず、どうすればもっと良いコードになるのか悩んでみながら、ジュニアから中ニアに一段階成長したい方にはぜひおすすめです。 今どんなuiに会っても、今実装できるという自信ができました。いったんこの講義を聞きながら完成したuiコードを持っているだけでも講義の値を超えているようですねㅎㅎ 次のパーツも早く出てほしいです!

    • jaenam
      知識共有者

      丁寧な受講評ありがとうございます😃 私がこの講義を企画しながら期待していたことがよく伝えられたようで嬉しく力が出ますね! 次のパートも映像編集に拍車をかけてできるだけ早くオープンできるようにしてみますよ😂

  • myne님의 프로필 이미지
    myne

    受講レビュー 2

    平均評価 5.0

    5

    13% 受講後に作成

    実装方法を1つだけ教えてくれるのではなく、いろいろな方法を紹介してくれてとても知っています!そして、単にUI要素の基本的な動作実装を超えてアコーディオンctrl + Fで検索すると、開かれる機能、ツールチップが画面内に見えるようにする方法など、本当にディテールな動作まで教えてくれました。 普段開発するときに実装してみなかったUIを開発すればグーグルやYouTubeを利用して従ったんですが、講義を聞いてからだから'たくさんできたと思います。 価格に比べると、他の講義よりもはるかに得られることが多いようです。 part1も有益でしたが、part2も要素のリストを見るととても楽しみですね! ジュニアフロント開発者には最高の講義のようですㅎㅎいつも良い講義ありがとうございます:)

    • jaenam
      知識共有者

      ミンヘ様、大切な講義評ありがとうございます!講義内容を私よりよく紹介してくれたと思いますㅎㅎ:D

  • didgusdhdk3님의 프로필 이미지
    didgusdhdk3

    受講レビュー 1

    平均評価 5.0

    5

    12% 受講後に作成

    JSの本質的な側面に、より深く踏み込める視点を養える講座だと感じました。 講師の本と講座はいつも助けになります。 ありがとうございます。

    • pangoons3126님의 프로필 이미지
      pangoons3126

      受講レビュー 8

      平均評価 5.0

      5

      15% 受講後に作成

      実はレビューをよく残す性格ではありませんが、今回の講義を見ながらとても良いという考えをたくさんしました。 序盤にNext 14 味見でプロジェクトセッティング、そして左サイドバーを作る際の考えられる方法、 その後、リアクトでVanillaコードを書く方法、再利用コンポーネントごとにどのように実装して思考するかについてライブコーディングでよくお伝えします。もともと講義をすべて聞いてレビューを書こうとしましたが、今作成しますㅎㅎ ほのかに一日にコンポーネント川の一つずつだけ受講してもいいようです〜 良い講義を作ってくれてありがとう!

      • jaenam
        知識共有者

        丁寧な受講評ありがとうございます😄 一日一コンポーネントずつ見ていくのが後に行くほど大変になるか心配ですね。

    jaenamの他の講座

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

    似ている講座

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

    新規会員登録で25%OFF

    ¥6,631

    25%

    ¥8,841