今年最後の勉強会では、JavaScriptを勉強してみました。再入門と言えるほど掘り下げれてはないのですが、内容を簡単に振り返ります。

ECMAScript2015での新機能を確認

参考サイト

ES2015(ES6) 入門 – Qiita

ES6の新機能_ 「let」「const」宣言を調べてみた – Qiita

JavaScript入門 – 基本構文の解説とクラス_関数リファレンス

ECMAScript2015(EC2015)での新機能を確認してみました。ブラウザがまだ対応しきれてないところもあるようなので、まずは変数宣言の「let」や「const」の違いを知り、要素を取得したりHTMLにテキストを表示してみたり、計算をしてみたりといった基礎的な箇所からはじめました。

生のJavaScriptにも触れてみよう

参考サイト

You Don’t Need jQuery – Qiita

jQueryを使わずに本来のJavaScriptの記法も知っておくと、簡単な処理はjQueryを使わなくてもできるかなと思い、参考サイトをもとに触ってみました。クラスやIDで要素を取得してテキストを変更してみようとしたところ、思わぬところでつまづきました。

// 1.1クラス名による選択
document.querySelectorAll(‘.class’);

You Don’t Need jQuery – Qiita

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クリエイターのための情報交換所」 』を開催いたしますので、ぜひお越しください。

それでは、みなさま良いお年をお過ごしください。来年もよろしくお願いします!