강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Front-end

React と Next.js で学ぶ入門用フロントエンド プロジェクト: Tailwind CSS と静的デプロイまで完成させる

Next.jsとTailwind CSSを活用したフロントエンド入門講義です。バックエンドなしで静的展開まで完了し、初心者でも完成の達成感を感じられるように設計されています

  • ludgi
영어
global
Next.js
TailwindCSS
aws-s3
TypeScript
React

こんなことが学べます

  • nextjs

  • tailwindcss

  • 反応する

  • typescript

  • aws s3に静的デプロイ

ReactとNext.jsで学ぶ入門用フロントエンドプロジェクト:Tailwind CSSと静的展開まで!



  • このレッスンでは、TypeScriptを使用してNext.jsとReactベースのフロントエンドプロジェクトを安定的かつ効率的に完成させるプロセスを学びます。


  • TailwindCSSを使用して簡単かつ迅速に設計し、静的展開を通じて自分で作成したプロジェクトを世界に公開する経験を提供します。


  • このレッスンでは、AWS S3 で静的ウェブサイトをデプロイする方法を学びます。 S3設定、ファイルアップロード、配布まで簡単に練習します。


  • 多くの初心者の開発者は、完璧な負担と膨大な学習量のためにプロジェクトを開始できないか、途中で放棄します。

    このレッスンは、この問題を解決するために、シンプルだが最後まで完成できるフロントエンドプロジェクトを中心に設計されています。

  • Next.js、TailWindCSS、aws-s3、TypeScript、React を活用してバックエンドなしで完成可能なプロジェクトを作成し、完成の達成感静的展開の経験を提供します。

  • このプロセスを通じて、初心者が開発の喜びを感じ、前進する方向を見つけるのを助けることがこの講義の目標です。

  • この講義は英語で行われ、すべてのビデオにハングル字幕が提供されます。きれいな発音と明確な伝達で初心者でも簡単に理解でき、簡単な英語学習にも役立ちます。グローバル開発環境に慣れるための良い機会を提供します。


講義を聞いたら、このような結果を作ることができます。

メイン画面

シンプルなUIで設計された宝くじ番号抽選機のメイン画面です。メイン画面からTailwind CSSにスタイリングする方法を学びます。

ロード画面

データを読み込むか、特定のタスクが完了するのを待っている間に表示する読み込み画面を作成します。

ロード完了後の番号生成とデータレンダリング

ロードが完了したら、ランダム番号を生成し、それをリスト形式で正規化して画面にレンダリングする方法を学びます。

S3バケットへの静的デプロイ

完成したプロジェクトをAWS S3に静的デプロイするプロセスを学びます。


  • ReactとNext.jsの基礎を理解する
    Next.jsを活用したフロントエンドプロジェクトを最初から最後まで設計して実装できます。

  • Tailwind CSSによる迅速なUIスタイリング
    複雑なCSS作業なしで、ユーティリティベースのTailwind CSSを使用してUIをすばやく効率的に設計できます。

  • 静的展開の経験
    AWS S3 を使用してプロジェクトをデプロイし、実際にデプロイされた結果を URL で確認できます。

  • プロジェクト完成の達成感
    一つのプロジェクトを最後まで完成し配布する経験を通じて、開発の達成感を感じることになります。


学習内容

  • 講義で何を学ぶのか教えてください。セクションごとにどのようなことを学ぶかを説明してください。

  • セクションごとに学ぶ内容の例のイメージがある場合は、はるかに魅力的な講義紹介を作成できます。

講義の目標とビジョンを紹介します。

1. 講義紹介と基礎設定

  • 講義紹介

  • Node.js、VSCode、Next.jsのインストールと環境設定方法。

  • Gitの基礎概念と簡単なバージョン管理方法

2. Next.jsとプロジェクトの基礎

  • Next.js 初期設定と実行方法。

  • 基本状態管理(useState)とページルーティングの紹介。

  • フロントエンド専用プロジェクトでSSRを排除した構造説明。


Next.jsの第一歩と基本設定

宝くじ番号抽選機プロジェクト

3. プロジェクトの実装とUIの設計


  • 基本UI設計:Tailwind CSSによるレスポンシブUI構成とコンポーネント設計。

  • 状態管理とデータバインディング:番号生成ロジックの実装と状態管理。

  • ローディング処理:ローディング状態管理とuseEffectを活用したアニメーション効果。

  • 動的スタイリング:条件付きレンダリングとマップ関数を利用したデータレンダリング。

  • ユーザーエクスペリエンスの向上:ローディングフレーズのランダム化、アニメーションのタイミング調整、およびUXの最適化。

4. 静的展開の準備

  • 静的展開のための設定とSEOの基本設定。

  • ロゴの適用とレイアウト構成。

  • バンドル(静的ファイル生成)による展開の準備。

静的展開の基本設定

S3を活用した静的展開の完成

5. AWS S3 静的デプロイ

  • AWS S3 バケットの作成と静的ウェブホスティングの設定


  • ビルドファイルのアップロードと静的デプロイの再確認。

  • 展開されたプロジェクトをS3で確認する方法。

受講前の注意

  • この講義は英語で行われ、すべてのビデオにハングル字幕が含まれています。

    • きれいで明確な英語の発音のおかげで、初心者にも簡単に従うことができ、英語の用語に慣れていて、簡単な英語学習にも役立ちます

    • クリーンで明確な英語の発音のおかげで、初心者にも簡単に従うことができ、英語の用語に慣れていて、簡単な英語学習にも役立ちます。


  • この講義は初心者のための入門講義です。

    • Web開発を初めて開始したり、Next.jsとTailwind CSSを活用した簡単なプロジェクトを完成させたい方に最適です。

    • 以前にJavaScriptを扱ったことがなくても、講義で基本的な内容を説明するので、気軽に始めることができます。

  • 事前に準備する必要のある開発環境

    • パーソナルコンピュータ(Windows、macOS)。

    • インストールが必要なツール:Node.js、VSCode、Git(レッスンでインストール方法を案内します)。

  • この講義はフロントエンド中心に行われます。

    • プロジェクトはバックエンドなしでNext.jsとTailwind CSSのみを利用して実装されています。

    • 静的デプロイのための基本的なデプロイプロセス(AWS S3)のみが含まれており、高度なサーバー設定は扱いません。

  • インターネット接続が必要です。

    • AWS S3を活用した静的デプロイプロセスに従うには、インターネット接続が必要です。

  • さらなる学習機会を提供

    • 講義で扱われていない追加の課題(ドメイン設定、Route 53、CloudFront連携)は、別の講義で学ぶことができます。

    • このレッスンで学んだ内容に基づいて、さらに進歩する機会を提供します。

練習環境

1. オペレーティングシステムとバージョン(OS)

  • Windows : Windows 10以上を推奨します(このレッスンは主にWindows環境で行われます).

  • macOS : macOS Catalina 以上を推奨。

  • Linuxやその他のOSはサポート可能ですが、レッスンの内容はWindowsベースで構成されています。

2. 使用ツール

  • Visual Studio Code (VSCode) : 無料でダウンロードしてインストールできます。

  • Node.js :最新のLTS(Long-Term Support)バージョンを推奨。

  • Git :基本的なバージョン管理ツール(レッスンでインストール方法を案内)。

  • AWS S3 : 静的デプロイには AWS アカウントが必要です (フリーレイヤーで進行可能).

  • 課金:AWSは無料アカウントで最初に利用可能で、追加料金が発生した場合は講義で別途ご案内します。

3. PC仕様(推奨仕様)

  • CPU :Intel i5以上またはM1チップ以上(マルチコアを推奨)。

  • メモリ:最小8 GB RAM(推奨:16 GB RAM)。

  • ディスク:少なくとも20GBの空き容量。

  • グラフィックカード:個別の高性能GPUは必要ありません(統合グラフィックで十分)。

学習資料

  • レッスンで使用される参照ソースコードは、ZIPファイル形式またはGitHubリポジトリリンクを介して提供されます。

  • 必要に応じて、 Google Driveダウンロードリンクで資料を共有する予定です。


選手の知識と注意事項

1. 必須選手の知識

  • この講義は完全初心者向けに設計されています。

  • 基本的なHTMLやCSS、JavaScriptの基礎概念を知っていれば、より簡単に従うことができますが、講義で必要な内容を簡単に説明するので、事前知識がなくても学習可能です。


2.講義映像品質と推奨学習方法

  • 画質:すべての講義は1080p HD画質クリーンな音質で作られてます。

    • 円滑な視聴のために、安定したインターネット接続をお勧めします。

  • 推奨学習方法:

    • 講義に従い、直接練習してみることをお勧めします。

    • 提供されているソースコードを参考にして、自分のコードと比較して学習してください。

    • 必要に応じて講義内容を繰り返し視聴し、完璧に理解するまで練習してみてください。


3. 今後のアップデート

  • 今後のアップデート:

    • 講義内容は、技術の更新や変更によって継続的に補完される予定です。

    • 更新されたソースコードはGitHubで確認できます。


こんな方に
おすすめです

学習対象は
誰でしょう?

  • Next.js、React、Tailwind CSS を使用して Web 開発を学びたい人

  • コーディングを初めて触る人

  • 簡単な Web 開発プロジェクトから始めたい人

こんにちは
です。

462

受講生

19

受講レビュー

8

回答

4.1

講座評価

7

講座

안녕하세요, 주식회사 럿지의 대표입니다.


저는 스타트업, 금융권, 공공기관 등 다양한 분야에서 프로젝트를 진행하며,

개발뿐만 아니라 서비스를 직접 운영하는 경험을 쌓아왔습니다.

 

이 과정에서 팀원 및 프리랜서들과 협업하며 문제를 해결하고 프로젝트를 완성하는 능력을 길렀습니다.


특히, 단순히 개발자로서의 역할을 넘어서 자신의 서비스를 운영하고자 하는 꿈을 가진 분들께 더 많은 도움을 드릴 수 있다고 생각합니다.

 

완성의 즐거움과 성취감을 함께 경험하며 성장해 나가길 기대합니다. 감사합니다.

カリキュラム

全体

15件 ∙ (43分)

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

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

受講レビュー

全体

4件

4.0

4件の受講レビュー

  • 대성님의 프로필 이미지
    대성

    受講レビュー 2

    平均評価 5.0

    5

    33% 受講後に作成

    • 김태령님의 프로필 이미지
      김태령

      受講レビュー 9

      平均評価 5.0

      5

      33% 受講後に作成

      • Jang Jaehoon님의 프로필 이미지
        Jang Jaehoon

        受講レビュー 525

        平均評価 4.8

        5

        20% 受講後に作成

        리액트 프론트엔드 학습에 참조하겠습니다! 감사합니다!

        • ludgi
          知識共有者

          감사합니다. 앞으로 더 좋은강의를 제공하겠습니다.

      • rimbaud13님의 프로필 이미지
        rimbaud13

        受講レビュー 1

        平均評価 1.0

        1

        40% 受講後に作成

        입문자용이라고 하나 내용 중 입문용은 프로그램 설치 뿐...

        • ludgi
          知識共有者

          소중한 수강평 감사합니다. 해당 내용을 개선하도록 노력하겠습니다.

      ¥1,339

      ludgiの他の講座

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

      似ている講座

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