ID:63383さん

本件はフランチャイズ案件を紹介するBtoCサービスのリニューアルプロジェクトです。 ## プロジェクト概要 元々外注で作製されたプロダクトですが、サーバーのOSやPHPのバージョンが古い上にハードコーディングされていたので、メンテナンスがしづらく、パフォーマンスが著しく悪い状態でした。本プロジェクトでは下記二点を行いました。 1. Laravelで作製された一般画面と管理画面 - サーバー移管 - PHPバージョンアップ - 機能修正 2. Zend Frameworkで作製されたフランチャイズ業者管理画面 - サーバー移管 - PHPバージョンアップ - CodeIgniterへのリプレイス ## 開発体制 本プロジェクトはGitLabを用いたチーム開発で、ウォーターフォールで進行しました。 ## チーム構成・規模 - インフラ：1 - フロントエンド兼バックエンド：1 - 企画：１ 私の役割としては上記の「フロントエンド兼バックエンド」に該当し、業者管理画面のCodeIgniterへのリプレイス、一般画面の速度チューニング、その他要望のあった修正、リリースまでを行いました。特に、業者管理画面は仕様書やドキュメントがない上に、依頼側の部署でも挙動を正確に把握している人がいなかったため、ソースコード（Zend Framework）を読むことで実際の仕様を把握していきました。 ## 解決した課題 元々のプロダクトではいくつかの一般画面、特にフランチャイズ業者の開催する説明会に関連するページ、が動作が重く開くのに数十秒かかっていて、複数人のユーザーがアクセスするだけでアプリ全体がフリーズしてしまい管理画面が固まってしまうという挙動が散見されていました。そこで、一般画面における速度チューニングを行いました。その結果、PHP関数で計測した処理速度は一番遅い箇所で20秒から0.2秒にまで改善されました。 ### 工夫した点 速度改善による具体的な知見を持っている人が周囲にいなかったので、基本的に自分で調べながら下記のようなアプローチで速度チューニングを行いました。 1. PHP関数を利用して各ページ表示に関与するfunction内で速度計測を行い処理速度を調べ、時間がかかっている箇所を列挙していきました。 2. 「達人が教える webパフォーマンスチューニング」（技術評論社）という本をざっと読みデータベースチューニングを実施しました。特に遅い箇所のSQLを抽出して、EXPLAINで検証する作業を行いました。 3. PHPサイドでも無駄なSQLが発行されていないか、重い処理を行っていないかをチェックし、メモリを食っている箇所はリファクタリングを行いました。 上記を実施した結果、①説明会に関連するページは説明会のカラムにindexが貼られていない、②SELECT文が✳︎になっていた、③foreach分の中でSQLを発行している箇所が数箇所あった、ことがわかり改善したところ、一番遅い箇所で20秒から0.2秒にまで改善されました。 ## 習得した技術 上記の開発経験を経て、下記の技術を身につけました。 1. 速度チューニング ## リリースと成果 本件は2022年9月末にリリースされ、現時点まで正常に稼働しています。パフォーマンスが向上したことで検索順位が著しく上がりました。

本件は個人開発の釣りアプリです。2021年12月下旬から開発スタートしましたが、テスト釣行実施の末に2023年2月に開発完了しました。 ## 背景 近年管理釣り場でのトラウト釣りを同僚の釣り仲間に教えてもらったことで、釣りのパターンが目まぐるしく変化する部分に魅せられ、自分の戦略を見直すためにアプリを作ろうと思いました。釣りをしながらルアー、ロッド、リール、ライン、天気を記録できることが主な機能です。ユーザーは初級者から中級者の人が自分の釣りを振り返って自分の思考の癖を見つけたり、次の釣りでの戦略を練るためのツールになることを目指しています。 ## 選定技術 SPA構成で、フロントエンドがNext.js、TypeScript、バックエンドがGolang（Echo）、インフラはAWS + Terraformで、CI/CDはGithub Actionsで行っています。 #### フロントエンド 各技術の選定理由ですが、以前友人からの依頼でEthereumの送金ができるUIアプリを作った際に、参考記事がReact + TypeScriptであり、①Reactに関する情報の豊富さ、②TypeScriptの静的解析が考慮漏れや記述忘れを未然に防いでくれた開発体験の良さ、③SPAによるUIの動きの滑らかさから、ReactとTypeScriptを選びました。 また、Next.jsにした理由は、今回URLでページ表示を管理したかったのですが、Reactだとライブラリを入れる必要があり、ある程度のページがあるとそのライブラリを使った記述が煩雑になりそうだったので、デフォルトでルーティングが管理できるNext.jsを選びました。 #### バックエンド Golangを選んだのは、近年流行っていることへの興味に加えて、①速度ランキング上位に入るぐらい実行速度が速い、②静的解析による開発体験への期待、③リソースを食わない、からです。 Echoを選択したのはシェアが大きくAPI関連で情報が多そうであったからです。 #### インフラ AWSを選んだ理由は、①EC2やCloud9を過去に触ったことがあるのでなんとなく勝手がわかっている、②会社に詳しい方がいるのでいくらでも質問できる、③出回っている教材や情報が豊富である、ことです。 Terraformを採択した理由は、①画面で色々設定するほどコンソール画面での操作に長けているわけではないのでチェック漏れを防ぎたい、②人にアドバイスを乞う時確認してもらいやすい、です。 #### CI/CD Github Actionsを選択した理由は、Software Designでの特集を試してみたところとても導入が簡単であったからです。pushした際にフロント、バック共に簡易テストが走るようになっており、テストがパスされると自動デプロイされます。 ## 本アプリの各機能について - ルアー、ロッド、リール、ライン、タックル、釣り場情報、釣果記録の登録、表示、更新、削除ができる ＊タックルとはロッド、リール、ラインを組み合わせたセットのこと - ロッド、リール、ラインの組み合わせをタックルとして登録、表示、更新、削除できる - 実際に釣りをしながら釣果を記録できるがその際に、使用ルアー、タックル、天気、釣果を選択できる #### UIでこだわった部分 実釣時の釣果記録は本アプリの最も頻繁に扱う画面である上に、片手間でも簡単に記録できるUIが必要だと考え、釣果、天気、ルアーの速さ、深さはラジオボタン、タックルとルアーはセレクトで登録できるようにしました。 また、釣果の集計をグラフで表示できるようにしました。 #### 詳細について https://qiita.com/Ksk8358/items/b6bc25010ad1f7a9bb12

本プロジェクトは、エアコンクリーニング等の清掃業者をお客様と繋げるBtoCサービスです。 ## プロジェクト概要 弊社のメインサービスではコールセンターが母体になっていますが、電話をかけることに抵抗のあるお客様に向けてチャットでのやり取りが主体になるようなサービスを展開することを目的にしています。 ## 開発体制 本プロジェクトはGitLabを用いたチーム開発で、ウォーターフォールで進行しました。 ## チーム構成・規模 - プロジェクトマネージャー兼企画：1 - 企画：1 - フロントエンド：3 - バックエンド兼インフラ：1 - フロントエンド兼バックエンド：2 - 設計：1 私の役割としては上記の「フロントエンド兼バックエンド」に該当し、できる限り多くの機能を実装することを期待されていました。 ## 解決した課題 業者が自身のサービスを展開するエリアを登録する機能を実装するにあたり、弊社の既存サービスでは都道府県、市区町村ごとに登録を行なっていましたが、市区町村の端に店舗がある業者の場合、同市の反対側のエリアよりも隣接市のエリアが近いというケースを扱いづらいという問題がありました。そこで、設計担当者がGoogle Map上で業者の店舗を中心に円を描き、円内の郵便番号と緯度経度を抽出することで対応エリアを登録できる仕組みを考案し、実際の実装を私が行いました。機能の詳細は下記の通りです。 1. 業者マイページの担当エリア設定機能 この機能は、業者が自分のサービスを展開するエリアを画面に表示されるグーグルマップ上でピンを差し、そこに自分で半径を設定した円を描くことで、その円内を出向できるエリアとして設定できるものです。 2. バッチ処理による郵便番号抽出と市区町村の紐付け CakePHPのShellでのバッチ処理によって登録された郵便番号と市区町村と業者IDが紐づくテーブルに格納する処理を実装しました。 3. サービス一覧ページ 上記機能で設定された各カテゴリに紐づいたサービスのリストを郵便番号や都道府県、市区町村ごとに絞って表示させる機能を実装しました。 ### 工夫した点 設計者の要望として、円の色を、登録する前は赤色、登録済みは青色、更新の際に選択しているときは黄色にして欲しいという話があり、下記の仕様になるように実装を行いました。 1. エリア登録画面を開いた際にすでに登録されているエリアがあれば、青色円を描画する。 2. マップの中心には赤色の円が常に描画されている状態（半径等は調整可能）で、地図を動かしても赤色円が地図の中心にある。 3. マップ下にすでに登録済みのエリアリストが並んでいるので、一つ選択するとそのエリア（青色円）が地図の中心になり黄色に変わる。 4. 3の状態から地図を動かして地図の中心と円の中心がずれると黄色円は青色に戻り、赤色円が中心に出現する 円描画はインスタンスをGoogle map上に生成することで行っているので、それぞれの円に識別子を振るのも難しいと思いました。そこで、登録前の円（赤色円）と登録済みの円（青色円と黄色円）を別々のインスタンスで扱うことにしました。青色円は円の中心と地図の中心が合致したことをトリガーに黄色になり、地図を動かして中心がずれると青色に戻るというイベントリスナーを仕込んでおきました。同時に赤色円インスタンスは消します。こうすることで、上記の3の時の動きが表現できます。また、4に関しても、地図を動かして円の中心と地図の中心がずれることで黄色円は青色にもどります。この時、新しい赤色円を出現させ地図の中心に配置します。 この結果、エリア登録は正常に行われています。 ## 習得した技術 上記の開発経験を経て、下記の技術を身につけました。 1. jQueryを用いたajaxなどを含むユーザの画面操作に関わる機能やバリデーションの実装 2. CakePHPのORMによるDB操作、Shellによるバッチ処理、CellやElementを用いたビューファイルの分割、PHPユニットテスト 3. GitLabによるバージョン管理、Dockerによる環境構築 ## リリースと成果 2020年春にスタートした本プロジェクトは2020年秋ごろに無事リリースされ、この時に最多MR（マージリクエスト）が評価されMVPに選出されました。

本件は2021年秋にリリースしたBtoCサービスのSEO改善プロジェクトです。 ## プロジェクト概要 本サービスにおいてSEO関する施作は本プロジェクト始動まで、ほとんどなされていない状態で、サービス名検索をしても検索順位が低い状態でした。2021年の冬ごろ、企画サイドで社長、室長を交えたチームが編纂され、そこに開発チームから私が参加することになりました。隔週の会議に参加し、開発工数の見積もりや開発メンバーや外注の作業割り当てなどの提案・調整を行いました。 ## チーム構成・規模 - 企画：4 - フロントエンド兼バックエンド兼窓口：1 私の役割は開発プレイヤーでもありつつ開発チームの窓口でした。SEO対策会議に出席し、企画の提案に対する技術解決の妥当性の協議、開発に関する工数と担当者の決定、開発進捗や開発チーム内での議論結果の報告などを担っています。 ## 解決した課題 SEO効果向上により検索順位向上を目的とした本プロジェクトでは中長期的に継続的な開発を行う必要がある一方で、開発チーム側で他プロジェクトとの兼ね合いもあり、十分なリソースを確保しづらい状況にありました。そこで、本プロジェクト内で決まった施策の実装を開発チームの新人に指導する教育の場として活用することにしました。 ### 工夫した点 開発未経験で入社した新人社員なので開発の手順を教えるところからのスタートでしたが、最初のうちは各タスクごとにGitlabでissueを立て、開発の手順をチェック方式で記載したものを渡し、実際の開発では一定時間ごとに様子を見るなどしていました。開発に慣れていくにつれ、段階的に指示もある程度ざっくりしたものにしていき、自分で開発のあたりをつけてもらうようにしました。 この結果、新人はSEOプロジェクトのみならず他の改修でも開発が行えるようになりました。 ## 習得した技術 これらの開発経験を経て、下記の技術を身につけました。 1. 開発者として企画との打ち合わせ、スケジュールの調整 2. タスクの割り振り 3. 新人への教育 ## リリースと成果 2022年10月時点で、SEO評価向上の結果サービス名検索結果が圏外から3位まで浮上しました。また、新人がこのプロジェクトを機に本格的に開発に参画できるようになりました。

本件は2020年秋にリリースしたBtoCサービスアプリでの、一般ユーザがアクセスできる画面、お客様マイページ、業者マイページのデザインリニューアルプロジェクトです。 ## プロジェクト概要 このプロジェクトでは、デザイナーによって提出された各画面に関する新デザインをSCSSでのコーディング、jQueryで画面パーツの動きの調整でした。本件では外注のコーダーがリモートで参画することになったために、初めて1) チームメンバーによる動作確認を含むMRレビュー、2) SCSSファイルのルールの明文化、が導入されました。また、前プロジェクトの評価かから私のGitLab上での権限が変わり、マージ権限が付与されました。本プロジェクトは企画を担当しているメンバーが実際の効果を確認しながら開発を行う、アジャイル開発で進行しました。 ## チーム構成・規模 - プロジェクトマネージャー兼企画：1 - フロントエンド：1 - フロントエンド兼バックエンド：2 私の役割は上記の「フロントエンド兼バックエンド」でした。 ## 解決した課題 本プロジェクトはCSSコーディングがメインでしたが、リリースされた直後でソースコードが整っておらず全体的にメンテナンスしづらい状態にありました。また、共通化されていない部分も多かったため、ビューファイルで一箇所修正しても他が直っていないということが多々ありました。よって、このプロジェクト中にリファクタリングを敢行することにしました。ビューファイルやコントローラの肥大化を解消してメンテナンス性の向上及び、共通化することで改修箇所を削減するために下記を実施しました。 1. 開発の中でできる限り画面を切り分けれる部分、共通化できる部分を切り出し、CakePHPのElementやCellに置換する。 2. コントローラー内に記載されているDB操作関連の記述をモデルに移行した。 この結果、 1. 一つ一つのファイルの長さが短くなり、スクロールすることが減った。 2. 外注に指示が出しやすくなった上に、一箇所の修正で事足りるようになった。 3. ビューファイルをElementやCellで切り出して、共通化するというコーディング文化が定着した。 ## 習得した技術 これらの開発経験を経て、下記の技術を身につけました。 1. SCSSの基本的なコーディング、メデイアクエリを利用したレスポンシブ対応 2. gulpを使用したCSS開発 3. GitLab上でのissue作成、issueに基づいたMR作成、MRレビュー ## リリースと成果 本件は2021年春頃に終了し、CVR向上に貢献しました。また、本件を機にMRレビュー文化やissue単位で開発を管理する文化が根付きました。

本件は友人に頼まれたEthereumネットワーク上の仮想通貨を管理するアプリです。 ## プロジェクト概要 友人が自身の所属する仮想通貨コミュニティで既存のアプリを利用した仮想通貨のやり取りが不便だということで、自分のコミュニティで運用しているネットワークに自動でアクセスし、仮想通貨情報や主催イベントの情報を表示できるアプリが欲しいとのことで実装しました。ネットワークはSolidityによってすでに作製済みだったので私はUIサイドを担当しました。 ## チーム構成・規模 - バックエンド：1 - インフラ兼企画：1 - フロントエンド：1 私の役割は上記の「フロントエンド」です。 ## 解決した課題 今回初めて仮想通貨という領域に足を踏み入れたので、ブロックチェーンの仕組みを学びつつ、非エンジニアである友人に普段使っているツールをヒアリングしつつ、使えるアプローチを見つける必要がありました。 ### 工夫した点 当初はVue.jsに親しみがあったので、Vue.jsをベースに実装することを試みていました。EthereumネットワークにChromeブラウザからアクセスする方法として拡張ツールであるMeta Maskを起動させる必要があります。Meta Maskと連動するJavaScriptライブラリで最も有名なものとしてWeb3.jsと呼ばれるものがありましたが、2021年8月ごろですでに「Meta MaskはWeb3.jsのサポートを停止する」という発表が出ていました。その影響かどうかはわかりませんが、色々エラーが出てうまくいかなったので、モックデータで作製していた画面を諦め、別のアプローチを模索することにしました。 友人とそれらしい記事を漁りたどり着いたのが、React.js + TypeScriptをベースにした実装例で、そこではuseDAppというMeta Maskへの接続できるライブラリを使用していました。私自身React.jsとTypeScriptは触ったことがなかったのですが、結果としてこの実装はうまく行きました。React.jsをベースにしたことで、とても豊潤な技術記事の恩恵を受けることができたと思います。 ## 習得した技術 これらの開発経験を経て、下記の技術を身につけました。 1. React.jsを用いた開発。Componentによる切り分け、customer hook作製など。 2. TypeScriptを用いた開発 3. EthereumネットワークとやりとりをするUIアプリ開発 ## リリースと成果 1. 2022年現在も稼働中 2. PWAを追加実装リリース済み 3. デザイン変更リリース済み

本件は、業者と顧客をマッチングさせるBtoCサービスで業者が掲載した広告を検索できるwebアプリのリニューアルプロジェクトです。 ## プロジェクト概要 他部署からの依頼で発生したプロジェクトであり、当開発チームと依頼元部署内の開発人員との合同チームでウォータフォール開発で展開されました。私の担当は当社の担当者が操作する管理者画面で、技術選定の際にVue.jsにチャレンジがしたい旨を主張したところ、Vue.jsをベースにしたVue-element-adminとCodeIgniterを組み合わせたAPI仕様で、フロント側（Vue.js）を単独で担当することになりました。 ## チーム構成・規模 - プロジェクトマネージャー：1 - フロントエンド：2 - バックエンド兼インフラ：1 - バックエンド兼設計：1 私の役割は上記の「フロントエンド」で管理者画面全ての実装でした。 ## 実装した機能 本件で初めてVue.jsを触りましたが、Vue.jsをベースにしたVue-element-adminはVue.jsの他に、Vue-routerやmock.jsなどの様々な機能が搭載されていて学習することが多かったですが、同チームのメンバーと色々協議しつつ開発したことで期日通りに開発を終えることができました。 また、単体テストとしてjestの導入やAPIとの通信でjwt-tokenの導入などを行いました。 ## 習得した技術 これらの開発経験を経て、下記の技術を身につけました。 1. Vue.js、Vue-element-admin 2. jestによる単体テスト 3. jwt-tokenを用いたAPIとのリクエスト、レスポンス ## リリースと成果 本件は2021年夏頃リリースされ、現時点まで正常に稼働しています。

本件はフランチャイズ展開企業が掲載した広告を顧客が検索して、案件に応募できるプロダクトの改修及び新規開発です。 ## プロジェクト概要 当該プロダクトは数年前に外注で作成されたものでLaravelのバージョンも4.2と古く、資料やプログラム上のコメントもほぼ残っておらず、社内で改修できる人員が一人もいない状態でした。また、別プロジェクトが並行で始動したので、他メンバーが十分な工数を割けないため、プロダクトのGit管理化やDocker導入、インフラの調整など以外は、私がほぼ単独で調査、打ち合わせ、改修、リリースを行いました。 ## 開発体制 本プロジェクトはGitLabを用いたチーム開発で、アジャイルで進行しました。 ## チーム構成・規模 - 企画：2 - インフラ：1 - フロントエンド兼バックエンド：1 私の役割は上記の「フロントエンド兼バックエンド」で、調査、開発、リリースを全部担いました。 ## 実装した機能 Laravelのバージョンが古いことに加えて、プロダクト内の随所に明らかな間違った記述が散見され、artisanコマンドが使えない状況での開発でしたが、自身でエラーメッセージが出力されるように改修し、見つけた不具合を改修しながら、新機能の追加も行いました。また、Git導入の調整や、開発環境、ステージング環境、本番環境での設定の調整も行いました。本件のインフラは他メンバーに用意、整備してもらいましたが、自分でサーバにSSH接続して、shellコマンドやGitコマンドを打ちながらリリースを行いました。 ## 習得した技術 これらの開発経験を経て、下記の技術を身につけました。 1. Laravel旧バージョンでの開発・改修 2. terratermでSSH接続してshellコマンドによるインフラ操作 3. 会議にチームからは単独で参画し、開発工数や仕様などの調整 4. Git管理下でのリリースなど各種資料作成 ## リリースと成果 本件は2021年冬頃リリースされ、現時点まで正常に稼働しています。