30代エンジニアのポートフォリオサイト
このサイトは36歳エンジニア未経験のポートフォリオサイトです。
高校3年生の時に「ホームページビルダー」や「無料ブログサービス」を利用しつつ、約1年間の間、htmlとcssを少し勉強しながら収益を得ていました。その後、関係ない職種に就職。
28歳の時に「wordPress」などを利用しwebメディアを作成し、web広告業として個人事業主として開業をし、生計を立てて今に至ります。36歳の時にエンジニアの職種に就きたいと決意し、勉強を開始しています。
GitHub:https://github.com/haru0354
使用言語・ライブラリ・フレームワーク
Works
オリジナルの自作アプリの一覧です。
JavaScript/TypeScript」「React/Next.js」「Node.js/Express」「PostgreSQL/MongoDB」
目的を持って作成していますが、基本的に新たなアプリ作成時は「未使用の技術を使用」しており、学習としての意味もあります。
次は「PHP」「Laravel」を使用したアプリ開発をし、それ以降は使いこなせるように、Next.jsの簡単なアプリを複数作成予定。
「旅のメモリーブック」旅程表作成アプリ
「英語が話せない人でも安心して海外旅行に行ける」をコンセプトに、かつ「旅の記録として残し」見て楽しむことも出来るアプリとして開発しています。
今まで一緒に海外旅行をした友人は「興味はあるけど英語が話せない」を理由に、行ったことが無い人しかいませんでした。また、検索市場でも同じように「行きたいけど英語が話せない」と悩んでいる人の一定の需要もありました。
私の経験を元に作成したアプリで、「私自身が利用する」かつ「海外旅行に興味はあるけど英語が話せない人」の悩みを解決するアプリとして開発しています。
アプリの機能の一部
- 複数の旅行のしおりを作成
- 旅程表の作成
- メモの作成
- 共有が可能(同行者やSNSに共有し認証なしで見れるページの自動作成)
- 撮影した写真をアップロードし旅の記録へ
使用技術の一部
- TypeScript
- Next.js (ServerAction)
- DB: PostgreSQL (Prisma)
- スタイル: TailwindCSS
- 認証: NextAuth.js
- Supabase (DB/storage)
「メモブックノート」本型メモアプリ
「旅程表アプリと全て違った技術」で作られ、私自身の悩みを解決する為に作成始めたアプリで「エンジニアの学習」「働き始めた時を見据えて」「個人的な部分」の3つの目的の為に開発しています。
他のメモアプリを利用していましたが、見たい位置をスクロールして探すのに時間がかかったり、見やすいように装飾したりと無駄な時間がかかっていました。
個人的な悩みを解決できるアプリが見つからず。「時間の短縮」「見やすい」を目的に作成し、かつ、「働いた時も確認が出来るように」開発しています。
アプリの機能の一部
- 複数の本の作成ができる
- チャプターごとに複数のメモを管理できる
- 目次で何のメモがしてあるか即時に分かる
- 目次で見たいメモにスクロールし即時確認
- 基本モーダルで即時CRUDが可能
使用技術の一部
- JavaScript
- React
- Node.js (Express.js)
- DB: MongoDB
- スタイル: Emotion
- 認証: Firebase
- 状態管理: Redux/Toolkit
「レッスンアカデミー」- 4択/フラッシュカード 学習アプリ -
「4択クイズ」と「フラッシュカード」機能を備えた「Laravel 12」で作成している「学習用Webアプリケーション」です。
複数の4択クイズをまとめた、レッスンを作成することができます。また、作成したレッスンデータを元にフラッシュカードモードが生成されます。
「電車での移動中」「待ち合わせ時間」「すき間時間の利用」
私自身が「プログラミングの学習手段として利用する目的」として、作成をしました。
アプリの機能の一部
- 4択から選択して学習していく「レッスンモード」
- フラッシュカード（暗記カード）モード
- 「Laravel Livewire」でページ遷移なく学習に集中
- レッスンのCRUDでフラッシュカードも自動生成
- 解答時に「正誤判定」と「解説」表示
- レッスン終了時に間違えた問題を一覧表示
- ユーザー認証機能
使用技術の一部
- PHP
- Laravel 12
- Laravel Livewire（フロントエンド動作)
- Alpine.js（簡易的なフロントエンド動作）
- 認証: Firebase
- DB: MySQL
- スタイル: Tailwind CSS
Next.js製のブログ作成アプリ
「作成したアプリの集客用」「個人での利用」
以上の2つの目的に作成されたブログアプリです。
ISRブログ
ISRブログの詳細へ
SSGブログwithMD
SSGブログwithMDの詳細へ
SSGブログwithMDX
SSGブログwithMDXの詳細へ
ポートフォリオ
ポートフォリオの詳細へ
Laravelの学習目的に作成した旅程表アプリ
Laravelを学習して知識の定着の為に、学習目的に制作したアプリです。
- 「Livewireを使用したLaravelのフルスタック」
- 「RESTful設計のLaravelのフルスタック」
初作成のアプリ「Next.jsの旅程表アプリ」のLaravel版として練習目的で作成しました。
Laravel RESTful
Laravel RESTfulの詳細へ
Laravel Livewire
Laravel Livewireの詳細へ
エンジニアとしての技術
フロントエンド
- HTML5
- CSS3 (Tailwind CSS/Emotion)
- JavaScript
- TypeScript
- React
- Next.js
バックエンド
- PHP
- Laravel
- Node.js
- Express.js
- Prisma (ORM)
- DB(PostgreSQL / MongoDB / MySQL)
その他
- NextAuth
- Firebase (認証)
- Supabase (DB/storage)
- Git/GitHub
- Docker
- SEO
学習方法・備考
- Udemyで基本教材を学習
- 補完で本で学習
- アプリを開発開始
- 日本語や英語（翻訳を利用）で検索
- 公式ドキュメントの確認
プロフィール
高校生の時にWEBサイト・blog運営により収入を得る
高校卒業後の就職先も決まり、卒業までの間に収入を得たいと思い「HPビルダー」や「ブログサービス」にてホームページの運営を行う。最大で月30万円ほどの収入となる。その後、就職後は作業はほとんど行わなかったため、1年後ぐらいにはほぼWEBサービスよりの収入は無くなる。
いくつかの仕事に就く
高校卒業後は食品関係の貿易会社の内勤として就職し、その後に、不動産営業・イベント設営・警備会社とフリータ期間あり。
WEB運営業として個人事業主として開業
28歳の時に2年という期限を決め、WEBサイトの運営を始める。約1年半後、収入が大きくなり、個人事業主として開業届けを出し、WEB運営業としての生計を立てていくこととなる。（wordPressを使ったWEBサイトを運営し広告収入による生計「アフィリエイト・クリック型広告」）
廃業
収入もなくなり2024年に個人事業主としてWEB運営業の廃業を行う。もともと、wordPressを使用してweb運営中に知識無しながらPHPのテンプレートやCSSを編集していて興味がありました。そのため、年齢的に厳しいとは思うものの、エンジニアに興味が強くあったため、学習を開始。
エンジニアの勉強開始（2024年初め）
JavaScript, React, TypeScript, Next.jsとフロントエンドの学習をしていき、小さいアプリをアウトプットとして作成しつつ、自身初となる「旅程表アプリ」を完成させる。その後、いくつかアプリを作成した後、バックエンドの学習としてNode.js、Expressのアプリ作成後に、PHP・Laravelの学習を行い「レッスンアカデミー」の作成を行う。
WEBエンジニアとして就職活動中
1年学習して2024年12月より就職活動予定でしたが、諸事情があり2025年7月より活動開始。フロントエンドの学習時間が長いため、まずはフロントエンドでの求人を探し始めてます。ただ、バックエンドも学習してみて、データの送受信が反映されたり、ロジックを考えたりと、楽しく学習・アプリ作成は出来たので、後々はバックエンドも含めて求人を探して行く予定です。
