Projects

Twitter Clone

(2024/1~2024/3)

• レポジトリー: Twitter-Clone
• デモサイト: デモサイトURL
• 目的: 学習目的で Twitter の主要機能を実装し、Next.js、NextAuth.js、Firebaseなどのテクノロジーを使用して、自身の技術スキルを向上させることを目指す。
• 課題: Twitterの主要機能を含むクローンを開発するために、ユーザー認証、投稿の作成と管理、コメントやいいねの機能など、複雑な機能を統合する必要性。
• 解決策とプロセス: NextAuth.jsを導入し、Firebaseを使用してGoogleアカウントでの認証を実装。Firebaseをデータベースとして使用し、投稿、コメント、およびいいねのデータを保存し、リアルタイムのデータ更新を可能に。Tailwind CSSを使用してレスポンシブなデザインを実装し、様々なデバイスや画面サイズに対応。
• 結果: Twitterの主要機能を含むクローンを成功裏に実装し、ユーザーは投稿の作成、削除、コメント、いいねなどのアクションを実行できるようになった。サインインページでは、Googleアカウントを使用して認証できるようになり、セキュリティと利便性が向上。

Reactを使用したGraphQLを使用した歌詞アプリ

(2023/12~2024/1)

• レポジトリー: Lyrics-app-with-GraphQL-and-React
• 目的: GraphQLというクエリ言語およびAPIのためのランタイム環境について学ぶ。RESTとの違いを理解し、柔軟で効率的なクエリ言語の利用を目指す。
• 課題: RESTful APIはエンドポイントごとにデータを提供するため、使用しない過剰なデータも取得することで過剰な通信が発生。GraphQLを使用するのが初めてであった。
• 解決策とプロセス: GraphQLの基本的な使用方法を学ぶため、最初にGraphiQLで実際にjson-serverでqueryとmutationを実行しながら、データがやり取りされる仕組みを確認。
• 結果: GraphQLを実際に使用し、スキーマが中心的な役割を果たし、データの型や関連性を適切に設計。余分なデータの取得を避け、リソースの無駄をなくすことができることを確認。

マイクロサービスを採用したTicketing Service Webアプリ

(2023/10~2023/12)

• レポジトリー: Ticketing-Service-Microservices-with-Node-JS-and-React Public
• 目的: 大規模サービスを安定して提供する上で欠かせないマイクロサービスの概念を学び、非同期通信やサービスのカプセル化を体験することが目的。
• 課題: マイクロサービスに特有の課題である、サービスの分割方法やサービス間の通信手法などに取り組んでいます。
• 解決策とプロセス: AWS や GCP などの公式ドキュメントを参考にし、マイクロサービスの概念や設計方法を学習しました。これらのサービスで実際に使用されているサービス間通信の手法も参考にしました。
• 結果: マイクロサービスを実際に構築し、故意に一部のサービスを停止させても他のサービスが正常に動作することを確認。データの整合性を確保しつつ、サービス間で通信するための基本的な手法や考え方を習得しました。

Webサーバーフレームワークの構築

(2023/8~2023/9)

• レポジトリー: GCDWebServer-Swift
• 目的: Webサーバーが実際にどのように動いているか理解し、軽量なGCDWebServerを構築して動作するかを確認。
• 課題: 実際に実装していく上でSwiftを使用することが初めてであった。
• 解決策とプロセス: Swiftの公式サイトのチュートリアルを読みながら学習。
• 結果: GCDWebServerが正常に起動し、指定したポートでリクエストを待機していることを確認。ルーティングの動作と応答の確認。

Reactの構築

(2023/5~2023/8)

• レポジトリー: mini-react
• 目的: Reactがどのように動いているか理解し、実際にReactを構築して動作するかを確認。Jestを使用したテストの方法も学習。
• 課題: Jestを使用したテストが不慣れであり、JavaScriptの知識不足があった。
• 解決策とプロセス: JSの専門書「You Don’t Know JS」を読み知識不足を解消。Jestは公式サイトのチュートリアルを読みながら学習。
• 結果: useStateやレンダリングの仕組みについて理解し、実際に実装。Jestを使用したテストの書き方についても学習。

インターン

XEBEC

(2022/1~now)

• 業務内容: XEBECというバリ取りブラシ世界シェアNo1の会社で、Webデザインも含むデザイン関連全般のインターンとして働いています。

ハッカソン

TaskHub

(2024/3/15-2024/3/24)

• レポジトリー: TaskHub
• 目的: ハッカソンに参加し、新しい技術に触りたいと思いreact-nativeでiosアプリを開発。
• 課題: expo-goでの開発環境構築が初めてであり、環境構築が課題であった。classNameなどのCSSセレクターの使用不可。異なる解像度でのレイアウトへの適応。
• 解決策とプロセス: expo-goの公式ドキュメントを参考に環境構築を行なった。CSSセレクターの代わりにStyleSheet Componentでのスタイリングを行なった。pxではなくdp、dip、ptを使用し異なる解像度でのレイアウトへの適応した。
• 結果: ハッカソンで開発したiosアプリを公開できた。また、react-nativeの使い方を学んだ。

展示会出展

小学生向け科学教室早稲田大学ユニラブ出展 (人間タワーバトル)

(2023/4-2024/7)

• レポジトリー: 人間タワーバトル
• 制作物: 動物タワーバトルを落ちてくる動物の代わりにカメラで撮った人が切り抜かれ落ちてくる科学教室の展示。
• 目的: 小中学生が科学、機械学習を身近に感じられる楽しいものであること教える。
• 課題: 小学生に向けての展示なので、簡単に誰でも分かるように理論を説明しないといけない。
• 解決策とプロセス: スライドを使った全体への講義なども行い、使われている技術も小学生にもわかりやすいような手法を選択。人の写っている画像とそれをマスクした画像を大量に集め、なおかつfew shot学習の手法を取り入れ反転させたり切り抜いたりして学習データを増やした。
• 結果: 参加していただいた小学生の事後アンケートの満足度90%以上となり、科学に興味持ってもらう機会を作ることができた。
• 期間： 　レポジトリー：

　内容：それと同時に、機械学習がどのようなものであるかを体験してもらうため、実際に学習過程を体験してもらったり、学習後の人と背景で分けたマスク画像で境界がどのようになっているかの可視化なども行ないました。 　Tech：python、Unity、セグメンテーション