サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
qiita.com/pirosikick
その時、比較するオブジェクトや配列にタイムスタンプなど動的なデータが含まれている場合、単純にtoEqualを使って比較ができません。toEqualの利用をやめて、オブジェクトのフィールドごと(もしくは、配列の要素ごと)にtoBeなどを利用して個別に検証するのはフィールド数・要素数が多ければ多いほど面倒です。 // テスト実行時に毎回変動する動的なデータ obj.createdAt = Date.now(); expect(obj).toEqual({ id: 1, name: 'hoge', createdAt: Date.now() // 一致しない }); // プロパティ個別で比較するのはプロパティが増えると面倒 expect(obj.id).toBe(1); expect(obj.name).toBe('hoge'); expect(obj.createdAt).toBeInsta
お手伝いしているプロジェクトでBackpackなるものが使われており、はてな?と思ったので調べました。 Backpackとは? Backpack is a minimalistic build system for Node.js projects. Backpackは、Node.jsのプロジェクトの最小限のビルドシステムだぜ!とのことです。create-react-appやNext.jsにインスピレーションを得たようで、設定ファイルの記述や追加のnpmパッケージなしで、 Babelによるトランスパイルの実行。async/await、object rest spread、class propertiesなどの構文の利用 source-mapの対応(source-map-support) nodemon的なファイル監視、再実行(Live Reloading) が、出来るようです。内部ではwe
$ cat README.md ## JS ```js function hoge( arg1, arg2) { return 'hoge'; } ``` ## SCSS ```scss .hoge { .fuga { .duga { text-align: center; } } } ``` CLIは、prettier-markdown 対象ファイル オプションの形式で実行する。対象ファイルはsrc/**/*.mdみたいな形式でもOK。オプションはprettierにダイレクトに渡されるっぽいので、--single-quoteなど、prettierにあるオプションはそのまま使える。--dryオプションだけが例外で、--dryオプションを使うと、どのファイルが更新されるかが表示されるが、実際にはファイルは更新されないお試しモード(dryrun)で実行できる。(prettierのWarning
TypeScriptは部分的に導入することが出来ないと思ってFlowtypeを導入したが、出来るぞ!という指摘を頂いたので、調べた。 --allowjsオプション tscの実行時に--allowjsを付けるだけだった。tsconfig.jsonの場合、compilerOptions.allowJsにtrueを設定すればよい。 検証用のディレクトリを作って、typescriptをインストールする。 $ mkdir allow-options $ cd allow-options $ echo "{}" > package.json $ yarn add -D typescript
webpackやBabel、uglifyjsなどを使ってソースコードを変換している場合、err.stackに含まれるコードの位置に関する情報が変換後のコードの位置になっており、デバッグが難しい。err.stackに含まれる位置の情報をsource mapを使って、元のコードの位置に変換する方法をちょっとだけ調べた。 調べると色々なnpmパッケージが見つかるが、source-map-supportが有名っぽい。 # 検証用ディレクトリ作成 $ mkdir source-map-support-playground $ cd source-map-support-playground # 依存関係のインストール $ yarn add babel-cli babel-preset-flow source-map-support -D
{ "title": "ユーザー", "type": "object", "properties": { "id": { "title": "ID", "type": "string", "pattern": "^[0-9a-zA-Z]{8}(-[0-9a-zA-Z]{4}){3}-[0-9a-zA-Z]{12}$" }, "name": { "title": "ユーザー名", "type": "string", "pattern": "^[\\sa-zA-Z]+$" }, "age": { "title": "年齢", "type": "integer", "minimum": 0 } }, "required": [ "id", "name" ] }
これはちょっと厳しすぎるので、テストコードなど一部のファイルだけでdevDependenciesのimportを許可したい。 対応策 eslint-config-airbnbのバージョンによって依存しているeslint-plugin-import、eslint-config-airbnb-baseのバージョンが違うので、対応が異なる。 eslint-config-airbnbの11.1.0以前 eslint-plugin-importのバージョンが、v1.14.0以前の場合。 コメントで一時的に無効にする 少なければこの方法で良さそう。コメントで向こうにする場合、他のルールまでもみ消さないように、どのルールを無効にするか明記した方がよい。(eslint-plugin-eslint-commentsを使うとそのあたりも制限できてよい)
社内勉強用資料。 Tree Shakingとは? ESモジュール形式で書かれたコードをbundleして一つのファイルにする時に、exportしているけどどこからもimportされていない、使われていないコードを削除する機能のことです。 もともとはrollupというBundlerに実装されていた機能ですが、webpackの次バージョンであるwebpack2にも実装されているということで試してみました。 webpack2のTree Shakingの仕組み Tree-shaking with webpack 2 and Babel 6 上記記事に詳しく書いています。簡潔に説明すると、まず、ESモジュール形式で書かれたJSファイルを全て結合し、そのタイミングでどこからもimportされていないexport文を消してしまいます。あとは、コードをminifyするタイミングで完全に取り除かれるという感じ
Pygmentsやhighlightを使う Keynoteにシンタックスハイライトされたソースコードを貼り付けるには、RTFでフォーマットされたソースコードをペーストする必要がある。 Keynoteにソースコードを貼る - pirosikick's diary 上記ブログにまとめた内容が以前やっていた方法。CLIで変換してMacのpbcopyコマンドでクリップボードにコピーし、Keynoteに貼り付ける。 # highlightの場合 $ brew install highlight # file.jsの内容をRTFに変換しクリップボードにコピー $ cat file.js | highlight --syntax=js -O rtf | pbcopy # クリップボードにコピーしたソースコードをRTFに変換しクリップボードにコピー $ pbpaste | highlight --synt
compose(...functions) Composes functions from right to left. 右から左に関数を合成する composeは任意の関数を引数に取り、関数を返す。引数の関数はそれぞれ一つの引数を受け取ることが想定されている。 function a(arg) { ...; return something; } function b(arg) { ...; return something; } const composed = compose(a, b);
How to make your Webpack builds 10x faster 「webpackビルドを10倍速くする方法」というスライドを見つけた。 内容を要約すると、こんな感じ。 css-loaderは0.15未満を使う cacheDiretoryはデフォルトで無効だから有効にする HappyPackを使う DLLバンドルを使って、静的コードのバンドルを分ける DLLバンドルは聞いたことがなかったので調べた。 DLLバンドルとは Dll bundles doesn't execute any of your module's code. They only include modules. モジュールをまとめただけのbundleで、scriptタグで読み込んだ時点では含まれるモジュールは実行されず、他のbundleから参照された時に実行される。 <!-- こういうイメージ -->
社内勉強会資料。 最近、babylonでJavaScriptのコードを変換するツールを作っていて、まだ出来てませんが、現状調べたことのまとめです。 ASTの基礎 JavaScript ASTを始める最初の一歩 | Web Scratch 上記記事がよいです。ざっくりまとめると、 AST => コードをパースした抽象構文木のこと JavaScriptの場合はJavaScriptオブジェクト(JSON)として表現 ツールの分類 Parser ... ソースコードをASTに変換する Traverser ... ASTの木構造を探索。ノードを差し替えたり、削除したりする Generator ... ASTからソースコードを生成する Parserは大きく2系統(Esprima, Acorn) babylonはAcornベースで、JSXなどESTreeから拡張してる ParserによってASTのフォー
shcemizeという、JSONからJSON Schemaを生成する便利なGemがある。 schemizeを使うためだけにGemfileを書くのが嫌だったので、node-schemizeを作った。 // とりあえずグローバルにインストール $ npm install -g schemize // デフォルト $ echo '{ "key": "value" }' | schemize {"type":"object","properties":{"key":{"type":"string"}}} // プリチー $ echo '{ "key": "value" }' | schemize --pretty { "type": "object", "properties": { "key": { "type": "string" } } } // プリチーはインデント数と"tab"が指定可能
Node.js Advent Calendar 2015の7日目の記事です。遅刻してごめんなさいごめんなさい。 sinopiaをs3対応して記事を書こうと思ったのですが、思ったより手こずってしまい、ESLintの2系のalpha版が出たので、そちらについて調べました。 ESLint v2.0.0-alpha-1 released 新しいルール 下記のルールが新しく追加される。 array-callback-return Arrayのfilterやreduceなど、callback内で値を返す必要があるのに返してない場合にエラーを出す。 no-implicit-globals 暗黙的にグローバルに定義されている変数がある場合にエラーを出す no-restricted-imports 任意のパッケージのimportを禁止する prefer-rest-params ES6のRest Parame
Generics | The Swift Programming Language SwiftのGenericsについて調べました。Playgroundで実行しながら調べましたが、間違ってるところとかあったら指摘してくださるとありがたいです。 Genericsが解決している課題 例えば、Genericsが無い場合、2つの変数を入れ替えるswapっていう関数を作る時、静的片付け言語だと型ごとに関数を用意しないと実現できない。 // 第1引数と第2引数を入れ替える関数 func swapInt (inout a:Int, inout b:Int) { let temp:Int = a a = b b = temp } // 型が違うだけで中身はswapIntとほぼ同じ関数 func swapString (inout a:String, inout b:String) { ... } func
ECMASCript2015 Language Specificationの一人輪読会資料。 前回までは翻訳メモみたいなのをペタッと貼っただけでしたが、今回からやり方をちょっと変えて、 翻訳メモはGithubのリポジトリ(雑な訳が多いですが。。。)にpushし、Qiitaの方には理解する上で調べたことをまとめるようにした。 今回は、6.1.6のNumber型についてまとめた。 Number型については、ECMASCript5からほとんど(というかまったく?)変更がないようだが、浮動小数点数についてかなり忘れていたので、調べた。 浮動小数点数のおさらい ECMAScriptのNumber型は、IEEE754-2008(IEEE浮動小数点数演算標準; IEEE Standard for Floating-Point Arithmetic)で定義されている64ビット倍精度の浮動小数点数を表現して
使い方 第1引数は間引きたいAction Typeを配列もしくは文字列で指定します。文字列の場合は、 内部で配列にして処理します。 第2引数は間引きたい秒数をmillisecondsで指定します。 import {createStore, applyMiddleware} from "redux"; import throttleActions from "redux-throttle-actions"; // combineReducersされたreducer達 import reducers from "./reducers"; import {someType} from "./constants/actionTypes"; // someTypeが実行頻度が100msに一度になるように間引く const throttleSomeType = throttleActions(some
localStorageにstateのスナップショットを保存するRedux middlewareを作りました。 インストール import {createStore, applyMiddleware} from "redux"; import saveState from "redux-save-state/localStorage"; // combineReducersされたreducer達 import reducers from "./reducers"; // 保存先キー名 const key = "app-state-snapshot"; const store = applyMiddleware(saveState(key))(createStore)(reducers); // React Componentでdispatchが呼ばれるたびに保存 store.dispatc
まだバグや設定できない項目が少しあるけど、ある程度使えるものができた&作るの飽きてきたので一度公開する。 課題感 ESLintのルールが多すぎる 一つ一つドキュメントを見ながらエディターで設定ファイルを書くのが辛い。 「あーこれルールあるんだー」ってのに後で気づくことが多い (ただReact+Fluxで何か作りたかった) 機能 localStorageに自動保存しているので、途中でやめても大丈夫 import機能 技術的なメモ React + Redux Reactは0.14 最初はflummoxだったが、途中でreduxに乗り換え ドキュメントはmarkdownをmd2reactで表示 bundleするとサイズがバカでかくなるので、XHRで取得 出力するElementをカスタマイズしたかったので、forkした → @pirosikick/md2react HTMLに変換して使ったほうが良
綺麗にまとめようと思っていたら、かなり時間が空いてしまったので、もう公開しちゃえ! ECMASCript2015 Language Specificationの一人輪読会資料。 今回は5章からスタート。 サマリ 文脈自由文法について 生成規則(productions)の集合で文・言語を表現 生成規則は左辺が非終端記号、右辺が0個以上の非終端記号または終端記号 本仕様には4つの文法がある 字句文法(Lexical Grammar) ソースコード → ECMAScriptトークン 正規表現文法(RegExp Grammar) 数値文字列の文法(Numeric String Grammar) 構文文法(Syntactic Grammar) 文法・アルゴリズムの表記法について 読み進めていく中でわからない記号があれば、あとで見返すくらいで良さそう。 5 Notational Conventions
ECMAScript 2015 Language Specification一人輪読会資料。(やりたいチームメンバーがいればいつでもウェルカムなので、もしかしたらそのうち普通の輪読会になるかも) このECMA標準はECMAScript 2015を定義するものである 1997年に第1版が出て、今回で第6版 ECMAScript2015のゴール 大規模アプリケーション開発、ライブラリ開発、多言語のコンパイルターゲットとしての利用へのより良いサポート ECMAScriptの歴史 Wikipedia見たほうが図があっていいかも 1 Scope この標準はECMAScript2015多目的プログラミング言語を定義している 2 Conformance 適合条件っぽい。 conformance => 適合・準拠 ECMAScriptに適合する実装は、 (ES5と変わらないとこ) 本仕様に記述されている全
今、React・Fluxで作っているツールで、window.onresize時にwindow.innerHeightをdivのheightとして設定するようなComponentを作った。 こういう感じ: class Example extends React.Component { constructor (props) { super(props); this._onWindowResize = this.onWindowResize.bind(this) this.setState({ height: 0, width: 0 }) } render () { let {width, height} = this.state; return <div {...this.props} style={{ width, height }} />; } onWindowResize () { t
skaywayを使えば、WebRTCのP2Pビデオチャットが簡単に実装できる。 今、skywayを利用していたWebアプリをElectronに移行しようとしているのだが、Electronでskywayがうまく動かなかった。 上手くいくように頑張ったメモです。 原因 XHRやWebSocketで通信する際のOriginがfile://になっており、skyway側で弾かれるのが原因っぽい。 skywayは利用登録をする時にリクエスト元ドメインを指定するようになっていて、そこに登録されていないOriginからのリクエストは弾くようになっているのだろうと推測した。 解決策 skywayのpeerjsをforkして、XHRをisomorphic-fetchに、WebSocketをwsに書き換え、Peerをインスタンス化するときのオプションにoriginを追加した。(ブラウザのXHR、WebSocke
<body> <script src="lib/jquery.min.js"></script> <script> jQuery('#hoge'); // jQuery is not defined </script> </body> 原因 electronのissueがあった。 jQuery isn't set globally because "module" is defined · Issue #254 · atom/electron Electronではブラウザ側のJS実行時にmodule.exportsが存在するので、jQueryがcommonJSでロードされたと勘違いして、windowに$とjQueryを定義しないというのが原因。(この辺りにif文が) 解決策 requireでロードする <!--<script src="lib/jquery.js"></script>-->
webpack使ってCommonJSで書いているJSの関数をライブラリとして外部に公開したい場合には、ouput.libraryオプションとoutput.libraryTargetオプションを設定し、ビルドする。 module.exports = { entry: { index: './index' }, output: { path: __dirname, filename: "[name].bundle.js", library: "Hoge", libraryTarget: "umd" } };
TerraformでAWSのsecurity groupを設定した時にハマったのでメモ。 Security Groupの設定はaws_security_groupで行うが、2つのaws_security_groupのingress, egressのsecurity_groupsのidがお互い参照しあっていると、Cycleエラーが発生する。 provider "aws" { ... } resource "aws_security_group" "sg1" { name = "sg1" ingress { from_port = 80 to_port = 80 protocol = "tcp" security_groups = ["${aws_security_group.sg2.id}"] # お互いに参照しあっている } } resource "aws_security_group"
v0.13からのES6 Class記法でmixinが使えない問題を解決する方法としてHigher-Order Componentsという方法がある。 Mixins Are Dead. Long Live Composition — Medium Gunosy React Meetupのkoba04さんのLTで紹介されていたのを今更調べたのでまとめる。 mixinのおさらい FluxフレームワークでよくあるStoreとComponentをひもづけるためのMixinの例。 // FluxフレームワークでよくあるStoreとComponentをひもづけるためのMixin function StoreMixin(...stores) { var Mixin = { getInitialState() { // getStateFromStoresはComponent側に定義する return th
課題 expressでWebアプリを作っている時に、loggerとしてbunyanを利用していた。 その時に、logger.error({ req:req, res:res, error:error }, message)と毎回書くのがだるいので、req.logError(error, message)で済むように下記のようなmiddlewareを書いて対応した。 var bunyan = require('bunyan'); var log = bunyan.createLogger({name: 'myApp'}); module.exports = function (req, res, next) { req.logError = function (error, message) { log.error({ req:req, res:res, error:error }, mes
先日参加した、isomorphic tokyo meetupで紹介されていたfetchrが良さそうだったので、使ってみた。 fetchrが解決する課題 React+Fluxでサーバサイドレンダリング時に、superagentやaxios、isomorphic-fetchなどのIsomorphicなHTTPクライアントを使ってデータをフェッチするが、そのまま使うと下記のような課題にぶつかる。 ブラウザから直接BEのAPIにアクセスできない(またはさせたくない、外部のAPIでキー・シークレットをブラウザ側で持ちたくない)場合、そのAPIとProxyするエントリポイントを作る必要がある。 フェッチ部分のロジックが共有されるので、ブラウザではWeb API経由でフェッチして、サーバサイドレンダリング時は直接DBにクエリを叩きたい、みたいなのを自分で実装すると面倒。 fetchrはBEや外部のAPI
次のページ
このページを最初にブックマークしてみませんか?
『qiita.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く