instagram facebook twitter line ShreBtn hatena Pocket

NOW UPDATING

独学、未経験、30代からWEBエンジニアになるまでにやったこと

Frontend
HELLO, WORLD

WEBのことは独学だけで実務未経験、年齢は30越えた妻子持ちがWEBエンジニアとして働く前の僕です。

家族ができると人は変われますね。

30過ぎてからWEBの勉強を始めた僕が独学だけ実務未経験でWEBエンジニアになるまでに取り組んだ勉強を紹介します。

WordPressでオリジナルテーマを制作して、WEBサイトをリリースする

やっぱり自力でWEB制作してみることが数ある独学の方法の中でも一番の勉強になります。

何冊も参考書を買って勉強を続けていくと、次第にどれも似たり寄ったりな内容に思えてくるんですよね。HTML/CSSについて、基本的な仕組みが理解出来てきた証とポジティブに受け取る。

そこで復習と更なるスキルアップを兼ねて、とりあえず自分のポートフォリオサイトでもなんでもいいからBootstrapやCSSフレームワークは使わずに、一からコーディングしてWordPressの実装までやってみます。

実際にいざゼロからコーディングしてみると、きちんと理解できてる部分とやんわりと理解してた部分が明確に分かってきます。

WEBエンジニアになる前の僕はこの勉強法をきっかけに大体な理解だったflexboxの使い方をマスターしたり、特にやんわりだったJSの理解が深まりました。

自力でWEBサイトを制作する作業は実務未経験だったら絶対にやったほうがいいです。

静的コーディング+WordPressの実装までやる理由

「WordPressを使ったことがある」と一口に言っても、既存テーマをカスタマイズして使ったことがあるレベルとオリジナルテーマを制作したことがあるレベルではスキルと経験値に月とスッポンです。

例えると、赤ちゃんが寝返りを覚えたか、まだかだったり、ダンスを音楽に合わせて踊れるか、きちんと音楽を聴いて音の持つニュアンスやイメージを感じて表現して踊れるかくらいです。

WordPressの実装はHTML/CSSが書けることと同様に必須スキルです。

カスタム投稿タイプを追加したり、問い合わせフォームの設置は便利なプラグインもあるし、できなきゃマズいやつです。

WEBサイトのソースを読む

デザインでも、配色でも、アニメーションでも、何かしらいいなって感じたWEBサイトはchromeのデベロッパーツールでソースを読みます。

独学を始めた最初の頃は、移動中でもiPhoneで気になったWEBサイトのソースを読みたくてiPhoneアプリ「Srcfari」を買ったもののiPhone/スマホでコードを読む作業はあまりおすすめしません。

おすすめしない理由としては、ソースと一緒にページも見れたほうが圧倒的に分かりやすい、見やすい、使いやすいの三拍子が揃ってるからです。

そんな訳で、今ではiPhoneでコードを読むことはほとんどしません。

移動中に気になったWEBサイトはPocketに保存して、後からPCでデベロッパーツールを使ってチェックするようにしています。

色々なWEBサイトのソースをチェックしてると、クラス名の付け方やセマンティックなコードの書き方、SEO対策も参考に分かってきて勉強になります。

WordPressで人気のあるテーマをダウンロードしてソースを読むことも、同じようにクラス名の付け方やセマンティックなコードの書き方、SEOの勉強になります。

HTML5/CSS3の独学で本当に勉強になって役に立ったおすすめの参考書

「現場のプロが本気で教える HTML/CSSデザイン講義」はせっかく参考書買って勉強するんだったらスルーしとくのはもったいなさすぎます。

HTML/CSSの山ほどある参考書の中で「現場のプロが本気で教える HTML/CSSデザイン講義」がずば抜けて勉強になって役に立ちました。

ただ、HTML5/CSS3について、基本的な仕組みが理解出来てきた前提で購入することをおすすめします。

初めてHTML/CSSを勉強するための一冊として入門用で「現場のプロが本気で教える HTML/CSSデザイン講義」を選ぶことは全くおすすめしません。

HTML5/CSS3についてなんか分かってきた気がする的感じで土台ができてる状態が大前提です。

「現場のプロが本気で教える HTML/CSSデザイン講義」を激推しする理由

「現場のプロが本気で教える HTML/CSSデザイン講義」では、実際に現場で当たり前に使っている開発環境にかなり近い実践的状態でHTML5/CSS3を学べます。

学べる内容のポイントは、
CSSはBEMを使ってSCSSでFlexboxメインで書く。
コーディングしたデータをgulpを使ってコンパイルする。

現場では、CSSはSCSSでコーディングして、gulpやターミナルの黒い画面でSassを動かしてコンパイルすることが普通です。

CSSに直書きは、Sassを導入する以前に制作されたWEBサイトのちょっとした改修作業やECサイトのテンプレートをベースにカスタマイズするときくらいで基本稀な作業と言い切れるレベルです。

SCSSでコーディングすることに慣れたら、時間が勿体なくてCSSでわざわざ書く気にはなれません。

SCSSの書き方やgulpの使い方まで教えてくれる参考書は「現場のプロが本気で教える HTML/CSSデザイン講義」が発売されるまで見たことがなかったんですよね。

Sassの参考書で有名なWeb制作者のためのSassの教科書を読むよりも断然低いハードルでSCSSを書けるようになります。

この一冊で一石三鳥ぐらいにはなります。

まとめ

時間がかかってしまってもいいから、一度自分でドメイン取って、サーバー借りて、好き勝手作りたいようにWordPressテーマを自作してみてください。

一からコーディングしてWordPressの実装、WEBサイトをリリースまで経験すると、これまでに独学で培った知識+αがより深く自分の血と肉になります。

公開したWEBサイトは自分をプレゼンする役割を果たしてくれるから、いいことづくしです。