【テックアカデミー13日目】4回目メンタリング

こんばんは！そして今日も1日お疲れ様です！

本日もテックアカデミー13日目の振り返りをしていきます！

いや〜それにしても毎度のことですが、本当プログラミングって難しいですよね。もう頭の中がわけわかんない状態になる時があります。

最近は、もう寝る時や起きる時などもう1日中プログラミングのことが頭の中にあります。

はやく、エンジニアの方みたいにスラスラとコード打てるようになりたい。。。

ではさっそくですが、本日やったことをアウトプットしていきます！

【今日やったこと】

①jQuery課題

②Bootstrap課題

③4回目メンタリング

ではそれぞれ詳しくみていきます！

①jQuery課題

昨日に引き続き課題を進めた。

といっても、すでに訳が分からない状態なので夜のメンタリングの時にメンターの人に聞こうと思っていたのでほぼ何もしていない。

なので、ここはこの後のメンタリングで詳しくお話しします。

②Bootstrap課題

Bootstrapのカリキュラムは正直ほぼ飛ばし読みの勢いで進めた。

メンターの方がそんなに重要ではないといっていたからここは、サラッと進める予定。

課題は「お問い合わせ」の画面を作成するというもので、カリキュラムを読み返せばなんとか答えがありそうだからJavaScript/jQueryに比べると割と簡単そう。

  <header>
       <!-- 576px以上の画面幅のとき、メニューを表示する（それ未満なら折りたたむ）指定を追加 -->
       
       <nav class="navbar navbar-expand-sm navbar-light bg-light">
           <!-- 画面左上に表示するサイト名のリンクとして適切な表示をするための指定を追加 -->
           <a href="#" class="navbar-brand">サンプル株式会社</a>

           <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-bar">
               <span class="navbar-toggler-icon"></span>
           </button>

           <div class="collapse navbar-collapse" id="nav-bar">
               <ul class="navbar-nav">
                   <li class="nav-item"><a href="#" class="nav-link">会社情報</a></li>
                   <li class="nav-item"><a href="#" class="nav-link">ニュース</a></li>
                   <li class="nav-item"><a href="#" class="nav-link">採用情報</a></li>
                   <!-- お問い合わせページを表示していることをわかりやすくする設定を追加 -->
                   <li class="nav-item"><a href="#" class="nav-link active">お問い合わせ</a></li>
               </ul>
           </div>
       </nav>
   </header>

こんな感じで、とりあえず「header」の部分だけ終わらせた。

コメントになっているところに追加でコードを入力していだけだからわかりやすくて簡単。

③4日目メンタリング

本日締めにメンタリング。

内容はもちろん今つまずいているjQueryの課題について。

結構教えてもらったが、理解しているのは30%くらい。

でもなんとなく全体像は掴めた感じがする。

$('.tabs-menu > div').on('click', (e) => {
 console.log('click されました')
 const selector = $(e.target).attr('id');
 showTab(selector);
});

これは、tabs-menu 直下になるdivがクリックした時クリックイベントが起きるという処理。

そしてそのタブがクリックされた時は、

こんな感じで、クリックされました　とコンソールに表示される。​

ここまで、メンターの方がほぼ答えを教えてくれたがこのままではまだ終わらない。

これからクリックされた要素にアクティブクラスをつけるコードを書かなければならない。

そのまま答えを教えて欲しかったけど、さすがはメンター。

ここで答えを言うのは成長に繋がらないからと、教えてもらえなかった。

もうこうなったらグーグルでググりまくって答えをみつけるか。

いや、それではこのままと一緒だ。

答えに近いサイトを見つけ、今回はしっかり理解できるまでやろう。

テックアカデミー 13日目を終えての感想

今の心境は、何かに追われている感じ。

多分２ヶ月しかないという焦りと、それまでに必要な知識がまだついていないからだと思う。

冒頭でもお話しした通り1日中プログラミングのこと考えてる。

はやくこの状況を突破して楽しめるようになりたい。

とりあえず今は辛抱する時だな。

やり切ろう！

てな感じで今日は終わります！

最後までご覧いただきありがとうございました！

では、また明日！