アラフォーがお金持ちになるためエンジニア目指すブログ

お金も根性も学歴もないアラフォーまきのがエンジニアになってお金持ち目指すよ!

侍エンジニア塾 2回めの授業 

どうも、アラフォーまきのです。

今日は侍エンジニア塾2回めの授業でした。

そもそも侍さんにお世話になってる話すら書いてない上、1回めすら書けていないんですが、忘れる前に書いちゃいます!

 

 

前回の課題1:学習予定 ロードマップの決定

細かい話は1回めの授業のことを書くときに記載するのでここでは簡単に(笑)

私はとりあえず以下のように予定を組んで見ていました。

    • 1ヶ月目
      • HTML/CSSを終わらせる。Rubyの1/3まで進める。
    • 2ヶ月目
      • Rubyを終わらせる。Rails1/3まで進める。
    • 3ヶ月目
      • Rails・コマンドラインを終わらせる。
    • 4ヶ月目
      • SQL・JavaScriptを終わらせる。

メンターさんにもこれでOKといただきました!

ちなみに、侍さんには6ヶ月お世話になります。

残りの5ヶ月め6ヶ月めは実際に成果物を作成する時間にします。

 

さあ予定通りすすむかな?

前回の課題2:教科書を手に入れて読んでみる

1回めの授業でメンターさんにおすすめいただいた教科書は3冊。

うち、2冊は使用確定し、残り1冊は進捗によってはなくてもいいかもしれないので様子見ということになりました。

ということで、 HTML/CSSで1冊、Rubyで1冊購入しました。

 

最初はまずHTML/CSSから入ろうということになったので、HTML/CSSの教科書として紹介されたこちらを読みました。

 

 

「たった2日で楽しく身につくHTML/CSS入門教室」

 

これ、4,897円ってあるんですけどKindle版なら2,138円です。

紙媒体の新品はもう販売されていないそうなんですが、Kindleだと届くのを待たずにすぐ読めるから私は最近ほとんどKindleです。

 

実はこの本「progateやるより前に見たかったー!」と思ったほど分かり易くて、とってもよかったんです!

 

「みさきくん」という小学生が、HTML/CSSを使ってサイトを作るというストーリーなので、まさに小学生でもわかるように書いてくれているのが初心者にとってはかなりありがたい!

 

マンガがところどころ入っていて読みやすいし、フォルダの作り方、ファイルの作り方など、初心者が「ちょっとまってそれ当たり前にやってるけどどうやるの?」な部分もきちんと書かれています。

 

ルビ(読み仮名)も振ってあるので更に初心者にやさしい。

私はwidthを「ワイズ」だと思ってたんですけど「ウィズス」だった(笑)

 

更に公式サイトがあって、そこから素材をダウンロードしてきて、みさきくんが作るサイトを自分も一緒に作るんですよー!

素材揃ってるから「えっ、画像どこから仕入れよう…」なんてこともないので、とりあえずやるなら本当にオススメ。

web.cat-speak.net

 

この本1週終えて、みさきくんのサイトを作るのにかかった時間は約10時間くらい。

日数では3日です。

 

たった10時間、3日程度でサイト作れるの?すごくない?ってなりました(笑)

 

プログラミングちょっと気になってるけど難しそうだしなあ…なんて方は是非見て欲しい。かなりハードル低くしてくれていて、とっつきやすいです!

 

前回の課題+α:課題の提出

メンターさんからは今回の課題は「ロードマップを決める」「教科書を手に入れる」の2つだけいただいてました。

ただ「もし教科書を見てなにか作ることができたらそれを次回見せてね」とも言われていました。

 

教科書通りにつくったサイトを提出したってよかったんですが、たった3日でつくれちゃったので、どうせなら教科書を参考に自分で1から作ってみようと思ってとりかかりました!

 

無事昨日完成したので、自力で作ったサイトの完成までにかかった時間はやっぱり約10時間くらいで3日ほど。

 

メンターさんにも「初めてでここまでできれば上等!コードよく書けてる。もうHTMLはいいんじゃない?」と言っていただけました!やったー!

 

ちなみにこんな感じ。

フリー素材をいろいろお借りして作ってみました。

f:id:MmRevorution:20180909134848j:plain

 

↑パートナーに散々連れまわされているプロレスネタでつくってみました!

まさかこんなところでプロレスが役に立ってくれるとは。

コンテンツアイコンとリンク先がずれてるのが初心者っぽさを醸し出してます(笑)

 

f:id:MmRevorution:20180909135012j:plain

 

↑ちょっとトリミング下手で両サイドいらない縦線入ってますね(笑)

プロフィールページです。

 

f:id:MmRevorution:20180909134955j:plain

↑よく見に行く団体の紹介ページ。

各団体のロゴを拝借して各団体サイトへのリンクをつけてみました。

ここに載ってる団体知ってますかね?(笑)

 

 

f:id:MmRevorution:20180909135151j:plain

↑別に問い合わせることもないと思いますが、これはprogateで2週目回ってる最中でちょうどお問い合わせフォームを作るところにいたので、教科書とprogate両方みて作成しました。

 

ここまでできた時にはもう達成感満載でしたよー、本当に。

だんだん形になって行くのが楽しくて楽しくて止まらなかった!

 

新たなツール Bootstrap

仕上がった課題で気になっていたのが、ちょっとした位置のズレとか。

ただこれはCSSの領域で、ここを全力で取り組むのはエンジニアというよりもウェブデザイナーさんのお仕事なんだそう。

 

とはいえ、CSSができなくていい訳でもないということで、便利なツール「Bootstrap」をレクチャーしてもらいました!

 

「Boot strap」は初めて知ったんですが、英語しか書かれていないのでその時点で (˘・з・˘) なまきのだったんですが、ちゃんとメンターさんが教えてくれたので素晴らしいツールだってことがわかりました!

 

CSSをめっちゃ簡単に設定できちゃうすごいやつ!

CSSってなんかいっぱいプロパティあって使いきれないけれど、Bootstrapでやりたいスタイルを見つけたらそのコードをコピペすればとりあえず形になる。

 

コピペしただけだと「ザ・Bootstrap」って感じなので、あとはちょっと手を加えるだけでOK!…とメンターさんが言ってました(笑)

 

あと、スマホで見た時にも快適に表示できる「レスポンシブデザイン」も超簡単にできちゃう。これがサイト作成には超重要なのだそうです。

 

そりゃそうですよね、だってこのご時世、アクセスのほぼ半分がスマホからだって言われてますもんね。

スマホで快適に見られないんじゃ、アクセスしてもらう機会が激減するよねってことで。

 

メンターさん曰く、もBootstrapはもともとツイッターが自社で使っていた(今も使っている)ツールを公開してくれたものなんだそうです。

すごいぞツイッター!ありがとうツイッター!

 

getbootstrap.com

 

次回の課題

ドットインストールでBootstrapを学習できるそうです。

他にも参考サイトを教えてもらたので、とりあえずBootstrap使えるようになってみようということに。

 

ついでに今回作った「ゆるプロ!」のコードをBootstrapに置き換えてみることになりました。

 

本音をいうとちょっと難しそう?どの部分を置き換えりゃいいんだ?って感じですが、まあやってみりゃ案外結構すんなりできちゃうんじゃないかなと気楽に構えてます。

結果次第でもうRuby始めちゃおうね!というお話になったので、どんどん行きたいと思います!

 

プログラミング楽しすぎませんか本当に。

迷ってる人はまず触ってみて欲しい本当に。マジで。楽しいよ。本当に。

まとめ

 

【今回クリアした課題】 

  • ロードマップ作ったよ
  • 「たった2日で楽しく身につくHTML/CSS入門教室」を一周して本にあったサイトと同じサイトを作ったよ
  • 「たった2日で楽しく身につくHTML/CSS入門教室」と「progate」を参考に自分で「ゆるプロ!」っていうサイトを作ってみたよ

【次回の課題】

  • ドットインストールでBootstrapを学習
  • 今回作った「ゆるプロ!」のコードをBootstrapに置き換えてみよう