Summary

web開発インターン＠いえらぶGroup
インターンを通して、実際のプロダクトの環境での開発から学びの記録です:)
フロントエンドとバックエンド合計12個のプロジェクトに取り組みました。

開発ページ：https://cloud.ielove.jp/
期間：2021.02-2021.09(7か月)
開発環境：JavaScript, PHP, Zend Framework, MySQL, HTML, CSS, Gitlab, phpstorm

大規模なシステムでの開発

情報科学科でも授業で扱うものは基本的な理論であったり、演習問題も数個のファイルで完結するものが多いです。そこで規模というものが、実際のプロダクトとの違いの一つであり、着目してみました。

該当部分探しの旅

開発要件が決まり、開発に取り掛かる際に最初に行うことは、改修箇所を数千(数万？)個のファイルと数百から数千行のコードから探し出すことでした。ファイルを探す際は、web開発のMVCモデルの理解度によって、発見するまでの時間や、新しいファイルの作成場所を決定するまでの時間の違いを痛感しました。ファイルが見つかった後、扱いたいコードの箇所を見つける必要があり、オブジェクト指向の理解度の重要性を感じました。

影響範囲

特に、複数の箇所に影響するCSSのファイルやcommonファイルの内容を変更するときに注意が必要です。

MVCモデル

Model：データベース
Controller：データベースにリクエストしてviewに返す
view：見た目に関わる部分
の3つの役割に分けて実装する方式を用いていました。

Git

tipsをこちらにまとめました！

開発例

モバイル版のデータ表示

要件定義を詰めるところから参加しました。現状表示されているデータが足りなく、改良が必要だったのですが、表示するだけでなくせっかくならUIもモバイルで見やすいように改善しました。

データを持ってくる
viewの記述

パンくずの改修

パンくずが違うページに遷移していたので直しました。改修しながらこんがらがりましたが、技術的には、埋め込まれているurlを修正してUI少し直すくらいなので難しくないです。ユーザー体験が上がったはず！

ページ構造の把握
遷移先の一致
UI ：アイコンの改修

文字化けの改修

＆が文字コードのまま表示されていたのを直しました。一見関係なさそうなところのコードが影響するのを目の当たりにしたプロジェクトでした。

文字コードを指定している部分を探し修正

検索を複数選択化

住所1つずつしか検索できなかったものを複数選択して検索できるようにしました。大量の住所データがどう格納されているのか明確にすることから、リクエストするControllerの作成と新しいUIまで一気に学べた(難しかった)プロジェクトでした。かなり便利になるアップデートに関われて良い経験になりました！

SQLによるデータ取得
データ保持：中身を都度確認することが大事
viewの記述

エラーメッセージの改修

ページ上部に一気にエラーメッセージが表示されていたものを、該当箇所に表示するようにしました。

JSの発火タイミングを把握
パターンに合わせてエラーメッセージを該当箇所に表示するように修正

まとめ

要件定義
- そのまま開発するのではなく、目的とユーザー目線で考える(わかりやすいか使っていて迷わないか、など)
- 先に開発の概要を書く(基本的なことですが、コードを書きながら実験するのも面白いですが、その前に全体像を把握するの大事でした)
開発
- Docを見つける、読む力(わからなくなったら公式ドキュメントに戻る＋わかりやすい記事はたくさんあるので活用)
- デバッグの効率
- 同じサービス内で似たページがすでにある場合は参考にできる
その他
- 情報科学を勉強し始めて10か月ほどの時期での初！！！実務経験でした。初めて学ぶことだらけで、技術関連の勉強し続けたいというモチベーションと、開発して終わりではなく、ユーザーにとってのプロダクトの価値やプロダクト自体の成長の重視したいという思いが強まった経験でもありました！いえらぶでお世話になったみなさんありがとうございました！

Thank you for reading:)

社員の方が書いてくださった記事も見てみてください～：https://note.com/kuroneko22/n/nccbb30ee724f