inflearn logo
知識共有
inflearn logo

ウェブフロントエンドポートフォリオのすべて - テーマ選定から実戦デプロイまで圧縮実習講義!

「経験者しか採用しない世の中、新人の武器はただ一つ - 差別化された『個人』ポートフォリオ!」 現場のニーズを盛り込んだプロジェクトで実力を見せる新人開発者の必須ガイド。

10名 が受講中です。

難易度 初級

受講期間 無制限

HTML/CSS
HTML/CSS
React
React
Git
Git
Portfolio
Portfolio
Next.js
Next.js
HTML/CSS
HTML/CSS
React
React
Git
Git
Portfolio
Portfolio
Next.js
Next.js

受講後に得られること

  • 採用担当者の視点から見たポートフォリオの構成方法

  • ポートフォリオのテーマ設定と企画の整理方法

  • ReactとNext.jsで実際のプロジェクトを設計し実装する全過程

  • モバイル対応とレスポンシブUI実装の核心原理

  • Git コミットログを実務スタイルで整理する方法


「React Todo App?すでに何百もの見ています。」

採用担当者のブラウザタブはいつもポートフォリオでいっぱいですが、
最後までクリックされるプロジェクトは手に挙げられます。


どんなスタックをダックジドック付けしたのかより
「この機能をなぜ、どのように実装したのか」が気になります。


CS専攻、何十ものサイドプロジェクト?
あればいいけど新入にとって現実的に不可能なオプションですよね。


結局「この人に仕事を任せてもいいかな?」を証明するだけです。


この講義はまさにその証明書を作成します。
テーマ選定→本番コーディング→配布→(選択)レビュー&メンタリング50%割引特典まで、
就職前に必ず必要な核心だけを集めて
「合格テーブル」の上に掲載するポートフォリオを完成させます。


Webフロントエンドポートフォリオのすべて

このレッスンでは、Webフロントエンド開発者として就職するための独自のポートフォリオを持つことができます。テーマ選定ガイドから、実習授業、ポートフォリオレビューまで全コースを盛り込みました。単に概念を伝えたり、「これほどになるでしょう」のようなあいまいな話をしません。

私は15年以上のビジネスでソフトウェアエンジニアとして活動してきましたが、主にWebフロントエンドの開発者としてキャリアを築きました。実際に数百件の履歴書を検討して多数の採用インタビューを直接進めたため、求人する立場から新入開発者にどんな能力を期待するか知っています。
単に現職者としての経験に加えて、大学特講や多数のメンタリング、そしてブートキャンプ講義を通じて実際の採用市場に入ってくる新開発開発者の方の現状と、どんな悩みをお持ちの方も多く経験しました。
そのような私が感じた最大の問題は、まさに「方向性の欠如」でした。特に最近はChatGPTをはじめとするAIの発展のため、さらに求職準備をどのような方向にすべきかについて悩みが多いと思います。
この講義はあなたに明確な方向性を与え、その目標を達成するのを助ける講義です。


講義は3つの軸で構成されています。

  1. 方向をつかむ

    • ポートフォリオがなぜ重要なのか?

    • 現業観点から通じるテーマ・技術選択戦略

  2. 実戦制作

    • プロジェクト設計→コーディング→展開まで全過程を一緒に実習

    • Gitコミット・配布自動化など実務フローそのまま経験

  3. 最終チェック&オプションレビュー

    • 完成後自ら品質をチェックできるレビューガイド・チェックリスト提供

    • (オプション)受講生専用ポートフォリオレビュー50%割引クーポンで知識共有者からのフィードバック&メンター申請

授業だけを聞いて終わる講義ではありません。
実習で動作するポートフォリオを作成し、チェックリストで自己チェックした後、必要に応じて割引された知識共有者のレビューまでつなげます。あなたのポートフォリオが合格表に上がるまで、一歩ずつまとめてください。


ポートフォリオ実践プロジェクトのプレビュー

練習ポートフォリオランディングページのスクリーンショット

プロジェクトのウェブサイト: https://apple-game-portfolio.vercel.app/

GitHubリポジトリ: https://github.com/panarch/apple-game-portfolio

適切な難易度で構成するために多くの悩みをしました。実習ポートフォリオプロジェクトが簡単すぎても問題ですが、ジュニアに期待するに過ぎないスペックを備えたプロジェクトも問題になります。そこで実習に不要な部分はできるだけ排除し、必ず必要な内容だけを込めました。

私の基準では、そして周辺の現職者の意見を総合しました。

実践プロジェクトは、新Webフロントエンド開発者に期待する「最小限から少し難しいレベル」の難易度で構成しました。つまり、この講義で取り上げる実践プロジェクトレベルのポートフォリオを直接開発できるようになれば、十分に求職準備ができたといえます。自分のポートフォリオプロジェクトを進める際に基準点として参考にできるように準備しました。

実習授業では単にコードだけを書くのではなく、どの程度分量でコードを分けるべきか、 Git commitも実習の過程で一つずつ直接積み重ねながら進めます。

こんな方におすすめです

  • Webフロントエンド開発者として確かにキャリアを始めたい方

  • 理論ではなく、実際の現職者基準で合格可能なレベルのポートフォリオを作りたい方

  • さまざまなツールやライブラリを書くのではなく、コアを明確に示すポートフォリオが必要な方

  • 開発者採用市場で競争力を整えたい方


受講後は

  • 現業で期待する「問題解決能力」を強調したポートフォリオを構成できるようになります。

  • Next.jsベースのプロジェクトを最初から展開まで経験し、プロジェクトの完成の経験を得ます。

  • 実際の現職者が認めるほどの明確なレベルのポートフォリオを企画して開発できるようになります。


  • HTML/CSS、JavaScript 基本機を装備できるようになります。


  • (オプション)受講生のみ1:1ポートフォリオレビュー50%割引クーポンで知識共有者のフィードバック&メンタリングを追加申請できます。


アーリーバード受講評イベント(先着順20名)

受講後受講評を残した先着順20分に

無料キャリアメンタリングを1回ご利用いただけます。



この講義の特徴

  • 現職者の明確な基準と実践を通じて具体的なポートフォリオの例を提供

  • 理論で終わらず、実際のプロジェクト完成まで導く段階別実習

  • 採用市場の現実と現業で求める能力を反映した実習構成

  • AIで簡単に置き換え可能な断片的な知識ではなく、「問題解決能力」を中心に設計されたプロジェクト


知識共有者の紹介 - ムン・テフン


2010年、Internet Explorer 6とjQuery環境でWebを開発していた頃から、これまでゲーム、フィンテック、エンターテイメント、国内外のスタートアップを経て、15年以上にわたって様々な実務開発経験を積んできました。
Webフロントエンドを中心に、バックエンドとモバイル(React Native)の開発まで取り組んでおり、実際のサービスの企画から配布まですべてのコースを取り上げてきました。

SvelteとReactはもちろん、 GlueSQLというオープンソースデータベースプロジェクトのメインテナーとして活動し、2020年公開SW開発者大会大賞を受賞し、その後も着実にオープンソース活動も続けています。

  • YouTubeチャンネル運営(購読者2.7k) – Webフロントエンド開発、バニラJSゲームの作成などの知識を共有

  • ブートキャンプでの講義やメンタリング経験、大学特講(Git、オープンソース)多数進行

  • オープンソースコントリビューションアカデミーメンター(2021~2023)

YouTube: https://inf.run/FcBQs

GitHub: https://inf.run/Yxo7h

LinkedIn: https://inf.run/bA1C7

質問がありますか?

Q. 非専攻者や初心者も従うことができますか?

基本的なHTML、CSS、JavaScript、およびReactについて理解している場合は、十分に従うことができます。実習授業で理論一つ一つを詳細に説明する方式ではありませんが、受講しながら一つずつ学習しながら追って来られるように準備しました。

ポートフォリオでどの技術要素が重要であるかを判断するのは難しいと思います。いくつかのフラグメントの知識をたくさん学ぶのも良いですが、その学習の時間と機会のコストを考慮する必要はありません。そして今では、AIによる以前とは異なり、単純な複数のライブラリ使用経験など、断片的な知識に対する重要度も大幅に低くなりました
本実習授業では不要な断片知識学習要素を最大限排除し、志願者の開発能力をアピールできるようにする本質に集中します。他の複合ライブラリに関する事前知識は必要ありません。

Q. ポートフォリオを完成すれば別にサポートはありますか?

はい。講義の中に含まれているチェックリストとガイドを通して自分でチェックすることができます。追加のフィードバックが必要な場合は、受講生専用の1:1ポートフォリオレビューを50%割引で別途申請できます。 (メンタリング割引クーポン提供)

Q. 練習レッスンコードの変更履歴と使用される画像リソースを受け取ることができますか?

各実習授業ごとに、授業終了時点のコードスナップショットを確認できるように授業ノートに追加しておきます。

また、そのクラスで使用するリソースがある場合は、関連リンクも追加されています。

実習授業はGit commitを一つ一つ一緒に積み重ねながら進行します。

完全な履歴は下のリンクで確認できます。

https://github.com/panarch/apple-game-portfolio/commits/main/


レッスンノートの例。

受講前の注意

練習環境

  • オペレーティングシステム:Windows、macOS、Linuxなど、すべての主要なOSをサポート

  • 練習ツール:Git、Next.js、Reactなどの基本的な開発環境が必要です。

  • 実習講義ではhttps://zed.dev/というエディタを使用しますが、VSCodeなど自由に使用しても構いません。

学習資料

選手の知識と注意事項

  • HTML、CSS、JavaScript、Reactの基本知識が必要です。


こんな方に
おすすめです

学習対象は
誰でしょう?

  • 実際の採用現場で通用するポートフォリオをご自身で作成してみたい方

  • ReactとNext.jsを活用した実践プロジェクトに挑戦したい方

  • 単純なクローンコーディングを越え、真に自分だけのポートフォリオを作りたい方

  • コードで自分だけのプロジェクトを設計し、実装する表現力を養いたい方

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

  • HTML、CSS、JavaScript、Reactの基本知識

こんにちは
taehoonです。

2010年、Internet Explorer 6とjQueryの環境でウェブ開発をしていた頃から現在まで、ゲーム、フィンテック、エンターテインメント、国内外のスタートアップを経て15年以上、多様な実務開発経験を積んできました。
ウェブフロントエンドを中心に、バックエンドやモバイル(React Native)開発まで幅広く経験し、実際のサービスの企画からデプロイまでの全過程に携わってきました。

SvelteやReactはもちろん、GlueSQLというオープンソースデータベースプロジェクトのメンテナーとして活動し、
2020年に公開SW開発者大会の大賞を受賞しました。その後も継続的にオープンソース活動を続けています。

  • YouTubeチャンネルの運営(登録者数2.7k) – ウェブフロントエンド開発、バニラJSでのゲーム制作などの知識共有

  • ブートキャンプでの講義およびメンタリング経験、大学特講(Git、オープンソース)を多数実施

  • オープンソース・コントリビューション・アカデミー メンター (2021~2023)

YouTube: https://inf.run/FcBQs

GitHub: https://inf.run/Yxo7h

LinkedIn: https://inf.run/bA1C7

もっと見る

カリキュラム

全体

62件 ∙ (8時間 12分)

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

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

似ている講座

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

期間限定セール

¥66

29%

¥15,352