Web開発のフロントエンドエンジニアになりました

最初に

今年の春に24新卒として株式会社Relicに就職し、エンジニアになりました。

目次

1. 自己紹介
2. エンジニアになるまで
3. Web制作について
4. Web制作のフロントエンドで経験したこと
5. 本当にあった怖い話
6. 最後に

自己紹介

職種：フロントエンドエンジニア
趣味：ライプに行く、バスケ、水泳、スキー、スノボ、ホエールスイム🐳
得意なこと：HTML、CSS、WordPress

エンジニアになるまで

高校時代

情報の授業でHTMLを触ったのをきっかけに、プログラミングに興味を持ちました。
高校の時からエンジニアになりたいと思っていましたが、文系を理由に難しいと思い、諦めていました。

浪人時代

地元の駅前にあったヴィドフランスというパン屋さんでバイトしながら勉強していました。車の免許とバイクの免許を取得しました。
受験の末、私立大学のイブニングコースに入学しました。

大学時代

大学入学前に、MacBook Pro（2017年製 core i5、メモリ8GB、ストレージ128GB）を買ってもらいました。
HTML、CSSの書籍を購入し、自主学習を開始しました。
イブニングコースだったので、昼間の時間に働くことを売りに、面接で高評価を得て、建築系に特化したWeb制作会社にインターンとして入社しました。
マークアップ（HTML、CSS）からエンジニアの世界に入りました。
2年間のインターンを経て、大学3年生の時にフリーランスとして独立しました。
様々なご縁があり、現在4期目です。
Web制作歴は、5年になります。

新卒就活

Web制作のエンジニアをやりながら、Web開発のエンジニアに憧れを抱いていました。
新卒就活の時に、新規事業を特化した会社のエンジニアになりたいと思い、Relicに入社を決意。

Web制作について

自分が経験した会社、案件での体験談になりますので、大いに主観が入ります。
Web制作では、主にホームページの作成をメインで行います。
WordPressでサイトを制作することがよくあります。
開発方式は、ウォーターフォール型開発、メテオフォール型開発がメインです。
鶴の一声で、全てひっくり返ることがよくあります。
自分がインターンしていた会社は、ウォーターフォール型開発を採用していました。
ディレクターの手腕によって、エンジニアの工数が大きく変動します。

エンジニアに仕事が渡るまで（良い例）

エンジニアに仕事が渡るまで（悪い例）

Web制作のフロントエンドで経験したこと

Web制作のフロントエンドは、主にHTML、CSSを使ってマークアップをメインに担当します。
使うプログラミング言語は主にPHP、JavaScriptです。(WordPressがメインのため)

Web制作で求められたこと

• コーディング力
  • UIはUXを意識しながらデザインに忠実にコーディング
  • HTMLとCSS、少しのJavaScriptとPHP
• CSS設計
  • CSSの上書き戦争はよく起こる
  • 影響範囲を考えてCSSを書くことが大事
• WordPressの理解
  • WordPressは必須のスキル
• SEOの知識
  • metaタグの分岐
  • 正しいHTMLタグの使い方を知っている
• アクセシビリティの知識
• デザインツールの操作
  • adobeソフトの基本的な操作は重要
  • figmaもよく使う
• 納期を守ること
  • デザインが遅れても納期は変わらない！
• テキストコミュニケーション力

Web制作であまり求められなかったこと

• Git
  • Web制作の案件でgitを使うことは多くない
    Gitを導入するコストが大きいと判断して、導入しないケースが多い
  • そのため、FTPに直接アップロードすることがしばしば
  • 毎回コードを貼り付けて更新する
  • コードは都度上書きするので、他の人の編集したコードを消してしまうこともよくある
• コードの理解
  • 動かすことが正義です
    コピペで動けばOKなことが多い…
    • 今の自分はそんなこと思ってない！
• 新しい技術
  • Next.js、react、TypeScriptなどはあまり使わない
  • やっぱりWordPress
• セキュリティの知識
  • 認証や、CRUDを実装することは基本的にないので、あまり求められない

本当にあった怖い話

• ECサイト5万で作って
  • 依頼側が予算感を間違っている
• WordPressの案件なのにディレクターがWorcPressの管理画面の存在を知らない
• 明日の朝までに修正しておいて！
  • よくあることです
  • Word感覚で修正できると思われているのかも…
• デザインの修正が無限に送られてくる、納期はそのまま
  • 納期が変わることはありません
• 一つのレンタルサーバーにたくさんのサイトが置いてある
  • 一つサイトに悪意のあるファイルが設置された結果、すべてのサイトが壊れる自体になりました
• IE対応
  • IEだけレイアウトが崩れることもある
  • display: flex禁止縛りも経験した

最後に

現在、Web開発のフロントエンドとしてアサインされて、日々学んでいます。
メンバーとのコミュニケーションや実装力が力不足と感じることがよくあります。
Web開発は求められる知識が多く、一人前になるまで大きな努力が必要だと感じています。
コードレビューを受けるために、未熟だと痛感することが多々あります。
いつか自分が大きな貢献をできるように、日々勉強を続けていこうと思います。