プログラミング

プログラミング学習レポート〜コードを読む〜

こんにちは。tozanです。プログラミングでキャリアチェンジにチャレンジ中です。

今回も、

侍エンジニア塾ってどんな感じのプログラミングスクールなの?

と評判が気になる方に向けて、実際に受講している私の第5週レッスン内容をレポートします。

第5週メニュー
  1. コードを読む
  2. 次回までの課題を確認

4週目までのレッスン内容が気になる方は↓
【侍エンジニア塾】プログラミング学習レポート 第1週
【侍エンジニア塾】プログラミング学習レポート 第2週
【侍エンジニア塾】プログラミング学習レポート 第3週
【侍エンジニア塾】プログラミング学習レポート 第4週

コードを読む

今回のレッスンは、シンプル。書かれているコードを読む

これだけで60分くらいを費やしました。

なぜこの内容になったかというと、インストラクターが、私が書いた自作アプリのコードや質問を見て、「まだしっかりとコードを読めていない」と判断したからです。

正直、図星でした。。。

コードの読み方。

至ってシンプルです。初心者にとっては呪文のように見えるプログラミング言語を、日本語で説明すればOKです。

実際のコード(読めますか?)

function updateTarget() {
    let placeholder = "";
    for (let i = 0; i < loc; i++) {
      placeholder += "_";
      console.log(i);
    }
    target.textContent = placeholder + word.substring(loc);
  }

window.addEventListener("keydown", (e) => {
    if (e.key === word[loc]) {
      loc++;
      if (loc === word.length) {
        word = words[Math.floor(Math.random() * words.length)];
        loc = 0;
      }
      updateTarget();
      score++;
      scoreLabel.textContent = score;
    } else {
      miss++;
      missLabel.textContent = miss;
    }
  });
}

読むとこんな感じ

function updateTarget() {   //アップデートターゲット処理
    let placeholder = "";    //変数プレースホルダーは始めは空(から)
    for (let i = 0; i < loc; i++) { //i がloc より小さい間は、iに1ずつ追加
      placeholder += "_";    //変数プレーホルダーにアンダーバーを追加
      console.log(i);               //iをコンソールに出力
    }
    target.textContent = placeholder + word.substring(loc); 
   //ドキュメントのテキストをプレースホルダーとwordのloc番目以降を合わせて表示
  }

window.addEventListener("keydown", (e) => {  //キーが押されたら、イベント実行
    if (e.key === word[loc]) {         //もし、押されたキーがwordのloc番目と一緒なら
      loc++;                                  //locに1追加して
      if (loc === word.length) {      //もし、loc とwordの文字数が同じになったら、
        word = words[Math.floor(Math.random() * words.length)];
                     //wordをランダムに変更して
        loc = 0;               // locを0に戻す
      }
      updateTarget(); //アップデートターゲット処理を実行
      score++;             //スコアの数字に1足して
      scoreLabel.textContent = score;    //スコアのテキストを上書き
    } else {      //間違ってたら、
      miss++;  //ミスの数字に1足して
      missLabel.textContent = miss;  //ミスのテキストを上書き
    }
  });
}

以上のように、インストラクターが、「では、この行に書いてあることは何ですか?」と問いながら、私が答えていきました。

インストラクターは、コードを読めるようになることが上達への近道だよと教えてくれました。

「そんなの当たり前でしょ」と思うかもしれませんが、

書いてきたコードをプロが見たら、読めているのか、読めているつもりなのかは、一目瞭然ということでしょう。

インストラクターは、受講生の学習習得状況を判断して課題を出してくる。

今回は以上です!

これだけ??とは思わないでください。オンラインレッスンで60分、上記で説明した「コードを読む」練習をしたのです!

頭を使いすぎて、熱をもっているのが分かるくらい疲れましたよ。

インストラクターは笑ってましたけど。

次回までの課題を確認

レッスンがひと通り終わったら、いつものように次の課題確認です。

次週までの課題

1-機能実装
 ・タイピングが終わったら、次の文字がセットされる
 ・楽しい日本語訳が表示される。
 ・次の画像と文字がセットされる
2-MDNの公式サイトで関数を調査する
3-オブジェクトの作り方を予習する

参考サイト

オブジェクトの基本

①やってきた課題に対して、足りていないところを補完するレッスンをする。
②次のステップに向けての課題を出す。

①②の繰り返しでレッスンが進む。

まとめ

いかがでしたか?どのようにオンラインレッスンが行われているかのイメージはできましたか?

インストラクターの教え

①コードを自分の言葉で説明できるようになろう!

②わからないコードは、公式サイトでちゃんと調査しよう!

今回報告した「コードを読む」練習は、すぐに出来るので試してみてください。

さいごに

私が侍エンジニア塾を受講して感じているメリットは、「学習の取捨選択」がサポートされることです。

今回の例で言うと、「これぐらいで良いか」と思って提出したコードを見て、インストラクターが見逃さずに訂正してくれました。

独学だったら、一応動いているし良いか。となっていたはずです。

自分の足りていないところなんて自分ではわかりません。それを指摘して、補完してくれるのがインストラクターなのです。

しかも、「次はオブジェクト指向の習得が必要だから、このサイトで予習して。」などの行動指針が、「迷うという無駄な時間を省く」のです。

もし、プログラミング学習をどのように進めていけばわからない。と悩んでいるのであれば、侍エンジニア塾の受講を検討してみてはいかがでしょうか?

プロのエンジニアが、迷わずに技術習得できる道筋を示してくれますよ。

侍エンジニア塾 無料体験レッスン

関連記事

【オーダーメイドカリキュラムって?】侍エンジニア塾レビュー侍エンジニア塾のオーダーメイドカリキュラムの良さについて説明します。 1:目標が明確になる 2:やりきる状況が生まれる 3:課題解決方法が分かる...
【3社比較】プログラミングスクール無料カウンセリングプログラミングスクール3社の、無料カウンセリング内容を比較します。 各社の話を実際に聞くことで、スクールの特徴や自分との相性が見えてきました。 どこに通うか迷っていたら参考にしてください。...
ABOUT ME
tozan-miyage
アラフォーからプログラミングを学び独立。Webスキルを身につけて、個人で稼ぐ方法を発信します。