プログラミング

【侍エンジニア塾】現役エンジニアのコードレビュー

僕が受講している侍エンジニア塾は、インストラクターがマンツーマンレッスンしてくれることが特徴のプログラミングスクールです。

これから、プログラミングを学びたい。侍エンジニア塾のレッスンってどんな感じだろう?と興味をもっている方は、ぜひ参考にしてください。

この記事を読むと分かること

  • 侍エンジニア塾レッスン2回目の内容
  • 現役エンジニアが教えてくれた「現場で役立つコードの書き方」

レッスンの進み方

Skypeで画面を共有しながら進めていきます。Skypeでインストラクターとつながっていれば、画面の共有の仕方を教えてくれますので、その通りにパソコンを動かしていけば、レッスンが受けられます。

しかも、Atomというコードエディターは、遠隔操作もできる設定なので、僕の書いたコードを、インストラクターが操作して直していくという方法でレッスンが進みました。

独学では学べなかったコードの書き方をレクチャー

これまでの経緯

  1. レッスン1回目で、インストラクターと最終目標の確認
    ・PHPの技術を習得して、就職する
  2. 次回までの課題
    ・HTMLを自分で書いてくる

レッスン1回目の詳しい内容は、以下をどうぞ。

レッスン2回目の内容は、HTMLのコードレビューでした。前回のレッスンで、「僕が独学で模写したサイト」があることを伝えていたので、これをインストラクターが添削していくという形でレッスンが進みました。

僕の書いたコードは以下です。(パーっと流し見してください。)

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <title>isara copy</title>
</head>

<body>
  <header>
    <div class="top-rapper">
      <div class="top-left">
        <p>バンコクのノマドエンジニア育成講座</p>
        <img src="./img/isaralogolarge.png" alt="isara" width="110px" height="45px">
        <div class="top-right">
          <img class="siryouseikyu" src="./img/116593.png" alt="資料請求" width="30px" height="30px">
        </div>
        <p>資料請求</p>
      </div>
    </div>
  </header>
  
  <div class="main-title">
    <div class="main-senter">
      <h3>プログラミングで<br>人生の安定を手に入れよう</h3>
      <img src="./img/isaralogolarge.png" alt="isara" width="400px" height="120px">
      <h4>バンコクのノマドエンジニア育成講座<br>iSara[イサラ]</h4>
    </div>
  </div>
  <div class="info">
    <p>まずは20日間で、</p>
    <p>月10万円稼げるスキルを手に入れよう</p>
    <p class="pmain">※受講料金は実質0円です。詳しくは資料請求をどうぞ</p>
    <div class="info-main">
      <div class="info-sub">
        <p>お問い合わせ&資料請求は<br>こちら</p>
      </div>
    </div>
    <p>第5期生:2019年4月8日 ~ 2019年4月27日</p>
    <p>*締め切りました</p>
    <p>第6期生:2019年11月25日 ~ 2019年12月14日</p>
    <p>*締め切りました</p>
    <p>第7期生:資料請求受付中</p>
    <a href="https://twitter.com/share" class="twitter-share-button" data-url="【ページのURL】" data-text="【ツイート本文】"
    data-via="【ユーザ名】" data-size="【ボタンのサイズ】" data-related="【ユーザ名】" data-count="【カウント表示の種類】"
    data-hashtags="【ハッシュタグ】">Tweet</a>
    <script type="text/javascript">
    ! function (d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0],
      p = /^http:/.test(d.location) ? 'http' : 'https';
      if (!d.getElementById(id)) {
        js = d.createElement(s);
        js.id = id;
        js.src = p + '://platform.twitter.com/widgets.js';
        fjs.parentNode.insertBefore(js, fjs);
      }
    }(document, 'script', 'twitter-wjs');
    </script>
  </div>
  <div class="text-freedom">
    <p class="read-text">エンジニアとして<br>本当の自由を手に入れるためには?</p>
    <p>エンジニア需要の高まりに伴い、</p>
    <p>プログラミングスクールが増えています。</p>
    <p>しかしそこでの学習の先は、</p>
    <p>提携して決められた就職先に就職すること。</p>
    <br>
    <p>これで本当にいいのですか?</p>
    <p>日本人エンジニアはアメリカと較べて</p>
    <p>給料が格段に低い。</p>
    <br>
    <p>その理由がここにあり、</p>
    <p>エンジニアは自分の給料を</p>
    <p>コントロールすべきなのです。</p>
    <br>
    <p>スキルを身につけたエンジニアは、</p>
    <p>人生をコントロールすることでより自由に。</p>
    <p>そこで必要なのが<span class="earn">「稼ぐ力」</span>です。</p>
  </div>
  <div class="horizon">
    <div class="ABOUT">ABOUT</div>
  </div>
  <div class="iSara">
    <div class="iSarain2">
      <div class="iSarain1">
        <h4>ノマドエンジニア育成講座</h4>
        <p>iSara[イサラ]とは</p>
        <div>
        </div>
        <p>「稼ぐこと」にフォーカスした</p>
        <p>Webエンジニア育成講座です。</p>
        <p>稼げるエンジニアに必要な</p>
        <p>5つのスキルとは?</p>
        <!-- <img src="" alt=""> -->
        基礎的なプログラミングスキル
        <div>
        </div>
        <!-- <img src="" alt=""> -->
        案件獲得に必要な営業力
        <div>
        </div>
        <!-- <img src="" alt=""> -->
        見積もり作成から納品までの知識
        <div>
        </div>
        <!-- <img src="" alt=""> -->
        自分の付加価値を高めるスキル
        <div>
        </div>
        <!-- <img src="" alt=""> -->
        フリーランス 同士の横のつながり
        <div>
        </div>
      </div>
    
      iSaraで
      「基本的なプログラミングスキル」は教えません
      基礎的なプログラミングスキルは無料で学べる時代。
      iSaraでは、基礎知識学習は
      事前課題とチャットサポートのみ。
      <div>
      </div>
      
      <div class="step">STEP.1</div>
      <p>【バンコク渡航前1ヶ月】</p>
      <p>事前課題で基礎知識を学ぶ</p>
      <div class="step">STEP.2</div>
      <p>【バンコク到着後】</p>
      <p>実践的に稼ぐことに特化した学習</p>
      <div class="step">STEP.3</div>
      <p>【バンコク帰国後】</p>
      <p>講座実施後の案件獲得サポート</p>
      <div class="skillup">
      </div>
      <p>スキルアップしてもフリーランスエンジニア<br>として食べていくことは難しい<br>フリーランスには プログラミングスキル以外が大切。</p>
    </div>
    <div class=""></div>
    
    
  </div>
  
</body>

</html>

実はこれ、全然完成形じゃ無いんです。僕が途中で挫折した「iSara」というサイトの模写コードです。

それでも、先生(インストラクターのことです!)は上から一つ一つ順番に、「ここはこういう意味だよ」「こう書いた方がいいよ」と順番に教えてくれました。

現役エンジニアが教えてくれたこと!

  1. <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>は書かなくても問題ない。
  2. HTMLのクイックリファレンスで、タグの対応ブラウザが確認できるので、ユーザーが、どのブラウザを使っても表示が崩れないタグを使うと良い。
  3. 基本、idは1つ、classは複数と決められているが、ブラウザは問題なく動く。この決まりはコードを他の人が見てもわかりやすいようにするためにある。
  4. コードの1つ以上・連続したスペースと改行は、ブラウザは読み取らない。
  5. 自動インデントを使うと、コードの記述ミスが見つかりやすい。
  6. スペースや改行を使うと、見やすくなるが、読み込みが遅くなる。これらを詰めてブラウザに読み込ませるプラグインがある。
  7. z-indexを使うと、ヘッダー部分がスクロールしても画面表示されたままになる。
  8. option + command + u でソースコードが見られる

簡単にですが、以上のような感じでした。

上記の5番の内容は、とくに眼から鱗の情報でした。僕がいつも挫折しそうになるのは、「エラーが解決できない時」だからです。

エディターの自動インデントを使うと、記述ミスをしている場所の形が崩れるので見つけやすい。ということでした。

僕の場合、<p>タグを書いているつもりが<P>と書いていました。

お気づきになりましたか?そうです。小文字と、大文字の違いです。

現場では、こういったミスを探しだすのに、何時間もかかることがあるようです。

これまで、プロゲートとドットインストール、書籍でしか学習をしてこなかったので、現場で役立つアドバイスはとても参考になりました。

まとめ

レッスン2回目の内容

  • 現役エンジニアのコードレビューは、現場に役立つものだった
  • 自分で学習したことを、フィードバックしてもらう学習形式だった
  • レッスン時間は、2時間。

以上です。ちなみに、レッスン3回目はJavaScriptのコードレビューです。今回のように、自分で試行錯誤して書いたコードをレビューしてもらいます。

さいごに

侍エンジニア塾の大きな特徴は、マンツーマンレッスンと、オーダーメイドカリキュラムです。

簡単にいうと、「受講生によって、インストラクターも、学習内容も変わる」ということです。

僕は、自分のコードを2時間もじっくりレビューしてくれた先生に感謝していますし、これからもお世話になりたいと考えています。

もし、この塾のカリキュラムをさらに詳しく知りたい!と思った方は、無料カウンセリングをお試しください。どんな疑問にも答えてくれますよ。

最後まで、ありがとうございました。

侍エンジニア塾の無料カウンセリングを受けてみる↗︎

あわせて読みたい記事

プログラミングスクール3社、無料カウンセリング体験。ここに決めた。

侍エンジニア塾は評判通り?インストラクターが、10年のキャリアだった話

【体験談】侍エンジニア塾の無料カウンセリングから初回レッスンまで

ABOUT ME
みやげん
アラフォーからプログラミングを学び独立。Webスキルを身につけて、個人で稼ぐ方法を発信します。
無料メールマガジン