2018.08.02(更新日:2018年8月11日)プログラミングこれからプログラミングの勉強を始めようと思っている方へ。この記事では「ロジックから考えるプログラミング勉強方法」を紹介していきますが、なぜロジックからと言っているかというと、プログラムを一から書ないプログラマ・エンジニアが意外と多いからです。そんな人はどうやって仕事をしているかというと、ググったり過去の案件からコードを持ってきて、切り貼りするようにプログラムを作っています。いう私も業界で10年以上働いてきましたが、就職して3年くらいはコピペプログラマでした。コピペしかできない状態から抜け出したかったのですが、どうすれば良いかわからない。そんな状態で働きながらプログラミングの勉強を続けていました。この記事ではこれからプログラミングを基礎から学びたいという人が、そんなコピペプログラマにならないための勉強方法を私の経験から書いていきます。プログラムの文法から勉強するなら絵本系がおすすめなぜコピペプログラマになるのか?プログラミングが上達しない理由なぜコピペプログラマになってしまうのかと言うと、以下の2点が大きいように感じます。作ることを優先しているロジックから考える訓練が足りないなお、コードをコピーして使うことが問題ということではなく、コピペしか出来ない事が問題になります。仕事を続けていれば徐々に難しい案件をやることが出てきますが、そうなった時に一からコードを書けなければ断るしかありません。作ることを優先している本やスクールでもコピペプログラマなってしまう理由は、作ることを優先しているからです。ほとんどの勉強方法は、文法を勉強してからWebサービスなどのシステムを組み上げる流れで勉強していくことになります。目に見える形でものを作らないと就職活動もできませんし、その勉強方法に価値が無いように見えるからかもしれません。その状態で働き始めるとスケジュールに追われて、今の自分が出来るコピペだけで仕事をすることになります。ロジックから考える訓練が足りない本や動画、場合によってはスクールでもプログラミングの勉強は、何かからコードを写して進めていく事が多いです。どれほどコードを写しても「プログラミング脳」を鍛える事はできません。一部の人はロジカルな思考が元々できていて、コードを写して進めていくだけでも問題なかったりするのですが、多くの人は意図的に「プログラミング脳」を鍛える必要があります。それでもなぜ本などでは写経からプログラミングの勉強に入るかと言うと、プログラム言語に慣れるためです。英語を例にすると、海外行って英語に触れる機会が多ければ、脳が「英語」自体に慣れて学習するための下地ができます。どれだけ英語に慣れても、英語を喋れるようになるわけでも、英文が書けるようにはなりません。英語を話せるようになりたければ、脳が「英語」に慣れたら、自分の口で英語を話さなければなりません。繰り返し、量をこなす必要があります。プログラミングでも全く同じです。上達するためのロジックから考えるプログラミング勉強方法ロジックから考えるプログラミングでは、いきなり手を動かすのはダメです。頭の中で一つのプログラムを分割して、コードを書く前に日本語で処理を書き出します。プログラミングの勉強ではコードで理解出来ない部分は残さないようにします。そのために理解できる範囲の小さなコードから、ロジックで作る訓練をしていきます。まとめると作りたいプログラムの仕様を考えるプログラムをトリガーやイベントごとに分割して日本語で書き出すコードを書く&説明コメントをつけて理解出来ない部分を無くす小さいコードのプログラムを沢山書く少しづつ大きいプログラムを書いてみる例題:クルマを走らせるプログラム実際にJavaScriptで小さなプログラムをロジックから考えてみます。お題は何でも良いのですが、「クルマを走らせるプログラム」をJavaScriptで作ってみます。作りたいプログラムの仕様を考えるまずはプログラムの仕様を考えます。「クルマを走らせるプログラム」というザックリとした内容から仕様を考えます。クルマは画像をつかうクルマは右に向かって動かすクルマのスタートにはボタンを使う300px移動したら停止させるプログラムをトリガーやイベントごとに分割して日本語で書き出す仕様をプログラムに落とし込む前に、各トリガーやイベントごとに、どういったプログラムを書くのか日本語で書き出します。移動トリガー:スタートボタンを押したら『移動イベント』を実行させる移動イベント:0.05秒ごとにクルマ画像のleftを5pxずつ増やして移動しているように見せる停止トリガー:クルマのleftの値が300pxに達したら移動を停止ちなみに、これだけだと仕事として考えるとガバガバです。スタートボタンを連打するとバグったりもしますが、あくまで訓練なのでそのあたりのクオリティは気にしなくてよいです。コードを書く&説明コメントをつけて理解出来ない部分を無くす書く処理は小さい単位でGoogleで検索しながらコードを書いていきます。JavaScriptで「ボタンをクリックしたときにイベントを発動させる」など。その場合自分の理解が出来ないコードが無いようにします。不明な部分があった場合は、プログラミングを質問できるサイトで上級者に聞きましょう。HTML要素:クルマ画像・スタートボタンを設置、CSSでレイアウト調整まずはHTMLとCSSで要素を作っていきます。今の状態ではボタンを押しても当然なにも起こりません。HTMLとCSSでやること画像とボタンが入るボックスをつくる。画像をimg要素で置く。スタートボタンをbutton要素で置く。今回はleftの値をプログラムで動かすのでleftの初期値は0に。移動トリガー:スタートボタンを押したら『移動イベント』を実行させるここからJavaScriptを書いていきます。「ボタンを押したらアラートが出る」状態を作ってみます。false);』を使うということがわかります。function(){}』の中で実行します。HTMLの読み込み後に処理を実行させないと、エラーが出たりします。ボタンと画像を変数にいれる。記事にいれる都合上ID部分「#box-kiso2」は貼り付け場所によって変わります。移動イベント:0.05秒ごとにクルマ画像のleftを5pxずつ増やして移動しているように見せる次はクルマを移動させる処理を書いていきます。alert()を削除して0.05秒毎にleftの値を5pxづつ増やすことで移動しているように見せます。ボタンと画像を変数にいれる。記事にいれる都合上ID部分「#box-kiso3」は貼り付け場所によって変わります。クルマをsetIntervalで右に動かす。最後に300px移動したら停止させる処理を追加して終わりとなります。300;」で変数化して値を変えたい時にわかりやすくして、ifを使って条件を追加します。ボタンと画像を変数にいれる。記事にいれる都合上ID部分「#box-kiso1」は貼り付け場所によって変わります。クルマをsetIntervalで右に動かす。}})();</script>小さいコードのプログラムを沢山書く今回のクルマを動かすようなプログラミングがまだ難しい場合は、もっと小さい単位で「ボタンをクリックしたらアラートを出す」だけのプログラミングなどから入ると良いです。ループを回して数字をカウントさせるような。量をこなすことも重要です。量をこなすことで、ロジックからプログラミングをする事になれていきます。大きいプログラムを書いてみる全てのプログラミングは、小さなコードから成り立っているため、小さな経験を沢山つむことで規模の大きなプログラミングが出来るようになります。ロジックからプログラミングをする事になれてきたら、少しづつ規模を大きくしていきます。プログラムの文法から勉強するなら絵本系がおすすめもしプログラムの文法もまだ勉強していない場合は、絵本系の書籍がおすすめです。初心者向けのプログラム書籍では、イラストが多くページ数が少ないものから入るのをおすすめしています。分厚い本から入ると、ページ数が多すぎて進んでいる感じがせず達成感が感じづらいためです。私も初心者の頃、かなりいろいろ本を買いましたが、結局絵本のJavaScriptが一番基礎勉強にはわかりやすかったです。おすすめのプログラミングスクール】未経験者が本気でWebエンジニアになるにはこちらの記事もおすすめです【おすすめのプログラミングスクール】未経験者が本気でWebエンジニアになるにはプログラミングの入門におすすめの言語。初心者には学習コストの低さも大事!プログラミングで挫折しそうな人は勉強方法を見直そうプログラミングでコツがつかめない理由【初心者が中級者になるには】プログラミングを始めるのに年齢は関係あるのか?就職・転職はできる?TweetSNSでもご購読できます。TwitterでフォローするFeedlyでフォローするYamatoフリーランスのフロントエンドエンジニア(得意分野:WordPress・JavaScript・HTML・CSS)Web制作会社で10年間働いた後、現在はフリーランスで活動をしています。このブログでは以下のことを書いています。【フリーランスの単価の決め方】単価の考え方とやってはいけない決め方ブログのアクセスが増えない理由。