最近スマホ版のマインクラフトにどハマりしていて、ある時「これthree.jsで作れるのでは？」と思い立ち、作り始めた。 three.jsの記事を色々と探していると、だいたいHTMLにscriptタグでthree.jsを読み込んで、立方体や球を表示させて、回転させてみて、終わ…

Jestとは facebook.github.io Facebook製のテストフレームワーク Reactアプリケーションのテストに向いてる スナップショットテストがある スナップショットテストとは スナップショット != スクリーンショット 画像の差分を取るのではない 出力されるHTMLの…

JavaScriptの関数は第一級オブジェクトである。 変数に関数を代入できるし、関数の引数に関数を与えられるし、関数の返り値として関数を返せる。 ES2015で追加されたmap, filter, reduceを使うと今まで何だか綺麗に書けなかったものがスッキリいい感じに書け…

shibe97.github.io このサイト上からdmgファイルをダウンロードし、ユーザーの端末上でインストールできるようにした。 Electronアプリからdmgファイルを生成する方法 electron-builderを用いる。 github.com electron-builderを使うための設定 まず、packag…

先日、Electron製のTwitterクライアントであるworcを公開した。 shibe97.hatenablog.com せっかくなのでアクセス解析をしようと思い、Google Analyticsを導入したのだが、色々とハマりどころが多かったのでメモ。 Google Analyticsに登録 新規にアカウントを…

この記事は Electron Advent Calendar 2016 の9日目の記事です。 作ったもの github.com GitHubで公開しています。Releaseページから最新バージョンの「worc-darwin-x64.zip」というリンクからダウンロード可能です。 以下のランディングページからダウンロ…

この記事は CSS Advent Calendar 2016 の5日目の記事です。 W3C Houdini Task Forceで進められている「Houdini」と呼ばれるプロジェクトの話をします。 FlexBoxの例 突然ですが、FlexBoxの話をします。 モジュールの横並びには重宝しますよね。 今年になって…

SVGのアニメーションって綺麗だし、カッコいいですよね。 海外のサイトだったり、dribbbleではよく見るのですが、日本のサイトでは凝ったアニメーションはあまり見かけません。 解説記事も偏っていて、モーフィングだったり、ラインアートの記事はたくさんあ…

photo by FotoDB.de シングルページアプリケーションを組んでいると、大量の非同期通信が必要になる。 そして、その非同期通信ごとにSuccess/Errorが存在する。 Successだけ対応していれば楽だけど、ユーザーのためにもエラーハンドリングは必須だ。 大きく…

photo by Zadi Diaz ES2015がだいぶ浸透してきたと思ったら、今度はES2016の公開が目前に迫っています。 ES2015（済） ES2016（2016年6月） ES2017（2017年6月） ECMAScriptはご存知の通り、一年ごとに策定されることになりました。 各仕様の策定具合は4つの…

フロントエンドとはどこまでのことを指すのだろう？ 仮にユーザーが接するインターフェースを作成している部分とすると、その責務を遂行するための技術はかなり変わってきている。 Webにおいて、ユーザーが接するインターフェースとはブラウザである。そして…