文系＆未経験から『フロントエンジニア』へ ～入社5カ月で得た学びと気づき～

はじめまして！
バリュークリエイション本部 コーポレートクリエイティブ部 システム開発課の島田と申します。
未経験でこの世界に飛び込んで、気づけば入社から5カ月が経ちました。

今回は、エンジニアとして歩み始めてからの5カ月間を振り返りつつ、
入社前の学習状況、直面したギャップ、少しずつ感じられるようになった成長、
そして、今後挑戦したいことについてお話ししたいと思います。

この記事が「未経験からエンジニアになるのは実際どうなのか？」と興味を持っている方や、
不安を抱えながら前進している方の参考になれば幸いです。

担当している業務内容

現在は、戦略的コンテンツマーケティング（以下、戦コン）に関わるサイトの修正を主に担当しています。

業務の大半は、修正リストに基づいて対応しており、
例えば「スライダーのガタつきの解消」「リストをアコーディオンに変更する」「共通パーツをページごとに出し分ける」などの要件に対して、HTML・CSS・JavaScript・PHPのコードを確認・修正しています。

1サイトあたりの修正期間は2〜5日ほどで、
事前に調整したスケジュールに沿って締切に間に合うよう進めています。

その他、コーポレートサイトや採用サイト等の自社メディア、クライアントサイトの更新業務を担当。実際にサイトを運用する中で、導線や画像、情報の出し分けの変更が発生した際に依頼をいただき、都度対応しています。

入社前に準備したこと

前職では、学校法人で教務事務を担当していました。
プログラミングとはまったく無縁の仕事でしたが、公式サイトのCMS更新や制作会社の方とのやり取りを通じてWebの世界に興味を持つようになりました。
ちなみに当時はHTMLやCSSなどのコードを編集する業務はありませんでした。

退職後に職業訓練校で約4か月半、Webの基礎を徹底的に学習。
HTML、CSS、SCSS、jQueryをはじめ、Photoshop、Illustrator、XD、Figma、GitHub、WordPressなどのツールまで幅広く学びました。

訓練中には自主制作サイト3つとポートフォリオサイト、バナー、ロゴを制作。
特にHTML、CSS、SCSS、jQueryは、入社後も活用する機会が多く、
基礎をしっかり学べて良かったと感じています。

フロントエンジニア志望だったこともあり、「デザインツールまで、勉強が必要かな？」と思っていた時期もありましたが、実際の業務ではXDやPhotoshopでデザインカンプを受け取ることもあるため、操作を理解していて助かったと感じています。
（私はまだ実務で使ったことがありませんが、案件によってはFigmaも使用しています）

GitHubやWordPressについては、訓練中に触れる時間がごくわずかで、「とりあえずログインしてみる」程度の理解にとどまっていました。しかし入社後に理解の浅さを痛感し、自分のポートフォリオサイトをWordPress化してGitで管理するところから学び直しました。また、PHPも入社後に学び始めました。

現場で感じた未経験ならではのギャップと学び

実際に働き始めてみると、学習中との違いに戸惑う場面もありました。
未経験からのスタートだからこそ感じたギャップと、そこから得られた気づきを4つご紹介します。

① ローカル環境の構築

入社後初めての業務として、採用サイトなどの更新に向けたローカル環境の構築を行いました。

今まではブラウザ上で反映を確認するだけで、XAMPPやDockerを用いてローカル環境を構築した経験がありませんでした。そのため、マニュアルに出てくる専門用語や作業の目的がわからず、エラーが続いてなかなか前に進めませんでした。

周囲に助けてもらいながら、自分でも原因を調べて試行錯誤する中で、「エラーログを読む」「公式ドキュメントを確認する」「根拠を持って操作する」といった基本的な進め方を学びました。

島田

約1か月後、構築作業を一からやり直すことになった際は、
以前は丸1日かかっていた作業を、
マニュアルと自分のメモを頼りに約1時間で完了できました！

②想像以上に複雑な構成

学習時は、HTML・CSS・JavaScriptが数ファイルにまとまったシンプルな構成のサイトを作成していました。しかし実務では、ファイルがページやパーツごとに細かく分かれており、SCSSファイルだけで40以上に分かれているサイトもあります。

最初は全体の構造を把握するのに時間がかかり、簡単なテキスト修正にも何時間もかかってしまうことがありました。また、PHPの条件分岐が複雑で、どの記述がどこに影響しているのかを読み解くのにも苦戦しました。

島田

類似の事例を参考にする、わからない部分は早めに相談するなどを
意識したことで、少しずつ理解が深まってきました。

③他人のコードを読み解く難しさ

学習中はすべて自分で書いたコードを扱っていたため、構成や意図を把握していたのですが、
実務では他の方が書いたコードを限られた時間で理解し、修正することが求められます。

初めて見る記述方法やプラグインも多く、
なかなか不具合の原因を特定できないこともありました。

そこで、PCや複数の実機で実際の動作を確認しながら、一つひとつ検証していくことを意識しました。そうすることで、「何が原因で、どこを直せばいいのか」が少しずつ見えるようになってきました。

島田

難しさを感じる分、
今まで使ったことのなかったプラグインや記述方法に出会えることで
日々、新しい知識を身に付けることが出来ています。

④コミュニケーションの重要性

修正内容は丁寧に共有していただけるのですが、細かな動きや要件の解釈で認識のズレが生まれ、作業のやり直しが必要になることもあります。入社前は、エンジニアは「黙々とPCに向かう仕事」という印象を持っていましたが、実際には相手と認識を合わせるためのコミュニケーションが非常に重要だと気づきました。

今では、「疑問はすぐ確認する」「作業前に完成イメージを共有する」ことを意識し、必要に応じて画面共有を用いたミーティングをするようにしています。

予想以上に良かった点としては、相談しやすい環境があることです。
親身に相談に乗り、解決まで導いてくださるメンターや上長をはじめ、
話しかけやすいチームの雰囲気に支えられ、不安なく業務に取り組めています。

これから伸ばしたいスキル・挑戦したいこと

入社してから、WordPressの高い拡張性に驚きました。

現在は既存サイトの修正作業が中心ですが、将来的にはWordPressで、要件定義から設計・実装まで、ゼロからサイトを構築できるスキルを身につけたいと考えています。
そして実際の案件で要件定義から関わり、すべての制作工程に携わることに挑戦したいです。

サーバーやSQLの仕組みにも関心があるので、インフラ面の知識も徐々に深めていきたいと思っています。

最後に

最後までお読みいただき、ありがとうございました。

エンジニアの世界に飛び込んでみて、改めて感じるのは「学びに終わりがない」ということです。
だからこそ、新しいことを知るのが好きな人には、きっと楽しい世界だと思います。
私自身、まだまだ道の途中ですが、同じようにエンジニアを目指す方と一緒に頑張っていけたら嬉しいです。

以上、システム開発課の島田でした。