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

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

侍エンジニア塾 3回目の授業

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

今日は14時から3回目の授業がありました!その時の記事です。

 

 

前回の課題

お手軽装飾ツール(?)のBoot strapを教えてもらったので、それを使って最初に作ったサイトを飾り直していようというものでした。

 

ということで比較してみましょう。

 

比較1 ホーム画面 

こちらが2回目の授業で課題として提出した最初のサイト。

何の変哲も無いただのホーム画面です。これでもすごい頑張ったんだぜ。

 

f:id:MmRevorution:20180914165538j:plain

 

そしてこちらが今回の課題で提出した改造後のホーム画面。

スマホやタブレットでも綺麗に見える「レスポンシブ」ってやつに対応させてます。

ヘッダー部分にはナビリンク?だったかな?をつけてみました。

 

f:id:MmRevorution:20180914170512j:plain

 

 

レスポンシブなので、ブラウザ幅が縮まるとこんな感じ↓になります。

ハンバーガーメニューにできたよ!それっぽいですよね!イエー!

 

最初にハンバーガーメニューって聞いた時、なにかファーストフードのハンバーガーの種類のメニューを作るプログラムでも書くのかと思った、マジで(笑)

f:id:MmRevorution:20180914170729j:plain

 

比較2 お問合わせページ

こちらが初回に作ったお問合わせページ。まあ普通のページ。

 

f:id:MmRevorution:20180914165549j:plain

 

そして今回作り直したページがこちら

これもレスポンシブ対応だから、画面幅によって表示が変わります!

超すごい!Boot strapのおかげでなんかちょっとかっこよくなりました!

 

f:id:MmRevorution:20180914171327j:plain

 

画面幅が狭いスマホなどでみるとこんな感じ。

選択肢もちょっとすごくないですか!すごいのはBoot strapさんだけどね!

 

f:id:MmRevorution:20180914171330j:plain

 

あ、ちなみにプロレスおみくじの部分はまだ何も作れてないんです。

作りたかったけれど、JavaScriptが必要で、ちょっと手をつける時間がなかった。

 

前回の9/9の授業終了後、ドットインストールでBoot strapの勉強をして、その後それを参考に調べながら作り直して完成させるまで、だいたい合計で18時間くらいでした。

 

お休みの日はずーっとコード書いたり調べたり調整してましたが、めっちゃ楽しかった。

 

コードを載せて見たいんだけれど、いい載せ方がまだわからないのでとりあえず冒頭部分だけスクショを(笑)

 

f:id:MmRevorution:20180914173007j:plain

 

さて、メンターさんの判定結果は

「十分ですね!うん、もHTMLはもういいよね、よくできてるのでHTMLは卒業!」

とのこと。やったー!

 

初めてのコマンドライン

さて、本当ならRubyに入るところなんですが、今までprogateしかやったことないまきのは、普通にprogateみたいにコード書くところがあって、なんかすれば実行されて表示されるのかな?くらいにしか思っていなかったので、実際の開発環境についてはさっぱり。

 

とりあえずRubyの環境整備を始めたものの、コマンドラインの見た目も、中身も、様子も全くわからない。

 

メンターさんからは「Visual Studio Code」が多分使いやすいからと教わり、インストールまではしてあったけれど、何がどうなっているのかさっぱり。

 

ということで、急遽先にコマンドラインをお勉強することになりました。

 

昔はマウス操作とかがなくて、真っ黒な画面にコマンドを打ち込んでたって聞いたことあると思うんですけど、アレみたいなもんですよね。

 

macではターミナルってやつでできるんですね。

f:id:MmRevorution:20180914173459j:plain

 

この時点でイミフ。見慣れないので、なにやってんだかさっぱり!

文字と記号ばっかり。

 

でも。メンターさんがめっちゃ丁寧に教えてくれました。

 

個人的には

  • ターミナル起動すると自分自身がPCのハードディスク直下=ホームディレクトリってとこにいる。
  • ディレクトリってのはフォルダのこと。
  • 操作したいフォルダのある場所へcd(=change directory=ディレクトリをかえるよ)コマンドを使って移動して、ファイル作ったり編集したり。
  • 自分が今どこにいるかわからず迷子になったら、pwd(=print working directory=いま私が作業中のディレクトリを表示してよ)でわかる。

 って感じでとりあえず理解しました。

 

これは慣れが必要だと思ったけれど、これはっていうか人生やることなすこと全部慣れなきゃできるもんもできんから、大して重く考えてないです٩( ᐛ )و

 

ということで今日からしばらくコマンド特訓!

 

でも、マウスとかアプリなしで操作ができるのめっちゃかっこよく無いですか!

まきのはめっちゃかっこいいって思った!

 

今日、コマンドの基本についてはあらかた教わったので、次回はRubyに入る予定っぽいので、この一週間また全力投球でコマンド操作身につけますよー!うおー!

 

今回の課題

ということで、コマンドラインに慣れよう!ってことになりました。

メンターさんが自作されたコマンドラインに関する資料をくれたので、それを参考にガンガンいじっていきます。

 

とりあえずコマンドラインを計算機がわりにしてみます。

 

あと、Rubyの教科書をいよいよ始動させます。

この教科書を読み進めることが課題の2つめ。

 

ちなみに、メンターさんにおすすめされて私が使うことにしたRubyの教科書はこちら。

 

 

「たのしいRuby 第五版」

まだ導入部分しか見てないんですが、Rubyを開発された「まつもとゆきひろさん」という方の監修が入ってるそうで、それだけでもかなり信頼度高い〜!

 

その上、昔からかなりたくさんの人に読まれてきた良書なんだそうです。

多くの先人を導いてきた書ってことで、これからのRuby生活のパートナーになってもらいました!

 

確かに、本屋さんでもかなりプッシュしてたの、この本。

で、これはホント教科書って感じで問題やチェックポイントがないので、自分の理解度を確認するには別の手段が必要なんだそうです。

 

ということで、メンターさんがこの教科書に合わせて問題集まで作ってくれているそうで、余力があればそれをやってみてね!ということでした。

 

いや、メンターさんもこういう仕事だからそういう資料を準備していて当然なんだろうけれど、すごいな。

 

余談

私の担当メンターさん、すごく面白いナイスミドルなんですホント!

 

こういう業界の方は、「そんなこともわからないのプススーwww」みたいな感じなのかなーとか、すごい若いイケメンのおにいちゃんが上から目線で教えてくるのかなーとかちょっと心配だったんです(笑)

 

(※イケメン苦手まきの)

 

でも私の担当メンターさん、すごく温厚で面白くて優しい面立ちのナイスミドルで、年上好きの私にとってはベストすぎる方でした(笑)

 

農業もなさっているそうで、今日は枝豆の収穫をされたそうです。

ビール大好きなまきのは、もう枝豆食べにメンターさんの家に押しかけたいほど!

(押しかけないけどね!)

 

というか、そもそも侍エンジニア塾に体験に行った時担当してくれた、キャリアサポートのお兄さん(超イケメン)がもう本当に最高すぎた。

 

 

また近々侍塾のことちゃんと書きますが、侍塾のことを動画にされている方もいらっしゃるので、気になってる方は見て見て欲しい。

 

こちらは、私がお世話になっている「人生逃げ切りサロン」主宰のやまもとりゅうけんさんがUPされた動画。参考になると思う。

ブログ書かれてる方も多くいらっしゃるので、是非調べて見てください。

 

 まとめ

  • HTML/CSSはクリア!やったぜ。
  • 今回の課題1:メンターさんがくれた資料をもとにコマンドラインを練習!
  • 今回の課題2:教科書「たのしいRuby」読み進めよう!
  • 今回の課題+α:「たのしいRuby」に合わせてメンターさんが作ってくれた問題集に挑戦してみよう!
  • メンターさんはおもしろナイスミドルの農家!