Backpackについて調べた - Qiita
お手伝いしているプロジェクトで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
prettier-markdownでmarkdown内のコードを整える - Qiita
$ 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
err.stackに含まれるコードの位置情報をsource mapで元に戻す - Qiita
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
JSON Schemaとreact-jsonschema-form - Qiita
{ "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" ] }
eslint-config-airbnb利用時にdevDependenciesのimportで怒られる時の対応 - Qiita
これはちょっと厳しすぎるので、テストコードなど一部のファイルだけで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を使うとそのあたりも制限できてよい）
Webpack2のTree Shakingを試す - Qiita
社内勉強用資料。 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するタイミングで完全に取り除かれるという感じ
AVAのテスト結果をJUnitのXMLで出力する - Qiita
JUnitの実行結果のXMLフォーマット ｜ Developers.IO 上記記事に詳しく書いているが、Jenkinsにテスト結果を入力するには「JUnitのXML」と呼ばれる形式で出力する必要がある。 そのXMLに公式な仕様は無い（Schemaはこれ？)ようだが、CIツールのデファクトスタンダードになっているようで、mochaならばxunit-file, mocha-jenkins-reporter, mocha-junit-reporterなどを使えばOK。 avajs/ava: Futuristic JavaScript test runner AVA（えぃゔぁ）は、JavaScriptのテストフレームワーク。power-assertやBabel、Assertion Planning（参考記事：おまえは今まで実行したassertの回数を覚えているのか？あるいは新しいアサーションユーテ
Keynote（Mac版パワポも）にソースコードを貼る - Qiita
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
webpackのDLLバンドルを使ってビルドを速くする - Qiita
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でコード変換する超基礎的なまとめ - Qiita
社内勉強会資料。 最近、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のフォー
vim-go-ideでさくっとGolang開発を始める - Qiita
最近、Golangを仕事で書くことになったので、vimでgolangを快適に開発できるように下記の記事などを参考にして、.vimrc等を編集した。 【Go × Vim】 VimでGoを書く - 2015 Spring vim-go-extra を公開致します。 が、何が原因なのかわからない（gocodeっぽい気もする）が、 gocodeの補完がほとんど効かない 文字をタイプするたびにやたら重い 文字化け？レイアウト崩れ？みたいな現象が頻繁に起きる と、Vimで開発するのが非常に辛い状態になってしまった。 .vimrcを一から書きなおしたり、色々頑張ってみたが改善せず、Visual Studio CodeかAtomに切り替えようかなーと思っていたら、vim-go-ideというのを見つけた。 使い方 # インストール $ git clone https://github.com/farazda
schemizeのnode.js版作った - Qiita
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"が指定可能
ESLint2について調べた - Qiita
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
Number型とIEEE754-2008 - Qiita
ECMASCript2015 Language Specificationの一人輪読会資料。 前回までは翻訳メモみたいなのをペタッと貼っただけでしたが、今回からやり方をちょっと変えて、 翻訳メモはGithubのリポジトリ（雑な訳が多いですが。。。）にpushし、Qiitaの方には理解する上で調べたことをまとめるようにした。 今回は、6.1.6のNumber型についてまとめた。 Number型については、ECMASCript5からほとんど（というかまったく？）変更がないようだが、浮動小数点数についてかなり忘れていたので、調べた。 浮動小数点数のおさらい ECMAScriptのNumber型は、IEEE754-2008（IEEE浮動小数点数演算標準; IEEE Standard for Floating-Point Arithmetic）で定義されている64ビット倍精度の浮動小数点数を表現して
Reduxで大量に発生するactionを間引く - Qiita
使い方 第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
ReduxでlocalStorageにstateのスナップショットを保存する - Qiita
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の設定ファイルをブラウザでポチポチして作るツールを作った - Qiita
まだバグや設定できない項目が少しあるけど、ある程度使えるものができた＆作るの飽きてきたので一度公開する。 課題感 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章 - Qiita
綺麗にまとめようと思っていたら、かなり時間が空いてしまったので、もう公開しちゃえ！ ECMASCript2015 Language Specificationの一人輪読会資料。 今回は5章からスタート。 サマリ 文脈自由文法について 生成規則（productions）の集合で文・言語を表現 生成規則は左辺が非終端記号、右辺が0個以上の非終端記号または終端記号 本仕様には4つの文法がある 字句文法（Lexical Grammar） ソースコード → ECMAScriptトークン 正規表現文法（RegExp Grammar) 数値文字列の文法（Numeric String Grammar） 構文文法（Syntactic Grammar） 文法・アルゴリズムの表記法について 読み進めていく中でわからない記号があれば、あとで見返すくらいで良さそう。 5 Notational Conventions
ECMAScript 2015 Language SpecificationのIntroductionから4章まで - Qiita
ECMAScript 2015 Language Specification一人輪読会資料。（やりたいチームメンバーがいればいつでもウェルカムなので、もしかしたらそのうち普通の輪読会になるかも） このECMA標準はECMAScript 2015を定義するものである 1997年に第1版が出て、今回で第6版 ECMAScript2015のゴール 大規模アプリケーション開発、ライブラリ開発、多言語のコンパイルターゲットとしての利用へのより良いサポート ECMAScriptの歴史 Wikipedia見たほうが図があっていいかも 1 Scope この標準はECMAScript2015多目的プログラミング言語を定義している 2 Conformance 適合条件っぽい。 conformance => 適合・準拠 ECMAScriptに適合する実装は、 （ES5と変わらないとこ） 本仕様に記述されている全
package.jsonのjsnext:mainフィールド - Qiita
reduxのpackage.jsonにjsnext:mainという項目があっておそらくbabelでコンパイルする前のソースを指定しているっぽい感じだった。 調べてみるとes6-module-transpiler-npm-resolverがたぶん最初っぽい感じがする。（一番最初のリリースが2014年10月なので、そこまで6to5がはやってない頃かな？）。ES6 moduleで書いているJSファイルを指定するフィールドみたい。 BrowserifyやWebpackはjsnext:mainに対応していないが、上記のes6-module-transpiler-npm-resolverの作者が作っているgrunt-bundle-jsnext-libやrollupというbundlerはjsnext:mainに対応しているっぽい。（rollupのほうはWikiにも書いている） ググってもTwitterで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
