Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Front-end

さまざまなフレームワークで構築するポートフォリオサイト開発マスタークラス

Vite、React、Vue、Next.jsを使用して素晴らしいポートフォリオサイトを作成する方法を紹介します。さまざまなフレームワークを活用して、実務レベルのフロントエンド開発能力を向上させたい開発者に適しています。

  • webstoryboy
포트폴리오
Portfolio
React
Vue.js
vitejs
Next.js

こんなことが学べます

  • JavaScript開発ツールViteを使用したポートフォリオ

  • Next.jsを使用したポートフォリオの製造方法

  • Vue.jsを利用したポートフォリオの製造方法

  • React.jsによるポートフォリオの作成方法

フロントエンドポートフォリオ制作課
フレームワーク学習を一度に!

フレームワークの基礎からアプリケーションまで
本番!

  • Vite、React、js Vue、js Next.jsなど、さまざまなフレームワークで素晴らしいポートフォリオサイトを作成します。
  • フロントエンド開発者として、必要な能力を養う実践プロジェクトを直接体験できます。

自分で作ってみて
開発能力をよもぎ!

このレッスンの目的は、さまざまなフレームワークを活用してフロントエンド開発者としての能力を向上させ、本番プロジェクトを通じて素晴らしいポートフォリオサイトを構築することです。

各フレームワークの基礎から応用まで学習し、様々なツールを習得し、実際のWeb開発での経験を積んで実力を発展させることが今回の講義の目標です。

Vite、React、Vue、Nextなど、複数のフレームワークを扱うため、さまざまなフレームワークを比較して体験できます。

クオリティの高いポートフォリオを直接フォローし、理論的な内容だけでなく、実際の制作方法を体験して学習することができます。

ViteやNext.jsなどの最新のWeb開発ツールを活用して、開発環境を最適化し、Webアプリケーションを効率的に開発できます。

鮮やかに学べます!

  • ✅GSAPを使用して横モードを実装します。
  • ✅ Lenisを利用してスムース効果を実現します。
  • レスポンシブまで完了し、 Web標準とWebアクセシビリティを考慮します。
  • ✅JavaScriptフレームワークViteを使用してサイトの最適化と効率を向上させます。
  • ✅リアクトを利用してサイトを製作し、コンポーネントや配布まで完成します。
  • ✅ビューを使用してサイトを作成して配布してみます。
  • ✅Next.jsでサイトを作成して配布してみます。
  • ✅CSSをSCSSに変換して作業します。
  • ✅個人ポートフォリオの作業に役立ちます。

Q&A 💬

Q. 各フレームワークの長所と短所は何ですか?

Reactは柔軟で強力なコンポーネントベースのライブラリで、大きなコミュニティとエコシステムが形成されています。
Vue.jsは直感的で軽量なフレームワークで、学習曲線が緩やかです。
Next.jsはサーバーサイドレンダリング(SSR)とコード分割をサポートし、SEO関連の処理を優れたものにすることができます。

Q. ポートフォリオを作成する際にどのフレームワークが最適ですか?

プロジェクトの目的と要件によって、適切なフレームワークが異なる場合があります。

Q. 各フレームワークを学ぶのが難しいですか?

初心者なら、フレームワークの概念と生態系を身につけるのが難しいかもしれませんが、1つのサイトを4回繰り返し学習することになるので十分に克服できます。

Q. フロントエンド開発に必要な選手の知識は何ですか?

基本的なHTML、CSS、JavaScriptの知識が必要であり、フレームワークの基礎概念を理解すれば、迅速な学習に役立ちます。

Q. ポートフォリオサイトを作成する際の最も重要なポイントは何ですか?

ユーザーエクスペリエンスとデザイン、レイアウトの構成とパフォーマンスの最適化などが、ポートフォリオサイトを作成する上で重要なポイントです。

Q. 講義で扱うポートフォリオの実装難易度はどうなりますか?

初心者から中級レベルに至るまで、難易度でポートフォリオを作成します。

Q. 講義を受講するとどのような学習方法や資料が提供されますか?

講義聞くときの最初の問題は私だけではありませんが、講師はうまくいきません。

Q. 講義で扱うプロジェクトの例はありますか?

すべてのレッスンソースはGithubNetlifyに配布されています。

✅受講前に参考にしてください

  • 受講には基本的なHTML、CSS、JavaScriptの知識が必要です。
  • 自己主導的な学習態度と実践プロジェクトへの意志が必要です。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • フロントエンド開発者として様々なフレームワークを習得したい中級者

  • ポートフォリオサイトを作りたい学生と就学生

  • フロントエンド開発を学びたい初心者

  • フロントエンド開発者としてポートフォリオを強化したいキャリア開発者

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

  • HTML、CSS、JavaScript

こんにちは
です。

124

受講生

6

受講レビュー

6

回答

5.0

講座評価

4

講座

나는 공간을 만드는 것을 좋아한다.
어렸을 때부터 나만의 공간을 만드는 것을 좋아했다. 
내가 만든 공간 속에서 누군가가 영감을 받거나 마음을 움직이게 하는 것이 목표다.
코딩은 이런 매력적인 공간을 만들 수 있는 힘이라 생각한다. 
그 한구석에 나만의 꿈을 담아두고, 개발을 하면 살고 싶다.

カリキュラム

全体

40件 ∙ (13時間 32分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

1件

5.0

1件の受講レビュー

  • designshake8524님의 프로필 이미지
    designshake8524

    受講レビュー 1

    平均評価 5.0

    5

    18% 受講後に作成

    講義速度がちょっと速いのに…一回三回は振り返らなければ感がくるみたいです。

    ¥7,928

    webstoryboyの他の講座

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

    似ている講座

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