ブログの中の人
つくったモノ
JavaScript
HTML/CSS
Go
C#
VBA
コラム
ツール
読んだ本
English articles
2019/03/27
手を動かして学ぶ Redis 入門
Labels:
JavaScript
,
Redis
Twitter
Facebook
はてブ
Pocket
会社でRedisを使っているサービスがあり、そのメンテナーになった。RedisがIn-Memory Databaseということは知っていたのだが、その他の特徴や操作方法などまったくわからないので、チュートリアルを中心に手を動かしながら学んだことをまとめていく。またNode.jsからRedisにアクセスする方法もあわせて紹介する。
Redis の特徴
Redisはメモリー上にデータを保存するKey-Value型のNoSQLデータベースのひとつ。用途はデータベースだけにとどまらず、キャッシュやメッセージブローカーとしても利用される。
続きを読む »
2019/03/26
details要素を使ってHTML/CSSのみでドロップダウンメニューを実装する
Labels:
HTML/CSS
Twitter
Facebook
はてブ
Pocket
HTML5からdetails要素が追加された。この要素は折りたたみ可能なウィジェットを作成するもので、open状態になったときだけ子要素(summary要素など)を表示することができる。
このdetails要素を使えばHTMLだけでアコーディオンメニューが簡単につくれるようになる。
今回はこのdetails要素に手を加え、JavaScriptを使わず、HTML/CSSのみでドロップダウンメニューを実装する方法を紹介する。
完成予想図
続きを読む »
2019/03/19
Transifexとvue-i18nで国際化対応のコラボレーション環境を構築する
Labels:
JavaScript
,
Tools
,
Vue.js
Twitter
Facebook
はてブ
Pocket
国内向けのサービスであっても在日外国人が使うこともある。そういった背景から昨今、国際化対応(多言語化対応)の重要度が増している。とはいえフロントエンドエンジニアがウェブアプリケーションを開発しながらメッセージ翻訳を行うには限界がある。できれば翻訳作業はローカリゼーションチームに任せたい。
しかし、ローカリゼーションチーム(非エンジニア)に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
続きを読む »
2019/03/15
Nginxのlocationとproxy_passの末尾スラッシュによる挙動の違いを理解する
Labels:
Nginx
Twitter
Facebook
はてブ
Pocket
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パターンのリクエストを投げて実験を行った。
http://example.com
/path
http://example.com
/path/
http://example.com
/path-test
http://example.com
/path/test
続きを読む »
2019/02/25
ドメイン駆動設計の用語と解説(DDD入門ガイド)
Labels:
知識
Twitter
Facebook
はてブ
Pocket
中〜大規模アプリケーションを開発するノウハウを持っておらず、どのようにシステム設計するのが良いのかわからなかった。そのため、1週間ほどドメイン駆動設計(Domain-Driven Design)について勉強した。
当記事では、勉強中に得たドメイン駆動設計をわかった気になれるのに必要な用語のまとめや、実装でどのように使われるかをまとめる。
筆者は「実践ドメイン駆動設計」を読んだわけでも、完全に理解したわけでもない。しかし、雰囲気を掴むための情報はわかっている状況なので、間違っている箇所があったら指摘していただきたい。
ドメイン駆動設計とは?
ドメイン駆動設計(DDD、Domain-Driven Design)を一言で説明すると
「現実世界の業務をドメインモデルに詰め込んでソフトウェアに深く反映させる設計手法」
だ。
詳しい説明は後述するが、ドメイン駆動設計の全体図は下図のような感じだ。
続きを読む »
新しい投稿
前の投稿
ホーム
登録:
投稿 ( Atom )