椎名友太 | Webクリエイター・エンジニア

[Portfolio] ToDoリスト DB連携版（REACT + TypeScript + PHP + MySQL）

[Portfolio] ToDoリスト DB連携版 (REACT + TypeScript + PHP + MySQL)

前回作成したToDoリストアプリのDB連携版を作成いたしました。
通知実装の前に、DBに保存での複数デバイスで共有を対応いたしました。

下記の仕様に加え
━━━━━━━━━━━━━━━━━━━━━━━
・ToDo追加・編集・削除機能
・localStorage保持
・日付ごとの完了履歴を表示
・日付順切替（昇順/降順）
・日付ごとの折りたたみ表示
・グループ追加、分別
・期限設定
・期限間近、切れでの通知
　※ページを開いている間のみ
・ページ表示時、1分後ごとの期限チェック
━━━━━━━━━━━━━━━━━━━━━━━

↓　追加

━━━━━━━━━━━━━━━━━━━━━━━
PHPとの連携でDB保存
━━━━━━━━━━━━━━━━━━━━━━━

REACTとTypeScriptの練習の為
CSSでの装飾は最低限にしてます。

別のポートフォリオにて
Tailwindなど導入したいと思っています。

次の拡張案としては
PWA化 + Service Worker + Push API
で、ページを閉じてもデスクトップ通知がくるようできると…と思っております。

2025.10.12

[Portfolio] ToDoリスト 拡張版（REACT + TypeScript）

[Portfolio] ToDoリスト 拡張版（REACT + TypeScript）

先日作成したToDoリストアプリの拡張版を作成いたしました。

下記の仕様に加え
━━━━━━━━━━━━━━━━━━━━━━━
・ToDo追加・編集・削除機能
・localStorage保持
・日付ごとの完了履歴を表示
・日付順切替（昇順/降順）
・日付ごとの折りたたみ表示
━━━━━━━━━━━━━━━━━━━━━━━

↓　追加

━━━━━━━━━━━━━━━━━━━━━━━
・グループ追加、分別
・期限設定
・期限間近、切れでの通知
　※ページを開いている間のみ
・ページ表示時、1分後ごとの期限チェック
━━━━━━━━━━━━━━━━━━━━━━━

REACTとTypeScriptの練習の為
CSSでの装飾は最低限にしてます。

別のポートフォリオにて
Tailwindなど導入したいと思っています。

次の拡張案としては
PWA化 + Service Worker + Push API
で、ページを閉じてもデスクトップ通知がくるようにしたいと思っています。

GitHubにて
ソースコードとともに公開しております。
https://yutashiina.github.io/react-todo-app2/

2025.09.06

[Portfolio] TIMER（REACT + TypeScript）

[Portfolio] TIMER（REACT + TypeScript）

REACT + TypeScriptにて
簡単なTIMERアプリを作成いたしました。

仕様はこのような感じです。
━━━━━━━━━━━━━━━━━━━━━━━
・カウントアップ
・カウントダウン
・進捗バー表示
・デスクトップ通知でアラート機能
　※ページを開いている間のみ
━━━━━━━━━━━━━━━━━━━━━━━

REACTとTypeScriptの練習の為
CSSでの装飾は最低限にしています。

別のポートフォリオにて
Tailwindなど導入したいと思っています。

GitHubにて
ソースコードとともに公開しております。
https://yutashiina.github.io/react-timer-app/

2025.09.06

[Portfolio] ToDoリスト（REACT + TypeScript）

[Portfolio] ToDoリスト（REACT + TypeScript）

REACT + TypeScriptにて
簡単なToDoリストアプリを作成いたしました。

仕様はこのような感じです。
━━━━━━━━━━━━━━━━━━━━━━━
・ToDo追加・編集・削除機能
・localStorage保持
・日付ごとの履歴完了履歴を表示
・グループ単位で全削除
・日付順切替（昇順/降順）
・日付ごとの折りたたみ表示
━━━━━━━━━━━━━━━━━━━━━━━

REACTとTypeScriptの練習の為
CSSでの装飾は最低限にしてあり
別のポートフォリオにて
Tailwindなど導入したいと思っています。

GitHubにて
ソースコードとともに公開しております。
https://yutashiina.github.io/react-todo-app/

2025.09.05

[Portfolio] GitHubと自サイトの連携

[Portfolio] GitHubと自サイトの連携

GitHubと自サイトを連携いたしました。
Gitクライアントは「SourceTree」を使用

グループワークを想定し
━━━━━━━━━━━━━━━━━━
■ブランチ
（作業）　feature
（テスト）develop
（公開）　main
━━━━━━━━━━━━━━━━━━
mainにPRマージされると公開サーバーが更新される仕様です。
※今回テスト環境の構築は省略しました

2025.09.05

Skill Seet

言語 HTML5、CSS3、SCSS、Javascript、PHP
※現在、TypeScript を習得中
フレームワーク
ライブラリ		 jQuery
※現在、React、Next.js を習得中
※Vue.js、Nuxt.js、Laravel は習得予定
ツール

画像・デザイン：
Photoshop、Illustrator、Lightroom、fireworks、XD、figma

映像系：
Clipchamp、Edits、PowerDirector、Premiere Pro、After Effects、Animate

その他：
Google Analytics、Wordpress、Optimizely、ABTasty、VWO、GitHub、SourceTree、Chatwork、Slack、Backlog

※現在、ChatGPT、Adobe Fireflyを勉強中です
※他ソフトやツールも、ご希望あれば習得・対応いたします

※2025年8月現在

Profile

椎名　友太（シイナ　ユウタ）
1979年12月生まれ（満45歳）

2025年現在で、フリーランスの経歴は20年ほど。

下請けや孫請けながら、
大手企業のサイトの制作や運営補助、編集などにも携わっており、
投稿や更新型のサイト（wordpressなど）が多く、
ECサイトの構築なども手がけております。

SEOを意識しての制作や改善、
ABテストなどを行いながらのサイト運営も行っており、
形を作るだけの制作ではなく、
見やすさや使いやすさを重視し、
活きるサイトの制作を心がけております。

SNS用のリールやショート動画や、
YOUTUBEなどの動画編集なども対応可能です。

最近では、AIを活用しての、
プログラミングやデザインの効率化やプランニング、
スキルや知識のブラッシュアップも図っております。