くまだどうも、くまだです。
Web制作の3年目コーダーの自分が、初学者時代にやっていたコーディングの勉強方法というのを書いてみる。
需要があるかは分かりません。
初学者時代にやっていた勉強方法
独学でもスクールでもテキストの教材でも動画教材でもなんでもいいですが、前提としては基礎学習を終えて練習で1サイト作った後の話です。
一つ練習サイトを作ったらそれで終わりになっている人も多い気がしますが、それで終わってしまうのももったいないので、練習サイトを使って以下のような使い道はどうか、と。
初学者時代に自分がやっていた練習方法です。↓
- Sass未収得の場合、CSSをSassに書き直す練習をする
- JavaScript/jQueryの練習に使う（ハンバーガーメニュー、タブ、アコーディオン、スライドショーなどちょっとした動きを付け足してみる）
- レスポンシブの練習に使う
- CSS設計を意識してコーディングしてみる
- アニメーション実装の練習に使う（GSAP）
- WordPress化の練習に使う（基本的なWordPress化と、カスタム系構築の練習）
- Googleフォーム、mail.php（php工房など）の組み込み練習に使う（フォームがないデザインカンプなら付け足す）
- 時間を測ってコーディングしてみる
- EJS, Pugなどでサイトをコーディングしてみる
- Gulp、Webpackを導入してコーディングしてみる
- Githubにデータを上げる練習に使う
- チーム制作の練習に使う
- コードをレビューしてもらう…etc
Sass未収得の場合、CSSをSassに書き直す練習をする
Sassを未収得、もしくはSassの基礎は学習したけどうまく感覚がつかめない場合で、ググりながらでもいいので一度自分がCSSで書いたものをSassに書き直してみる、という練習をしてみるといいかと思います。
Sassといえばだいたい以下のような機能があります。
- 入れ子で書ける（ネスト）
- extend使える
- mixin使える
- 変数管理できる
- ファイル分割管理できる
- 関数使える
全部の機能を使いこなす必要はありません。自分も今では一部変数と一部mixin、ファイル分割ぐらいしか使ってません。
とはいえ、最初のうちは「こういう機能があるんだな」ぐらいの感じで使い方をざっくり覚えておくといいです。
JavaScript/jQueryの練習に使う
簡単なデザインカンプの場合、ハンバーガーメニューの実装ぐらいで終わってしまいがちです。
そこで、デザインカンプにはないけれど、簡単なアコーディオンメニューやタブ、プルダウンメニューだったりスライドショーなどを追加実装してみる、という練習をしてみる。（デザインにはないが、あると想定して仮のものを自作する）
アコーディオンメニューやタブ、プルダウンメニューだったりスライドショーなどWebサイトには頻出パーツや機能が出てくるので、それらの実装をしてみるのは良い練習になるかと思います。（もちろんググりながらです笑
SwiperやSlickなどプラグインを導入して使い方を覚える、という練習方法もありです。
レスポンシブの練習に使う
レスポンシブの練習として、どのブラウザから見ても、どの画面幅で見てもレイアウトが崩れないようにコーディングする練習に使う。
基本的なブラウザ（Chrome、Firefox、Safari、Edge）、360px画面幅～2000px画面幅以上まで表示確認したとき、崩れないようにコーディングする、と。
デザインカンプのカンプ幅だけではなく、それ以外の幅もチェックするようにしましょう。
CSS設計を意識してコーディングしてみる
Flocssだったり、BEMだったり、なんらかのCSS設計を意識してコーディングする練習です。
たぶん最初はオレオレCSS設計（自己流）でやっている可能性が高いので、それを矯正するために練習に使うのもありです。上記のSassといっしょにやるといいかなと思います。
慣れないとなかなか最初は作るまで時間がかかりますが、慣れると早くできます。
また、ヘッダーからフッターに向かってなぞるように作るのではなく、例えばパーツから作るとか、いつもとやり方を変えてみるのもいいかもしれません。
アニメーション実装の練習に使う（GSAP）
GSAPを使って、アニメーションの実装の練習に使います。ついでにJavaScriptの練習にもなります。
アニメーションはプロジェクトによって必須ではないですが、覚えたほうがアニメーション実装のぶん単価が上がる傾向があります。
例えば動画教材などで基本を学習した後、練習サイトのほうでアウトプットとして実装してみる、というのも勉強になると思います。
WordPress化の練習に使う
複数ページがあるとなおいいですが、1ページしかなくても、WordPress化の練習には使えます。
WordPress化ができると、静的コーディングよりも単価が上がる傾向にあります。
基本的なオリジナルテーマ作成だけでなく、functions.phpいじったり、カスタム投稿、カスタムフィールド、カスタムタクソノミーなどカスタム系を実装してみるなどもできます。カスタムフィールド系のプラグインを使用する練習にも使えますし、プラグインを使わずにカスタム系を実装するなどもいいかと思います。
個人的にはWordPress化を覚えるよりもHTML、CSS、JavaScript（jQuery）でしっかりレスポンシブでコーディングすることに注力したほうがいいと思っています。静的コーディング案件だけでも仕事はあります（ちなみに自分の仕事の9割は静的コーディング案件です）。
WordPress化ができれば、静的コーディング案件でも動的を意識したコーディングができるようになりますので、無駄にはなりません。
Googleフォーム、mail.php（php工房など）の組み込み練習に使う
お問い合わせフォームがある静的サイト（WordPress化なし）をコーディングするケースを想定し、練習サイトにGoogleフォームやphp工房のmail.phpを組み込む練習にも使えます。
作った練習サイトにお問い合わせフォームがなければ、簡単なものを自作し、そこに組み込みます。
もちろん、動作確認もします。
時間を測ってコーディングしてみる
一度やっているデザインカンプなので、正確な速度はでないと思いますが、時間を測ってコーディングする練習にも使えます。
1ページつくるのにどれくらいかかるか、複数ページだったらどのくらいかかるか、などざっくり分かれば、実際に案件が来たときにどれくらいでできるかの指標になります。初見のデザインカンプはもっと時間かかります。
自分の場合、初見のデザインカンプだと自分が想定している1.5倍時間かかると思って時間を見積もります。
EJS, Pugなどでサイトをコーディングしてみる
EJSやPugを使ってコーディングする練習に使えます。
EJSやPugに関しては以下の記事でも軽く紹介してます。
制作案件によってはEJSやPugで実装することもあるので、覚えておいて損はありません。こちらも慣れるまで時間がかかるので、練習サイトで書き方や使い方など慣れておくといいかと思います。
EJSやPugに限らず、新しい言語や知識は、いきなり本番で使わずに練習サイトで実際に使ってみてから本番で使うことをおすすめします。（最近だと、Astroなんかあります）
Gulp、Webpackを導入してコーディングしてみる
GulpやWebpackなどのツールを使って、練習サイトをコーディングするのにも使えます。GulpやWebpackの使い方や導入方法はググればいくらでも見つかるので、それをマネして作ればすぐにできます。
時間に余裕があれば、自分でカスタマイズしてみるのもいいです。
Githubにデータを上げる練習に使う
Githubにコーディングデータをあげる練習に使えます。普段からGithubとコマンドに慣れておくと後述するチーム制作のときに役立ちます。
Githubにデータを上げておくのは、バックアップ代わりにもなるのでおすすめです。
チーム制作の練習に使う
Githubが使えるようになると、チーム制作もできるようになります。複数ページがある練習サイトだとそれぞれ分担できて練習になります。
チーム制作するときは「わざとコンフリクトさせてエラーを解消する」という感じのこともできるので、いい練習になるかと思います。
コードをレビューしてもらう
コーディングしたデータを、有償無償問わずコードのレビューをしてもらいます。フィードバックがきたら改善する。
スクールに通っているなら、講師陣に添削してもらったり、そうでなければMENTAなどを使って添削してもらうのもありです。
自分の書き方があっているかそうでないのか判断が付かないので、「人にコードをみてもらう」というのは大事な勉強です。
まとめ
こんな感じで、コーディングし終わった一つのデザインカンプのその後の使い道について紹介してみました。一つ一つ時間かけてもいいですし、いくつかは同時進行で進めることもできます。
例えば、
- CSSをSassに書き直してSassの使い方に慣れながら、
- CSS設計を意識しながらコーディングして、
- レスポンシブもちゃんとやって、
- JS/jQueryで何かしらの機能を実装し、
- アニメーションも実装し、
- それらをGithubにデータを上げつつ、
- フォームの組み込みも取り入れながら、
- 静的でコーディングできたら、WordPress化し、
- それができたらコードレビューをしてもらう
という感じ。なにか新しいこと、何かしらやってみようと思ったときはいきなり本番でやらずにまずは練習サイトでいじいじする、というのは今でもやっています。
今回挙げたものは一例なので、他にも使い道があると思います。
もちろん、さまざまなデザインカンプをコーディングしてさまざまなデザインパターンに慣れる、数をこなすというのも大事です。
ここまで読んでくださりありがとうございました。