コーディングの仮想案件をやってみました

codejump　proの仮想案件をやってみました

こんにちは。管理人のオッサンです。

先日、codejump(元codestep)の有料仮想案件に申し込みまして、
その第一回目に挑戦していました。

これは、実案件と同じようなサイトのコーディングをやって、
添削みたいなこともしてくれる、というものです。

最初の案件に取り組んだ感想は・・・。

締め切りは2日後だって！
はや！(笑)

まあ、実際の仕事はこれぐらいなんだろうな・・・。

余裕でオーバーしました(汗

しかし、解らないところ、忘れていることだらけで、
何をするにも調べながら進めましたので、
それでかなり手間取った感じはあります。

覚えていた部分は、それなりにすんなり進めましたので、
一応、以前よりは成長はしているのだと思います。

そしてまた、これをやったことでまた、成長していけると実感しました。

いや〜〜良い勉強になります。
やって良かった。
まだ終わってないけどね（笑）

今回、学んだことをいくつか書いていきたいと思います。

ハンバーガーボタンを複数動かす

今回、レスポンシブが結構たいへんでした。
特にハンバーガーの動かし方です。

普通、ハンバーガーメニューは
SP時にグローバルナビを隠して、
同じ場所に登場させます。

今回、フッター内にもナビがあって、
それもハンバーガーにするんですよね。
つまり、2箇所のハンバーガーを連動させないといけない。

さて、これで困りました。
このパターン初めてだったので。

というのも、習ったやり方は、
ハンバーガーにIDを振り、
Jqueryでクラスを付けて動かすというやり方です。

See the Pen ハンバーガー3本線 by サクライ (@genzazurow) on CodePen.

これだと、2箇所動かせないんですね。
IDは一箇所と決まっているようなので・・。
実際動かなかったし。

で、IDをクラスに変えたのですが、それでも連動しない・・・・。

なんで？

悩むこと1時間。

これが原因だと判りました。

$(function(){
 $('.ham-btn').on('click',function(){
  $(this).toggleClass('is-active');

/*↑ここのthisを'.ham-btn'に変える*/

});
});

thisの部分を.class名に変えたら、ちゃんと複数個所連動するようになりました。

どこのハンバーガーをクリックしても、全部連動して変わります。

See the Pen test by サクライ (@genzazurow) on CodePen.

ふぅ〜〜、一件落着です。やったー！

こんなこと学校じゃ教わらなかったし、
調べてるだけでかなりの時間を要します。

こういうのがあると、とても2日じゃ終わらないよね。

これ以外にも悩んだ点があったので、別で紹介しますが、
思うようにいかずに行き詰った時は、
ちょっと時間を置いて考え直せば大抵上手くいきます。

今回もそうでしたし。

しかし、その分時間はかかります。
悩む点が多いほど、たっぷり時間がかかる訳です。

まあ、こうやって色んなパターンを攻略していけば、
仕事になるスピードでできるようになるんでしょうな。

いい勉強になりました。
こうやってどんどん経験を積んでいこう。

いやはやたのしいですな。