プログラミングを習い始めてまだよくわからないのに、メニューバーやらなんやら、何か1つ作るにも必要なコードが多くて大変・・・
そう考えたら、プログラミングって結構めんどくさいかも・・
こんな悩みに応えます。
今回は、めんどくさくないプログラミングの勉強法や、初心者がやりがちな勘違いについての記事。
特に、WEBサイト制作のプログラミングを勉強して稼ぎたい初心者向けに書いた過去記事を読んで、プログラミング勉強をしている人にピッタリの記事かと思います。
- プログラミングがめんどくさくなりにくい勉強法を理由を合わせて解説
- 個別のコードの意味から理解するのはおすすめしないという話
- WEB制作のプログラミングはコードが書けなくてもよいという話
- めんどくささを軽減し効率よく勉強できた方法を3ステップで紹介
私も、WEBサイト制作を始めたときにはメニューバー1つ作るのに何十行もコードを書くってコスパ悪くない？とか思っていました。
というか、そもそも各コードの意味が分からない中で勉強するのはめんどくさいものですよね。
しかし、あなたはそれでもプログラミングを続ける理由があるからこそ、少しでもめんどうくさくない勉強法を知りたい、と考えてこのページにたどり着いたはず。
本記事はそんな方の役に立つ記事になっているので、是非参考にしてくださいね。
また最後にはプログラミングの実務能力がぐんと上がるテクニックも紹介してますので最後まで見てもらえると嬉しいです。
ではいこう！
参考までに、この記事を書いている私は、ランサーズにて平均35,636円を稼ぐことが出来ました(全てWEB制作案件)。
今現在(21年4月)はブログで収益化するのが楽しいのでランサーズは休止しています。
【結論】プログラミングがめんどくさい人はこれをするべし！
まずは結論から。
プログラミングがめんどくさい人は、以下の2つを実践すればOKです。
- プログラミングがめんどくさい初心者にありがちな勘違いを解消する
- 効率のいいプログラミング勉強法を行う
効率のいい勉強法とか、出来れば苦労しないよ！と思われるかもしれませんが、知ってしまえばだれでも出来ることなので大丈夫。
以降で詳しく解説していきますね。
プログラミングがめんどくさい初心者にありがちな勘違い2つを解消しよう
まず初めに、プログラミングがめんどくさいと思う初心者にありがちな勘違いを2つ、解消します。
そんなことより具体的な勉強法を知りたい、と思うかもしれませんが、絶対に知っておくべきことです。
なぜなら、この2つの勘違いは、プログラミングがめんどくさいと思ってしまう人の根底にあるものだから。
私もそうでしたし、プログラミングを始めた普通の初心者は皆勘違いしているはず。
考え方によっては、具体的な勉強法よりもこちらの勘違いをなくす方が重要なので、はじめにしっかりと解消しておきます。
多くの人はプログラミングの本質を知る前にリタイアしている
まず1つ目の勘違いは『個々のコードの意味を先に暗記しなければならない』という勘違い。
具体的には、<div>とか<p>の意味を先に暗記しておかないと理解できない、みたいな勘違いです。
よく英語は単語を覚える前に文章の意味から覚えろと言うと思います。
実はプログラミングも全く同じで、個々のコードの意味よりも、コードのまとまりでどんなことが出来るかを先に知る方が理解が早くなります。
具体的に説明します。
まずそもそも、<div>とか<ul>とか、個々のコードの意味を理解しても何が出来るのか全くイメージできませんよね。
『<div>はまとまり』なんて言われて、すぐに実際のWEBサイトでの活用法を感じ取れる人は多くないはず。私もそうでした。
上記のように、実際にWEBサイトでどんなレイアウトになっている部分なのかが分からない状態でコードの勉強をするのは、めちゃくちゃめんどくさいですよね。
でも例えば、サイトのメニューバーが以下のようなコードの組み合わせで出来ていることを先に知っていればどうでしょう？
<div>
<nav>
<ul>
<li>
<a>hogeoge</a>
</li>
<li>
<a>hogeoge2</a>
</li>
</ul>
<nav>
</div><div>はまとまりを意味するから、メニューバーというまとまりを入れるために一番外側にあるんだな、さらに<ul>は箇条書きって意味だから、項目が並んでいるメニューバーで使われているんだなあと分かります。
実際には、クラス名やID名、<img>など色々なコードが書いてあるはずですが、コードの意味は大分楽しく理解できるようになるはずです。
これは言い換えると『コードの意味は現実のサイトのレイアウトと照らし合わせながら覚えよう』ということです。
つまり、”どのコードがどのレイアウトと対応しているのか”を先に知ることが重要。
もう少しわかりやすく言うと、メニューバーのレイアウトがあって、このメニューバーはこの構造のコードの部分からできているんだ！と理解するってことです。
このように勉強すれば、コードの意味ばかりで完成形がろくに見えない勉強よりもすぐに役に立って、かつ楽しく勉強ができます。
でも多くの初心者は、個々のコードを先に暗記しないとプログラミングを理解できない、という勘違いによって、個々のコードを勉強している段階でプログラミングをリタイアしています。
プログラミングの本質は、コードの意味を知ることではなくコードを使ってレイアウトを作ることです。
英単語を覚えて終わりではなく、英文を作って初めて楽しくなるのと同じです。
個々のコードを先に勉強する必要はない！ということを知っておいてください。
プログラミングが出来るとはコードが書けることではない
2つ目の勘違いは、『プログラミングのためにはコードを自分で書けないといけない』という勘違い。
実はWEB制作におけるプログラミングって、コードを自分で書く必要はありません(かけた方が便利だけど必須ではない)。
なぜなら、WEB制作におけるコードは基本的にテンプレートを作ってコピペ、必要な部分は調べながらコピペだから。
サイトがあふれた世の中なので、自分で新しいシステムを開発するようなプログラマーでなく、主にサイトを作るWEB系プログラマーであればコードの切り貼りが基本的な制作方法です。
なので、1つ目の勘違いの時にも話しましたが、やっぱり重要なのはどのコードがどのレイアウトを作っているかを知ること。
本記事で紹介した2つの勘違いは、初心者なら皆勘違いした状態からプログラミングを始めるといっても過言ではないと思います。
この勘違いをしているかどうかでプログラミング勉強の成否は大きく変わってくるので、絶対に知っておいた方がいいと思い、今回紹介してみました。
以降ではそれを踏まえ、いよいよ効率のいいプログラミング勉強法を具体的に見ていきます。
めんどくささを軽減し効率よく結果を出すプログラミング勉強法【3ステップ】
ではいよいよ、具体的な勉強法を紹介していきます。
結論から言うと、この勉強法はすでに述べた「プログラミング初心者にありがちな勘違い」を改善した勉強法そのままになります。
なのでこの勉強法は、基本的には「それぞれのコードの意味を覚えるのではなく、コードのまとまりとレイアウト(構造)の繋がりを勉強していく方法」です。
座学よりも実践を重視した方法とでも言いましょうか、とにかく結構実務的なことを繰り返す勉強法なので楽しめるとおもいますよ。
ちなみに、本記事ではめんどくさくなりにくいプログラミング勉強を紹介していますが、クラウドソーシングを使って稼ぐまでを実体験に沿って解説した記事もあるので良ければどうぞ。
【ステップ1】動画を使ってコードとレイアウトの繋がりを勉強する
まず、勉強に使うのは動画です。それもすべて無料。
すでに、「どのような構造のコードがどのレイアウトを決めているのかを知ることが何より大事」だとお話ししました。
しかし、いきなり完全なサイトを見ても何もわからないと思うので、まずはすでにある教材を使って基礎の基礎を勉強します。
具体的には、下記のリンクから「ドットインストール」に登録して3つの講座を終わらせるだけ。
会員登録が必要ですが無料なので、おすすめですよ。
- HTML/CSSの学習環境を整えよう [Windows版] (全5回)
- はじめてのHTML (全14回)
- はじめてのCSS (全15回)
これらのコースを1周、しっくりこないなら2週くらいすればOKです。
ただ、やっている最中に注意することが2点。
- コードの意味ではなく、構造を捉えることを常に意識する
- コードの意味や構造について、動画で話していて大切だと思ったことは必ずコード上に直接コメントとして書き残す。
これ自体がめんどくさいと思うかもしれませんが、必ずプログラミング学習全体のめんどくささを軽減し、より早く実務レベルに到達できます。
人間は、わかっていると思っていても言語化できないことがたくさんあります。
よって自分が本当に分かっているのか、言語として書き記すことは重要なのです。
後々分からないことを調べるときにも役に立ちますしね。
上記2点に気を付けながら、大体の雰囲気が分かったら次の勉強に移ります。
この教材は本当に基本だけを説明しているので、完璧にやりこむことはそこまで重要ではありません。ザックリ理解出来たら次に進みます。
いよいよ実務レベルの勉強に入りますよ。
【ステップ2】模写からコードのテンプレを手に入れつつさらに理解を深める
今度はYouTubeにあるいい感じのレイアウトを作る動画を見ながら、模写します。
いきなりレベルアップした！と思うかもしれませんが、ドットインストールで基本を知っていればそこまで難しいものではありません。
例えばこんな動画がよさげですね。
英語かよっておもうかもしれませんが、画面に映るコードを見て、わからなければほんの少しググることで難なく同じものが作れます。
だまされたと思ってやってみてくださいませ。
1個目の勉強法でコードとレイアウトの基本的な関連性は分かっているので、コードを見ても「ああこれね。」という感じで復習しながらコードを書いていけるはずです。
そしてなんといっても、ほんとにいい感じのサイトを自分で作れているというわくわく感や完成した時の達成感は間違いなくめんどくささを軽減します。
実際にプログラムを書いて何かを作っている段階なので、実務とやることが変わらないのも良い点。
たった2ステップ目でもう実務を経験するなんて、めっちゃ楽だと思えるんじゃないでしょうか。
ただ、ここでも先ほどと同様に
- コードの意味ではなく、構造を捉えることを常に意識する
- コードの意味や構造について、動画で話していて大切だと思ったことは必ずコード上に直接コメントとして書き残す。
この2点に気を付けてください。ほんっとうに大事です。
また、動画何本分も作るうちにうれしい特典が2つ手に入ります。それはズバリ、
- レイアウトや機能の名前
- 多量のソースコード
です。レイアウトや機能の名前はわからないことを調べるときに絶対に役に立ちます。
そしてソースコードは、そのまま自分でサイトを作る時のコピペ元になりますし、コメントを書き加えてあるので使いやすい。
私は今でもこのソースコード達に助けられることが多々あるので、必ず行うようにしましょう。
【ステップ3】2か月ほど勉強したら実際の案件にチャレンジしよう
さて、ここまで出来たら後は実際に仕事を受けるだけです。
不安はあると思いますが、あなたは動画を使って実務レベルの勉強をしてきました。
それが理解できているのなら、たとえ実務で分からないことが出てきても自分で調べて解決できるはず。
勇気をもって、オンラインで案件受注が出来るクラウドソーシングで実際の案件を取りに行きましょう。
2大クラウドソーシングサイトはクラウドワークスとランサーズですが、個人的にはランサーズがおすすめ。
理由としてはクライアントの質が高い、報酬もクラウドワークスよりも高めであるという2点です。
ランサーズへの登録やプロフィールの書き方に関しては別記事で詳しく解説しているので読んでみてくださいね。
補足｜プログラミングの実務が速くなる裏技を紹介
最後に、プログラミングの実務が速くなる裏技についても、少しお話しておこうと思います。
今から紹介する裏技、私は正直、案件を受注した後に必要に迫られてやり始めたのですが、逆にどんどんWEB制作の理解が進んだのでお伝えしていきますね。
chromeのデベロッパーツールで目当てのソースコードを覗く
それは、chromeのデベロッパーツールで目当てのページのソースコードを覗くという裏技です。
このツールはGoogle chromeでのみ使用可能で、サイト内のソースコードの見たい部分をクリックするだけで、その部分のソースコードが分かります。
詳しい使い方は別記事で書いていますが、うまく使うことで非常に強力な実務力UPツールになります。
なぜなら、「こんなレイアウトにしたいなあ」と思ったら、そのソースコードがデベロッパーツールでコピーできちゃうんですから。
ちなみにCSSもコピーできますし、ページ内の画像を取り出したり、一時的にコードを書き替えて変化をその場でテストしたりもできます。
【まとめ】プログラミングは本来ただの手段
いかがだったでしょうか。
今回はプログラミングの勉強をできるだけめんどうくさくない方法で出来るよう学習法を紹介しました。
最後に1つ、付け加えておきたいことがあります。
今回は記事の特性上、プログラミングはめんどうくさいものとして扱ってきました。
しかし、本来プログラミングは何かを創るためのただの手段です。
覚えるのは多少大変かもしれませんが、その先には自分のアイデア次第で無限の可能性が広がっています。
何かを描く、作ることと全く同じなのです。
もちろん収入の柱として学習されることの多いプログラミングですが、本来はそういう側面を持ったものであることを、心のどこかにおいて学習してもらえると幸いです。
では今回はここまで。
記事を気に入っていただけたら、
TwitterやYoutubeでも毎日クリエイトしたことを発信しているのでぜひ覗いてみてね！
＼ 毎日学んだクリエイティブを発信中！ ／
＼ 3DCGデザインに興味があるならこれ！／
