昨今のリモートワークブームで自宅で出来る仕事をさがしてWebサイト制作やコーディングを学習しようと思っている人も多いと思います。
ウチノコーディングって独学で大丈夫かな？
ウチノスクールなんて高そうだし、出来るかどうかわからないからまだお金かけたくないなぁ･･･
という過去の自分も悩んでいたひとりです。
奥さんに相談した際にも不安を口にされました。
ふぅあんそんなことできるのかにゃ？
この反応は当然です。収入が減るのは誰だって怖いですからね。
でも、安心してください。私の経験上、独学は可能です。
ただ向き不向きはありますし、身につけた技術でお金にしていく、それを継続していく、というのは独学でスキルを身につけるのとはまったく別の話です。
現役でフリーランスコーダーとして生活している私がどんなふうに学習をしていたのかを、実際の経験を踏まえて解説します。
どうしようかな？って考えている人は少し時間お付き合いいただければと思います。
逆に｢スクールを使って最短でお金を稼ぎます！｣って人は読まなくても大丈夫です（笑）
Webコーディングの独学ってどうすすめるの？
学習を始めるとなると自分の時間を注ぎ込まなくてはいけません。だからできるだけムダな時間は使いたくないですよね。
ただそうはいってもスクールや教材にお金をつぎ込むのはためらってしまう。
こんな気持はよくわかります。わたしもそうでしたから。だから一旦独学で始めて向いてるかどうかを最低限の出費で確認してみるのがオススメです。
Webコーディングの独学ってどれくらい時間がかかるの？？
ウチノこれは人によります。
いきなり答えになっていませんが、1日に時間がどれほど確保できるかによって変わりますし、どんな知識や経験（PCの扱いになれているかどうか）があるかによっても変わります。
私の場合はワードやエクセルで書類を作れますっていうレベルからのスタートでした。
そこから約1年半学習しました。ペースは平日は2,3時間で土日は10-13時間程度やっておりました。
こんな人もいるくらいで参考にしてもらえればと思います。
ただ、まわりの人と自分のスピードを比べてもなんのメリットもありません。
昨日より新しいことができるようになったと、自分にフォーカスしたほうが健全に学習を進められます。
Webコーディングの独学ってまずはなにから始める！？
このページを読んでいる方はご自身でWebサイト制作でお金を稼いでいこうと考えている人だと思うので当然パソコン操作には慣れている方が多いでしょう。
次にWebコーディング学習を始めるにはどんなことをすればいいのか？ということですが、私は本を買って独学を始めました。
ウチノ3回テキストを繰り返して学習したけど全然わからん！
こんな感じで全然自信なんか付きませんでした。
そんなときXで流れてきた情報にあったProgateのHTML&CSSコースを1ヶ月だけ学習しました。
やってみると自分の書いたコードが実際の画面に反映されることが楽しく当時思っていた以上に楽しかったですね。最終的にHTML&CSS道場編まで取り組みました。
もちろんProgateをしている間も、｢わからないなぁ｣とか｢全然理解できてないなぁ｣と思うことはありました。それは苦しいことでしたがそれを理由にもう無理！とはなりませんでした。
もしProgateが楽しくないなぁと思う人であればこの時点でやめると思います。
良い悪いではなく、向き不向きの話で、やめる判断は一つの決断だと思いますので、そういう方は別の次の道へ進みましょう！
Webコーディング学習 初期編
Progateが終わった人は、本や動画などで学習をすすめながら模写（デザインカンプからのコーディング）に取り組んで簡単なサイトを作っていくのがいいです。
ただ、本や動画と言われてもどんなものが自分に向いているかは誰にもわかりません。
先程も書きましたが、最初に買った本が難しくて心が折れそうになり、自分には向いてないんだ！などと思ったことを覚えています。
だけど難しいから自分は向いてないとか考える必要はなくて、その本が合わなかっただけかもしれません。
最初の1冊として
今の私がオススメするなら
こちらの本ですね。
コーディングに入る前に用語の解説などもあり初学者に優しい作りです。
テキスト途中からサイトを作成していく過程は本当に勉強になりました。読み終わったあとも何度も開いて確認しました。
著者のManaさんの本はどれもわかりやすく、初心者目線に立っており理解しやすくてかなりオススメです。
教材のサンプルデータもデザインがおしゃれですし、説明がわかりやすく何より学んでて楽しくなりました。
とにかく模写
実際に仕事を受ける際はデザインデータを受け取ります。それをデザインカンプと呼ぶのですが、
この流れを模して架空サイトのデザインカンプなどを手本にコードを組み立てていくことを模写といいます。
Manaさんの本を学習したあとは模写を10サイトくらいすることを意識しておりました。
時間はかかりますが、最初の模写が完成したときなどは本当にうれしかったですね。
模写用にデザインカンプを無料で配布しているサイトもいくつかあるのでやってみたいと思った方を利用してみると良いでしょう。
それぞれ初級からはじめてデザインファイルから画像を取得したり、フォント周りの数字を把握したりする方法もこのときに学べます。
合わせてHTMLやCSSなどの言語学習とともに、OSの操作やChromeブラウザ、VSCodeのショートカットやトラックパッドの使い方、制作したコードを使い回せるものは保存しておくなど時短できるものも同時に取り組み始めました。
といっても始めは机の上に上でショートカット一覧を貼り付けて直ぐに確認できるようにしていただけですけどね。
言語学習以外にも学ぶことはたくさんあります。一歩ずつ慣れていきましょう。
Webコーディング学習 中級編
模写ってどこまでやるの？
ここでは模写するサイトに動きがついているサイトを構築するレベルを想定しています。
動きをつけるにはJavaScriptやjQueryなどが必要になってきます。
さらにこの頃では、デザインカンプの内容もページが増えてきます。
そうなるとCSSが滅茶苦茶になって一つ修正すると別の箇所がくずれるなんてカオスな状況（体験談）になります。
このあたりで、それぞれの項目を深堀りするテキスト（後ほどご紹介します）を読んでいくのがいいでしょう。
JavaScriptやjQueryを学ぶなら
サイトに動きをつけるのが目的のJavaScriptやjQuery。実務でもよく使う機能を学ぶことをメインに考え以下の2冊の本がおすすめです。
前に紹介した「1冊ですべて身につく HTML&CSSとWebデザイン入門講座」とおなじManaさんが書かれた本でこちらもわかりやすくてやっぱりサンプルデータもおしゃれです！
JavaScriptの本はどうしても難しくなりがちで苦手意識がある方も多いと思いますが、この本はわかりやすくテンポよくすすめることができました。
Webサイトでよく使われている簡単なアニメーションなどすぐに使いたくなるものもたくさんあります。
これからJavaScriptを学ぼうとする人の１冊目にピッタリですね！
jQueryはJavaScriptのライブラリなのでJavaScriptができれば問題ないんじゃないのと思う方もいるかもしれません。
ただこの先WordPressを学ぶならjQueryを利用していますし、修正作業などjQueryで構築されたコードを読めたほうが便利なのでさらっと流す程度に学習はしておいて損はないと思います。
ページが増えるといつもCSSが大変だけどどうすればいいの？？という方へ
おそらくそういう方の問題点はクラス名の付け方とそのクラス名につけるCSSの内容です。
そういう方にオススメのCSS関連の本を2冊ご紹介します。
Sassを使うとファイルを分割して管理することができます。一つの部品として捉えることによってCSSの管理がスッキリします。さらに関数やミックスインなど便利な機能もあり全体の記述を削減させることもメリットです。
絶対に必要ではないですが、制作会社でもSassは使っている所も多く対応できたほうが幅は広がりますね。
同時にCSSで必須の考え方である、CSS設計を学ぶことによって中規模サイトを構築する際のクラス名をどうするか、破綻しないためのCSSの設定方法などの考え方を身につけることができます。
上記の本でBEMなどのCSS設計を学んでおくと、崩れにくく他の人がみてもわかりやすいコードの基本を学ぶことができます。
コーディングを全体的にレベルアップさせたいと思った方へ
ある程度模写が出来るようになった人向けに、さらにコーディングのレベルを底上げできる本をご紹介します。
テキストを読んで、学習して模写をしても、｢これってなんでこうなるんだ？｣ってことはあると思います。
そういうことを減らしたいと思ったタイミングで手に取ればいいでしょう。
内容がHTMLに絞られて深く解説されています。自分が読んだタイミングは少し実務をこなしてからのことでしたが、充分すぎるくらい勉強になりました。
例えば私は相対パスと絶対パスの部分が苦手で理解しきれてなかったのですが、例えの説明がわかりやすいので、それまでのぼんやりとしたイメージがハッキリと理解できました。
この本もしっかりと長く向き合え、辞書的な使い方がおすすめの１冊です。
上記の本も自分の幅を広げるために良い1冊でした。
コーディングを始めていくと普段サイトを見ていてもどうやって構築しているだ？ってなるときがあると思います。
そのときにこうやっているのかなとイメージできる引き出しを増やすのに役立ちました。
本の表紙にも｢サンプルをひたすらコーディング練習｣と書いてあるだけあって、記載されているパターンも多く、 実務でも使われるデザインもあり、こういうやり方があるのかと考え方に幅ができました。
WordPressの学習するなら
WordPressのオリジナルテーマ作成は、これがオススメと一つに絞ることはできません。
それは私が3冊、テキストを読んでもまったく理解できていなかったからです。
本を3冊読んだあと、Udemyでたにまこさんの「ちゃんと学ぶ、WordPress テーマ開発講座」を購入しずっと聞き続けてやっと基本的な構築ができるレベルになりました。
そして実務になればわからないところをピンポイントでじゅんぺいさんのブログで学びながら対応していました。
Webコーディング学習 実務直前編
ここまで進んでくるとそろそろ実務にチャレンジすることも検討できる段階だと思います。
実務に踏み出すきっかけってなんだろうって思いませんか？
コーディングでの卒業試験として
オススメしているのは有料でのレベルの高い模写に進むことです。
例えばCodejump proにあるプレミアムプランなどです。
その理由は
- 疑似案件として事前に雰囲気を体験できる。
- 自分が作成したサイトをチェックしてもらえる。
- お金を払うことによって緊張感が生まれる。
以上の理由からとてもいい経験になります。締切や仕様書があることで案件のイメージもしやすいでしょう。
さらに自分の現在地を知るうえでもいいと思います。
うまくいかなければどこがうまくいかなかったのか確認して、そこを深ぼる学習をするか、もう一度別のプレミアムプランに申し込むなどすればいいと思います。
他にもしょーごさんがブログで販売されているコーディング教材も先ほどと同じ理由でオススメです。
こちらのWordPress実案件レベルとPhotoshopのデザインカンプの即戦力編は私もお世話になりました。フィードバックもいただき、営業始めの頃はポートフォリオにも記載していました。
サーバーとの契約
実務で依頼を請けた後、制作したサイトを最終確認してもらうには自分用のサーバーがあったほうが便利です。
なぜなら、公開前ならBasic認証は必須ですし、サーバー周りの勉強になるからですね。自分のサーバーとお客様のサーバーをさわるとなると緊張感が段違いです。
もちろん、サーバーまわりの作業は必須ではありませんが、今後営業のアイテムとしてポートフォリオをみてもらったり、自身のサーバーで試したりとサーバーをもっていれば話ははやいですね。
実務で大手のサーバーでは作業しましたが、細かい設定方法などの違いはありますが、大きく使い勝手が変わることは有りませんでした。（全く同じということでは有りません）
どこのサーバーを検討すればいいのかとなりますが、私はたにまこさんの動画で利用されていたエックスサーバー
を使っています。使いやすくてオススメです。
WordPressの導入が簡単であること、アフターフォローが評判がいいなどの理由から選んでいただければいいんじゃないかと思います。
途中で挫折しそうになったら
Progateは楽しかったけど、模写を続けているうちに複雑になってきて楽しくなくなってきたよ。なんていう人もいると思います。
ただ理由にもよりますが、途中でやめてしまうのはもったいないかなぁと思います。
もし辞める理由が、理解が追いつかない、自分には難しいという理由であれば少し待ってほしいです。
なぜなら私もわからないことだらけでしたが、わからないなりに進めていくと突然、点と点がつながる瞬間があります。そのときはテンションが上ったことを覚えております。
他にも、やる気が起きない、モチベーションが続かない、など色んな理由があるとおもいます。
そんな方であれば、独学している仲間をさがすことを検討してもいいのではないでしょうか？
仲間がいる環境であれば、気づかないうちに継続力がアップしますしね。
結局お金かけるのかよって思った方もいるかも知れませんが、そのほうが向いている人もいるでしょう。
いろんな副業をがんばっている方が多くいらっしゃるリベシティや、学習初期であればデイトラ
をはじめとしたコミュニティがある学習サイトなどでモチベーションを維持していくことはいいと思います。
まとめ
ここまでWebコーディングで独学を考えている方に向けてどんなステップで学んでいけばいいかを書いてきました。
この記事を読んで、自分も取り組んでみようと思うきっかけになればうれしいです。
最後にここまで読んでいただいたあなたに白状します。
実は私は一度挫折して勉強をやめています。
それでも5年ほど経って突然再開しました。
その理由は、当時の生活（特に職場環境）から開放されたかったからです。
やはり自由は捨てきれなかったんです。
あなたにも学習を始めようと思った理由があるはずです。
その理由を学習のエネルギーにしていただければと思います。
