手を動かして学ぶ 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のみでドロップダウンメニューを実装する方法を紹介する。

完成予想図

Transifexとvue-i18nで国際化対応のコラボレーション環境を構築する

国内向けのサービスであっても在日外国人が使うこともある。そういった背景から昨今、国際化対応（多言語化対応）の重要度が増している。とはいえフロントエンドエンジニアがウェブアプリケーションを開発しながらメッセージ翻訳を行うには限界がある。できれば翻訳作業はローカリゼーションチームに任せたい。

しかし、ローカリゼーションチーム（非エンジニア）にgitを使って言語ファイルをダウンロード、JSONやYamlファイルを見ながら翻訳、終わったらPull Requestを作ってもらうというのは少し酷だろう。もちろんJSON→Excel→翻訳→JSONなんてことはしたくない。

そこで当記事ではTransifexとvue-i18nを使って、国際化対応におけるフロントエンドチームとローカリゼーションチームのコラボレーション環境の構築方法について紹介する。あわせて実運用で得たノウハウを共有しようと思う。
また、当記事ではNuxt.jsをメインに紹介するが、Vue.jsでも同様のことはできるので読み替えてほしい。

環境は以下の通り。

• macOS Mojave
• Nuxt.js@2.4.5 / Vue.js@2.6.8
• vue-i18n@8.8.2
• transifex-client@0.13.6

Nginxのlocationとproxy_passの末尾スラッシュによる挙動の違いを理解する

Nginxでリバースプロキシの設定をするとき、いつもlocationとproxy_passの末尾スラッシュ（Trailing Slash、トレイリングスラッシュ）による挙動の違いを忘れてしまう。ということで、locationとproxy_passのURIに末尾スラッシュをつけた場合、つけない場合でどのような挙動になるか実験した。その結果についてまとめる。

Nginxのリバースプロキシ設定は以下の4パターンになる。

パターン	location	proxy_pass
1	/path	/reverse-path
2	/path	/reverse-path/
3	/path/	/reverse-path
4	/path/	/reverse-path/

これに対し、4パターンのリクエストを投げて実験を行った。

1. http://example.com/path
2. http://example.com/path/
3. http://example.com/path-test
4. http://example.com/path/test