テストがないJS環境にモダンなテスト環境を導入していく - Qiita
Qiita:Teamに投げた社内ドキュメントだったけど、特に問題ないのでQiitaにも投げる。 前提として browserify-rails とbabelify が導入されている状況を想定してる。 基本方針 新規コードはES2015で書く 本番はbrowserify(-rails)でコンパイルする。 単体テストは node 環境下で走らせる テスト環境下では jsdom で window, document をモックする 単体テストでは ブラウザ特有の挙動はテストしない 裏側の環境(browserifyやspec-helper)は難しくして良いが、利用者からみえる範囲は複雑にしない(npm install; npm testで走る) Universal JavaScript に寄せることでコードのポータビリティを上げる 事前準備 browserify-railsを導入する。 .babelr
railsとturbolinksにマッチするjavascriptの書き方 - komagataのブログ
railsらしいやり方、turbolinksともマッチするjavascriptの書き方ができるturboctrlというgemをリリースしました。 komagata/turboctrl これは何？ /posts/1にアクセスしたらapp/assets/javascripts/controllers/posts_controller.js.coffeeにあるPostsControllerクラスのshowメソッドが呼ばれるというものです。 # app/assets/javascripts/controllers/posts_controller.js.coffee: class @PostsController show: -> console.log "Hey!" なぜ作ったのか 「さっさとwebアプリを書きたい。」 「RailsのRailから外れる面倒なことはしたくない。」 「Railsはj
javascriptにもカンマ構文があったらしい・・・
javascriptのカンマ構文.md 抜き打ちテストが分からなかった じゃあ this の抜き打ちテストやるぞーをやってみた。 結果として、コードが読めなくて２問空欄解答をするしかなかったので調べてみました。 あ、やってない人は読む前に先にやってみてください。 ちなみにthisの話はあんまりしません。 そして今日調べたばかりなので間違っている可能性や、そもそも自分の知識不足のせいでバカ発見されただけかも知れません。 ただのindirect eval 問題のコードはこれ（※どうやら改訂されてるようです） ('hoge', eval)('this') === window 正直、このコード見たとき何が起こってるのか理解できなかった。 実行結果じゃなくて、この構文が。 結論から言うとカンマ演算子なのだけど、jsでこの記法を見たことがなかったのでちょっと感動しました。 カンマ演算子とは、MDNに
フロントエンドで知っておきたい要素指定の考え方 - pixiv inside [archive]
みなさんはじめまして、ピクシブのフロントエンドエンジニア id:koharusugiura です。 JavaScript を用いた開発を行う際に jQuery や React、vue.js といったライブラリーを使う方は多いでしょう。これらのライブラリーは共通して DOM を扱うライブラリーとなります。 DOM についての説明は長くなるのでここでは省きますが、簡単に説明すると HTML や XML の構造を表現するための仕様です。DOM は JavaScript のためだけにある仕様ではなく、 Java や Python など、多くの言語に対応する仕様です。 前述した各ライブラリーは多くのウェブブラウザー間の差異を吸収してくれるため、非常に便利なものです。しかし、その機能の豊富さからライブラリー自体のサイズは大きく、ウェブブラウザーで読み込むファイルの数や合計の容量が増えてしまいます。状況
![フロントエンドで知っておきたい要素指定の考え方 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/7d644981ad849880f091ef36cfae5c3847f8753a/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F24a8302cb73d8136c53004da7819311a96b0b746%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttp%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fk%252Fkoharusugiura%252F20151222%252F20151222103513.png)
Twitter API を使ってファボ画像を一覧できるサービスを作りました - Qiita
サービスの概要 Twitterでファボしたツイート（今はいいね！）に画像がついてることありますよね？ 私の場合、ファボはだいたい画像付きツイートにするんですが、Twitterの公式アプリだと、後で見ようと思ったとき、ひとつひとつツイートをクリックしないと画像の全体図が見れなくて使いづらいんですよね。 てことでパッと画像が閲覧できるサービスをExpress上に構築しOpenShiftで公開してみました。 サービスのURL QooQ Twitter Favo Photos Viewer https://app-qooq.rhcloud.com/app-twitter/favolist 必要になったもの OpenShiftのアカウント Twitterの開発者アカウント OpenShiftについて RedHatが提供するPasSです。フリーでも３つまでアプリを作成できます。現状ではHerokuのよ
漢字にマッチする JavaScript の正規表現パターン: Days on the Moon
たまに漢字にマッチする正規表現パターンを書きたいときがあります。Perl の正規表現だと Unicode のスクリプト名を使って \p{Han} で漢字にマッチさせられるのですが、JavaScript ではそうはいきません。JavaScript の正規表現には以下のふたつの問題があります。 Unicode スクリプト名の指定 (\p{...}) に対応していない。 そもそも Unicode の符号位置に対してマッチさせられない (UTF-16 における符号単位に対するマッチになる)。 BMP 外の文字にマッチさせたいときは、サロゲートペアの符号単位を記述する必要がある。 これに関しては ECMAScript 2015 で導入された /u フラグで解決する見込み。 とはいえ、解決不能な問題というわけでもないので、Perl の \p{Han} を JavaScript に移植してみましょう。\
ルールプリセットを使ってお手軽にtextlint入門
textlintはルールで拡張出来る自然言語向けのLintツールです。 textlint 5.1.0でルールのプリセットをサポートしました。 ルール、プリセット、プラグインは以下のような関係です。 rule いわゆるルール rule-preset ルールをまとめたもの plugin ルールとプロセッサ(拡張機能)を持ってる textlintはデフォルトでは一つもルールを持っていません。 そのため、どのルールを入れたらいいか迷った場合に、誰かがまとめてくれたプリセットをとりあえず入れれば、とりあえず文章のチェックが出来るようになります。 textlintの使い方は以下で解説しているのと基本的に同じですが、今回はプリセットの使い方を紹介します。 textlintで日本語の文章をチェックする | Web Scratch インストール textlint本体と2つのプリセットをインストールしてみます
Asynchronous Iterative & Recursive Patterns for Node.js - Part 1
04 Oct 2015 Asynchronous Iterative & Recursive Patterns for Node.js - Part 1 Introduction If any thing made node.js as popular as it is now, it’d would its non-blocking asynchronous I/O calls. You baiscally call an I/O routine, give it a function to call back when your operation is done and you go on continuing whatever business you still have without waiting (blocking) for that operation to finis
覚醒JavaScript -ES6で作るIsomophicアプリケーション-
勉強会にてES6-JavaScript-について話た時の資料です。 JavaScript, ECMAScript6, Generator,Node.js,Isomophicに関して話ました。
Fluxフレームワーク戦争の現状確認（後編） - マルシテイア
この記事は仮想DOM/Flux Advent Calendar 2015の25日目……に入れようと思ってたけどもう埋まってた……。 オマケということで頼む！！！！！ 24日目は JavaScript - 実践：MagJS で TodoMVC - Qiita でした。 メリークリスマス！！！！！！！！！！ こんにちは id:amagitakayosi です。 みなさん今月も Flux 書いてますか？ 僕はオレオレ実装をIsomorphic対応したけど昨日Revertしたところです！！！！！ウオー！！！ 今日は↓12/2の記事↓の続きを書いていきます！ amagitakayosi.hatenablog.com もくじ 前回のあらすじ flux-utils Container vs View Cycle.js flux-challenge Rx系 thisless-react, Yolk DDO
app/assets/javascripts以下のJSを全てcommonjsのrequireに書き換える - Qiita
仕事でgulpを使って僕がよくいじる一部のjsを高速でビルドできるようにしてみたのだが、JSをいじらない人の手元でなにかと差分がおかしくなったり、ビルドするタイミングを伝えないことで問題起きたり、その為に呼ばれて治すのがとにかくめんどくさかったため、思い切ってすべてのビルド工程をbrowserify_railsとbrowserify-incrementalと(そのtransform)に押し込んで、gulpを排除してみた。 そんで、browserify_rails は導入しただけだと嬉しさがあまりないので、スクリプトを書いて一気にcommonjsに置き換えることにした。 browserify_rails に関してはhokacchaさんの記事が便利。 モダンJavaScript開発環境 on Rails - クックパッド開発者ブログ 脇道にそれるが、僕は最初、これをbrowserifyを模した
Visual Studio CodeでExpressの開発環境を作ってみます - Qiita
2017/05/30追記 こちらに新しく同じ目的の記事を書き直しましたので、現在ではこちらをご覧下さいませ。 http://qiita.com/t-mimura/items/048bf2e3baa15daf30d8 2016/03/28追記 文中では tsd を利用していますが、現在は typings を使うことが推奨されていますので、そちらをご利用ください。取り急ぎ注記のみで申し訳ありません。（タイミングがあれば書き直します...） はじめに この記事は さくらインターネット Advent Calendar 2015 18日目の記事です。 クリスマスまであと1週間です。たぶん。 普段はフロントエンドの開発をしていますが、今回はExpressのことを書きたいと思います。 やること Visual Studio Code (以下 VSCode) を使ってExpressの開発を始めるまでを流して
ESDoc - The Good Documentation For JavaScript - クックパッド開発者ブログ
こんにちは。会員事業部の丸山@h13i32maruです*1。 ソフトウェアのドキュメント(マニュアル)を書くには色々なツールや方法があります。 JavaScriptの場合はJSDocというドキュメンテーションツールがデファクトスタンダードです。 ですが、JavaScriptの最新仕様であるECMAScript2015(ES2015)がリリースされたことにより、 JSDocの競合として新しいツールが登場したり、JSDoc自体もバージョンアップしたりしています。 本記事ではそうした新しいツールの一つであるESDocを紹介します。 ESDocとは？ ESDocとは私が2015年4月から開発を行っている、JavaScript(ES2015)向けの良いドキュメントを作るためのドキュメンテーションツールです。 https://esdoc.org/ https://github.com/esdoc/es
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
配列名にnameを使用するとfor-inで期待の動作をしない問題 - Qiita
IBM Developer
GitHub - airbnb/javascript: JavaScript Style Guide
The top 5 JavaScript templating engines
JavaScriptでデスクトップ通知（HTML5 Notification） - Qiita
document.cookieをlocalStorageにする - Qiita
【npm + Karma + Jasmine】JavaScriptの単体テスト環境を構築する - Qiita
