2018年の8月にWebエンジニア（今は、厳密にはフロントエンドエンジニア）になるためにコーディングの学習をはじめました。以下のようなツイートをしてはや半年です。
よし決めた。Webのエンジニアになるわ。
— shimotsu (@shimotsu_) July 31, 2018
夏以降、だいたい日々平均して6時間以上はなにかしらのコードを書いています。最初はProgateというプログラミング学習サービスで学習をはじめ、LPの模写などをしたり、WordPressのサイトを作ったりしました。それと同時に、ペライチのLPの実装や既存のウェブサイトのページの追加実装など、実案件に携わるようになりました。今は、おもにJavaScriptの習得（+ Vue.js）のために時間を費やしています。
この記事では、Web制作におけるコーディングの学習をはじめて半年間でやったこと（仕事と具体的な勉強方法）について書いてみたいと思います。
先に断っておきますが、学習の進捗は早い方ではないと思います。ちょっとずつ理解して進んでくスタイルなので、早いスピードでガシガシ新しい言語／ツールを習得していく、というのは向いてないようです。あくまで「こういうペースで学習してるヤツもいる」というひとつのデータとして参考にしていただけるとうれしいです。
目次
1〜2ヶ月目：Progateや模写でコーディングの基礎を学ぶ
最初は、Progateというプログラミング学習サービスでHTML／CSS／JavaScriptの基礎を学びました。Progateはポンポン課題をクリアしていけるので、だいたい2週間くらいひたすらいろんなコースを回して、「ふーん、こんな感じか」と雰囲気を掴んでいきました。
最初なので、せっかくだからいろんな言語をやってみようと思い、上記以外にもRuby、PHPあたりもちょっとやってみました。これも、一周してなんとなく分かる程度かと思います。
次に取り組んだのが、LPの模写。これは「実際に試してわかったLP（ランディングページ）模写の効果と具体的な方法」の記事に具体的に書いているので、興味がある人はぜひ見てみてください。Progateだけでは雰囲気を掴む以上のことは得られないなと思い、わりと鉄板の学習方法である模写をはじめたのですが、マークアップの勉強にはかなり役立ったと思います。
模写と同時期くらいに、WordPressではじめてオリジナルテーマのサイトも作ったりしました。これは「WordPress未経験から1ヶ月でテーマを作成するまでの学習法」に詳しく書いています。今見返すと稚拙で恥ずかしいクオリティですが、本を参考に見よう見まねで作りましたね。ただ、「拙いながら、オリジナルのものを作り切る」ことの重要性をここで学んだ気がします。
なにか作ると、わからないことがたくさん出てきます。その「わからないこと」を知るために作り始めるのだな、と。これ以降、「作ることこそが、学習のいちばんの近道である」ということを念頭に置いて学習を進めているのですが、これに早い段階で気づけたのは幸運だったなと思います。
3ヶ月目：業務でLPの実装をはじめる＆個人でサイトを作りはじめる。
ある程度マークアップの基礎力が付いてきたなという実感が出てきた頃、ちょうどよいタイミングで仕事でLPの実装の案件があり、しばらくその案件に取り組んでいました。
実装したサイト：SAJ2019（スポーツアナリティクスジャパン2019）
サイト自体は前年度とほぼ同じ仕様だったので、中身だけ差し替える選択もありましたが、あくまで学習のために1から作りました。最初にパッと見たときは、「これくらいならいけるっしょ〜」と思っていたのですが、実際にやってみるとはじめて実装するUIだらけ（例えば、スライドするコンテンツ、背景動画、モーダルウィンドウ、パララックス、ローディングアニメなど）で、結果として想像以上に時間がかかりました。ただ、このサイト制作を通してjQueryを使ったDOM操作、必要な演出に応じたプラグインの選定と実装にはかなり慣れることができ、ぐっと地力がついた実感があります。
それと同時に、個人でのサイト制作もおこないました。詳しくは「バスフィッシング用ルアー「スピナーベイト」のプロモーションサイトを制作しました。」に書いています。これは、上記のサイト制作のときに感じた「見かけの演出に慣れる必要がある」という課題克服のために作りました。
あと、業務でサイトを作るにあたりGitの習得の必要もあったので、本を読むなどして勉強しました。Github Flow、Git Flowをはじめたのもこのあたりかと思います。
4ヶ月目：モダンな環境構築に取り組む&業務でLPの実装
次のステップとして、それまではせいぜいgulpでscssとpugを使う程度だったのですが、もっと本格的なフロントエンドの開発環境を整えることを目指しました。そこで導入したのが、カヤックのスターターキットです。
「starter」という名前は、Googleさんが公開しているWeb Starter Kitから来ていますが、要するに 新しいWebサイトの開発を始めるときに使えるひながたです。
こちらに乗っかってもらえば、gulp等々もろもろのツールを使ったことがない方でも、快適・高速・モダンなWebフロント開発ができますよ！というわけです。
これで、ES2015も使えるようになったし、yarnも使うようになりました。2年以上前の紹介エントリですが、リポジトリは定期的にアップデートされていますし、今でも普通に使えると思います。本気で最前線のエンジニアからしたらどうか、というのはちょっとわかりませんが。
このあたりの武器を手に入れたあたりで、またしてもLPの実装の案件に取り組みました。ドラクエでいうと、ふたつめの街で防具と武器を新調して新たな気持で新しいフィールドに向かっていくみたいな気分でしょうか。
そこで取り組んだのがこちらのサイトです。制作期間は2週間くらいです。
実装したサイト：企画鑑定ユニット
ちょっとずつサイト制作の経験が増えてきたり、環境構築が整ってきたこともあって、最初の頃に比べてかなりサクサク作れるようになりました。さすがにレベルアップの音が聞こえてきましたね。マークアップについてはSassの本を読んだりして得たTipsをここぞとばかりに使ってみたり、jsもできる限りモダンな書き方を心がけるようになりました（setTimeoutではなくPromiseを使うとか）。
5ヶ月目：JavaScriptの基礎を固める&ポートフォリオサイトを作る
ここまでやってきてひとつ大きな課題が浮き彫りになってきました。それが「JavaScriptを本格的にやっていく必要がある」ということです。プラグインを使ったり、jQueryを活用して、見かけ上の演出はたしかにできるようになってきました。よっぽど難しくなければ、Webサイトでよく見るUIはそれなりに実装できるようになりました。
けれど、次のステップに進む上で、腰を据えてJavaScript（ES2015）を体系的に学習する必要があると感じたんですね。実際、僕がそれまでやっていたことはJavaScriptのなかでも簡単なDOM操作とちょっとした関数の操作だけであって、JavaScriptの世界に足の爪先を踏み入れた程度でしかなかったわけです。これは一朝一夕で身につくようなものじゃないので、今も日々学習を続けています。
最初に取り組んだのが、JavaScriptの最初の一歩的な本である『確かな力が身につくJavaScript「超」入門』です。「超入門」というだけあって、ホントに初歩の初歩的な本です。それでも、「情報を取得して、加工し、アウトプットする」というDOM操作の基礎を叩き込むのに十分な本でした。1週間くらいかけて、ほぼすべてのコードを写経して感触を掴んでいきました。
次に取り組んだのが、JavaScriptを体系的に学ぶうえで良書とされている『JavaScript本格入門』です。
これは上述した入門書とはかなりレベルが違っていて、わりとガチめなアカデミック寄りな入門書です。ぶっちゃけ、オブジェクト指向構文のあたりはまだ理解したと言い難いくらいで、ちゃんと学ぼうとすると結構労力を要します。こちらの本も2週間くらいかけて、ほぼすべてのコードを写経しました。ES2015も含めて、現代のJavaScriptの基礎が体系的にまとまっているので、全体像を掴むのにちょうどよいです。この本で学んだ内容は、かなり血肉になっている感じがします。また、今でもかなりの頻度で逆引き集的によく見返しますね。
あと、年末の休みを利用してポートフォリオサイトを作りました。超シンプルな構成ですが、制作物を一覧できるサイトがほしかったので、機能的には満足しています。あと、このサイト制作を通してWordPressのカスタム投稿タイプのいろはを身に着けました（というか、これがやりたかったといっても過言ではない）。
ちなみに、学習中に書いたコードはすべてGitで管理しています。こうすると過去の内容も一覧できますし、「積み重ねてる感」を実感できるのでオススメです。
自分は本で学習しがちだということに気づいた
こうしてみると、僕は入門書、専門書で学習しがちなことに気が付きました。毎月1回書店に行って、欲しい本をほしいだけ買うというのをやっているんですが、そのときに気になっている専門書をまとめて買うことが多いです。
今月はこれ。 pic.twitter.com/rQCIoimTcD
— shimotsu (@shimotsu_) December 6, 2018
本で学ぶ理由は、やはりネットにあがっているブログやQiitaの情報だけだと不十分だからです。もちろん、それらもとても役に立つのですが、初心者が最初に学ぶには網羅性に欠けるので、僕は本をよく多用します。ただ、この場合、書籍になっている情報しかリーチできないという問題もありますが。このあたりは人によって向き／不向きがあると思うので、自分に合うやり方を見つけてください。
6ヶ月目〜現在：JavaScriptの習熟&Vue.jsの習得
で、やっと今に至るわけですが、最近は引き続きJavaScriptの習熟、Vue.jsの習得に取り組んでいます。どっちかというとVue.jsの方に力を入れていて、以下の本を買ったり、公式ドキュメントを読んで学習しています。
あとは、プログラミングなどの学習用のビデオ配信サービス「Udemy」にもVue.jsのコースがあり、そちらも一通りやったりしてます。ただ、やっぱり他人が設定した目標物を淡々と作るのは飽きるので、できることなら自分でオリジナルの制作物を作ることを通して学んでいくのがいいなと思っています。
Vue.jsでは、習作としてFlickrのAPIと連携して画像のギャラリーサイトを作りました。簡易的なシングルページアプリケーションですが、「アプリ」と呼べるようなものをはじめて作ったので、なかなか達成感があります。これまでやっていたマークアップとは難易度も上がり、必要なスキルはひと味もふた味も違うので、やりがいがありますね。スキル的にはまだVue.jsをはじめたてくらいなので、今後も個人制作を通してもっとスキルアップしていきます。
あっ、あとは学習のあいまにShimoQuiRadioのサイトも作ったりしました。詳しくは「ShimoQuiRadioのサイトをリニューアル。制作における4つのポイントを解説します」に書いています。
まとめと今後について
以上、半年間にやってきたことをざっと書いてみました。最初にも書いたとおり、進捗は多くの人に比べて遅いと思います。それでも、常に最初と比べると確実に進歩してる実感はあるので、「とにかく書き続けて、ものを作り続けるしかないな」というのが今の率直な気持ちです。
今後は、JavaScript（特にVue.js）の習熟と、その後はNuxt.jsにも着手していきたいですね。WebサイトというよりはWebアプリ寄りの制作物をどんどん増やしていく予定です。
また、こうした学習の足跡を残しておくことで、「おっ、じゃあ俺も全然イケるやん」みたいにひとりでも勇気づけられたらいいなと思っているので、今後も続けていきたいと思っています。
コメントを残す