LVLPATH

日本最強無料プログラミングスクール

ポートフォリオ作成例

ポートフォリオ作成例

🔰 概要

未経験からソフトウェアエンジニアの仕事に応募（就職・転職）する際のポートフォリオの参考例です。

✅ KUJIRA SEO

image

機能

  • SEOに関連するツール系機能のウェブアプリ
  • Electronでデスクトップアプリも2つ作ってダウンロードできるようにしていましたが、開発をやめて廃止

技術スタック

  • フロントエンド
    • Next.js, MUI
  • サーバーサイド
    • Express(API)
  • データベース MySQL
  • インフラ
    • さくらVPS, docker-compose

ローカル環境ではdevcontainerで開発して、releaseブランチにリリースするコードを全部マージして、VPSにsshしてreleaseブランチのコードをgit pullしてdocker-composeを再起動しています。

リバースプロキシには、nginxのdocker-composeを利用してkujira-seo.comとlocalhostを紐づけています。

抽象化

  • ギリギリまともなUI
    • ReactのMUIを利用
  • なにかしらのユースケースがある機能
    • 例) WordPressのサイトのURLを入力すると、記事が全部取得できて、文字数やアフィリエイトリンクなどがみれる分析機能
  • デプロイがされていて、ユーザーが利用できる状態

実際に利用されたシーン

まんじがニートからフリーランスエンジニアの案件に応募する際の面接でURLを面接官にシェアして、一定のUIやデプロイなどができることの技術力の担保に貢献。

その後の技術面接の質問でも受け答えがそれなりにできたためPASSしてまんじはニートからフリーランスに。

ちゃんと成果物を出せている状態（証拠）がある状態で、技術的な部分を言語化できているから通ったのではないかと推測されます。

その他

まんじ「なんかSEOツール作ったら需要あるし儲かるんじゃね？(2022年、ニート期)」

結果: マネタイズに値する機能が作れる気がせず、失敗。

✅ LVLPATH

image

機能

  • ユーザーが0から年収1000万円超えのソフトウェアエンジニアになるためのコンテンツを読めるサイト
    • （Next.jsで作っているので、必要になれば、会員登録や課金機能などを入れることが可能）

技術スタック

  • フロントエンド
    • Next.js, MUI
  • サーバーサイド
    • Express(API)
  • データベース MySQL
  • インフラ
    • さくらVPS, docker-compose

ローカル環境はdevcontainerで開発して、releaseブランチにマージすると、GHCRにフロントエンドとサーバーがdocker image化されて、VPSにsshしてdocker imageをrestartすることでリリースがされています。

リバースプロキシには、nginxのdocker-composeを利用。

抽象化

  • ギリギリまともなUI
    • ReactのMUIを利用
  • ビジネス（価値を提供してお金を稼ぐ）を意識したうえでの、手段としてのプログラミング
  • デプロイがされていて、ユーザーが利用できる状態

実際に利用されたシーン

実際にLVLPATHのユーザーがコンテンツを利用してくれています。

YoutubeやSNSやSEOからのトラフィック獲得と、コンテンツ作成がメインなので、コードによってなんらかのユースケースを満たすことはあまりないですが、後々そういった部分も追加される可能性があります。

✅ ポートフォリオ作成の参考例を抽象化

image

UIをまともな状態にする

React(やその他、VueやAngularなど)を使うなら、UIライブラリを利用。

MPA方式のhtmlの場合は、BootStrapなどのCSSフレームワークとJavaScriptを利用。

フロントエンド側をギリギリユーザーが使えるぐらいのUIにはしたいです。

(APIだけをポートフォリオにするなどの特殊なポートフォリオは除く)

自分で考えた独自の機能を入れて実装する

  • 例1: 時間を販売するプラットフォームを作るなど
    • そのためには、会員登録機能、出品機能、課金機能、出金申請機能、、、などなどが必要
    • ↑すごく工数がかかるので、ポートフォリオには非推奨
  • 例2: ジャンルごとに人気ポスト（バズったポスト）がまとまっていて、それに対してユーザーがアクションを起こせるプラットフォーム
    • 「Youtubeで稼ぐ」というカテゴリに対して、それに関連するバズポストをまとめて、そこのページ内でユーザーがいいね、や、コピペできたり、コメントできたり、する、など。

ポートフォリオには自分で考えたオリジナルの機能（かつ、なぜそれを作ったのか）があると未経験からの面接では非常に評価されます。

デプロイされていて独自ドメインに紐づいている

  • VPSの場合(一例)
    • DNSでドメインとIPアドレスを紐づけて、ドメインからlocalhost:3000などにnginxなどでリバースプロキシをする
  • Vercelの場合
    • ダッシュボードからドメインを追加して、DNSで紐づけてプロジェクトとマッピングする
  • AWS EC2の場合(一例)
    • インスタンスを用意して、DNSでドメインとElastic IPを紐づけて、nginxなどでリバースプロキシをする

✅ 具体的なアクション

  • ポートフォリオ例などを参考に取り入れる技術などを考える
お問い合わせ