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

K

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

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

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

それでは、まずは2020年1月～2020年3月までの3ヶ月間で自分がどんなことをしてきたのかを、
以下の流れで書いていきます。

少々長いですが最後まで読んでいただけると嬉しいです。

4ヶ月目

1週目〜2週目：WPの本番環境移行

ワードプレス案件の本番環境移行をしました。
本番環境移行はまだあまりやったことがなく毎回ビビっています笑

作業内容は「DNS切り替え」がまだ完了していない新サーバにテスト環境にあったファイル群を移行して動作確認するというものでした。

通常、サイトを閲覧するためにはドメインとそれに対応するIPアドレスが「DNS」というところで紐づいていないといけません。
しかし、「DNS切り替え」ができていない場合にそのサイトを閲覧するためには、「hostsファイル」というものを設定してあげる必要があります。

この「hostsファイル」に、ドメインとそれに対応する新Webサーバ用のIPアドレスを記載してあげると、「DNS切り替え」ができていなくても自分のパソコン上だけで（ローカルで）サイトを表示させることができちゃうんです。（すごい）

このような対応をするケースは、DNS切り替えが完了する前に、新サーバーでリニューアルサイトがちゃんと動作するか確認したいときなどです。
意外に重要なのでぜひ覚えておきたいですね！

この他にもTMCという案件のWP構築と本番公開をおこないました！
URL構造が複雑でめちゃくちゃ大変でしたが先輩に聞くなどしてなんとか完成させることができました。

これでWP案件は4案件目なのですが、途中でお客様から「ここをこうしたい！」と言われることが多かったです。
しかし、そういうことに対して１人で対応できず先輩に聞いてしまっているのでまだまだだなぁと思います。。

今はまだその実装が可能かどうか自分で判断がつかない状態なので、そういう相談をされたときにしっかり理由を持って「できる」or「できない」の判断ができるようなエンジニアになりたいです。

2週目～3週目：久しぶりのWP課題

少し時間に余裕ができたので久しぶりにWP課題をやりました。

内容はCSVデータをワードプレスの記事にインポートするというもの。
課題は以下の弊社のブログを参考にしながら手を動かしていきました。
しかし、わけがわからず発狂しそうでした笑（僕の読解力がないだけです。。）

最初は全くわかりませんでしたが、１つ１つ紐解いていくとだんだんと分かってきて、最終的に課題を完了させることができました！
その後、追加課題でワードプレスのカスタムフィールドの内容をCSVデータとしてエクスポートすることもできました！

今回学んだことはまだ実案件で出会っていませんが、今後出会った際にはこの経験を活かしたいです。

5ヶ月目

1週目：はじめてのMovable Type

某サイトのMT構築の一部を担当しました。
MTとはMovable TypeというCMSの１つで、他に有名なものがWordPressですね。

弊社ではあまりMovable Typeを使った構築をしたことがなく社内にそれについて詳しく知っている人がいないという中で、試行錯誤してなんとか構築することができました。

苦労した点としては、Movable Typeについての記事があまりなく調べるのに手間取ったことです（汗

意外にもMT案件は多いのでできればマスターしたいところですが、やはりWordPressがやりやすいですね。

セキュリティやサイトスピード向上などの面からCMSとしてMTを採用したりするみたいです。
しかし、アメリカのホワイトハウスもWPを採用していますし、WPで良いんじゃないかというのが個人的な意見です（笑）
（ソース：The White House Showcase | WordPress.org/）

2週目：はじめてのディレクション

案件でディレクションから携わらせていただきました！

具体的には、その案件の直接の窓口が自分で、納品完了まで携わるというものです。
今までは先輩のディレクションのもと、自分はコーディングをして先輩にチェックしてもらい、チェックOKであればそれ以外は携わることはありませんでした。

しかし、案件の始まりから最後まで担当するのはこれが初めてだったのでめちゃくちゃ緊張しました笑

案件の内容としては新規のページ追加でした。
既存サイトの一部（ヘッダー・フッター）を流用しつつ中身を変えるといった案件です。

ピクセルパーフェクトが求められる案件でしたので、以下のサイトを参考にしながらコーディングを進めました。

このPerfectPixelを使えば寸分違わずデザインと合わせることができます！
この拡張機能はめちゃくちゃ便利なので知っておいて損はないですよ！

そんなこんなで特に問題もなく無事納品することができました！（よかったー）

2週目～3週目：はじめてのVue.js

Vue.js案件に入らせていただけることになりました！

先輩がVueの案件をやっているのを見ていてたので、やりたいですと志願したら入れてもらうことができました笑

もともとVueに興味はあり、自分で教材を買って勉強もしていました。
しかし、実際案件に入ってみるとわからないことだらけでめちゃくちゃ苦労しました。。

先輩にたくさん迷惑をかけてしまったので、その日わからなかったことは再度、家で復習したりするなどしてなんとか食らいついていくことができました。

３週目の終わりあたりで別の案件が舞い込んできてそちらが忙しくなってしまいVueの案件から離れてしまいました。
とはいえ、その案件自体はまだまだ続いていくので今後も携わる可能性はまだあります。
なので、休日など時間があるときに勉強しておきたいと思います。（最近疲れすぎて全然勉強できていないですが…）

6ヶ月目

1週目：初めてのBEM指定案件登場

某有名Webメディアサイトの追加コンテンツページ（４枚）のコーディングを担当しました。
この案件はコーディング規約がとても厳しかったです。
たとえば、CSSはBEMで書かなければいけないとか、Webアクセシビリティを考慮しなければいけない、など
それらをすべて理解しておかないとコーディングに移れないので、その理解に時間がかかってしまいました。。

BEMはCSS設計手法のひとつで、この他にOOCSS、SMACSS、FLOCSSなどがあります。

BEMはSassを使うとめちゃくちゃ効率よくCSSがかけるようになるのでおすすめです。（最近のマイブーム）

BEMでクラスを書くときに最初は結構迷ってしまいますが
BEMの命名規則をまとめたチートシートをみつけたので紹介しておきますね。
BEMチートシート

色々と大変だった分けですが手際よく進めることができよかったです。

2週目～3週目：2回目のディレクション

ディレクションから携わらせていただきました！（2案件目！）

内容としては既存サイトのヘッダーやフッターを残しつつ、新しいコンテンツを作成するというものでした。(こういう案件が地味に大変…)

スケジュールがタイトであったことや、デザインがなかなかFIXしなかったり、リスケしたりなどして非常に困惑しました。
しかし、迅速に対応することができ、そのおかげで見積もり額の倍の値段にしていただけて個人的にとても嬉しかったです。

3週目後半：はじめてのTOPページコーディング

はじめてTOPページからコーディングを任されました！

実は、入社してからこのときまでTOPページをコーディングするということはやったことがありませんでした。

なので色々苦労しました。。
いかに下層ページをコーディングすることが楽だったのか思い知りましたよ笑

下層ページのときはもうほとんどパーツもできあがっているし、必要なファイルも揃っているので特に何も考えずコーディングに没頭できます。
しかし、TOPページからコーディングするとなると色々そういった準備を自分でしなければなりません。

特に自分がその準備のなかで時間がかかってしまったのがフォントの準備です（今もちょっと苦手意識が。。）
これは、デザインで使われているフォントがデバイスフォントじゃないときはそのフォントをダウンロードしてサブセット化したりotfをwoffに変換したりして、それらをcssで読み込むというものです。

CDNで読み込むという方法もありますが、サイトが重くなる原因にもなるので
ダウンロードしてCSSで読み込むという方法を覚えておくといいでしょう。

やり方は以下のサイトを参考にするとよいでしょう。（はにわまんさんのサイト有益すぎる…）
「Noto Sans Japanese」の不要なものは削除して必要なものだけ読み込む方法【Webフォント高速化】

自分はこれをやるのが初めてで、すごい時間がかかってしまいました（汗
（今思えば、同じフォントが使われていそうな別案件のfontフォルダからコピペしてくればよかったな。。）

時間がかかってしまったのは準備だけでなく、コーディングも時間がかかりました。。
私はあまりコーディングが得意ではなく本当に苦労しました。

何回も心が折れたし泣きそうにもなりましたが（先輩の圧で(笑)）
なんとか形にすることができてちょっと自信がつきました。

全体の気づき

既存サイトの流用って難しい！

この3か月では自社で１からつくる案件というよりも、すでにサイトがあって、それの改修を行う案件が増えました。

１からサイトを作る際は、弊社のテンプレートファイルを使うので、どんなファイルを使っているか把握しやすいためスムーズに作業に移れます。

しかし、すでに外部の人が作成したサイトを改修する際は、そのサイトのフォルダ構造などを把握するところから始めなくちゃいけなのでめちゃくちゃ大変です。。
特に改修が繰り替えされたサイトだともうぐちゃぐちゃなのでできれば触りたくないですね…笑

先方が、必要なファイルはこれだからこれ使ってね～っといった感じでデータを送ってくださるのですが、よく見るとだいたい必要なファイルが足りてなかったり、そのファイルをもらうのに都度連絡をしなきゃいけなかったり、新規ページ用のファイル名の指定がなかったり、今までのcssファイルに追記していくのか指示がされていないので聞かなきゃいけなかったり。。。

とにかくコーディングに入る前段階で考えなければいけないことがたくさんあるんです！
（有能なディレクターだったらこんなことにはならないはずだ…）

こういう経験をしているからこそ自分はコーダーが困らないようなディレクターになりたいと思っています。
具体的には、「このディレクターの下だったら安心して作業できるわ～」と思ってもらえるようなディレクターですかね笑
（なんとなくコミュニケーションとって案件丸投げするディレクターにはなりたくない…）

Web制作Tips

このセクションでは、ここ最近で個人的に気になった記事・ツールなどを3つシェアします。

1HTML5 入れ子チートシート

HTML5 入れ子チートシート
このサイトでは、HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。
とても便利でよく使っています。

2DeepL翻訳

DeepL翻訳
Google翻訳よりも精度が高いらしいです。
ツイッターでも一時期話題に上がっていました。

3WordPressを使ったサイト制作でブロックエディタは主流になるか

WordPressを使ったサイト制作でブロックエディタは主流になるか

僕が独学のときにもお世話になった方の記事です。

WordPressのバージョン5.x以上ではエディタがクラシックエディタではなくブロックエディタになりましたよね。
クラシックエディタのサポートもいずれ終了するといわれている中、Web制作者として今後どうしていけばいいのだろうと思っていましたが、この記事を読む限りしばらくはブロックエディタのことを考えずに今まで通りの制作フローでよさそうです。

ただ、この記事でも紹介されていますがブロックエディタをつかうとものすごく時短でサイトが作れるらしいのでいずれ来る未来のためにも一度経験してみたい気もします。

まとめ

この3か月ではシステムというよりもコーディングをやりまくった気がします。
自分はコーディングがあまり得意ではなかったので本当に苦労しました。

また、新たにディレクションも少しずつ任せてもらえるようになり常に責任感と緊張感があるのが最近の業務です。
楽しい反面プレッシャーもあり、自分のできなさと納期に追われ何回も泣きそうになったし心折れそうになりました。

しかし、そういう時はプラス思考で考えるようにしています。
出来ないのはその実装方法を知らなかっただけと言い聞かせ、できないことに目を向けるよりも、できるようになったことに目を向けると気持ちが楽になります。

今後も、どんどん知らなかったことを吸収して成長していければと思います！

このブログが、未経験からWebエンジニアになろうと頑張っている方にとっての励みになれば嬉しいです…！
ここまで読んでいただきありがとうございました。