プログラミングを上達させる、ロジックから考える勉強方法【脱初心者】

これからプログラミングの勉強を始めようと思っている方へ。

この記事では「ロジックから考えるプログラミング勉強方法」を紹介していきますが、なぜロジックからと言っているかというと、プログラムを一から書ないプログラマ・エンジニアが意外と多いからです。

そんな人はどうやって仕事をしているかというと、ググったり過去の案件からコードを持ってきて、切り貼りするようにプログラムを作っています。

そういう私も業界で10年以上働いてきましたが、就職して3年くらいはコピペプログラマでした。

コピペしかできない状態から抜け出したかったのですが、どうすれば良いかわからない。そんな状態で働きながらプログラミングの勉強を続けていました。

この記事ではこれからプログラミングを基礎から学びたいという人が、そんなコピペプログラマにならないための勉強方法を私の経験から書いていきます。

▼この記事の内容は動画でも話しています。
「逆算思考」を意識する事がプログラミング学習の最短方法

なぜコピペプログラマになるのか？プログラミングが上達しない理由

なぜコピペプログラマになってしまうのかと言うと、以下の2点が大きいように感じます。

なお、コードをコピーして使うことが問題ということではなく、コピペしか出来ない事が問題になります。

仕事を続けていれば徐々に難しい案件をやることが出てきますが、そうなった時に一からコードを書けなければ断るしかありません。

作ることを優先している

本やスクールでもコピペプログラマなってしまう理由は、作ることを優先しているからです。

ほとんどの勉強方法は、文法を勉強してからWebサービスなどのシステムを組み上げる流れで勉強していくことになります。

目に見える形でものを作らないと就職活動もできませんし、その勉強方法に価値が無いように見えるからかもしれません。

しかし、その状態で働き始めるとスケジュールに追われて、今の自分が出来るコピペだけで仕事をすることになります。

ロジックから考える訓練が足りない

本や動画、場合によってはスクールでもプログラミングの勉強は、何かからコードを写して進めていく事が多いです。

どれほどコードを写しても「プログラミング脳」を鍛える事はできません。

一部の人はロジカルな思考が元々できていて、コードを写して進めていくだけでも問題なかったりするのですが、多くの人は意図的に「プログラミング脳」を鍛える必要があります。

それでもなぜ本などでは写経からプログラミングの勉強に入るかと言うと、プログラム言語に慣れるためです。

英語を例にすると、海外行って英語に触れる機会が多ければ、脳が「英語」自体に慣れて学習するための下地ができます。
ただしどれだけ英語に慣れても、英語を喋れるようになるわけでも、英文が書けるようにはなりません。

英語を話せるようになりたければ、脳が「英語」に慣れたら、自分の口で英語を話さなければなりません。沢山、繰り返し、量をこなす必要があります。

プログラミングでも全く同じです。

上達するためのロジックから考えるプログラミング勉強方法

ロジックから考えるプログラミングでは、いきなり手を動かすのはダメです。

まずは頭の中で一つのプログラムを分割して、コードを書く前に日本語で処理を書き出します。

また、プログラミングの勉強ではコードで理解出来ない部分は残さないようにします。
そのために理解できる範囲の小さなコードから、ロジックで作る訓練をしていきます。

例題：クルマを走らせるプログラム

実際にJavaScriptで小さなプログラムをロジックから考えてみます。
お題は何でも良いのですが、「クルマを走らせるプログラム」をJavaScriptで作ってみます。

作りたいプログラムの仕様を考える

まずはプログラムの仕様を考えます。
「クルマを走らせるプログラム」というザックリとした内容から仕様を考えます。

プログラムをトリガーやイベントごとに分割して日本語で書き出す

仕様をプログラムに落とし込む前に、各トリガーやイベントごとに、どういったプログラムを書くのか日本語で書き出します。

ちなみに、これだけだと仕事として考えるとガバガバです。

たとえばスタートボタンを連打するとバグったりもしますが、あくまで訓練なのでそのあたりのクオリティは気にしなくてよいです。

コードを書く＆説明コメントをつけて理解出来ない部分を無くす

書く処理は小さい単位でGoogleで検索しながらコードを書いていきます。

例えばJavaScriptで「ボタンをクリックしたときにイベントを発動させる」など。
その場合自分の理解が出来ないコードが無いようにします。

不明な部分があった場合は、プログラミングを質問できるサイトで上級者に聞きましょう。

teratail
Yahoo！知恵袋

1. HTML要素：クルマ画像・スタートボタンを設置、CSSでレイアウト調整

まずはHTMLとCSSで要素を作っていきます。
今の状態ではボタンを押しても当然なにも起こりません。

<style type="text/css">
.box-kiso {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100px;
  background-color: #cccccc;
}
.box-kiso .btn-start {
  position: absolute;
  left: 10px;
  top: 10px;
}
.box-kiso .img-car {
  position: absolute;
  left: 0;
  top: 50px;
}
</style>

<div class="box-kiso" id="box-kiso1">
  <button class="btn-start">発進！</button>
  <img src="/wp-content/themes/yamato/include/img/car_1.png" alt="" width="80" height="47" class="img-car">
</div>

<script type="text/javascript">
// ここにJavaScriptを書く
</script>

2. 移動トリガー：スタートボタンを押したら『移動イベント』を実行させる

ここからJavaScriptを書いていきます。

まずは「ボタンを押したらアラートが出る」状態を作ってみます。

Googleで「JS イベント クリック」とかで検索していくと、
『ボタン名.addEventListener(‘click’, イベント関数, false);』を使うということがわかります。

またJSでお決まりですが、HTMLの読み込み後に処理を実行するため、
『 window.addEventListener(“DOMContentLoaded”, function(){}』の中で実行します。

HTMLの読み込み後に処理を実行させないと、エラーが出たりします。

[inc file=’kiso2′]

<script type="text/javascript">
(function(){
  // ボタンと画像を変数にいれる。記事にいれる都合上ID部分「#box-kiso2」は貼り付け場所によって変わります。
  var btnStart = document.querySelector('#box-kiso2 .btn-start');
  var imgCar = document.querySelector('#box-kiso2 .img-car');

  // HTMLが読み込まれたらイベント実行
  window.addEventListener("DOMContentLoaded", function(){
    // ボタンがクリックされたらイベント実行
    btnStart.addEventListener('click', startCar, false);
  }, false);

  // クルマを動かす関数
  function startCar (event) {
    // アラートを表示
    alert("クリック！");
  }
})();
</script>

3. 移動イベント：0.05秒ごとにクルマ画像のleftを5pxずつ増やして移動しているように見せる

次はクルマを移動させる処理を書いていきます。
alert()を削除して0.05秒毎にleftの値を5pxづつ増やすことで移動しているように見せます。

[inc file=’kiso3′]

<script type="text/javascript">
(function(){
  // ボタンと画像を変数にいれる。記事にいれる都合上ID部分「#box-kiso3」は貼り付け場所によって変わります。
  var btnStart = document.querySelector('#box-kiso3 .btn-start');
  var imgCar = document.querySelector('#box-kiso3 .img-car');

  // HTMLが読み込まれたらイベント実行
  window.addEventListener("DOMContentLoaded", function(){
    // ボタンがクリックされたらイベント実行
    btnStart.addEventListener('click', startCar, false);
  }, false);

  // クルマを動かす関数
  function startCar (event) {
    // カウント用変数
    var count = 0;

    // クルマをsetIntervalで右に動かす。0.05秒毎に実行
    var loop = setInterval(function(){
      // ループ毎にカウントの値を+5する
      count = count + 5;
      // ループ毎にクルマ画像のleftをcountの値に変更する
      imgCar.style.left = count+'px';
    }, 50);
  }
})();
</script>

4. 停止トリガー：クルマのleftの値が300pxに達したら移動を停止

最後に300px移動したら停止させる処理を追加して終わりとなります。
停止距離は「var stopValue = 300;」で変数化して値を変えたい時にわかりやすくして、ifを使って条件を追加します。

[inc file=’kiso1′]

<script type="text/javascript">
(function(){
  // ボタンと画像を変数にいれる。記事にいれる都合上ID部分「#box-kiso1」は貼り付け場所によって変わります。
  var btnStart = document.querySelector('#box-kiso1 .btn-start');
  var imgCar = document.querySelector('#box-kiso1 .img-car');

  // HTMLが読み込まれたらイベント実行
  window.addEventListener("DOMContentLoaded", function(){
    // ボタンがクリックされたらイベント実行
    btnStart.addEventListener('click', startCar, false);
  }, false);

  // クルマを動かす関数
  function startCar (event) {
    // カウント用変数
    var count = 0;
    // 停止距離用変数
    var stopValue = 300;

    // クルマをsetIntervalで右に動かす。0.05秒毎に実行
    var loop = setInterval(function(){
      // ループ毎にカウントの値を+5する
      count = count + 5;
      // ループ毎にクルマ画像のleftをcountの値に変更する
      imgCar.style.left = count+'px';

      // カウントが300以上になったら
      if(count >= stopValue){
        // インターバルをクリアする　
        clearInterval(loop);
      }
    }, 50);
  }
})();
</script>

小さいコードのプログラムを沢山書く

今回のクルマを動かすようなプログラミングがまだ難しい場合は、もっと小さい単位で「ボタンをクリックしたらアラートを出す」だけのプログラミングなどから入ると良いです。

もしくはループを回して数字をカウントさせるような。

そして、量をこなすことも重要です。
量をこなすことで、ロジックからプログラミングをする事になれていきます。

少しづつ大きいプログラムを書いてみる

全てのプログラミングは、小さなコードから成り立っているため、小さな経験を沢山つむことで規模の大きなプログラミングが出来るようになります。

ロジックからプログラミングをする事になれてきたら、少しづつ規模を大きくしていきます。

プログラムの文法から勉強するなら絵本系がおすすめ

もしプログラムの文法もまだ勉強していない場合は、絵本系の書籍がおすすめです。

初心者向けのプログラム書籍では、イラストが多くページ数が少ないものから入るのをおすすめしています。

分厚い本から入ると、ページ数が多すぎて進んでいる感じがせず達成感が感じづらいためです。

私も初心者の頃、かなりいろいろ本を買いましたが、結局絵本のJavaScriptが一番基礎勉強にはわかりやすかったです。

人気記事