アラフォー×未経験でWeb制作会社に入社できたこと（コーディング編）
こんにちは。matsuokaと申します。
今日はコーディングについて執筆したいと思います。
◆この記事について◆
昨年39歳でWeb制作会社にコーダーとして入社した経験が、就活中／就活予定の方への一助となればと思い、これまで行ってきたものや継続中のもので「やってよかった」と思う取り組みや心がけについてご紹介いたします。
コーダーで入社した経緯もあり、若干技術的なことにも触れますので、少々長めな記事となります。
◆こんな人におすすめ◆
・コーダー／フロントエンドエンジニアに興味を持っている方
・コーディングを学習中／学習予定の方
・ポートフォリオにコーディングスキルを効率よくアピールしたい方
はじめに
私は独学でWebサイト制作をきっかけに興味を持ち、6か月間の職業訓練校でコーディングの基礎を習得しました。この時38歳であったのもあり、効率よく覚える必要がありました。その時の取り組みで個人的に役立ったものをご紹介いたします。
尚、ここでは一部オフライン授業にて意識したことをご紹介いたします。オンラインスクールなどで学習されている方にも参考になるかと思いますので、よろしければ最後までご一読いただけたら幸いです。
コーディング学習でやってきたこと
私がコーディングを覚えるのに「やってよかった」と思えたポイントについてご紹介します。
◆コーディング学習のポイント◆
・予習の大切さ
・情報の核を捕まえる
・効率よくコードを書く
・コーディングはアウトプット
スクール学習は予習が大切だった
私は職業訓練校に入る前に独学でサイト制作を行っていました。今見たら「よくこれを公開してたな～」と思う作りでした。ただ、この不器用な取り組みが職業訓練校に入ってからとても大きな効果を発揮したんです。
それは「事前に言葉を知っていた」ということ。
初めてのコーディングは知らない用語の連続ですので、前もって言葉を知っておく（見ておく）だけでも授業に遅れ防止に繋がります。むしろ、授業を覚える場ではなく情報を整理するものに変えられます。
私が行った予習とは、教科書を熟読するのではなく、冒頭の章の見出しや概要でこんなことができるんだ程度に言葉に目を通しておくものでした。でもこれが自分のやり方としてハマりました。
例えば「marginって余白を外に作るんだ」「font-familyで好きなフォントに変えられるんだ」くらいのもので、キーワードを探し読みする、時間のかからない方法でした。
この程度でよかったんです。散らばった点の情報を線に整理することが授業の役割になったことにより、なるほどが増えてどんどんインプット理解ができました。また、これによりモチベーションも上がっていき、予習による学習相乗効果も実感できました。
「要は...」で核を捕まえる
みなさんはコーディング学習する際に、ネットで調べたり授業を聞いていて、こんな風に思ったことはありませんか？
「細かい（技術的な）話過ぎて、結局よくわからない」
私も独学の際にネットの情報を頼りに作っていましたが、いろんな方法に振り回されながら作っている感じがありました。
授業でも恩師が知見の広い方だったため、一字一句拾っていたら遅れると思い、「要は○○ってことか」と頭の中で解釈しながら聞くことに注力をそそぐようにしました。
例１）HTML / CSSの関係について
HTML→加工前の車
CSS→ボディ形状や色でかっこよく加工すること
例２）margin / paddingの違いについて
margin（外側余白）→箱そのものを移動したい時に使う
padding（内側余白）→箱の中身を移動したい時に使う
*どちらも余白を押し出すことで移動することができる
私自身は当時このようにまずは我流で捉え、間違っていたらブラッシュアップしながら情報の核を捉えるようにしていました。
このやり方が自分にはまって、今も独学する際にもとても活きています。
効率よくコードを書くために
私はどちらかというと「デザイン < コーディング」でポートフォリオでアピールしたかったので、下記順序で学習しました。
1. HTML / CSS
2. WordPress
3. jQuery / JavaScript
HTMLはCSSを意識して書く
過去にシステムエンジニアとして12年従事していましたが、プログラミングやコーディングは大枠から詳細への流れで書いていくと効率よくできます。
訓練校を卒業後、コーディングのメンテナンス性・効率性を上げる練習として、先にまとめてHTMLを書くことを行っていました。このときCSSを意識しながら書くと作業時間がぐっと短くなります。
次にCSSは枠を先に全て書くこと。HTMLはすべて書いているので、その通りCSSも書くだけ。最後にプロパティをはめていく作業も迷うことなく進めるようになりました。
この方法は、Sassを書くときにさらに効果的な実感があります。
またクラス名や階層にルールを持たせておくことも作業効率を上げるのに効果的ですので、ルール化していない方は一度試してみるのをおすすめします。
WordPressはオリジナルテーマがおすすめ
HTML / CSSに慣れてきたら、jQuery学習の前にWordPressを学習しました。ポートフォリオや基本習得には、WordPressテーマはオリジナルで作ることをおすすめします。
私見ですが、オリジナルテーマを作るメリットしては下記の3つあります。
1. 独自のルールでカスタマイズできる
2. WordPressの基本を捉えやすい
3. 就活の際の評価がいい
既存テーマの場合、テーマによってはその仕様に合わせてカスタマイズしなければなりませんが、オリジナルテーマの場合は自身または企業独自のルールに則ってカスタマイズできるため、コーディングメンテナンスもしやすいと考えられます。（※作業環境によっては既存テーマがいい場合はあります）
また、学習においてもゼロイチで構築するため基本が抑えやすいということ。自身の経験上ですが、基本を押さえていたことによりWordPressの不具合時の調査が効率よくできた実績が多くあります。
当時、面接でよく聞かれたのが「WordPressで作ったのか？」「テーマはオリジナルか？」という質問。「8割以上WordPress（オリジナル）で作っている」との声も複数企業の面接官の方から聞きました。
WordPressのオリジナルテーマの作り方について分かりやすい記事がございますので、ご興味ある方はこちらの記事も読んでみてはいかがでしょうか。
【テーマ自作】WordPress オリジナルテーマの作り方と基本
引用元：WEBST8様
また、こちらの書籍はダッシュボード（管理画面）の操作方法からPHPによるオリジナルテーマの作り方まで幅広く書かれたテクニック集です。逆引き検索できるので実務でも役立つ構成となっております。一度オリジナルテーマに触れてから読むと分かりやすいかと思います。
jQuery / JavaScriptにはあまりこだわらなかった
就活当時、私自身はjQuery / JavaScriptに興味が無かったわけではなく、就活優先に考えハンバーガーメニューやフェードなど機能的に必要なものにだけにしていました。
ここに関しては応募したい企業や、自分のアピールポイントによって優先度が変わってくるのかなと思います。
ちなみにこちらは最近買った本ですが、入門書として最高でした。
コーディングはアウトプットが大事だった
職業訓練校の講話でも話していることなんですが、これが一番気づけて良かったことでした。
訓練校時代、コーディングを覚えたくて先生や周りの生徒に誰彼問わず質問していましたのですが、不思議とどんどん覚えていったんです。
自分なりになぜ覚えられたのかを考えた時に、このような図が浮かびました。
誰かに知り得た情報を伝える時、無意識に相手に伝わるように考えるかと思います。この考える工程が情報を整理していると考えました。つまり、アウトプットすることで、それまで知っていたインプット情報が理解に変わるということに気づきました。（逆を返せば、分かった気になっていることも多くあり得るという戒めにも気づけました；）
実際、自身や他人のコードを見て説明することでアウトプットによる根本理解ができ、（CSSプロパティ等の）性質を理解した上での使い分けがスムーズに行えるようになりました。
声に出す以外にも、SNSやネットでも多くの方がテクニックをアウトプットしていますが、見る人のためだけでなく自身のためにやっている方もいるかもしれませんね。
この記事のまとめ
コーディングは覚えることが多いことから効率よく学習する必要があります。
学習方法は人それぞれの視点で様々かと思いますが、「要するにこういうこと」というように情報の核を見つけることが大きなポイントかと思います。
この情報の核を見つけ、根本理解に繋げるにはアウトプットし続けることが周りのため以上に自身のためになると私は考えています。
これがコーダー／エンジニアに必要なメンテナンス性のあるコーディングに繋がるのではと思います。
実体験ですが、参考になるものがありましたら一度試してみてください。
それでは、また。
◆その他の関連記事はこちら◆
matsuoka / monounity
URL :
https://monounity.jp/
Twitter :
https://twitter.com/matsuoka_dsgn/
Instagram :
https://www.instagram.com/matsuoka_dsgn/