JavaScriptを一人で書けつつある日~白紙から作った再利用可能タブUI&アコーディオンサンプル~

記事
コラム
毎度様でした。

今日は、完全白紙からタブUIとアコーディオンを実装し、
さらに関数化して再利用を可能にするような挑戦をしました。

〇白紙でUIを書ける
HTML構造を見ずに、JSだけでタブやアコーディオンを作成。

〇関数化で汎用性UP
どのセクションでも同じコードを使える。

〇実際に動くUI
動作確認済みで、そのままポートフォリオに応用可能になるように努力。

昨日までは、HTMLを見ながらしかJSを書けなくて、
さらにクリックしても思った通りに動かないことが何度もありました。

特に、関数化では、「どのコンテナでも動くUIにする」ためにrootを意識する考え方が新鮮すぎて苦戦しちゃいました。
(普通に休憩10分の予定が30分取っちゃいました^^;)

それでも、何度も白紙に戻して1から書き直すことで流れを脳に刻み込めることを徹底した一日でした。

そうすることで、やっと白紙からJSを書くスキルをかなり上昇させられたのではないかなと思います。

実際に動く画面を見て、

「自分で作った!」感がすごいです。

明日以降は、これをさらに拡張してもっと複数セクションで同時に動作する
UI部品にして見せたいなと思います。


P.S. 
ボク、ノートパソコンのキーボードはテンキーもついてるやつを
使ってるんですけど、

BACKSPACE押そうとしたらいつも、NUM LOCK押ささるんですよね。
皆さんはテンキーありのノートPC派ですか?それとも無し派ですか?
サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す ココナラコンテンツマーケット ノウハウ記事・テンプレート・デザイン素材はこちら