依川 愛瀬
Yorikawa Aise
ウェブサイト開発を中心に活動しています。
サークルの公式サイトやブラウザゲームなど、企画から実装・運用までを一貫して手がけています。
Skills
使用できる技術(各カテゴリ内は習得練度順)
Languages
- TypeScript
- JavaScript
- HTML5 / CSS3
- PHP
- Python
Frontend
- React
- Next.js (App Router)
- Tailwind CSS
- Vite
Backend / Infra
- GitHub Actions (CI/CD)
- GitHub Pages
- MySQL
- AWS Amplify
- さくらインターネット
Works 01 / 03
ソフトメディア研究会 公式ウェブサイト
千葉工業大学文化会所属「ソフトメディア研究会」の公式ウェブサイト。Next.js (App Router) + TypeScript + Tailwind CSS のフロントエンドと、PHP / MySQL による自作 CMS を組み合わせたハイブリッド構成で、さくらインターネット上で運用しています。記事の作成・公開は CMS の管理画面から行え、GitHub Actions による自動デプロイ・自動バックアップまで含めた運用基盤を整備しました。
制作のポイント
- Next.js 静的エクスポートと PHP/MySQL 自作 CMS を共存させたハイブリッド構成の設計
- GitHub Actions から rsync で さくらインターネットへ自動デプロイする CI/CD の構築
- 日次差分・月次フルの自動バックアップと Discord への通知連携(デプロイ/バックアップ/CMS ログイン)
- remark / rehype による Markdown 記事パイプライン(GFM・サニタイズ対応)
- セットアップ・CMS 利用法・デプロイ・バックアップ等のドキュメントを整備し、サークル内で引き継ぎ可能な運用体制を構築
Next.js (App Router) / TypeScript / Tailwind CSS v4 / PHP / MySQL / GitHub Actions
Works 02 / 03
放課後ゆる電波スタジオ 公式ウェブサイト
「放課後ゆる電波スタジオ」の公式ウェブサイト。News・Events・Discography の各コンテンツを、指定フォルダに Markdown ファイルを追加するだけで更新できる「Markdown CMS」方式で設計しました。非エンジニアのメンバーでも frontmatter 付きの Markdown を書くだけで記事を公開でき、運用コストを最小化しています。本ポートフォリオサイトのデザインの基にもなっています。
制作のポイント
- Markdown + frontmatter によるファイルベース CMS の設計(News / Events / Discography)
- ファイル名がそのまま URL になる規約設計で、記事追加を「ファイルを置くだけ」に簡素化
- OGP・メタデータ対応(SNS シェア時のカード表示)
- Swiper 等を用いたシンプルでモダンな UI / レスポンシブデザイン
- AWS Amplify によるホスティングと自動デプロイ
Next.js (App Router) / TypeScript / Tailwind CSS v4 / AWS Amplify
Works 03 / 03
花札ゲーム「そふ花」
サークルの成果物として制作した、ブラウザで遊べる花札「こいこい」ゲーム。フレームワークを使わず、素の HTML5 / CSS3 / JavaScript (ES Modules) のみで SPA として実装しました。山札・手札・場札の状態管理、役判定・得点計算、CPU の簡易 AI、チュートリアル機能までを自前で実装しています。MIT ライセンスでソースコードを公開中です。
制作のポイント
- 花札「こいこい」のルール・役判定・得点計算をフルスクラッチで実装
- DOM 操作 (ui.js / dom-elements.js) とゲームロジック (state.js / card-data.js) をモジュール単位で分離
- 点数・山札残り枚数・こいこい状態から「上がり / こいこい」を判断する簡易 CPU AI
- fitApp() + visualViewport 等で画面サイズ・向きに追従するレスポンシブな盤面レイアウト
- Node.js 組み込みテストランナー (node --test) による役判定ロジックのユニットテスト
- 初心者向けのチュートリアル機能・役アシスト(ヒント表示)機能
HTML5 / CSS3 / JavaScript (ES Modules) / node --test / GitHub Pages
コード抜粋
export function checkYaku(cards){
const yakuList = [];
const capturedSet = new Set(cards);
const containsAll = (names) => names.every(name => capturedSet.has(name));
const inoshikacho = ['萩に猪','紅葉に鹿','牡丹に蝶'];
if (containsAll(inoshikacho)) yakuList.push('猪鹿蝶');
if (containsAll(RED_TAN_CARDS)) yakuList.push('赤短');
if (containsAll(BLUE_TAN_CARDS)) yakuList.push('青短');
if (capturedSet.has('芒に月') && capturedSet.has('菊に盃')) yakuList.push('月見酒');
if (capturedSet.has('桜に幕') && capturedSet.has('菊に盃')) yakuList.push('花見酒');
const lights = cards.filter(c => getCardType(c)==='光' || c==='柳に小野道風');
const tane = cards.filter(c => getCardType(c)==='タネ');
const tanzaku = cards.filter(c => getCardType(c)==='短冊');
let kasu = cards.filter(c => getCardType(c)==='カス').length;
if (cards.includes('菊に盃')) kasu += 1; // 「菊に盃」はカスにも数える
const hasRain = cards.includes('柳に小野道風');
if (lights.length >= 5) yakuList.push('五光');
else if (lights.length === 4 && !hasRain) yakuList.push('四光');
else if (lights.length === 4 && hasRain) yakuList.push('雨四光');
else if (lights.length >= 3 && !hasRain) yakuList.push('三光');
if (tane.length >= 5) yakuList.push('タネ');
if (tanzaku.length >= 5) yakuList.push('短冊');
if (kasu >= 10) yakuList.push('カス');
return yakuList;
}取得札の集合から猪鹿蝶・赤短・五光などの役を判定する。光札・タネ・短冊・カスの枚数と特殊札(柳に小野道風・菊に盃)の扱いを自前で管理。
const cpuEvaluation = scoreFromCaptured(state.cpuCaptured);
if (cpuEvaluation.basePoints > 0){
let cpuEnds = false;
if (cpuEvaluation.basePoints >= 7) cpuEnds = true;
else if (state.deck.length <= 8 && cpuEvaluation.basePoints >= 5) cpuEnds = true;
else if (state.cpuHand.length === 0 || state.playerKoikoi) cpuEnds = true; // 強制上がり
else cpuEnds = Math.random() < 0.5;
if (cpuEnds){
endRound('cpu');
return;
}
state.cpuKoikoi = true;
state.cpuKoikoiBasePoints = cpuEvaluation.basePoints || 0;
showKoikoiDeclaration('cpu');
showBottomMessage('相手は「こいこい」!');
}現在の得点・山札の残り枚数・強制上がり条件を加味して、CPU が「上がり」か「こいこい」かを選択する簡易 AI。