2017/06/22

json-serverでREST APIモックサーバを立てテスト駆動開発する

フロントエンドの開発をやっているとAPIはできてないけど実装しなければならない、という状況が少なからずある。そんなときに便利なのがjson-serverというライブラリだ。

GitHubの説明にも「30秒以内にゼロコーディングでREST APIのモックサーバを立てる(いやマジで)」と書かれているとおり、jsonファイルを用意するだけでAPIサーバを立てられるというものだ。

当記事の目標は、json-serverの使い方を覚えて、Node.jsのテスト駆動開発をできるようにする。(もちろんフロントエンドでも使える)

2017/06/20

もう怖くない!Array.prototype.reduceを理解して実践的に使う

Array.prototype.reduceを説明する際、必ずといってよいほど以下のような数字を順に足していくだけのサンプルコードが添えられている。
const total = [0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
  return previousValue + currentValue;
});

こういうサンプルをみて思うのが、「実際に1〜10の数字を足す場面なんてなくない?」ということ。たしかにreduceが何者なのかは理解できるのだが、実際に使われる場面がイメージできないのだ。

そんな感じでずっと腑に落ちないでいたのだが、HackerNoonの記事(Reduce your fears about Array.reduce())を読んで完全に理解できた!
ということで、自分でも理解を深めるためにreduceの使い方についてまとめる。

2017/06/12

[JavaScript]オブジェクトのすべてのキーをPascalCaseやcamelCase、snake_case、kebab-caseに変換する

JavaScriptやNode.jsでは、変数名やオブジェクトのプロパティをcamelCaseにすることが多い。しかし、APIからのレスポンスはPascalCaseであることが多いため、JavaScript内で使うとres.ExampleFieldのようになり違和感を覚える。

そこで、オブジェクトのすべてのキーをPascalCaseやcamelCase、snake_case、kebabu-caseなどに変換する関数を実装してみた。

2017/05/31

[JavaScript]オブジェクトの無効なプロパティをすべて削除する

とあるツールにJSONを渡すとき、極力ツールのデフォルトの値を使いたかった。しかし、空文字やnull、undefinedなどのプロパティがあるとデフォルト値がうまく設定されなかった。
そのため、オブジェクトに含まれる無効なプロパティ(空文字、null、undefinedなど)など任意の条件でプロパティを削除する関数をつくった。

2017/05/30

ES6のObject.assignがシャローコピーなのでディープコピーする方法を考える

ES6(ES2015)で実装されたObject.assignでディープコピーできると思っていた時期が私にもあった。
Object.assignでディープコピーして(した気になって)、プロパティの値を変更したとき、元のオブジェクトにも影響していることに気づいた。

const obj1 = {
  hoge: 'hoge',
  fuga: {
    foo: 'foo'
  }
};

// ディープコピーのつもり
const obj2 = Object.assign({}, obj1);

obj2.hoge = 'hogehoge';

// obj1.hoge: 'hoge'  obj2.hoge: 'hogehoge' ← ディープコピーされてる?
console.log('obj1.hoge:', obj1.hoge, 'obj2.hoge:', obj2.hoge);


obj2.fuga.foo = 'foofoo';

// obj1.fuga.foo: 'foofoo'  obj2.fuga.foo: 'foofoo' ←?!?! 
console.log('obj1.fuga.foo:', obj1.fuga.foo, 'obj2.fuga.foo:', obj2.fuga.foo);

プリミティブ型はコピーされているのだが、参照型(上記の例ではObject)では参照先がコピーされていた。

2017/05/25

[JavaScript]動的なテキストの幅を取得し、スタイルを適用する

動的に生成されるテキストを、その幅にあわせてスタイルを適用したいときがある。
しかし、文字数による判定では英語や日本語による違い、等幅フォントやプロポーショナルフォントによる違いを考慮しなければならない。
バイト数による判定も、同様の違いや文字コードによる違いがある。

「テキストが表示されたときの幅」を取得し、その「幅」で判定できれば、それが一番正確だろう。
ということで、動的に表示されるテキストの幅(width)を取得し、幅にあわせてスタイルを適用できるようにする。

2017/05/23

Sortable.jsでD&Dしたときに:hoverのスタイルが残るバグの対処法

jQuery不要でドラッグ&ドロップで要素の並べ替えができるSortable.jsを使っていたのだが、Chromeで不可解なバグを見つけてしまったのでその対処法をまとめる。(※詳しくは後述するがSortable.jsのバグではない)

2017/05/22

Karma+mocha+chaiでNode.jsとブラウザで同じコードでテストする

Node.jsでもブラウザでも使えるライブラリを作っているときに、「どちらも同じテストコード(同一ファイル)を使って実行できないかなぁ?」と思い、いろいろ調べた。

Karmaがフロントエンドのテストツールで有名なので、これを使ってみる。
また、テストコードについては使い慣れているmocha+chaiのセットで書く。
(mocha+power-assertとかJasmineとかでもできるけど…)

2017/05/17

ロード中に表示するシマー効果付きスケルトンスクリーンを実装する

ロード中にユーザの離脱を防ぐためには、プログレスバーやスピナーを表示する手法が定番だ。フリーズしているわけではなくて、ちゃんと処理してますよと示すことにより、ユーザのストレスを軽減できる。

4秒未満ならスピナー、それ以上ならプログレスバー。
所要時間がわかるならプログレスバー、わからないならスピナー。

など使い分けもされている。


しかし、ここ1〜2年くらいでプログレスバーやスピナーのかわりに、スケルトンスクリーンを使っているアプリやサービスが増えた。有名どころでは、FacebookやSlack、Mediumなどだ。

今回は、スケルトンスクリーンの実装方法を紹介する。

2017/05/15

[JavaScript]外部URLから画像を読み込んで表示する(+クロスドメインを突破する)

アイコン登録機能があるWebサービスをつくっていた。
基本的な操作方法は、以下のとおり。

  1. アイコン画像を用意する
  2. 画像を選択する(<input type="file">を使う)
  3. 画像を読み込み、エンコードして表示する
  4. base64エンコードした文字列をDBに保存する

これでも必要十分な機能はあるのだが面倒くさい。
できれば画像のURLを指定したら、それを読み込んでほしい。

ということで、「URLから画像を登録」機能を実現するためにいろいろ考えてみた。

2017/05/12

TypeScript + express-openapiでOpenAPI(Swagger)準拠のRESTful APIをつくる

仕事でOpen API(旧Swagger)について調べる機会があった。せっかくなのでNode.jsでOpen APIに準拠したRESTful APIをつくろうと思う。

今回はexpress-openapiというフレームワークを使う。Express.jsを拡張し、スキーマのバリデーションをしてくれたり、コードを管理しやすくしてくれたりする。また、標準でTypeScriptをサポートしているので、チーム開発にも向いている。

使う環境やフレームワークは以下のとおり。

  • Node.js: 6.10.2
  • TypeScript: 2.2.2
  • express: 4.15.2
  • express-openapi: 0.35.0

2017/05/11

ORMをTypeScriptでサクッと実装するならtypeormがオススメ

久しぶりにTypeScriptを書いて型のある喜びを感じていた。そして以前使っていたSequelizeをTypeScriptで使ってみようと思ったのだが、深淵を覗いてしまったようだ。

Sequelizeは高機能で便利なのだが、これをTypeScriptで書こうとするとかなりツライそうだ。実際の使い方は以下の記事を参照ください。


TypeScriptで素直に書けるORMはないかな?と探したところ、typeormを見つけた。

typeormは、MySQLをはじめ、PostgreSQL、MariaDB、SQLite3、MS SQL Server、Oracle、WebSQL databaseと主要なデータベースをカバーしている。
また、ライブラリ自体がTypeScriptで書かれているため、デコレータなどを使ってサクッと実装することができる。

今回は、手っ取り早く試したいのでSQLite3で使ってみる。

2017/05/01

SlackのEmojiアイコンでスロットを作ってCSSスプライトを学ぶ

Googleのトップアイコンや、Twitterのいいねボタンのアイコン、SlackのEmojiなどで、CSSスプライトがつかわれている。複数のアイコンを1枚の画像にすることで、読み込み回数を減らしパフォーマンス向上を図る手法だ。

ということで、CSSスプライトの勉強も兼ねて、SlackのEmoji画像を利用してスロットをつくろうと思う。

2017/04/28

[CSS]背景画像を固定させてスクロールで切り替えるパララックス

背景画像は固定されていて、他の要素(文章とか)だけがスクロールされる。さらにスクロールしていくと、いつの間にか背景画像が変わっている。パララックス(視差効果)を用いたシングルページサイトをよく見かける。

そんなウェブサイトをCSSだけで実現する。

2017/04/18

CSS3 box-shadowを使って画像の輪郭(境界線)をぼかす

ウェブサイトに画像をそのまま貼ると、輪郭(境界線)が強調され浮き出てしまい、変に目立ってしまうことがある。画像の輪郭をぼかせば、「ふわっ」となり背景に馴染む。
ということで、box-shadowプロパティを使って画像の輪郭をぼかす方法をまとめる。

2017/04/14

2017/04/13

CSS3 背景画像だけにガウスぼかしをかける方法

モダンなシングルページレイアウトのウェブサイトで、背景画像をすりガラスのようにぼかしてタイトルを強調させるデザインをよく見る。多くの場合は画像自体にあらかじめフィルタをかけているのだが、CSS3を使うとfilterプロパティを使うだけでblur効果をかけられる。

ただ、ちょっと面倒だったので方法をまとめておく。

2017/04/06

HTML/CSSだけで縦書きの入力フォームをつくる

和風サイトを開発しようと思い立ち、「もちろん“和風”なんだから縦書きでしょ!」と安易な気持ちで始めたのだが、かなり苦労したのでここにまとめておく。

heading(h1タグやh2タグ)やparagraph(pタグ)などの通常のテキストは、writing-modeプロパティにvertical-rlを指定するたけで簡単に縦書きにできる。
しかし、入力フォーム(inputやtextarea、select、button)はwriting-modeプロパティの指定だけでは縦書きにできなかった。

そこで、HTMLとCSSだけで縦書きの入力フォームをつくる方法をまとめる。(かなり脳筋なやり方だけど)

2017/04/05

inputやtextarea、buttonなどにfont-familyやfont-sizeが適用されないときの対処法

ウェブサイトを開発しているとき、なぜかinputタグやbuttonタグにfont-familyやfont-sizeで指定したスタイルが適用されなかった。他にもtextareaタグやselectタグ(ドロップダウンリスト)にも適用されなかった。

調べてみたところ、MDNに答えが載っていた。

2017/03/21

OOCSS、BEM、SMACSS、FLOCSS、RSCSSを比較して自分にあった設計思想をみつける

フロントエンドエンジニアというポジションに就いて1年半、普段はJavaScriptを中心に開発している。しかし、いつまで経ってもCSSを思いどおりに使いこなせない。理由は、どんな粒度でクラスを分割し、それぞれにどんなスタイルを適用すれば良いのかわからないからだ。

以下が、CSSの闇にのまれ、筋肉に解決に糸口を見出そうとした哀れなフロントエンドエンジニアの心の叫びだ。

ということで、よく話題にされる5つのCSS設計を比較し、自分にあった設計思想を見つけようと思う。(CSSは苦手なので、おかしな点があったらご指摘ください)


今回比較するCSS設計思想は以下の5つ。
  • OOCSS
  • BEM
  • SMACSS
  • FLOCSS
  • RSCSS

2017/03/14

SQL Serverで先月、翌月、月初、月末の日付の求め方を解説する

SIer時代のメモを発掘したので、せっかくなので共有のためにここにまとめる。

SQL Serverを使っていて、伝票や請求情報、申請情報などを抽出するときに先月、翌月、月初、月末で検索したいときがある。その方法をなるべくわかりやすく解説する。
@TODAY = '2015/02/27'
-- 先月
SELECT DATEADD(MONTH, -1, @TODAY)

-- 翌月
SELECT DATEADD(MONTH, 1, @TODAY)

-- 月初 → 2015/02/01
SELECT DATEADD(DAY, 1-DATEPART(DAY, @TODAY), @TODAY)

-- 月末
SELECT DATEADD(DAY,-1,DATEADD(MONTH,1,DATEADD(DAY,1-DATEPART(DAY,@TODAY),@TODAY)))

先月と翌月の求め方は簡単で、DATEADD関数を使う。
第1引数がdatepart(YEAR、MONTH、DAY、HOURなど)を指定する。
第2引数が日付に対してどれだけ加算するかを指定する。
第3引数が基準となる日付。今回はTODAYという変数を使っているが、GETDATE関数を使えば今日のシステム日付が取得できる。

2017/03/13

さくらのクラウドのVPCルータを使って学ぶVPN接続の基礎

パブリッククラウドを使うときに一番気になるのが「セキュリティ」だ。私自身、インフラやネットワークについてはド素人なので「とりあえずVPN接続ってやつをすればいいんでしょ?」程度の知識しかない。VPNについてなんとなくわかっているが、どのような仕組みでセキュアな接続ができるか知らない。

ちょうどさくらのクラウドの2万円クーポンが手元にあるので、VPCルータアプライアンスを使って、VPN接続について掘り下げて勉強しようと思う。目標は「VPCルータにVPN接続し、クラウド上のサーバにアクセスする」だ!



VPCルータ とは


VPCルータは、VPC(Virtual Private Cloud)環境を簡単に構築できる仮想ルータアプライアンスです。
VPCルータ | さくらのクラウドニュース

ちょっと何言ってるかわかんないっす。

なので、詳しく調べた。

2017/03/08

【Node.js】amqplibをPromiseベースで利用する方法

RabbitMQのチュートリアルをやっていたとき、非同期処理はすべてcallbackで書かれていてコードがゴチャゴチャしてるな、Promiseとか使えないのかな、node-amqpのほうが良いかな、と感じていた。
が、そんなことはなくamqplibもPromiseベースで利用することができた。

CallbackとPromiseのそれぞれで実装した内容を比較しながら、使い方をまとめる。

2017/03/07

Node.js+RabbitMQでメッセージの送受信をする6(RPC)

仕事でRabbitMQまわりの一部システムを担当することになった。フロントエンド畑の人なので、Node.jsをつかってRabbitMQのチュートリアルをテキトーに和訳し、他で得た知識で補足しながら勉強した内容をまとめていこうと思う。

今回はチュートリアル6「RPC」を学ぶ。



関連記事




今回学ぶこと


  • Remote procedure call(RPC)
  • Callback queue
  • 非同期のCallbackを実行する

2017/03/06

2017/03/02

集団の中で生きる人間として各々が過ごしやすい環境をつくる努力をすべし

Photo by DG EMPL

みなさんは満員電車の中でリュックを背負ったままの人、大股を開いたり足を組んだりする人、大音量で音楽を聞く人、大きな声でおしゃべりする人たちを見てどう感じるだろうか?
会議で攻撃的な言葉を吐く人、否定的な意見ばかり言う人、発言しないのに後で愚痴る人、マウンティングしたがる人たちを見てどう感じるだろうか?

そして、張本人たちはどう思っているだろうか?


私は先にあげた人たちが嫌いだ。
なぜなら、他人の善意にあぐらをかいて、自分だけが過ごしやすい環境をつくっているからだ。

Node.js+RabbitMQでメッセージの送受信をする4(Routing)

仕事でRabbitMQまわりの一部システムを担当することになった。フロントエンド畑の人なので、Node.jsをつかってRabbitMQのチュートリアルをテキトーに和訳し、他で得た知識で補足しながら勉強した内容をまとめていこうと思う。

今回はチュートリアル4「Routing」を学ぶ。



関連記事




今回学ぶこと


  • RoutingKeyによるメッセージの振り分け
  • Direct Exchange

2017/02/28

Node.js+RabbitMQでメッセージの送受信をする3(Publish/Subscribe)

仕事でRabbitMQまわりの一部システムを担当することになった。フロントエンド畑の人なので、Node.jsをつかってRabbitMQのチュートリアルをテキトーに和訳し、他で得た知識で補足しながら勉強した内容をまとめていこうと思う。

今回はチュートリアル3「Publish/Subscribe」を学ぶ。



関連記事




今回学ぶこと


  • Publish/Subscribeメッセージモデル
  • Exchange
  • Temporary Queues
  • Binding

2017/02/27

JavaScriptでJSONをRailsのRansack用DSLに変換する

いろいろあってAPIサーバはRails+Ransackなのに、フロントエンドはRailsのビューテンプレートを使わずJavaScript+フレームワークのSPAを開発することがあった。

だから検索条件をAPIに渡すときに、むりやりRansackのDSLに変換しなければならなかった。これがまた不便で、複雑で、ツラすぎるので、なんとか汎用的にできないかとJavaScriptの連想配列をRansackのDSLに変換する方法を考えた。


そもそもRansackとは?


Ruby on Rails用に検索機能を簡単に実装するためのgemで、シンプルでかつ簡単に実装できる。
参考: ransack/GitHub

2017/02/24

Node.js+RabbitMQでメッセージの送受信をする2(Work queues)

仕事でRabbitMQまわりの一部システムを担当することになった。フロントエンド畑の人なので、Node.jsをつかってRabbitMQのチュートリアルをテキトーに和訳し、他で得た知識で補足しながら勉強した内容をまとめていこうと思う。

今回はチュートリアル2「Work queues」を学ぶ。



関連記事




今回学ぶこと


  • Work Queues
  • タスクの負荷分散
  • キューとメッセージの永続化

2017/02/22

Node.js+RabbitMQでメッセージの送受信をする1(Hello World)

仕事でRabbitMQまわりの一部システムを担当することになった。フロントエンド畑の人なので、Node.jsをつかってRabbitMQのチュートリアルをテキトーに和訳し、他で得た知識で補足しながら勉強した内容をまとめていこうと思う。

今回はチュートリアル1「Hello World!」を学ぶ。



関連記事




今回学ぶこと


  • RabbitMQの導入方法
  • Node.jsの導入方法
  • 基本的なメッセージのやりとり


2017/02/14

CentOS7.3にRabbitMQをインストールしてGUIで管理できるようにする

仕事でRabbitMQを使う機会があった。私自身はフロントエンド畑の人なので、メッセージングシステムの意味はわかるけど使ったことがなかったので、実験用サーバ(CentOS7.3)を用意して勉強してみようと思う。

今後、数回にわけてRabbitMQの基本、インストール、設定、使い方などをブログに書いていく。

今回は、インストール~設定までして、最終的にRabbitMQを使える状態にする。その過程でハマりにハマったので手順として残しておく。



RabbitMQ とは


いきなり「RabbitMQをCentOSにインストールした」と書き出したが、そもそもRabbitMQがなんなのか、どんなときに使われるのか説明する。

RabbitMQはAMQPを使用したメッセージ指向ミドルウェア。処理の命令をいったんキューイングして、逐一実行するためのメッセージングシステムのひとつ。

呼び出し側(Producer)がRabbitMQにメッセージを登録しておく。そして、呼び出される側(Consumer)がそのメッセージを受け取り実行する。このようにメッセージングシステムを間に挟むことで、呼び出し側と呼び出される側を完全に分離することができる。

呼び出し側はメッセージを登録しておくだけなのでレスポンスを待つ必要がなく、また呼び出される側もメッセージをひとつひとつ受け取り実行することで負荷分散ができる。またアプリケーションが万が一落ちたとしてもメッセージは残っているので、再起動後に実行できるなど障害にも強くなる。

※Producer/Consumerと書いたが、一般的にはPublisher/Subscriberという

2017/02/06

【JavaScript】オブジェクトの配列をKeyで集計(グルーピング)する方法

配列内のオブジェクトのキーを使って、抽出したり、集計したり、グルーピングしたいときがある。
// 元データ
[
  { name: 'taro', age: 10 },
  { name: 'jiro', age: 20, email: 'jiro@example.com' },
  { name: 'saburo', age: 30, email: 'saburo@example.com' }  
]

// 欲しいデータ(ユーザごとではなくそれぞれのフィールドでグルーピングしたい)
{
  name: ['taro', 'jiro', 'saburo'],
  age: [10, 20, 30],
  email: ['jiro@example.com', 'saburo@example.com']
}

このようにデータを変換するため、lodash(underscore.js)、ES2015(ES6)、ES5のそれぞれの実装方法をまとめる。

2017/02/01

【JavaScript】配列のシャッフルする(要素をランダムに並び替える)

重複なく、かつランダムな値がほしいときがある。たとえばトランプのカード(1〜13)をランダムに取得したい場合などだ。
そんなときに使える関数を、lodash、ES2015(ES6)、ES5(レガシーブラウザ対応)でそれぞれ実装してみた。

ちなみに今回シャッフルさせるために使ったアルゴリズムは「Fisher-Yatesのシャッフル」という名前がついているらしい。

2017/01/29

ES2015(ES6)の分割代入でCannot set property of undefinedやis not definedというエラーがでる

AとBの値を入れ替えるときに分割代入(Destructuring assignment)構文をつかうと、テンポラリ変数を使わなくてすむ。
ということで、配列の中身をシャッフルする関数で分割代入構文を使ったのだが「Cannot set property 'hoge' of undefined」や、定義したはずの変数が「'hoge' is not defined」というエラーがでてしまった。

いろいろ調べたので結果をまとめる。

2017/01/23

Docker初心者でも安心!Portainerを使ってイメージやコンテナを管理する

初心者にとってDockerのイメージやコンテナをCLIで操作するのは大変だ。覚えるコマンドはたくさんあるし、操作だって手間がかかる。
単純にDockerfileを用意して、イメージつくって、コンテナ立ち上げるくらいなら簡単だが、コンテナの数が増えてくると手に負えない。

そこでPortainerというツールをオススメする。
PortainerはDockerホストをブラウザから操作するための軽量な管理ツールだ。LinuxだけでなくWindowsでもmacOSでも使う使うことができる。
※ Windowsのみ、Portainerが動いているDockerホストを管理することができない

もともとはUI for Docker(a.k.a. DockerUI)だったのが、Portainerに名前を変えて開発が継続されているらしい。

2017/01/22

2016年活動報告と2017年行動指針

2016年はお世話になりました。
2017年もひきつづきダーシノ、当ブログともによろしくお願いします。


2016年のBlack Everyday Company


まずは当ブログについての総括を。

ブログ 71万PV

2016年の1年間で、715,867PVあった。
60記事投稿し、1月には50,562だったPVが12月には87,812PVまで伸びた。しかし、12月はとある記事がバズっただけなので、平常時の11月で考えると62,519PV。1.2万PV/月 分伸びた。

そして、9月時点で200記事を突破した。