25歳・未経験からWebエンジニアになってみた【中途採用ブログ 2020年7月～9月】

こんにちは！2019年の10月にBRISKへ入社しました、Kです。
まずは軽く自己紹介しておきます。

ざっくりですが、プロフィールは以上です。
前職が技術系派遣会社でしたので、Web業界は全くの未経験です。

しかし、Web業界で働くことに強い憧れがあり、2019年の8月に前職を辞め、
2か月間プログラミングを独学してBRISKへ入社しました。

いよいよ、今回のブログが最終回となりました。
前回の中途採用ブログはこちら
入社してから１年も経ったとは早すぎますね。。。

１年経験して色々と学んだことがありますが、それはこのブログの後半に書きたいと思います。

さて、このブログでは今まで同様自分が学んだことやタメになったことをまとめていきますので、未経験からWebエンジニアになろうと頑張っている方の参考になれば幸いです。

それでは、まずは2020年7月～2020年9月までの3ヶ月間で自分がどんなことをしてきたのかリアルに書いていきます。

10ヶ月目

久しぶりすぎたコーディング

1,2ヶ月ぶりというくらい久しぶりのコーディングをしました。（しかもTOPページ）

すごくシンプルなデザインのサイトなのですぐ終わると思っていたのですが想定よりも多くの工数をかけてしまいました。。。

原因としては、以下が挙げられました。

これらの教訓を生かし、今後TOPページをコーディングするときは（下層ページもそうですが）、難しいところは後回しにして自分ができそうなところからコーディングしていこうと思いました。

また、ヘッダーは弊社のデザインだとある程度似たデザインが多いので共通パーツとして作成しておくのもアリだなと思いました。

初めてのディレクションオンリー案件

今までいくつかディレクションをやらせていただきましたが、どれもディレクション兼、作業というものでした。

しかし今回の案件に関しては、作業はチームのエンジニアに任せ自分はディレクションだけ担当しました。

すごくタイトなスケジュールでしたが、先輩のすさまじく正確でスピーディなコーディングのおかげで対応することができました。

先方の要望で、実装するには難しそうなアニメーションの動きがありましたが、プラグインなどを使わずJSをいちから書いて実装されていた先輩のすごさを改めて感じました。

大規模案件の見積作成

今までも見積を作成することはあったのですが、３桁におよぶ見積を任されることはなかったので正直ビビりました。

大変だったポイントはいくつかあるのですが、その案件の場合、複数パターンの見積を作成する必要があったことでした。

先輩に聞きながら丁寧に作成することを心がけ、最終的に受注に結び付いたのでよかったです。

また、実装内容が複雑な案件だったのですが、以前よりもエンジニアとしての知識がついたこともあり、
見積の規模感が前よりもわかるようになったのは個人的に成長出来たポイントかなと思います。

実装する際の詳細（難易度・懸念点など）が自分の中でより正確にイメージできればできるほど、正確な見積が出せると改めて感じました。

独学でEC-DEMOアプリを作成

独学でReactを勉強していたのですが、FirebaseとReactを用いてECデモアプリを作成しました。

教材を見ながらやったのである程度見よう見まねですが、FirebaseのAuthenticationという機能を利用してログイン機能を実装したり、ECサイト管理者として商品画像やサイズ、値段などを登録できる画面を作成したりしました。
課題として、お気に入りボタンの実装や、商品検索機能の実装があったのですが、自力で実装することができて楽しかったです。

Stripeというサービスをつかって決済機能を実装する予定だったのですがまだ完成しておらず、いつか近いうちに必ずやりたいなと思っています（笑）
（その前にReact自体を忘れかけているので復習からやらないといけませんが…）

11ヶ月目

モジュール化してコーディング効率化

PDFを１枚のLPにするコーディング案件を担当しました。

PDFの情報量が多いので、ボリュームが多く少し大変でした。
ただ、同じようなパーツがたくさんあったので、Sassを使ってモジュール化する方式を採用しました。
そのおかげか、修正や展開にも迅速に柔軟に対応できました。

Sassを使うメリットは、ただ単にCSSをネスト形式で書くことができたり、mixinを作成できるだけではありません。

共通パーツを１つのファイルとしてmoduleフォルダなどに管理したり、HTMLのフォルダ構造と合わせてページごとにSassファイルを作成して管理することが可能なので１つのSassファイルに書くよりもコードの肥大化が抑えられます。

弊社では基本、１つのCSSファイルに全ページのCSSを書くのですが、いつも修正するときに迷子になったり、複数人で同時にCSSをいじるときは衝突する可能性もでてきます。

しかし、SassをHTMLと同じようにフォルダ分けして管理しておけば衝突の心配もないですし、修正する場合も簡単です。

例えば、/news/index.html の下層ページのCSSを修正する必要があった際には、/news/_index.scssを修正すれば済むわけです。

これにより、コードの可読性や、保守性、拡張性が得られるので大変メリットがあります。
僕はこれを今後社内の標準としていきたいと思っていますがそのハードルは高そうですね（汗）

ディレクション案件のオンパレード

とにかくディレクションが多かったです。
多い時でディレクション案件が５つもありました（汗）

「作業は別の人でディレクションをするだけ」であればそこまで忙しくはないのですが、「ディレクション兼、作業から納品まで」という案件をこのとき同時に２つ担当していたのでとても忙しかったです。
しかもそれらの締め切りがどちらも同時期だったのでさらに大変でしたね。。。

納品時期には個人的に有休を取得していたので、納品は別の人に任せることになりました。

このとき、社内の関係者全てに情報を共有すべきでしたが、その部分が不足していて納品日当日少しばたつかせてしまい反省しました。

今後は、その案件に関わりのある社内の関係者にしっかりと情報を連携し、自分が休みの時にひやひやしないように心がけたいです。

12ヶ月目

モジュール管理の大切さを感じた

大規模なWordPress構築案件の静的コーディングに途中から参加しました。

スケジュールがタイトであったこと、コーディングのボリュームが多いこと、デザイン変更や修正要望が多いことが重なってとても大変でした。。。

似たようなコンポーネントがあったので流用できるのかなと思ったら微妙にできなかったりしてなかなか工数がかかってしまいました。

WEBアプリのようなサイトでしたが、こういったサイトはコンポーネントをそろえておいてそれらをレゴのように組み立てていくと楽だと思ったのですが途中から入ったときにはそのように設計されておらず展開する際のCSS修正が大変でした（汗）

やはり、Sassをつかったモジュール管理を標準にしたいですね…（笑）

半年ぶりのWordPress構築

とてもとても久しぶりにWordPress構築案件を担当しました。

カスタマイズすることも少なく比較的難易度は高くなかったですがheadタグ内の検証に時間がかかりました。

例えば、WordPressでよく使用する「All in One SEO Pack」というプラグインですが、これはアーカイブページでogpタグを出力しません。

なので、自分で独自に、「アーカイブページのときはogpを出す」のようなコードを書く必要があります。

また、固定ページのogpタグのdescriptionが、デフォルトだと固定ページの中身の160文字抜粋されたものが表示されてしまい不格好です。

なので、フィルターフックを用いて書き換える必要があったりします。

このように細かいところの検証の知識が足りておらず、時間がかかりました。
今回学んだことを別の記事で紹介出来たらなと思っていますので是非チェックしてみてください。

週末課題がスタート！

弊社には週末課題とういものがあります。

少し前まで、新人さんたちやデザイナーさんだけの週末課題があってレビュー会にも参加したことがあったのですが今回始めてエンジニアの週末課題に参加しました。

内容としては、過去に弊社で行ったEC-CUBEで構築したサイトを題材にして、実際にEC-CUBEのインストールから始め、ECサイトとして機能することを目指すものでした。

ただ単に構築するだけでなく、EC-CUBEの動作やMVCについて説明する資料を作成する必要もあり、週末は毎週１０時間くらい費やしています。

全部で５回あり、執筆現在では３回目なのですがすでにクレジットカード決済機能を実装するところまでいきました。

実は、もともとこの週末課題について存在は知らず、たまたま会社に残っていた僕に社長が「今週末から新人さんだけでエンジニアの週末課題を出そうと思うんだけどやる？」と声をかけてくださいました。

そのときどんな内容をやるのかわからなかったのですが思い切って参加してみてよかったです。

あと２回、どんな課題の内容かまだわかりませんが難しくなっていくことは間違いないのでなんとかくらいついていきたいです。

WEB制作Tips

ここ最近で筆者が気になったコンテンツについて紹介します。

Zenn

Zennは、プログラマーのための新しい情報共有コミュニティサービスです。

Zennの特徴は以下が挙げられます。

情報を発信するプログラマーが対価を得られる

似たようなサービスとしてQiitaやnoteがありますが、Zennは「Qiitaの対価が得られるバージョン」みたいな感じです。
noteも有料記事を書いて販売することができますが、エンジニア特化のプラットフォームではないのでお金を払ってまでめちゃくちゃ有益な情報があるかというと微妙かもしれません。

その点、Zennはまさにエンジニアのためのプラットフォームであり、記事を有料で販売することが可能ですから、今後有益な記事がたくさん出てくることは間違いないでしょう。（自分もなにか書いて販売したい。）

自分で書いた記事はGitで管理できる

まだ筆者は記事を書いていないのですが、簡単に自分の記事をGitで管理できるようです。
もしもこのサービスが消えてしまったとしても自分の記録として保存できるのは安心ですね。

サイトスピードが爆速

Next.jsとReactで作成されていて、SPAなのでとにかく動作が速いです。

Qiitaで調べものをする際に若干読み込み速度が遅くてイライラすることありますが、Zennはまったくそのような心配がありません。
やはりサイトがサクサク動くと楽しいですし、記事もサクサク読めるので文句なしですね。

Zennの機能的な特徴としては上記の通りです。

ちなみに、このサービスの作成者はなんと、あの有名なサルワカの管理人さんです。
しかも個人で開発されたそうで本当にすごいですね。

筆者はZennの公式アカウントをフォローしています。
公式アカウントではピックアップ記事などを随時ツイートしているので、そこで流れてきた自分の興味のある記事をチェックしています。
皆さんも是非フォローして記事をチェックしてみてはいかがでしょうか。

１年を振り返って

僕が入社したのは2019年10月ですが、もうあれから１年も経つと思うと本当にあっという間でした。

この１年で学んだこととして、次に入社してくる方やこれから未経験でWEB業界を目指している方に伝えたいことを３つ記載したいと思います。

自己学習は大事

自己学習ってなにをやったらいいのか分からないという方もいるかもしれませんが、単純にまずは自分の苦手なところを重点的に学習したらよいと思います。

僕が今も昔もやっていることとして、業務でわからなかったことを自宅で復習していました。

実案件では納期があるので、どうしてもわからないところは先輩に聞いて実装するケースがあると思います。

それで案件としては完成ですが、実装したのは先輩であって自分ではないし、初心者のうちはそのコードを100%理解できていないでしょう。

その場で復習することは時間があればできますがおそらく業務時間中は忙しくてほぼ無理です。

なので、僕の場合は週末などにそのコードを家で眺めて理解するようにしていました。

また、その内容をQiitaやnoteに自分の言葉で他人に説明するつもりでアウトプットすることでより理解が深まるのでおすすめです。

一番良くないのが、理解できていないまま放置することです。
これは確実にエンジニアとして成長できません。

未経験でエンジニアを目指す場合、これらのことが苦と感じるならきっと辛いと思います。

WEBの基本はめちゃくちゃ重要

WEB制作会社で働きたい！と思い立ってからまずHTMLやCSS,jQueryなどを勉強するかと思いますが
それよりもめちゃくちゃ重要なことはWEBの基礎知識です。

僕は今までHTTPの知識がない状態で仕事をしていましたが、それが原因でちょっと何かうまくいかないことがあった際に先輩に聞かなれば前に進めませんでした。

しかし、WEBの基礎知識がついたことで各段にデバッグ力がUPしました。

例えば、「CSSファイルを修正して反映したはずなのに効かない」という場合のデバッグは以下のようになります。

簡単ですが、以上のような原因が考えられますよね。

特に１番目が重要で、これはHTTP通信のレスポンスの概念がないと、初心者では原因として頭に浮かびずらい内容です。

また、よくクライアントから「このサイトと同じような機能を実装したい」と言われることがあります。

その際に、どんな技術が使われていて、どのような仕様でできているのかを調査しなければいけません。

ここでもWEBの基礎的な知識があればある程度その実装方法について調べることが可能ですし、見積の規模感もわかります。

要するに言いたいことは、WEBの基礎的な知識があればあるほど見える範囲が広がり、柔軟に対応できるようになります。

デバッグ力が高い＝エンジニアとしてのスキルが高いといってもいいほどデバッグ力は重要なスキルです。

その力を高めるにはまず大前提としてWEBの基礎的な知識が必要不可欠だということを１年間通して非常に強く感じました。

視野が狭くなってしまわないように注意！

入社してみて気づいたことですがWEB業界はあなたが思っているよりシビアです。

未経験なので当然、毎日分からないことだらけだし、覚えることはめちゃくちゃあるし、それによってとても疲れますし、できないことだらけだし、やっと自分の中で完成だ！と思っても実はめちゃくちゃ修正があったりして、そういったことの積み重ねで自信を無くしどんどん暗くなっていきがちです。
（実際、ちょっと前までの自分はまさにこの状態でした。。）

なので、はじめのうちはある程度覚悟しておいたほうが良いと思います。

はじめはとても辛いかもしれませんが、業務で教わったことを復習したり、先ほど挙げた自己学習をしたり、WEBの基礎知識を学習したりしていくとだんだんできることが増えてきて自信もついていきますよ。
（※ただ単に会社で言われたことをやっていても成長はできません。自己学習と復習が大切です。）

なので、そうなるまでの間、耐えることができるだけの忍耐力は必ず必要かなと思います（笑）

まとめ

全４回に渡りこの中途採用ブログを書いて参りましたがいかがだったでしょうか。

個人的にこの３か月は今まで以上に成長できた気がします。

しかし、まだまだ分からないことだらけですし、学びたいこと、やりたいことも山ほどあります。

WEB業界はシビアで、リタイアする人も多い業界ですが、スキルを磨いていけば自分でできることが増え、それによって人生の可能性が広がりやすい業界だと思います。
また、年功序列がなくスキルが高い人ほど評価される業界でもあります。
（このことが、僕が未経験でWEB業界に入りたいと思った要因の１つでもあります）

次の１年は自分にとってどのような年になるかわかりませんが、今以上にエンジニアとして成長していきたいと思っています。

なので、これからも業務や自己学習を頑張ってスキルを磨いていけるよう努めていきます！

長い連載でしたがこのブログがこれから未経験でWEB業界を目指している方にとって参考になれば幸いです。

ここまで読んでいただきありがとうございました。