今年最後の勉強会では、JavaScriptを勉強してみました。再入門と言えるほど掘り下げれてはないのですが、内容を簡単に振り返ります。
ECMAScript2015での新機能を確認
参考サイト
ES6の新機能_ 「let」「const」宣言を調べてみた – Qiita
JavaScript入門 – 基本構文の解説とクラス_関数リファレンス
ECMAScript2015（EC2015）での新機能を確認してみました。ブラウザがまだ対応しきれてないところもあるようなので、まずは変数宣言の「let」や「const」の違いを知り、要素を取得したりHTMLにテキストを表示してみたり、計算をしてみたりといった基礎的な箇所からはじめました。
生のJavaScriptにも触れてみよう
参考サイト
jQueryを使わずに本来のJavaScriptの記法も知っておくと、簡単な処理はjQueryを使わなくてもできるかなと思い、参考サイトをもとに触ってみました。クラスやIDで要素を取得してテキストを変更してみようとしたところ、思わぬところでつまづきました。
// 1.1クラス名による選択
You Don’t Need jQuery – Qiita
document.querySelectorAll(‘.class’);
「querySelectorAll」で指定したクラス名を持つもの全てを取得できるのですが、配列になることを理解していなかったので、次のように指定してしまいました。
document.querySelectorAll('.class').innerHTML = 'テキストを変更します';
配列なので、何個目の要素なのか指定すると表示されました。
let x = document.querySelectorAll('.class');
x[0].innerHTML = 'テキストを変更します';
1つしか取得しないなら「querySelectorAll」でなく「querySelector」でよさそうです。（クラスなので複数指定する場合が多いかもしれませんが…）
document.querySelector('.class').innerHTML = 'テキストを変更します';
結局jQueryが便利
やっぱりjQueryが楽だなということで、jQueryを使うことに…（笑）
$('.class').innerHTML = 'テキストを変更します';
$('#id').innerHTML = 'テキストを変更します';
実践！カウントダウンタイマーを作ってみよう
参考サイト
JavaScript (jQuery) でカウントダウンタイマーを書く – Qiita
年末ということで、参考サイトをもとに2018年をカウントダウンするタイマーを作ってみました。日付の計算がややこしいですが、簡単にできますね。
See the Pen CountDown Timer by kurokoroll (@kurokoro) on CodePen.
余談
「JavaScriptのオブジェクト指向がよくわからん！」とぼやいていたら、高橋としゆきさん（@gautt）がこんなものを作ってくださいましたので、シェアさせていただきました。名付けて「BOOWYチャレンジ」だそうです（笑）JavaScriptだけでなく、以前この勉強会でもテーマとなったVue.jsも使用されています。こうやって活用されててすごいなぁ。
それにしても、クリックして4回でメンバーが揃えばクリアだそうなのですが、なかなかメンバー揃えられません！（笑）
See the Pen JavaScript Class Test by Toshiyuki TAKAHASHI (@gau) on CodePen.
まとめ
カウントダウンタイマー作ってて、今年も残りわずかというのを改めて実感。7月からはじめたこの勉強会ですが、来年も細々ながら続けていけたらと思います。2018年の一発目は「CSS Grid Layoutを使ってみよう」を予定しています。日程は決まり次第、Facebookページで告知いたします。
告知
来年2018年2月17日にはAEDというクリエイター向けのセミナー・勉強会をする団体で『AED Vol.2「webクリエイターのための情報交換所」 』を開催いたしますので、ぜひお越しください。
それでは、みなさま良いお年をお過ごしください。来年もよろしくお願いします！