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

K

年齢：25才
大学専攻：工学部・機械システム工学科
前職：技術系派遣会社（1年勤務）
自慢できること：TOEIC860点（留学経験なし）

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

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

さて、今回は前回の中途採用ブログの第３回目になります。

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

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

7ヶ月目

コロナ襲来と新人教育

コロナの感染拡大にともなって３月末から一部社員がリモートワークになり、新人と、新人教育係は出社という形になりました。
当時の僕は、まだ入社して半年目で、全然教えられる立場じゃないと思っていました。

しかし、質問されたときに「あ～、それ俺も前わかんなかったやつ～」という内容が多かったので、
過去に自分が同じ壁にぶちあったときに解決した方法をBoostnote(※)にメモしてあったので、それを探すことでスムーズに解決できて内心ほっとしました笑。(メモしておいて良かった・・・)

結局、僕自身入社した頃も今も同じですが、できないことの大半は「知らないだけ」なので、どんどん質問して「知ってる」を増やしていけばいいのかなと思います。
「質問はするな」という社風の会社もあるようですが、弊社は全然そんなことないので質問はどんどんするべきです。

8ヶ月目

コーディングできるところはなるべくコーディングせよ

LP案件のディレクションから納品までを担当しました。

案件内容としては、ボリュームが多く、デザインも一部FIXしておらず、スケジュールがタイトという非常にやりずらいものでした。
なので、スピードを重視して、普段ならコーディングしているところも画像で書き出すことでスケジュールに間に合わせようと試みました。

が、しかし、いざ先輩に検証してもらった際に、コーディングでやるように指摘され心が折れました笑

たしかに、自分がクライアントに「ここは画像で書き出してOKですか？」と確認していたわけでもなかったので
めちゃくちゃ反省しました。

基本的に、グラフなど複雑なデザイン以外はなるべくコーディングしたほうがいいです。
たとえば、文言修正依頼をされた場合、その部分を画像でやっていたらもう一度書き出したり、alt属性も変える必要があったりして作業量が増え、ミスも多くなるからです。
なので、基本的にコーディングでできるならコーディングしたほうがベストです。

結果、その後何度もデザイン修正や文言修正が入り、画像じゃなくてコーディングしておいてよかった～となったので良かったです笑

スケジュールタイト案件再び襲来

スケジュールがタイトな案件って多いですね。なぜでしょう。

次に担当した案件もスケジュールがタイトで、コーディングしなければならないページ数が多く、コーディングスピード力が試される案件でした。
効率よく作業を進めるために、進捗管理表をスプレッドシートで作成することで、スムーズにコーディングを進めることができよかったです。

進捗管理表はディレクターが忙しいということもあり、作ってくれないことがほとんどなので、積極的に作るようにしました。
情報の整理にもなるし（今何ができていて、何ができていないのかがわかる）、ディレクターに喜ばれるので作ってよかったです。

↑作成した進捗管理表の例

9ヶ月目

流し込み作業のオンパレード

前の月にコーディングした案件は、最終的にMakeshopで構築するEC案件でした。
コーディングがひと通り終わり、先輩エンジニアがもくもくとEC構築して、それがある程度構築が終わった後、
商品ページの流し込みをしなければいけませんでした。
商品数は100以上あり、めちゃくちゃ大変でしたが、この際も、進捗管理表を作成して先輩と分担することでスムーズに作業を行うことができました。

3か月ぶりのVue案件

３か月ぶりくらいにVue案件をやりました。
やることとしては、API改修にともなうフロント部分の改修が主でした。
そもそもAPIってなんぞ？といった感じだったので、APIのことなどについてネットで調べたり、Webの基礎知識について本を買って予習していたおかげで、
スムーズに案件に取り組むことができたのでよかったです。

また、すこしVueを復習していたのもあり、以前はめちゃくちゃ時間がかかっていた部分をすんなりこなすことができ少しだけ自信がつきました。
その際に勉強になった情報を共有しておきます。

▼こわくないAjax
こわくないAjax

CodeGridというオンランメディアの記事です。
CodeGridには数多くのフロントエンドに関わる技術情報が載っています。
一部課金しないとみれない記事がありますが、1か月間は無料なので気になったら読んでみてはどうでしょうか。

▼イラスト図解式 この一冊で全部わかるWeb技術の基本

図解式なので頭に入ってきやすいです。
まだ全部読めてはいないですが、非常に勉強になるのでお勧めです。

全体の気づき

Webの基礎的な知識ってすごく大事！

Webの基礎知識というのは、HTTP通信は何？とかそういう本当に基礎的な部分のことです。

正直そのような知識が無くてもWeb制作はできます。（案件による）
ファイルアップロードツール(WinSCPなど)を使ってHTMLやCSS、JSファイルをWebサーバ―にあげ、URLを叩けばファイルが見れます。
しかし、そのブラウザに表示されるまでに何が行われているのかなど、Webの基礎的な知識を知っているのと知らないのとでは大きく違います。

VueやReactを勉強していてSPAやSSR,SSGについてよくわからなくなったときに見た以下のサイトが勉強になったので共有しておきます。
Webサイト表示の流れをざっくりとまとめた。

WEB制作Tips

Amazonキラー?! ECサイトを本格運用するならShopifyがアツい

コロナが広まって以降ECサイト構築の案件が増えています。
そこで、今ものすごく注目されているのがShopifyです。
Amazonキラーとも呼ばれていて勢いがすごいです。

エンジニア目線でいうと、EC構築の方法がWordPressの構築にとてもよく似ているため、とっつきやすいです。
実際、筆者も少し触ってみましたが、めちゃくちゃWordPressに似ていました。

それから、Shopifyはサブスクリプション型のサービスなのですが、開発者側がShopify Partnerプログラムというものに参加すると（簡単に参加できます）開発者側に恩恵があるというのもポイントです。

たとえば、ECサイトを作成したい人の代わりに、開発者が自分のShopify PartnerアカウントでECを作成してあげて、
最後に管理者権限を移行してあげると、サブスクリプションの20%を報酬としてもらうことがきます。

作成したサイトがアクティブである限り、毎月報酬がもらえるのでとてもいい制度だと思います。

画面を録画するだけで操作手順書を作成できるCursive

録画を始めたら、手順書にしたい操作（ここクリックして、hogeって入力して・・・など）をPC内で行えば、
クリックやタイピングを、このツールが検知してそれをもとに手順書を作成してくれます。

ツールや、サーバーの設定、WordPressの手順書作成などに重宝できそうだなと思いました。

Cursiveのサイトに飛び、「Get Scribe for Free」をクリックすることで始めることができますよ！

次の3か月目標

ディレクションが増えてきたので、うまくこなせるように頑張りたいです。
何百万とする大規模案件の見積りを依頼されることも多くなりましたが、そういった際にひるまず、すばやく情報を引き出し、整理して見積作成を正確に早くできるようになりたいです。（めちゃくちゃ時間かけてしまうので・・・）

それから、コーディングでよく使うパーツ集みたいなものを社内で共有できるようにしたいなと思っています。
Fractalというスタイルガイドジェネレーターがありまして、これを使う予定です。
「このコーディング前もしたよなぁ」ってことがよくあり、そういうときに引っ張り出せるみんなの引き出しになればいいかなと思っています。（半分自分のためでもある笑）

まとめ

この3か月は新人教育やディレクション、コーディング、Vue案件と、幅広く携わらせていただきました。
その中で、バックエンドの知識がまだまだ足りないと感じたので、その部分を今後、補えるようにしていきたいと思いました。

また、ディレクションも増えてきてお客様とのやり取りも増えました。
いまのところお客様とのトラブルはないので、今後もこの調子で頑張るとともに、よりよいサイトを作れるよう仕事に取り組みたいと思います。

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