本気でCSS芸やりたい人のためのbox-shadow講座

2019年7月24日にUIT meetup vol.7 - 集まれ！（タブン）実務では使わないフロントエンド芸発表会に、CSS芸人として登壇した。

UIT meetupとは、ReactやVue.js、BFFなどのフロントエンド技術を扱った至ってマジメなイベントだ。そんな中、主催者から「次はテーマをかえてフロントエンド芸人を集めたイベントがしたい」とお誘いがあり、CSS芸人として参戦してきた。


当記事は、UIT meetupで発表した内容をスライドと共に文字起こししたものである。

※ 当記事には多くの画像が貼られているため、読み込みに時間がかかる可能性があります。

公式レポート記事: https://engineering.linecorp.com/ja/blog/uit-meetup-vol7/

Canvas上のオブジェクトがクリックされたか検知する

ブラウザゲームなどを開発するとき、Canvas上に描画されたオブジェクト（図形など）をクリックしたいときがある。ただEventTarget.addEventListener('click', listener)のように簡単に処理を追加できるわけではない。

そこで当記事では、「Canvas上にある四角と丸のオブジェクトをクリックしたら色がかわる」というサンプルを元に、オブジェクトのクリック判定やクリックされたときに処理を実行する方法について解説する。

Nuxt.js＋TypeScriptでプラグインの型定義を作成する

Nuxt.jsには簡単にプラグインを追加できる仕組みがある。createdやmothodsなどを拡張するmixinタイプや、ElementUIなどコンポーネントタイプ、vueインスタンスにコンテキストを注入してthisを拡張するタイプなどがあるのだが、TypeScriptと併用するとProperty $logger does not exist on type 'Store<RootState>'のようなエラーが発生する。

今回はvueインスタンスを拡張し、vueファイル（SFC）とstore内でthis.$xxxにアクセスするための型定義の作り方について紹介する。

手を動かして学ぶ Redis 入門

会社でRedisを使っているサービスがあり、そのメンテナーになった。RedisがIn-Memory Databaseということは知っていたのだが、その他の特徴や操作方法などまったくわからないので、チュートリアルを中心に手を動かしながら学んだことをまとめていく。またNode.jsからRedisにアクセスする方法もあわせて紹介する。

Redis の特徴

Redisはメモリー上にデータを保存するKey-Value型のNoSQLデータベースのひとつ。用途はデータベースだけにとどまらず、キャッシュやメッセージブローカーとしても利用される。

details要素を使ってHTML/CSSのみでドロップダウンメニューを実装する

HTML5からdetails要素が追加された。この要素は折りたたみ可能なウィジェットを作成するもので、open状態になったときだけ子要素（summary要素など）を表示することができる。
このdetails要素を使えばHTMLだけでアコーディオンメニューが簡単につくれるようになる。

今回はこのdetails要素に手を加え、JavaScriptを使わず、HTML/CSSのみでドロップダウンメニューを実装する方法を紹介する。

完成予想図