僕が受講している侍エンジニア塾は、インストラクターがマンツーマンレッスンしてくれることが特徴のプログラミングスクールです。
これから、プログラミングを学びたい。侍エンジニア塾のレッスンってどんな感じだろう？と興味をもっている方は、ぜひ参考にしてください。
この記事を読むと分かること
- 侍エンジニア塾レッスン２回目の内容
- 現役エンジニアが教えてくれた「現場で役立つコードの書き方」
レッスンの進み方
Skypeで画面を共有しながら進めていきます。Skypeでインストラクターとつながっていれば、画面の共有の仕方を教えてくれますので、その通りにパソコンを動かしていけば、レッスンが受けられます。
しかも、Atomというコードエディターは、遠隔操作もできる設定なので、僕の書いたコードを、インストラクターが操作して直していくという方法でレッスンが進みました。
独学では学べなかったコードの書き方をレクチャー
- レッスン１回目で、インストラクターと最終目標の確認
・PHPの技術を習得して、就職する - 次回までの課題
・HTMLを自分で書いてくる
レッスン１回目の詳しい内容は、以下をどうぞ。
レッスン２回目の内容は、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年４月8日 ~ 2019年4月27日</p>
<p>＊締め切りました</p>
<p>第６期生：2019年11月25日 ~ 2019年12月14日</p>
<p>＊締め切りました</p>
<p>第７期生：資料請求受付中</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>【バンコク渡航前１ヶ月】</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」というサイトの模写コードです。
それでも、先生（インストラクターのことです！）は上から一つ一つ順番に、「ここはこういう意味だよ」「こう書いた方がいいよ」と順番に教えてくれました。
- <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>は書かなくても問題ない。
- HTMLのクイックリファレンスで、タグの対応ブラウザが確認できるので、ユーザーが、どのブラウザを使っても表示が崩れないタグを使うと良い。
- 基本、idは１つ、classは複数と決められているが、ブラウザは問題なく動く。この決まりはコードを他の人が見てもわかりやすいようにするためにある。
- コードの１つ以上・連続したスペースと改行は、ブラウザは読み取らない。
- 自動インデントを使うと、コードの記述ミスが見つかりやすい。
- スペースや改行を使うと、見やすくなるが、読み込みが遅くなる。これらを詰めてブラウザに読み込ませるプラグインがある。
- z-indexを使うと、ヘッダー部分がスクロールしても画面表示されたままになる。
- option + command + u でソースコードが見られる
簡単にですが、以上のような感じでした。
上記の５番の内容は、とくに眼から鱗の情報でした。僕がいつも挫折しそうになるのは、「エラーが解決できない時」だからです。
エディターの自動インデントを使うと、記述ミスをしている場所の形が崩れるので見つけやすい。ということでした。
僕の場合、<p>タグを書いているつもりが<P>と書いていました。
お気づきになりましたか？そうです。小文字と、大文字の違いです。
現場では、こういったミスを探しだすのに、何時間もかかることがあるようです。
これまで、プロゲートとドットインストール、書籍でしか学習をしてこなかったので、現場で役立つアドバイスはとても参考になりました。
まとめ
- 現役エンジニアのコードレビューは、現場に役立つものだった
- 自分で学習したことを、フィードバックしてもらう学習形式だった
- レッスン時間は、２時間。
以上です。ちなみに、レッスン３回目はJavaScriptのコードレビューです。今回のように、自分で試行錯誤して書いたコードをレビューしてもらいます。
さいごに
侍エンジニア塾の大きな特徴は、マンツーマンレッスンと、オーダーメイドカリキュラムです。
簡単にいうと、「受講生によって、インストラクターも、学習内容も変わる」ということです。
僕は、自分のコードを２時間もじっくりレビューしてくれた先生に感謝していますし、これからもお世話になりたいと考えています。
もし、この塾のカリキュラムをさらに詳しく知りたい！と思った方は、無料カウンセリングをお試しください。どんな疑問にも答えてくれますよ。
最後まで、ありがとうございました。
あわせて読みたい記事
プログラミングスクール３社、無料カウンセリング体験。ここに決めた。
侍エンジニア塾は評判通り？インストラクターが、１０年のキャリアだった話
【体験談】侍エンジニア塾の無料カウンセリングから初回レッスンまで
