個人開発Showcase（全27件）
iOS / Android / Flutterエンジニアとしての実務で登場するUI実装・状態管理・アーキテクチャ選定の判断を、GitHub上で追試できる形にストックしてきたリポジトリ群です。 いずれも「業務コードにそのまま持ち込むことは難しいが、実装アプローチの引き出しとして繰り返し役立つ」ことを重視しています。
カテゴリー：公開OSSSwiftUIUIKitRxSwift / ReduxFlutter技術調査
公開OSS・1 件
実運用アプリで利用できる公開OSSとして継続メンテナンスしているリポジトリ
- Swift版 日本の祝祭日判定コードとカレンダーサンプルiOSアプリで頻繁に必要になる「日本の祝日判定」を、外部APIに依存せずSwiftのみで完結させる公開OSS。iOSアプリの現場で扱うカレンダーUI・予約フロー・期日計算にそのまま組み込める設計で、Star数の伸びに合わせて継続的にメンテナンスしている。
SwiftUI・7 件
SwiftUI・Observation・SwiftDataなど新しいiOS APIのUI実装検証
- SwiftUI + VIPER + Observationの実装サンプルSwiftUIにObservationマクロを組み合わせ、VIPERレイヤー構成のまま新APIへ移行する道筋を確認したサンプル。既存UIKitアプリを段階的にSwiftUI化する現場での判断材料として活用できる。
- SwiftData + インタラクティブ画面遷移のメディア一覧サンプルSwiftDataによるお気に入り機能とインタラクティブな画面遷移を組み合わせたメディア型UI。CoreDataからの移行検討や、SwiftUIでの状態永続化を実務に持ち込む際の実装検証として利用している。
- 特徴的なUIをトレース&応用したSwiftUI実装サンプル他アプリで見かけた個性的なUI表現をSwiftUIでトレースし、応用しやすい形に整えた実装集。企画・デザイナーとのUI検討で「これSwiftUIで実現できますか」の相談に即答するためのストックとして利用している。
- ScrollViewReaderを活用したTab型表現のSwiftUI実装サンプルScrollViewの性質とScrollViewReaderを組み合わせ、水平タブ切り替えとスクロール連動をSwiftUIで実現。カテゴリー切り替え・記事一覧・EC商品タブ等の実務UIに横展開できる作りにしている。
- Tinder風のCard切り替え操作のSwiftUI実装サンプルSwiftUIのgesture / animation / transitionを組み合わせてTinder風のカード切り替えを再現。マッチング系や診断系サービスで頻出する操作感を、実装の勘どころ込みで持ち運べる形にした。
- SwiftUI + Reduxによる画面状態管理サンプルSwiftUIのView表現とReduxによる単方向データフローを組み合わせ、規模が大きくなっても破綻しない状態管理の書き方を検証。BFFやAPI連携を含む実プロダクトへの適用時の判断材料にしている。
- AndroidのCoordinatorLayout風の動きをSwiftUIで実装Androidで親しみやすいCoordinatorLayoutのスクロール連動ヘッダをSwiftUIで再現。iOS/Androidを横断する開発者として、両OS間のUI表現の違いをコードで説明する土台としても機能している。
UIKit・9 件
UIKit・UICollectionView・UIScrollViewを組み合わせたUI実装検証
- UICollectionViewで複雑なレイアウトと挙動を表現するサンプルUICollectionViewをベースに、複数セクション・カスタムレイアウト・視差効果を組み合わせた表現を検証。EC・メディア系プロダクトの「見せる一覧画面」実装で繰り返し役立つパターン集。
- UIScrollView / UICollectionViewの特性を活用した表現サンプルUIScrollViewとUICollectionViewの性質を突き詰めた表現を並べたショーケース。既存プロダクトのスクロール体験を磨きたい時に、実装の選択肢を提示する引き出しとして活用している。
- DiffableDataSourceを利用したUI実装例iOS 13以降で導入されたDiffable Data Sourceの実装パターン集。既存のUICollectionViewDataSourceからの移行を、実プロダクトで安全に進めるための比較用サンプルとして継続利用している。
- 新しいUICollectionViewとCombineを組み合わせた実装例Compositional Layout・Diffable Data Source・Combineを組み合わせた実装例。宣言的な書き方で複雑な一覧画面を扱えるようになる恩恵を、実務導入前に検証するための土台。
- Pinterest風のMasonryレイアウトUI実装サンプル画像サイズが不揃いな一覧に強いMasonryレイアウトの実装。SNS・ポートフォリオ・ECの商品一覧で汎用的に応用できる構造を、UICollectionViewLayoutのサブクラスで整理している。
- TouchID / FaceIDを利用したUI実装サンプルLocalAuthenticationを用いたTouchID / FaceID認証の導線とエラーハンドリング。金融・会員制サービスでの再認証フロー設計を実プロダクトに持ち込む際の実装リファレンス。
- ライブラリを使わないアニメーション表現の機能サンプルアニメーションライブラリに頼らずUIKit標準APIのみで作る動きの検証集。依存を増やせない事情のあるアプリで、体験を落とさずリッチなUIを作る判断材料にしている。
- UICollectionViewによる無限循環スクロールの別パターン実装無限循環スクロールを別のアプローチで実装したサンプル。バナー・ストーリー・カルーセル等、実プロダクトで頻出する要素を「軽く・破綻せず」実現する複数の実装案として位置付けている。
- Tinder風UIを様々な実装で実現するUIKit実装サンプル同一のTinder風UIを複数の実装アプローチで並べ、それぞれの利点と欠点を比較しやすくしたサンプル。UI表現の実装選択肢を実務レビューで示すためのショーケースとして継続利用。
RxSwift / Redux・3 件
RxSwift・Reduxによる状態管理とUI実装の組み合わせ検証
- ReduxとUI実装を組み合わせたSwiftサンプルSwiftでのRedux導入とUIKit側のViewとの接続方法を検証したサンプル。「状態管理を分離すると何が楽になり、どこが窮屈になるか」を実プロダクト導入前に把握するための土台。
- RxSwiftとUI実装を組み合わせた実装サンプルRxSwiftによるObservableフロー設計とUIKitベースのUI実装の組み合わせ。実プロダクトの検索・フィルタ・ページング周りでRxSwiftをどこまで使うかを判断する材料にしている。
- RxSwiftの練習記録ノートで紹介したUI実装サンプルRxSwift学習過程で書き溜めたUI実装ノート。個人アウトプットの記事と対で管理し、「記事で読んだ実装をどう自分のプロダクトへ落とすか」を辿れるようにしている。
Flutter・6 件
Flutter + Riverpod / Drift / Firestoreを組み合わせたUI実装検証
- Flutter + GraphQLによる旅行プラン閲覧・予約サンプル旅行プランの閲覧から予約までを想定したFlutter + GraphQLの実装サンプル。iOS/Androidエンジニアがクロスプラットフォーム側の設計判断へ関わる際、UI/データフロー両面の判断軸を持てるように整理。
- Flutter + Riverpod + Driftの擬似単語帳アプリサンプルRiverpodによる状態管理とDriftによるローカルDBを組み合わせた学習アプリの実装検証。オフライン主体のアプリをFlutterで構築するときの、実務で使える最小構成を提示している。
- 複数ライブラリを組み合わせたFlutterの複合検索UI実装サードパーティ製ウィジェットを組み合わせて、コンボボックス風の複合検索UIをFlutterで実現。実サービスの検索絞り込みUIをFlutterで構築する際の実装引き出しとして活用している。
- Flutter + Riverpod + Firestoreの学習参考書メモアプリFirestoreをバックエンドに据えた小規模アプリを、Riverpodで状態管理しつつ実装した例。イベント運営や社内ツールなど「小さいけれど確実に動かしたい」プロダクトの実装参考にしている。
- Flutter + Riverpodによるプロダクト一覧の無限スクロール実装EC風のプロダクト一覧画面を、無限スクロール + キャッシュ戦略込みでFlutterに落とし込んだサンプル。実サービスでのページング設計の勘どころを共有するリファレンスとして活用。
- Flutter + RiverpodによるToDoリスト型UI実装サンプルToDoリストという題材で、Flutter + Riverpodの基礎パターンをひととおり並べたサンプル。新規にFlutterを触るチームメンバーへ「まずこの構成を読めば実装イメージが掴める」入口として利用。
技術調査・1 件
ライブラリのバージョン差分やアーキテクチャ移行を目的とした比較用リポジトリ
- Apollo 0.x / 1.x系の差分調査用リポジトリApollo iOSのmajorバージョン間の差分を実コードで比較・確認するための調査用リポジトリ。実プロダクトでGraphQLクライアントをアップデートする際の、破壊的変更影響範囲の見極めに利用している。
技術書同人誌博覧会 公式サイト 運用保守
技術書同人誌博覧会（技書博）の運営メンバーとして、公式Webサイトおよび関連システムの運用保守・段階的改善に取り組んでいます。イベント開催という明確な期限がある中で、既存サービスを止めず・大きく作り直さず、「現在正常に動いているものを守りながら、次の運用を少しずつ安全にする」ことを重視した継続的なContributionです。
Role: Web Application Maintenance / Modernization / Event Operations
イベント開催に必要な情報更新だけでなく、長期間更新が難しかったフロントエンドの技術スタック・依存ライブラリ・開発環境・運用スクリプトを整理し、既存機能やデザインを維持しながら段階的な改善を進めています。 Next.js / React / Node.js / Firebase / Emotion / Tailwind CSS / TypeScriptなど複数の技術要素が古いバージョンのまま相互依存していたため、単純な一括アップデートではなく、影響範囲の調査・ビルド確認・型チェック・画面比較・実行環境確認を組み合わせながら移行しています。 アップデート前後では主要画面のスクリーンショットを取得し、Visual Regression Testで差分を確認。Docker環境でのビルド・起動確認まで行い、本番Cloud Run相当の実行経路も検証しています。 Firestoreデータ投入・メール送信スクリプトは、誤操作を防ぐためDryRunをデフォルトとする安全設計へ変更し、実際の更新は明示的なオプション指定が必要な方式に改めました。
主な取り組み
- 公式Webサイトおよび関連システムの継続運用・保守
- Next.js / React / Node.jsを中心としたレガシー技術スタックの段階的アップデート
- Firebase / Emotion / Tailwind CSS / TypeScript等の依存関係更新と互換対応
- Breaking Changes・非推奨API・旧ライブラリへの互換パス整備
- Playwright + pixelmatchによるVisual Regression Testの導入
- TypeScript型チェック・Production Build・Docker環境での動作検証
- Firestoreデータ投入・メール送信スクリプトへのDryRun既定化
- イベント開催前のサークル情報・運用データ投入フローの整備
- 開発環境構築・障害調査・データ投入手順のドキュメント整備
- 改善項目を切り分け、段階的に対応可能な状態へ整理
技術スタック
Frontend
Next.jsReactTypeScriptEmotionTailwind CSSMDX
Backend / Infrastructure
FirebaseFirestoreCloud FunctionsCloud RunFirebase HostingGoogle Cloud Build
Development / Verification
DockerPlaywrightpixelmatchnpmGitHub
Open Source Conference 登壇（技書博コアスタッフとして）
公式サイトの運用保守に加え、Open Source Conferenceでも技書博のコアスタッフとして登壇し、「技術同人誌を書く」文化と技書博というイベントそのものを広く紹介する活動にも関わっています。