Sample
業務外での制作物や学習のアウトプットをまとめたサンプルです。
コーディング技術の検証や、新しい技術の習得過程として作成しました。
実務での応用を見据えた構成や、開発効率・保守性を意識した実装を心がけています。
| タイトル | 新刊チェックのSPA：Vue.js学習のアウトプット |
|---|---|
| 内容 |
Vue 3（Composition API）とTypeScript、Tailwind CSSを用いて開発した、新刊書籍のチェックアプリです。 新刊は発売から3か月以内の書籍として定義し、一覧表示とカレンダー表示の切り替えに対応。取得した書籍にはタグ付け（予約済／購入済／保留中）ができ、「予約済」タグは発売日経過で自動的に「購入済」に更新され、本棚へ追加されます。 購入済や保留中の書籍はリストとして管理でき、購入済本棚リストや保留リストで状況を確認可能です。発売から3か月以上経過した書籍がリストから削除されても、購入済や保留中の書籍は保持される仕組みを採用し、利便性と実用性を意識した設計を行いました。 |
| 使用言語・技術 | HTML / CSS / TypeScript / Vue.js / Tailwind CSS / FullCalendar / LocalStorage / 楽天ブックスAPI |
| URL | https://new-book-check.5ecodework.com/ |
| GitHub | https://github.com/5ecode/study-output-newBookCheck |
| タイトル | 書籍管理のSPA：Vue.js学習のアウトプット |
|---|---|
| 内容 |
Vue 3（Composition API）とTypeScriptを用いて開発した、個人向けの書籍管理アプリです。 楽天ブックスAPIを利用した書籍検索をベースに、ISBN検索・書籍名／著者名検索・バーコード読み取り・手入力といった多様な登録方法を実装。ISBNからの自動取得に加え、任意の画像アップロードにも対応しました。 また、書籍名から巻数を除外してシリーズ名を自動登録する仕組みを取り入れ、シリーズ一覧や著者別一覧、新刊チェックなどを可能にしています。さらに、シリーズ名や著者名の一括編集機能、貸出状況の管理、絞り込み表示（すべて／貸出中／貸出済／検索）にも対応し、実用性を重視した構成としました。 LocalStorageによるデータ永続化、モーダルによる詳細編集、型安全性を意識した設計など、開発効率と保守性を考慮した実装を行っています。 |
| 使用言語 | HTML / CSS / TypeScript / Vue.js |
| URL | https://book-shelf-note.5ecodework.com/ |
| GitHub | https://github.com/5ecode/study-output-BookShelfNote |
| タイトル | Vue.js学習帳 |
|---|---|
| 内容 | Vue.jsの基本的な構文・概念を習得するための学習ノートです。 単一ファイルコンポーネント（SFC）やリアクティブなUI構築、ディレクティブの使い方などを検証しながら、複数の小規模コンポーネントを制作。 将来的に中〜大規模SPAにも対応できるよう、状態管理やコンポーネント設計も意識して学習を進めています。 |
| 使用言語 | HTML / CSS / JavaScript / Vue.js |
| URL | http://study-vue.5ecodework.com/ |
| GitHub | https://github.com/5ecode/study-vue |
| タイトル | JavaScript自由帳 |
|---|---|
| 内容 | 実務で頻繁に使うUI要素（スライダー／モーダル／タブ切り替えなど）をモジュール化し、部品として再利用できるよう整理。JavaScript（ES Modules）の理解を深めるため、モジュール構成や再利用性を意識した設計を学習目的で実践しています。 |
| 使用言語 | HTML / CSS / JavaScript |
| URL | http://study-js.5ecodework.com/ |
| GitHub | https://github.com/5ecode/study-js |
| タイトル | 架空のデザイン会社のコーポレートサイト |
|---|---|
| 内容 |
フリー配布のデザインカンプをもとに、コーディングを行った架空コーポレートサイトです。 |
| 使用言語 | HTML / CSS / JavaScript |
| URL | https://demo-site-wp.5ecodework.com/ |
| ベーシック認証 | 5ecode-demo-wp / ADr6j2pw |
Works
フリーランス転身後に担当した案件例です。
掲載許可をいただいていないため、URLの公開は控えさせていただいております。
| 案件名 | 鉄道系クレジットカードサイトのリニューアル |
|---|---|
| 内容 | リニューアルに伴い、TOPページを含む主要ページのコーディング、サイト全体のCSS設計、JavaScriptの構築を担当しました。また、量産ページ用のパーツを制作し、量産のコーディングメンバーからの修正や追加要望に応じて、パーツを継続的にブラッシュアップしました。 |
| 使用言語 | HTML / CSS / JavaScript |
| 雇用形態 | 業務委託 |
| 案件名 | 既存サイトの一部コンテンツ再構築 |
|---|---|
| 内容 | Flash Playerのサポート終了に伴い、Flashで制作されていた2ページ分のコンテンツをJavaScriptで再構築しました。美術品の数が多くコーディングに時間がかかる見込みだったため、すべてのデータをHTMLに直接記述するとソースが煩雑になると判断。美術品のデータはCSVファイルで管理し、JavaScriptでHTMLに動的に出力する形を採用しました。 |
| 使用言語 | HTML / CSS / JavaScript |
| 雇用形態 | 業務委託 |
| 案件名 | 食品メーカーのブログコンテンツ全面リニューアルに伴う制作補助 |
|---|---|
| 内容 | 別の担当者の案件にヘルプとして参加し、ヘッダー周りのJavaScript開発や記事詳細ページのモジュール（パーツ）制作を担当しました。また、旧ブログからの記事移植やチェック作業、新規記事の投稿（PowerCMS）も行いました。 |
| 使用言語 | HTML / CSS / JavaScript |
| 雇用形態 | 業務委託 |
About Me
- 略歴
- 2010年に趣味で始めたサイト制作でコーディングの面白さに目覚め、これを仕事にしたいと考えるようになりました。
2012年12月に技術系インターネット広告代理店でアルバイトとして採用され、約1年2か月の実務経験を積みました。
その後、2014年から2020年1月まで正社員として2社でWebサイトやWebサービスのコーディング業務に従事。
ダイナミックサービングやレスポンシブ対応を含むHTML・CSS・JavaScriptの設計・実装を中心に、新規サイトの立ち上げや既存サイトのフルリニューアル、運用更新などに携わりました。
2020年4月より個人事業主として独立しています。 - 使用経験
-
- 言語
- HTML / CSS / JavaScript
※一人称でLP～100p前後のwebサイト構築経験有。 - コードエディタ
- Sublime Text → Atom → Brackets → Visual Studio Code
- 画像書き出し
- Photoshop / Illustrator / XD
※デザインスキルは皆無 - バージョン管理
- Subversion / Git
- タスクランナー
- npm-script / Gulp
※開発環境構築可能 - CMS
- WordPress / PowerCMS
※実務では新記事投稿、編集程度 - ライブラリ
- jQuery
- フレームワーク
- Bootstrap / Foundation
※開発途中参加で触れた程度 - OS
- Windows
- その他
- Chatwork / Hangouts / Backlog
- 学習中
- Vue.js / TypeScript