PROJECTS
制作物
Python・FastAPI・WordPressを中心に制作したWebアプリやポートフォリオを掲載しています。
人生を経営するための行動管理システム
■概要 人生を経営するための行動管理システムのバックエンドAPIです。 Django REST Frameworkを利用し、 営業 開発 健康 計画 の4つの視点から管理するタスクデータを提供します。 Reactフロントエンドと連携し、タスクの登録・取得・更新・削除を行うためのREST APIを構築しています。 ■GitHub ◻︎バックエンド https://github.com/ki-hi-ro/django_todo ◻︎フロントエンド https://github.com/ki-hi-ro/react_todo
CASE STUDY →
こちらのポートフォリオサイト
# My Portfolio FastAPI・SQLAlchemy・WordPress REST APIを用いて開発したポートフォリオサイトです。 制作物管理・技術ブログ管理・職務経歴管理機能を実装しています。 また、WordPress上で公開している約1,500本の記事をREST API経由で取得し、ポートフォリオサイトへ自動同期する仕組みも構築しました。 # 制作背景 前職（2025年11月〜2026年5月）では、就業管理システムの移行業務などを担当していました。 一方で、私は周囲の音や人の多い環境で疲労しやすい特性がありました。 電話による問い合わせ対応を行いながら、納期のあるシステム開発を進める働き方が続き、徐々に心身の負担が大きくなりました。 一度休養を取った後、2019年から続けてきたプログラミングを軸に、もう一度キャリアを築き直したいと考えました。 ChatGPTを活用しながら学習と開発を進め、現在は自宅を拠点とするフリーランスエンジニアとして活動することを目標にしています。 このポートフォリオは、その第一歩として開発したWebアプリケーションです。 # このポートフォリオを作った理由 会社を退職し、個人として活動していくためのポータルサイトを作りたいと考えたためです。 2018年にプログラミングを始めて以来、 * 制作物 * 技術ブログ * 職務経歴 を一つのサイトで確認できるようにしました。 私がこれまでどのような経験を積み、どのような技術を身につけてきたのかを確認した上で、ご依頼いただけることを目指しています。 # 制作期間 **2026年5月28日 〜 現在（継続開発中）** # 主な実装履歴 | 日付 | コミット数 | 内容 | | ---------- | ----: | ----------------------- | | 2026.05.28 | 18件 | SQLiteとFastAPI間の処理を実装 | | 2026.05.29 | 27件 | SQLiteデータの表示、制作物管理機能を追加 | | 2026.05.30 | 34件 | 制作物の作業ログ追加機能を実装（現在は廃止） | | 2026.05.31 | 17件 | WordPress技術ブログ取得機能を追加 | | 2026.06.01 | 19件 | 制作物削除機能を追加 | | 2026.06.02 | 14件 | 職務経歴登録機能を実装 | | 2026.06.03 | 13件 | Renderへ本番公開 | | 2026.06.04 | 20件 | コンテンツ追加 | | 2026.06.05 | 10件 | UI改善 | | 2026.06.06 | 14件 | コンテンツ拡充 | | 2026.06.08 | 2件 | 本番環境修正 | | 2026.06.11 | 2件 | WordPress同期完了メッセージ修正 | | 2026.06.12 | 6件 | コンテンツ追加・デザイン調整 | | 2026.06.14 | 2件 | 記事分類機能追加 | | 2026.06.15 | 4件 | README作成 | | 2026.06.18 | 1件 | 技術ブログ追加 | | 2026.06.19 | 4件 | 対応可能業務セクション追加 | | 2026.06.22 | 1件 | NotebookLM向けデータ出力機能追加 | # 使用技術 * Python * FastAPI * SQLAlchemy * SQLite * WordPress REST API * HTML * CSS * Docker * Git / GitHub * ChatGPT * Codex # AI活用例 開発では、ChatGPTやCodexを設計・実装・改善のパートナーとして活用しました。 例えば、開発初期には次のような相談を行っています。 > 新しく自分でブログサービスを作り、市場で求められている技術を使ってクラウドへ公開したい。そこを名刺代わりにし、成果物を継続的に公開していきたい。 また、 * Python * FastAPI * Git / GitHub * Docker * Linux などをどのような順番で学ぶべきか相談しながら、開発を進めました。 その中で、 > **「自分自身をプロダクト化する」** という考え方を得たことが、このポートフォリオの方向性を決定づけています。 毎日の * コミット履歴 * 作業ログ * 技術記事 * 設計メモ * 所要時間 を公開することで、「成果物」だけではなく「仕事の進め方」も伝えられるポートフォリオを目指しています。 # 実装した主な機能 * ログイン機能 * 制作物管理（CRUD） * 技術ブログ管理（CRUD） * 職務経歴管理（CRUD） * WordPress REST API連携 * レスポンシブ対応 * Docker対応 # 今後の開発予定 * 制作物コンテンツの追加 * 技術ブログの追加 * 職務経歴の追加 * UI / UX改善 * PostgreSQL対応 * GitHub ActionsによるCI/CD * 開発ログ・工数管理機能の追加 * タグ・検索機能の強化
CASE STUDY →
買い物リスト作成アプリ
# Go Shopping List Go言語を用いて開発したシンプルな買い物リストアプリです。 日常の買い物を素早く記録できることを目的としており、商品の追加・チェック・削除といった基本機能を実装しています。 また、本番環境としてRenderへデプロイし、スマートフォンでも利用できるようレスポンシブ対応を行いました。 # 機能説明 ## 商品の追加 入力欄へ商品名を入力し、「追加」ボタンを押すと、買い物リストへ追加されます。  ## 商品のチェック チェックボックスをクリックすると、商品に取り消し線が表示されます。 購入済みの商品を一目で判別できるようにしました。  ## 商品の削除 ゴミ箱ボタンをクリックすると、不要になった商品を削除できます。  # 制作背景 普段は、近所のスーパーマーケット「バロー」へ買い物へ行く前に、スマートフォン標準のメモアプリで買い物リストを作成していました。 一方で、求人票ではGo言語を採用している企業を見かける機会が多く、「日常で実際に使うアプリを題材にGoを学んでみよう」と考えたことが、このアプリを制作したきっかけです。 ChatGPTを活用しながら実装を進め、Goの文法やWebアプリケーション開発の流れを学習しました。 # 制作期間 **2026年5月24日 〜 2026年6月4日** # 主な実装履歴 ## 2026年5月24日 ChatGPTへプロンプトを入力し、生成されたGoプログラムの動作確認を行いました。  ## 2026年5月31日 * Renderへデプロイ * スマートフォン向けレスポンシブ対応 ## 2026年6月4日 以下の機能を追加しました。 * チェック時の取り消し線表示 * 商品削除機能 # 本番環境について 本番環境はRenderを利用しています。 無料プランを利用しているため、一定時間アクセスがない状態から初回アクセスした場合は、アプリケーションの起動に数十秒程度かかる場合があります。 # 使用技術 * Go * HTML * CSS * JavaScript * Render * Git / GitHub * ChatGPT # 今後の開発予定 * データベース保存機能の追加（現在はメモリ上で管理） * 編集機能の追加 * 並び替え機能の追加 * カテゴリー分け機能の追加 * ローカルストレージ・DBへの永続化 # 関連記事 **RenderでGoの買い物リストアプリを5分くらいでデプロイした** https://ki-hi-ro.com/render%e3%81%a7go%e3%81%ae%e8%b2%b7%e3%81%84%e7%89%a9%e3%83%aa%e3%82%b9%e3%83%88%e3%82%a2%e3%83%97%e3%83%aa%e3%82%925%e5%88%86%e3%81%8f%e3%82%89%e3%81%84%e3%81%a7%e3%83%87%e3%83%97%e3%83%ad%e3%82%a4/
CASE STUDY →
CLIで動く就業管理システム
# Employment Management System ## 概要 CLI（Command Line Interface）で動作する就業管理システムです。 従業員の登録から出勤・退勤管理、勤怠レポートの表示まで、一連の勤怠管理機能を実装しています。 ## 制作背景 以前勤務していた会社では、就業管理システムを取り扱う業務に携わっていました。 実際の業務を通してシステムの仕組みに興味を持ち、「エンジニアとして自分でも一から作ってみたい」と考えたことが、このアプリを制作したきっかけです。 CLIアプリケーションとして実装することで、基本的なデータ管理や処理の流れを学ぶことを目的としました。 ## 動作説明 ### 従業員を登録する 従業員名・部署・役職などを入力し、新しい従業員を登録できます。  ### 従業員一覧を表示する 登録済みの従業員一覧を表示できます。  ### 出勤・退勤を登録する #### 出勤 従業員の出勤時刻を登録します。  #### 退勤 退勤時刻を登録します。  ### 勤怠レポートを表示する #### 本日の勤怠を表示 当日の勤怠情報を一覧表示できます。  #### 特定日の勤怠を表示 日付を指定して、その日の勤怠情報を確認できます。  ## 実装した主な機能 * 従業員登録 * 従業員一覧表示 * 出勤登録 * 退勤登録 * 本日の勤怠レポート表示 * 指定日の勤怠レポート表示 ## 今後の開発予定 * データベース対応 * Webブラウザから操作できるUIの追加 * 管理者ログイン機能の実装 * 勤怠集計・CSV出力機能の追加 ## 関連ブログ記事 * [就業管理システムを作成する ーcodexで就業管理システムと打ち込むー](https://ki-hi-ro.com/create-an-employment-management-system-enter-employment-management-system-in-codex/) * [前回作成した就業管理システムのプログラムを動かしてみた](https://ki-hi-ro.com/%e5%89%8d%e5%9b%9e%e4%bd%9c%e6%88%90%e3%81%97%e3%81%9f%e5%b0%b1%e6%a5%ad%e7%ae%a1%e7%90%86%e3%82%b7%e3%82%b9%e3%83%86%e3%83%a0%e3%81%ae%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%a0%e3%82%92%e5%8b%95/)
CASE STUDY →
Vue 3（CDN）版・クリックなしで遊べる抽選型のビンゴゲーム
# Bingo Game ## 概要 Vue.js（CDN版）を使用して開発したビンゴゲームです。 ランダムに番号を引きながらビンゴカードの状態を管理し、ビンゴ成立までゲームを楽しめます。 ## ゲームの機能 ### 番号を引く 「番号を引く」ボタンをクリックすると、手動でビンゴカードの番号を引くことができます。 画面には以下の情報が表示されます。 * 直近に引いた番号 * 引いた数 * ビンゴ数 * ゲームの状態 * 出た番号一覧  また、ビンゴカード内に直近の番号が存在する場合は、そのマスの色が変化します。 ビンゴが成立すると、状態が **「BINGO!」** に変わり、ゲーム終了となります。  ### 自動で引く 「自動で引く」ボタンをクリックすると、ボタンを押し続けなくても一定間隔で自動的に番号が引かれます。 ### リセット 「リセット」ボタンをクリックすると、ゲームの状態が初期化され、新しくゲームを始めることができます。  ## 作ってみようと思ったきっかけ 2024年5月の転職面接のプログラミングテストで落とされてしまい、その時の課題がビンゴゲームでした。 当時は、プログラミングのスキル不足を自覚しました。 2024年11月に仕事でPythonを扱うようになり、自身のブログでビンゴゲームを題材にすることにしました。 [Pythonで作る「ビンゴゲーム」](https://ki-hi-ro.com/creating-a-bingo-game-with-python/) 2025年7月31日には工場搬送システムの機能追加の仕事でPythonを扱っており、再びビンゴゲームの記事を書きました。 [再び、Pythonで作るビンゴゲーム](https://ki-hi-ro.com/%e5%86%8d%e3%81%b3%e3%80%81python%e3%81%a7%e4%bd%9c%e3%82%8b%e3%83%93%e3%83%b3%e3%82%b4%e3%82%b2%e3%83%bc%e3%83%a0/) 当時の職場で、Vue.jsを使っている人がいたので、自分も学習しておこうと思いました。 ChatGPTの力も借りながら、こちらのVue.js製のビンゴゲームを作成しました。 [Vue.js ビンゴ](https://ki-hi-ro.com/vue-js-%e3%83%93%e3%83%b3%e3%82%b4/) ## 作成時期 2025年8月26日 ## 今後の予定 Vue.jsの技術力向上のため、Vue.jsがどのような使われ方をしているのかについての技術ブログを書きます。 ## 公開URLのログイン情報 * **ユーザー名**：khiro * **パスワード**：khiro
CASE STUDY →
my-react
# 概要 WEBエンジニアのしまぶーさんの動画を参考にして作成したサイトです。 [しまぶーのIT大学 - YouTube](https://www.youtube.com/@shimabu_it) # 目的 WEB制作のフリーランスエンジニアからWEB開発のエンジニアに転身しようとしている中、 求人でよく書かれているReactを学んでおこうと思っていたためです。 # これからどうしていくか 今後は、自分の構想をこちらのアプリに反映させていきたいです。 [自分のブログ](https://ki-hi-ro.com)から旅行に関する記事のみを集めたサイトなど。 # React、Next.jsについての技術ブログ [Reactについての記事](https://ki-hi-ro.com/tag/react/) [Next.jsについての記事](https://ki-hi-ro.com/tag/%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0-next-js/)
CASE STUDY →