フロントエンド開発者向け、実践的なWebパフォーマンス最適化(feat. React) - Part. 1
hackurity01
React で作成された Web サービスのパフォーマンスを測定し、より高速で効率的に最適化する方法を学びます。
중급이상
React, Chrome DevTools
BEST
フロントエンド開発者向け、実践的なWebパフォーマンス最適化(feat. React) - Part. 2
React で作成された Web サービスのパフォーマンスを測定し、より高速で効率的に最適化する方法を学びます。
学習した受講者のレビュー
受講後に得られること
Web サービスのパフォーマンスを分析する方法
さまざまな Web パフォーマンス最適化手法
ブラウザ動作原理
Chrome devtools の使い方
React devtools の使い方
フロントエンドのパフォーマンス最適化
実力あるFE開発者として成長するため
本当！ Webフロントエンドのパフォーマンス最適化。
前の部分に走った
鮮やかな受講評価を確認してください！
この講義は？
Inflearnのベスト！
本番Webパフォーマンス最適化シリーズ🎲
さまざまな例を通して、 Webサービスの分析と最適化技術を学ぶことができる講義です。
一般的に理論だけを伝える無責任な一般的な最適化講義とは異なり、
実例では、直接分析と最適化を学ぶことができます
国内初のパフォーマンス最適化エキス講義です！
上位10％フロントエンド
開発者に向かって。
フロントエンドという分野が出てからかなり経ったが、
Webパフォーマンスの最適化に精通しているフロントエンド開発者はあまりありません。
このような現実の中で、
Webパフォーマンス最適化技術を身につけ、先進のフロントエンド人材になるか、
単純なパブリッシングだけをするただそのような従業員になるかは皆さんの選択です。
講義を事前に
確認してみてください。
学習内容
- Performanceパネルによる分析
- Lighthouseパネルを使用した分析
- ネットワークパネルを使用した分析
- Coverageパネルを使用した分析
- React Developer Toolsの活用法
- Redux DevToolsの活用法
- 画像遅延（Lazy）ロード
- 画像サイズの最適化
- 動画サイズの最適化
- フォントの最適化
- キャッシュの最適化
- 不要なCSSを削除する方法
- Layout Shiftの回避方法
- UseSelector レンダリングのトラブルシューティング
- Redux Reselectによるレンダリングの最適化
- Memoizationによる最適化
- ボトルネック関数ロジックの改善
クラスプレビュー
学習対象を確認してください！
- このレッスンは、フロントエンドのWeb開発経験がある方に適したレッスンです。特に、React（リアクト）の使用経験があれば、より簡単に学習できます。
この講義を作った
知識共有者を紹介します。
流動菌
- （現）ハッチラプスフロントエンド開発者
- （前）ラインファイナンシャルフロントエンド開発者
- サムスンSSAFY、プログラマスなどのフロントエンド開発講義
- Webパフォーマンス最適化プロジェクトと講義制作
- マイクロソフト393号(JSテーマ)、392号(ブロックチェーンテーマ)寄稿
パフォーマンスの最適化ということを「どのように」学ぶのが良いかについての原論的な悩みをしてこの講義を作ることになりました。以前に複数のWebサービスの性能を分析し、最適化してみた経験を振り返ってみると、理論から多くお知らせするよりもサンプルサービスを直接分析して実習してみれば、Web性能の最適化について確実に学習できると思いました。
実は性能最適化というのは状況によって変わることができ、方法も多様だが、その中で核心的なものを集めておき、単に最適化技法だけではなくブラウザの動作原理や性能の分析方法など、ウェブフロントエンド開発に骨となって肉がなることも教えてくれますので、一生懸命学習してください。質問はいつも歓迎です。
予想される質問Q&A。
Q. 講義の難易度はどのくらいですか？
基本的にはWebに関する知識が必要です。しかし、性能最適化の部分では基礎から詳しく説明をしましたので、性能最適化を初めてご利用の方でもご理解いただけます。
Q. このレッスンではどのプログラム（またはツール）を使用しますか？
Chromeの開発者ツール（devtools）を主に使用します。その他に必要に応じて追加のライブラリを使用しますが、使い方や簡単な説明を一緒にするので学習するのに困難はないでしょう。
Q. この講義だけの特別な利点がありますか？
Web パフォーマンスの最適化を学習することは困難です。なぜなら当然の資料もなく、ほとんど断片的な理論だからです。しかし、このレッスンでは、そのような断片的な最適化技術を集めて、直接学習し訓練することができるいくつかのWebサービスを用意しました。そのため、どのようにサービスを分析し、何に基づいて、どのような最適化技術を適用する必要があるのかを学ぶことができます。
こんな方に
おすすめです
学習対象は
誰でしょう？
Web パフォーマンスの最適化に関心のある開発者
より高速で軽量な Web サービスを作成したい開発者
Chrome devtools をさらに活用したい開発者
競争力を身につけたいWebフロントエンド開発者
前提知識、
必要でしょうか？
HTML5、Javascript、CSS
React.js
3,868
受講生
226
受講レビュー
108
回答
4.9
講座評価
3
講座
(전) 해치랩스 프론트엔드 개발자
(전) 라인 파이낸셜 프런트엔드 개발자
삼성 SSAFY, 프로그래머스 등 프런트엔드 개발 강의
웹 성능 최적화 프로젝트 및 강의 제작
마이크로소프트웨어 393호(JS 주제), 392호(블록체인 주제) 기고
カリキュラム
全体
21件 ∙ (7時間 53分)
講座資料（こうぎしりょう）:
授業資料
1. 0-1) 講義紹介
03:33
2. 3-1) 実習内容紹介
04:45
5. 3-4) 画像サイズ最適化
30:50
6. 3-5) 動画サイズ最適化
17:40
10. 3-7) キャッシュ最適化
43:43
11. 3-8) 不要な CSS 削除
29:12
12. 3-9) 要約まとめ
10:54
講座掲載日:
最終更新日:
受講レビュー
全体
51件
5.0
51件の受講レビュー
junsushin45461566受講レビュー 2
∙
平均評価 5.0
5
14% 受講後に作成1編聞きながら本当にお得でしたが、今回はプロジェクトの授業分量が増えてより良いですね。たくさん学んでいきます〜
- hackurity01知識共有者
こんにちはJunsu Shinさん。講義に関心をお寄せいただきありがとうございます！次の講義でも、より新しくて有用な練習になるよう努力します！ :)
- wwwbbb10977
受講レビュー 9
∙
平均評価 5.0
- jhkim7984
受講レビュー 1
∙
平均評価 5.0
5
76% 受講後に作成良い講義ありがとうございます。ただ、次のシリーズに来るときにソース画面をもう少し育てていただければと思います。ありがとうございます。
- hackurity01知識共有者
こんにちは、jhkimさん。未来のソースコード画面を育てていないことを申し訳ありません。 😭次のレッスンは、より読みやすく、良い画面で探してみましょう！講義に関心をお寄せいただきありがとうございます！
- shine78841433
受講レビュー 3
∙
平均評価 5.0
- dojin83512273
受講レビュー 1
∙
平均評価 5.0
期間限定セール、あと1日日で終了
￥7,230
24%
￥9,522
hackurity01の他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)강의 썸네일](https://cdn.inflearn.com/public/files/courses/338156/cover/01k4c77bftwd8ec4k0yakavbrc?f=avif&w=420)
![[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)강의 썸네일](https://cdn.inflearn.com/public/files/courses/336817/cover/01jwx9ttbwnetdsbt5qrxgxb3x?f=avif&w=420)
![[リニューアル] ReactでNodeBird SNSを作成する강의 썸네일](https://cdn.inflearn.com/public/course-325637-cover/d5fd6216-71d1-490e-8759-594cbbdc1973?f=avif&w=420)
