こんにちは。＠nkichiishiです。
テックアカデミー 13日目です。
13日目の進捗状況です。
昨日までに
・Lesson0〜1１、１２の課題以外
（課題は取り組み中 ※進捗15％くらい）
・メンタリング３回
が終わっています。
13日目に行ったこと
朝から図書館へ！
今日も昨日に引き続き Lesson12 ショッピングサイト のコーディング課題です！
昨日はメンターの教え通りに進めていったところ、少し希望が見えてきて調子が良かったです♪
（※テックアカデミー Webデザインコース 12日目 参照）
今日もこの調子のまま波に乗っちゃいたい！と思ってやる気満々でした！！
「朝早く図書館行って、開館から閉館までいるぞー！！」
っていう勢いでした！！
あーよく寝た。もう１１時か。そりゃよく寝た感あるわ。
・・・。
昨日寝る前の勢いは確かにあったんだけれど・・・。
きっと疲れてたってことですね。休養は大事です！
激チャしてなんとか１２時前には図書館に着きました！
正午を回ってなかったのでセーフです。
（なにがセーフなのかは不明）
Lesson12課題の続きに取り組む
とりあえず今日の目標は
ショッピングサイトのトップページ、下層ページ（２つ）の共通部分 のコーディングを終わらせることにしました！
結果から言うと、PC版のヘッダー、フッター、サイドエリア はなんとかそれらしくできました！
そして今日一番の難関だったのは、サイドエリアのリンクボックス・・。
クリックしたら下にビーンって伸びて、リンク一覧が出てくるやつ。
さすがにわけわからんので、テキストのヒントを見ました！
「この仕組みは少し作るのが難しいかもしれません。というわけで、該当部分の参考例を以下に示します。」
お、丸々コード書いてるやんけ！
HTMLのコードがずらっと書いてました！
とりあえずこれコピペして、自分の書いたコードに当てはめればいいんだな！
そう思ってコピペしたはいいんですが、自分の記述したHTMLと違いすぎていて、当てはめるのでさえ手こずりました。。
これで、動くんじゃないかなー！ぽちぽち！
・・・。
なんだかそのヒントが怪しかったので、自分で調べることにしました。（テキストのせいにした）
そもそもこの動作は jQuery を使ってやらなければいけないんですけど、jQueryなんてテキストで説明されただけだし、Progateでちょっと触れたくらいですし、初めの頃は”ジェイクオリティー”って読んでたくらい知識なかったので、ちゃんと調べたほうがいいなと！
そして toggle について調べ尽くしたところで、再度記述！！
まぁ、基本的にはヒントに載っていたことは間違いないなと確信しました。疑ってすいません。
動作の仕方はなんとなくわかった。後は書いてみて確かめよう。
しかし、またしても何も変化せず・・・。
まじかよ・・・。絶対この記述の仕方で合ってると思うんだけどな。。
「もう自分では調べ尽くした、無理だ、このままではまた大声をあげてしまう」と感じて、Slackで質問することにしました。
こんにちは。課題のリンクがうまくできません。リンク部分をクリックしても、下に何もでてきません。これじゃリンクの意味がありません。私はスマブラでもリンクが大の苦手でした。遠距離でブーメランとか矢とかを放ってダメージを稼ぎ、２段階の横スマッシュでいつもやられるんです。ほんとあれには毎回腹がたちます。なので私はあえてリンクを使っていません。
cloud９を確認するので待っていてくださいね。
ちなみに、デベロッパーツールでエラーは出てきましたか？
デベロッパーツールでエラー？なんのこっちゃ。
確認してみます！
デベロッパーツールってエラーも見つけられるんですね。今日初めて知りました。笑
確認してみると、思いっきり赤いバツマークがついてました。しかも６つ。
エラー出てます！！！
確認してみますね。
jquery.js が読み込まれていない気がしますが、記述されてますか？
jquery.js・・・？？？なんじゃそりゃ？？？？？
か、かくにんしてみます！！
（”jquery HTML 読み込み” 検索 ）
『JavaScriptのオープンソースのライブラリ「jQuery」を使うにはHTMLにjQuery本体を読み込まなければなりません。』（※www.webdlab.com様より抜粋）
記述してなそうです。
それでは、まずそれを読み込みましょう。
そうなんです。『JavaScriptのオープンソースのライブラリ「jQuery」を使うにはHTMLにjQuery本体を読み込まなければなりません。』（※www.webdlab.com様より抜粋） なのです！！
そんなことテキストのどこかでやったっけか。。。
と思いましたが、たぶんやってないわけないです。
この記述をしたところ、動作確認できました！！！
もっと早く質問すれば良かったと後悔・・・。
まぁ、とりあえずクリックしたら反応しました！！
ですが、明らかにリンクボックスの登場の仕方がおかしい！！！
あと、➡︎マークの回転の仕方もおかしい！
⬇︎にやりたい！！
クリックしたら➡︎から⬇︎になりたい！！
リンクボックス押したらなんかいろんなところにめり込む。
・・・。
まぁ動いただけでもよし！
その後、脳みそをフル活用させて、瞳孔を最大まで広げ、穴という穴から汁を垂れ流しそうになりながら試行錯誤を繰り返して、なんとか見栄えよくなりました！！！
よ、、、よし！、、
今日はもう無理だ。。。（バタッ）
スマホ版の共通部分の記述もやりたかったですが、時間的にも出来ませんでした。。
明日はスマホ版に取り掛かろうと思います！！！
13日目のまとめ
「jQuery実装するときは jquery.js 読み込み必須！」 ってメモってくださいね＾＾
ガッテン承知！！！メモメモ！！！
残り15日です！
コメント