株式会社ANYLAND / フロントエンドエンジニア(業務委託)
新潟デザイン専門学校を卒業した後、しばらくイラストレーターとして活動していました。 2020年夏以降からはプログラミングへ方針転換し、主にPHP/Laravelによる業務用システムのバックエンド開発に従事してきました。現在はフロントエンドの学習にも取り組んでいます。
これまで業務用プロダクトにばかり携わってきましたので、今後はtoCのサービス開発にも参画してみたいと思っています。また少人数や一人での開発経験しかないので、チームで切磋琢磨しながら業務を行えたらとも考えています。
ポートフォリオ用のサービスを開発している他、昨年リリースした技術ブログの手入れを行っています。
独学期間を経て再就職した会社です。始まりかけたシステム更改プロジェクトから外れることになったため、そのタイミングで退職しました。
【プロジェクト概要】 従来まで提供していた業務システムは、デスクトップパソコンほどの大きさのVODサーバーと外部連携用の リレイサーバー(いずれもWindowsServer OS)に映像コンテンツや業務システムをインストールし、現地へ出荷するというフローでホテルへ納品していた。 PHP4・MySQL5・HTML4 で動いているレガシー化したシステムだったこともあり、これを単一のクラウドサーバー上で稼働するSaaS型のシステムへリプレイスしたいという社内の要望があった。 【開発人数】 1名 【開発環境】 ・WindowsPC ・WSL2(Ubuntu) ・Docker ・PHP8 ・Laravel 9 ・JavaScript・Nuxt 2(Options API) ・Heroku ・Figma 【業務内容】 ・Dockerで旧システムの動作環境を再現し、サポートチームのオペレーターにヒアリングしながら、使われなくなった機能や用途が不明なレコードの詳細について調査し、実装予定機能と必要なデータ構造を洗い出した。 ・PowerPoint や Excel を多用していた前職の反省を活かし、「WEB上で共有することでエクスポート・ダウンロードを不要とする」「Gitで管理する」「自動化できる余地を増やす」などのテーマで技術を選定し、設計とドキュメント作成を行った。 【具体的な実践内容】 ・Vuex のステートへベタ打ちしたテストデータと、Vuetifyで実装した仮のUIによって動作するモックアプリケーションを作成。VercelへBsic認証付きでデプロイし、社内へ共有。 ・Stoplight Studio を導入し、Open API式のAPI設計書(YAMLファイル)を作成。PrismをインストールしたDockerコンテナでAPIモックサーバーを立て、フロントエンド実装に着手。 ・Draw.io でER図を作成し、画像化して社内のBacklogへ共有。 ・バックエンドとフロントエンドを別々のHerokuインスタンスへBasic認証付きでデプロイし、社内へ共有。 【身についたこと】 ・ゼロイチでの開発フロー ・エラー設計の知識 ・DDDチックなアプリケーション設計
社内には「文章を書いて後に残す」という習慣がほとんどなく、決まりきった業務の手順についても「口頭で説明を受けて手書きでメモする」というやり方が続いていました。手書きのメモは整理しづらいし、自分でも読めなかったりする上に手順が変わっても対応しづらく、とても効率が悪く感じられたため、個人的に電子化したものをついでに社内で共有しました。ちょっとだけありがたがられています。
DockerやVue.jsを知らないことに焦りを感じたため、独学でこれらをキャッチアップする期間を設けました。
(未リリース・Githubリポジトリは公開していません) 【企画概要】 ・個人図書館(マイクロライブラリー)運営者に向けた蔵書管理サービス 【意図】 ・前職の開発経験を証明できるような題材でポートフォリオを作りたかった。 【開発環境】 ・Mac ・Docker ・Laravel 8 ・PHP 8 【開発内容】 ・API の実装 ・ホワイトボックステスト ・ブラックボックステスト 【具体的な実践内容】 Serviceクラスがどんどん肥大化していった前職での経験から、責務の分離を意識した実装を意識したいと考えた。 その他、モデルオブジェクトを整形することなく、そのままJSON化して返却していたのも少しいけてないと感じた。 これらを改善するための施策を色々試してみた。 ・DBアクセスをRepositoryクラスへ集約する ・Resourcesクラスでレスポンスの整形を行う ・実装に併せてユニットテスト・HTTPテストを書いてリファクタリングや改修をしやすくする
(不慣れなCSSを頑張ろうとしすぎて一度挫折したあと、翌年の再就職後に朝活の時間を使って作り直し、そこで初めてリリースしました) 【企画概要】 ・QiitaAPIをバックエンドとするJAMStack構成のブログサイト 【意図】 ・Vue.js の基礎学習を終えて、Nuxt.js を使った習作を作ろうと思った。 【開発環境】 ・Mac ・Docker ・Nuxt 2(Options API) ・Netlify 【具体的な実践内容】 設計のことも考えたいと思い、とりあえずはUIコンポーネントとロジックコンポーネントを分けるようにした。
未経験で入った現場です。Androidアプリの改修案件から始まり、LaravelによるAPIの実装、本番環境(CentOS)の構築、フロントエンド(jQuery)も少し…など。
【プロジェクト概要】 電力会社ホームページに、過去の停電情報のアーカイブを表示する画面を追加する。 【開発人数】 3人 【開発環境】 ・Windows ・XAMPP ・VSCode ・JavaScript(ES6) 【業務内容】 他エンジニアの実装を参考に、JSONからDOMを生成するスクリプトの実装を担当。 【具体的な実践内容】 Jestを使ったことがなかったので、日曜日にある程度ドキュメントを読み込んだあと実装に着手した。async/await構文を覚える必要もあったのでそちらも朝の時間などを使って学習。 【身についたこと】 ・Jestを使ったテストの書き方
【プロジェクト概要】 建て壊しで生じた廃材を扱う業界のペーパーレス化支援を目的とした、請求書や検量書(各品目ごとの点数・重量等をまとめた書類)をWEB上で作成・閲覧するためのシステムの新規開発。 【開発人数】 4人 【開発環境】 ・Windows ・XAMPP ・VSCode ・PHP 7 ・Laravel 8 ・jQuery ・AWS EC2(CentOS・Apache・MySQL) ・Amazon SES 【業務内容】 取引先企業登録や、企業の新規招待などのユーザー系機能の実装を担当。担当機能ごとにバックエンド・フロントエンド両方の実装を行った。 【具体的な実践内容】 前回の案件では、Bladeテンプレートにscriptタグでベタ書きされ、同じ処理が必要なページごとにコピペされていたJavaScriptの多重メンテや改修などにとても苦労していた。 その反省をふまえ、他エンジニアの実装分と自分の新規実装分を合わせ、DRY原則に従ってJSファイル単体にソースを切り出した。 また、ES5までの文法で書くことでInternet explorerへ対応しようという方針に我慢ができなくなり、ES6のクラス構文や配列操作関数などを使った実装にすべて書き直した。 Laravel Mixでトランスパイルを行い、IEでも動作することを確認した上で実装を完了した。 バックエンドでは、メソッド内でCarbonなどのインスタンスを作るとテストがしづらいことがわかったので、なるべく外部で生成したインスタンスを引数に渡す実装を意識した。 全体で意識したこととして、あえて他エンジニアへの質問を減らし、Google検索とドキュメントで詰まりを解消するようにした。基礎知識を増やすことでドキュメントをより理解できるようになり、Google検索も上手くなったことで、この時期だけでもかなり自走能力が上がった。 【身についたこと】 ・非同期通信を伴う実装の方法 ・クラス構文 ・依存性注入など、テスタビリティを意識した実装
【プロジェクト概要】 医療用機器の販売・貸し出しを行う事業会社の社内用システムの新規開発。 【開発人数】 5人 【開発環境】 ・Windows ・XAMPP ・VSCode ・PHP 7 ・Laravel 8 ・jQuery ・さくらVPS(CentOS・Apache・MySQL) 【業務内容】 手順書を見ながらCentOS環境を構築。その後営業所をまたいだ状態ごとの機器数の計算や、貸し出し・返却等の状態変更機能のAPI実装を主に担当。検索画面などフロントエンドの実装にも参加。 【具体的な実践内容】 自動テストの際、Seederクラスでテストデータの配列を DB::insert するやり方を採っていたが、整合性を取るのに実装者が頭を悩ませないといけないことが多かった。そのためFactoryクラスでデータを生成するようにしたり、その他Qiita記事や他社の登壇資料などを参考に、テストコードの書き方を少しずつ工夫した。 また、PHP や Laravel自体が初めてだったので、朝の時間などを使った個人学習で理解を深めようとした。結果的には業務の方が個人制作より学習効率がよかったため、だんだんと残業時間を増やすようになった。その時間でQiita記事の下書きなどもするようになった。 【身についたこと】 ・Laravel でデータベース操作を行うやり方 ・ユニットテストの書き方
【プロジェクト概要】 新幹線の車内販売員向け業務用アプリ(リリース済み)の機能追加 【開発人数】 5人 【開発環境】 ・Windows ・Android Studio ・Kotlin ・jQuery 【業務内容】 当初実装したエンジニアの指導を受けながら、端末側のDB(SQLite)へのテーブル追加や新しいAPIへのアクセスなどの作業を担当。
グラフィックデザインの基礎全般や、商業イラストレーションの課題制作を中心に勉強していました。