こんにちは、ナナシロです〜。
さて今回は、無料＆最速でプログラミングを習得する方法についてご紹介しますね。
あ！！
なんか商材に誘導したり、怪しげなサービスに誘導したりはしないので安心してくださいね！！笑
あくまで僕の経験則に基づいてのお話です。
この記事は、
- サイト制作系のプログラミングスキルを身に付けたい人
- HTML、CSS、jQuery辺りを書けるようになりたい人
- これから勉強する人も、すでに勉強している人も、一回挫折した人（笑）も
というあなたに向けて書いていきます！
目次
結論から言うと「実際に作ってみる」一択
結論から言うと、プログラミング言語習得を無料＆最速で習得する方法は、
「実際に作ってみる」
に尽きます。
- プログラミング言語を書いてみる
- 簡単なものを自力で作ってみる
- 組み合わせて複雑なものを作る
という流れこそが、無料＆最速ですね。
実際僕もこの流れでやって、バイトの傍らだいたい1ヶ月くらいでWebサイトを作れるようになりました。
では、実例も交えてもう少し具体的に紹介していきますね。
0.事前準備
「お金を稼ぐ」を目的にしない
あなたは何のためにプログラミングを習得しようとしていますか？
お金を稼ぐため？
もしそうなのであれば、勉強に入る前に一度立ち止まっていただきたいです。
これまで数多くのWebサイト制作スキルを身に付けたい人に指導してきましたが、一つはっきりと言えることがあります。
それは、目的が「稼ぎたいから」オンリーの人は、ほぼ間違いなく挫折するということ。
副業やフリーランスになる等、食っていくための手段としてプログラミング言語を勉強する人はとても多いですが、プログラミング言語って「手段の手段」なんですよね。
お金を稼ぐ手段としてWebサイト制作があり、
Webサイト制作をおこなう手段としてプログラミング言語がある。
プログラミング言語を学んだらいきなりお金になるわけではありません。
あなたが今飛び込もうとしているプログラミング言語の勉強は、言うなれば筋トレと同じです。
筋トレは大変だから嫌だ。
サプリとかでうまいことボディメイクできないかな〜。
という人は、ぶっちゃけWebサイト制作向いていないのでやめたほうがいいです。
目的から習得する言語を決める
そしてもう一つ忘れてはいけないのが、
目的を決めた上で、その目的に適う言語を習得すること。
要するに、目的を持たずに勉強をし始めないということですね。
筋トレを例にして考えましょうか。
まずお聞きしたいですが、
筋トレしたらどうなるか分からないけど、とりあえず筋トレしよう！
なんてこと、ないですよね。笑
ダイエットのためとか、ボディメイクのためとか、必ず目的があってやりますよね。
プログラミングも同じです。
jQuery勉強したらどうなるか分からないけど、とりあえずjQuery覚えよう！
っていうのは、ありえないんですよね。笑
あるいは、
尊敬するエンジニアの●●さんがjQueryは勉強した方がいいって言っていたからやろう！
とか、
できるだけ使える言語が多い方が仕事取れそうだから、jQueryを勉強しよう！
というのも、あかんですね。笑
まず、気になる言語があるのなら、それを使って何ができるかを調べる。
その中で作れるようになりたいものを目的に設定すると良いです。
例えばjQueryを例にするなら、まず言語を調べてみて、
ちょっとしたアニメーションとか動きをつけることができるようになるのか……
あ、レスポンシブやるのにもjQueryの知識が必要なんだ。
それに、スライダーとか画像がポップアップするのとか、ああいうのもjQueryで作れるんだ〜。
ということが分かったら、
クラウドソーシングのお客さんの要件で比較的多いレスポンシブ対応やスライダー設置をできるようになるためにjQueryを勉強しよう！
と目的を設定する。
すると、勉強している最中に
jQuery勉強してみたら結構難しいし、なんかモチベーション下がってきたな〜。
ってか、そもそもなんで勉強していたんだっけ……？
と、立ち止まることがなくなります。
1.プログラミング言語を書いてみる
さて、学ぶ目的や学ぶとどうなるかがイメージできたら、次は実際触ってみましょう。
プログラミング言語を触ってみる上でおすすめなのがオンライン学習サービスの利用。
もちろん本を読んで勉強するのもありですが、すべてオンラインで済むと手軽です。
このフェーズで一番重要なことは、楽しさを見つけること。
事前準備のフェーズでも書きましたが、プログラミング言語は筋トレと同じです。
きつい筋トレをこなすために必要なのは、筋トレしたらどうなるかのイメージを膨らますことと、筋トレそのものを楽しめるようになること。
というわけで、まず言語の面白さを学ぶのにおすすめなのがprogateというサービス。
ここで、まずは勉強したいプログラミング言語を触ってみましょう。
あれ？思ったより簡単じゃん
と思った人いるかと思いますが、progateはぶっちゃけゲームです。
サッカーゲームの名作「ウイニングイレブン（通称：ウイイレ）」ってご存知ですかね？
好きな人多いと思うんですけど、
progateがウイイレなら、プログラミング言語の学習はガチのサッカーの試合です。
ウイイレが上手いからといって、サッカー選手になれるわけではありませんよね？笑
それと同じで、progateをマスターしたところで、プログラミングが実務レベルで習得できるわけではありません。
なので、progateはあくまでプログラミングの楽しさを知る入り口に利用してください。
もう少し発展した実践的な内容を学びたい人は、ドットインストールで学ぶと良いと思います。
ドットインストールは、講座形式で先生が動画内でプログラミング言語を書きながら説明してくれるので、授業を聞くのが得意な人はありだと思います。
（ただ、ドットインストールも結局は座学で、お勉強って感じなんですよね〜。）
2.簡単なものを自力で作ってみる
フェーズ1までは自力でできる人が多いんですけど、大事なのはこのフェーズ2からです。
ゲーム感覚でプログラミング言語を触ってみたら、もう実際自分の手で作ってみましょう。
え！いや、もうちょっと勉強しないと、まだ何がなんだか……
という気持ちですか？笑
OK、ではちょっとだけ僕の祖父の話をさせてください。
僕の祖父、国際電話の交換手をやっていた時期があるらしいんですが、この仕事って要するに通訳業なんですよね。
そのために英語を覚えたらしいんですけど、彼の英語の覚え方は
「辞書を1ページ覚えるごとに破って捨てる」
というものでした。
このエピソードで何が言いたかったかというと、
「人間は教材や先生があると自力で覚えようとしなくなる」
ということ。
なので、この時点で
誰かから教えてもらおう
教材とか書籍から学ぼう
という受け身スタンスはやめてください。
プログラミングを覚えて物を作るのは他ならぬあなたです。
いくらウイイレが上手くてもサッカー選手にはなれません。
……それでは改めて。
あなたは今から、覚えたてのプログラミング言語で簡単なものを作ります。
とはいえ、「自力で簡単なものを作れ」と言われてもちょっとイメージ湧かない人もいるかもしれないので、具体例を出しますね。
例えばCSSであれば、
ある要素に背景色をつける
例えばjQueryであれば、
要素をクリックするとアラートが出る
など。
最初は「一行の記述でできること」くらいがいいと思います。
実際に僕が書いたものを下に載せておきますね。
まずはCSSの方。
See the Pen writing-css by Nanashiro (@nanashiro1988) on CodePen.
次にjQueryの方。
See the Pen VwwPqNV by Nanashiro (@nanashiro1988) on CodePen.
良かったらあなたも一緒にやってみてください。
僕は初めてプログラミング言語を勉強したときに、これだけのことでもいたく感動しました。笑
3.組み合わせて複雑なものを作る
さて、フェーズ2でCSSとjQueryを使って試してみました。
今度はそれらを組み合わせて、少し複雑なものを作ってみましょう。
今回の例では、
「ボタンをクリックするとページ全体の背景色が赤くなる」
というものを作ってみましょうか。
実際僕が作ったものを載せておきます。
「ここ」をクリックすると赤くなります。
See the Pen writing-css&jquery by Nanashiro (@nanashiro1988) on CodePen.
さて、ここでポイントになることが2つあります。
- ただ組み合わせるだけでなく少し変化を加える
- できるだけ面白そうなものを作る
です。
思考停止状態で、
さっき作ったものを2つ合わせればいいや〜
とやってしまうと、学びの機会が一つ減ってしまいます。
2つ合わせたときにも多少の工夫をすることで、新たな学びになります。
今回の例で言うと、
「ページ全体の背景色」
という部分が工夫ですね。
これを経ることで、
ページ全体の背景ってどうやって指定すればいいんだ？
という疑問が解決します。
また、面白そうなものを作ることも大事です。
ワクワクするようなものを作れば、他人に見せたくなるじゃないですか。
教科書なぞっただけだとそういう気分にもなりません。
なので、できるだけワクワクするものを作りましょう。
ここで白状しますが、さっき作ったやつだとまったくワクワクしないので（笑）、ちょ〜っとだけワクワク要素を足しましょう。
- 電気のスイッチのように「ON」と「OFF」を設置
- 「ON」と「OFF」をボタンっぽいデザインに
- 「ON」をクリックするとページ全体の背景色が黄色に、文字色が黒に
- 「OFF」をクリックするとページ全体の背景色が黒に、文字色が黄色に
という感じにしますかね！
なんかちょっとおしゃれ！笑
では、それを実現するとこんな感じ。
See the Pen room-switch by Nanashiro (@nanashiro1988) on CodePen.
どうですか？
ちょっとした工夫ですが心が踊りますよね。
この「心が踊る」というのが、あながち馬鹿にできないんですよ。
筋トレ大好きマンが鏡でわざわざ自分の姿をチェックするのは、筋肉がついて良い形になった自分の体を見て心が踊るからなんです。
プログラミングの学習でも心が踊るようにやっていきましょう。
4.フェーズ2と3を繰り返す
あとはもう2と3をひたすら繰り返すだけです。
ちなみに僕は、jQueryやWordPressが完全に自学自習で、書籍もオンライン学習サービスも一度も使ったことがありません。
ただワクワクして毎日ちょっとしたものを作っては、周りの人に
面白いでしょ？すごくない？w
と見せていました。
ポイント：ググり力を高めよ！
さて、今回紹介した無料＆最速でプログラミングを習得する方法ですが、これを捗らせるために意識すべきことが一つあります。
それは「ググり力を高める」ということ。
自力で取り組むためには、自力で調べる能力が必須です。
Webサイト制作系の言語は学習者が世界中にめちゃくちゃ多いので、必ず誰かが知見をブログ記事等で書いています。
僕の経験則では、初心者がHTML、CSS、jQueryの学習でつまずくことは、ほぼ100%ググれば解決します。
この「ググり力」についてもいろいろ書きたいことがあるんですが、今回の本題とは逸れるので別途記事にしようと思います。笑
最後に
最後になりますが、途中何度も口すっぱく言ってきたことを再び繰り返しますね。
「あなたがプログラミングを習得をする目的はなんですか？」
お金を稼ぎたいから？
それは飛躍していますよ。
あなたは今、Webサイト制作をするためにプログラミング習得という筋トレをしているんです。
その目的を見失ってはいけません。
プログラミングはあくまで手段です。
お勉強自体が目的になってはいけません。
言語を頑張って覚えても、作るものがなかったら、作りたいものが作れなかったら、まるで意味がありません。
そして、プログラミング習得という筋トレそのものも、楽しんでおこなっていきましょう。
できることが増えるたびに、鏡で自分のプロポーションを確認して惚れ惚れしましょう。
それでは、筋トレ頑張ってください！（違