MO4g-DEV

Black Jack Game

2021/6

HTML
CSS
TypeScript
Tailwind CSS
Vercel

オンライン学習プラットフォーム Recursion での課題作品で、その中で最も苦労したプロジェクトです。ユーザーはまず賭け金を調節して、それ以降は手持ちのカードの合計値に応じてアクションを選択します。ゲーム仕様は教材内で提示されたものを参考にしていますが、実装は完全自力です。

100%オブジェクト指向で書いていて、いかに直感的に読めるように書くか?MVCをどう分離するか?が一番悩みました。Modelはすっきり書けたという自信がありますが、ViewとControllerが膨大なのが課題です(責務の区別が難しい)。また継承や抽象クラス、インターフェース、enum型、private修飾子などを使って堅牢なつくりを目指しました。ボット(AI)の判断の精度や、デザインにもこだわりました。(結局HTML/CSSが一番難しい...)

Computer Builder

2021/5

JavaScript
Tailwind CSS
API
Vercel

オンライン学習プラットフォーム Recursion での課題作品で、選択されたPCパーツに基づいてスペックを計算するWebアプリです。

APIには教材内で提示されたエンドポイントを使用しています。セレクトボックスが選択されるたびに、その右隣のセレクトボックスに選択肢をセットしています(キャッシュを使って高速化しました)。

100%関数型プログラミングで書きました。関数について、「処理内容が似ているからといって安易に共通化しないこと」「1つのことだけに集中すること」などを意識しました。非同期処理や配列操作、データ加工の練習にもなりました。

Clicker Empire Game

2021/5

JavaScript
Tailwind CSS
Vercel

オンライン学習プラットフォーム Recursion での課題作品です。ハンバーガーをクリックしてお金を貯め、億万長者を目指すゲームです。一応、「有り金をひたすら株式につっこむ」という戦略があります。

アイテム仕様は教材内で提示されたものに沿っていますが、実装は完全自力です。

半分は関数型(?)、半分はオブジェクト指向で書きました。100%オブジェクト指向で作りたかったですが良いロジックが思いつかず...。

直感的な命名や、メソッドの粒度を小さくすること、関数をネストさせて可読性をあげることにこだわりました。

MO4g-DEV

2021/3

Next.js
TypeScript
Tailwind CSS
Vercel

2つ目の自己紹介用ホームページです。

Next.jsでのSSG、ISRに手を出してみたくて作り始めましたがRecursionというサービスに出会い、ただのポートフォリオ置き場になりました。

現時点のこだわりポイントはこのページの技術タグにenumsを使っていることで、Qiitaにも簡単な記事を投稿しました。データをmapメソッドで展開することでJSXをすっきりと(?)書くことにもこだわっています。

Workout Journal

2021/3

React
Redux Toolkit
TypeScript
Firebase
Tailwind CSS

Udemyのハンズオンアプリを改造してつくったSPAです。日々の筋トレ記録をシェアできます。

ログイン機能、投稿機能はミヨウミマネで実装し、自力でコメント機能とGitHubカレンダー機能を追加しました。

UIはTailwind CSSとMaterial UIを使用しています。

Reduxによるステート管理やHooksの記法、FirebaseのAuthentication、FireStoreの使い方を学びました。

My Portfolio

2020/12

HTML
CSS
JavaScript
Vercel
Responsive

HTML、CSS、JavaScriptだけで作成した自己紹介用ホームページです。

YouTubeに転がっているHTML/CSSデザイン講座をひたすら写経していた時期があり、そこで貯めたノウハウを凝縮して作りました。

ホスティングはVercelを利用しています。

Home Study

2020/8

Rails
Bootstrap
jQuery
PostgreSQL
RSpec
Heroku

勉強はじめたての頃に、スクール講師の方の力とフレームワークの魔法をひたすら頼ってなんとか形にしたwebアプリです。

機能としてはTwitterのようなつぶやき投稿機能、いいね、コメント、フォローなどが行えます。

HTML/CSSから始めて、GitやMVC、RDB、セッション、ソフトウェアテストなど、web開発の基本的な概念に一通り触れることができました。AWSデプロイとDocker運用にも挑戦しましたが挫折してしまいました。当時はネットの指南記事や書籍を読み漁っていましたが、今振り返れば公式ドキュメントを読み解けるだけの基礎的な知識がまず必要でした。webを支える技術がどれほど広範にわたるものか痛感しました。