メーカー総合職からIT専門職に転職！未経験でフロントエンドチームに入った私が1年目にやったこと

はじめまして！クリエイティブグループの平井です。

この業界への転職を決意したのが１年半前。
働いているうちに新卒で就活していたころとは仕事に対する考え方が変わっていったことがきっかけです。

Webデザイン・コーディングのスクールに働きながら半年通い、運良くジークスに拾ってもらいました。

全くの異業種・異職種から実務未経験でのスタートだったわけですが、同じような道を考えている人も少なくないんじゃないかなと思い、今回はこんな私がジークスに入社して1年間で経験したことについてお話ししたいと思います！

コーディングの効率化

タスクランナー Gulp

入社してまず言われたのが「とりあえずGulpが動くようにして」でした。

「学校は教えてくれない現場の常識というものか・・・」と思いながらググってみると、タスクランナーとは何か、Gulpのインストール方法などを説明している記事をたくさん見つけました。が、当時の私はコマンドラインなんて使ったこともなければ環境構築なんてしたこともなく、実際にインストールしてちゃんと機能するgulpfile.jsを書くだけでも一苦労。

なんとか設定して使ってみると、ファイル更新時に自動でブラウザをリロードしてくれたりSassのコンパイルに加えてcssを整理してくれたりベンダープレフィックスを自動で付与してくれたりと便利な機能が盛りだくさんでした！

CSSプリプロセッサー Sass

Sassについても「？」な私でしたが、Gulpと合わせて使ってみると意外とすんなり入れました。

セレクタを入れ子構造で記述できるので見やすく、同じ値は変数を使って使い回せたり、ファイルを分割管理しながら最終的に一つにまとめて書き出せたり、引数を使ってオリジナルのスタイルテンプレートが作れたりなど、とても便利なツールです。

GulpもSassも手動では面倒な作業をサクッとこなしてくれるので今となっては手放せません。
まだまだ使えていない小技がたくさんあるので人のコードを見てどんどん取り入れていきたいと思っています！

バージョン管理システム Git

Gitでのバージョン管理がどういうものか、先輩に説明してもらったり、サルでもわかるGit入門や Learn Git Branchingなどで自習もしましたが、いまいちピンと来ず。

ブランチを切り替えたら自分のマシンの中にあるGit監視下のファイルたちの中身がそのときの内容に変わるということが使い始めてようやく分かったときの衝撃といったらもう・・・（ど素人でした、すみません）

最初は一人で取り組む作業が多く、コミット・プッシュの繰り返しでしたが、徐々に複数で進める案件に入ることでブランチやマージなど（失敗しながら）少しずつ慣れていきました。バージョン管理も学校では教えてもらえませんでしたが、開発案件では必須の知識です。

Webアプリテンプレート制作

ユーザーが色々と選択や入力をしたあと送信前にプレビューができ、入力内容によって見た目がコロコロ変化するというフロントでの動きがけっこうあるアプリだったので、JavaScriptでの制御が多い画面は苦戦しました。

どのような処理を書けばイメージするUIを実現できるか、試行錯誤しながら一つひとつ実装していくと、いつの間にか長いスクリプトが書き上がっていたので密かに達成感を感じていました・・・（同じ処理をいかにシンプルに書けるかが今の私の課題です）。

また、下までスクロールすると次のデータを取得・表示し、さらにスクロールできるようになるといったAjaxを使った無限スクロールも実装しました。

WordPress導入・テンプレート制作

WordPressを使ったサイトの制作にあたっては、まずはWordPressの仕組みを理解することから始めましたが、動的サイトにおけるパーマリンクURLの意味が理解しづらく、アーカイブなど自動で（勝手に！）生成されるページなどもあり混乱しました。

URLや更新者が使いやすい管理・入力画面のカスタマイズなど、こうしたい！という理想はたくさんあるのになかなかうまく実現できず、とにかくやり方を調べては実装の繰り返し。

プラグインが様々な危険を伴うことも学び、WordPressを単なるブログではなくサイトに使用する場合はどの程度のカスタマイズで使用すべきかなどの感覚も身につけることができたと思います。

SEOを意識したセマンティックなマークアップ

CSSやJavaScriptでユーザーに分かりやすいデザイン通りの見た目のページをつくるだけでなく、コンピューター（検索エンジン）にも理解してもらえるようにするためにはHTML5タグやSchema.orgを用いた文章や文字列の構造化・適切な意味付けが重要であることも実務を通して学びました。

UI設計

Webサイトやアプリのテンプレート制作時に、UI設計部分を手伝うこともありました。

今いるページからユーザーが次の画面に進む導線や、ボタンやタイトル、各パーツの位置・表記など、実際に自分がユーザーだったら、自分とは異なるバックグラウンドを持ったユーザーだったら、と考えながらワイヤーフレームを書きます。

アプリなど普段からよく使っているのに、実際に自分が設計するとなると難しく、普段いかに意識せずとも設計された意図通りに誘導されているか実感しました。

CSSアニメーション

ずっと興味がありながらも案件に追われてなかなか時間を割くことができなかったアニメーション。

最近アプリの中で使われるミニゲームの実装があったので「やりたいです！」と手を挙げてみたら本当にやらせてもらえました。

勤務時間にやりたいことができる幸せ・・・！

CSSのkeyframesを使いまくって0.1秒（もしくはそれ以下）単位で全てパーツの位置や向き等を指定。
最後には色々頭を悩ませた結果、JavaScriptで理想通りにランダムなタイミング、動き、色、形の紙吹雪を散らすことができ、無事完成して嬉しかったです。

まとめ

私はフルタイムで働きながらの転職を希望していたので、課題を出されて半強制的にでもスケジュール通りに取り組まざるを得ない環境をつくることで先延ばしにすることなく転職を実現できた点では、（まあまあ高い）授業料を払ってスクールに通ったことは後悔はしていません。

ただ、学校で教わる基本的なことは上で何度も書いた通り、ネットで調べればいくらでも出てきます。なにより実務を通して学ぶのが一番早いというのはこの１年で身を持って体感しました。
学校では触れられなかったいろんなことを次々とやらせてもらえたので、未経験で不安でも、なるべく早く現場に飛び込んでみた自分の選択は正解だったと思っています。（いつも温かく見守ってくださるジークスの皆さんには感謝感謝です！）

今はまだデザイン通りに配置し動かすことに必死で、コードの効率性・メンテナンス性を考慮した設計がまだまだ甘く、またJavaScriptフレームワークの利用など今後の課題は山積みです。
もっともっといろんなことができるようになるためには手を動かすのみなので、頑張ります！

以前の私のように今の仕事内容や今後の進む道で悩んでいる方は、ぜひ気軽にジークスに話を聞きに来てくださいね。お待ちしています！