ES6時代のJavaScript - クックパッド開発者ブログ
こんにちは会員事業部の丸山@h13i32maruです。 最近のWebフロントエンドの変化は非常に激しく、ちょっと目を離した間にどんどん新しいものが出てきますよね。そんな激しい変化の一つとしてES6という次期JavaScriptの仕様があります。このES6は現在策定中で、執筆時点ではDraft Rev31が公開されています。 JavaScriptはECMAScript(ECMA262)という仕様をもとに実装されています。 現在のモダンなWebブラウザはECMAScript 5.1th EditionをもとにしたJavaScript実行エンジンを搭載しています。 そして次のバージョンであるECMAScript 6th Editionが現在策定中で、略称としてES6という名前がよく使われます。 今回は、他の言語にはあってJavaScriptにも欲しいなと思っていた機能や、JavaScriptでよ
JavaScript ベストプラクティス Part 1 | POSTD
ThinkfulはWeb/スマートフォンアプリの技術などを学ぶことができるオンラインスクール。プロフェッショナルな開発者がメンターとして1対1で伴走するため、他の同様サービスよりも続けることができる。 Javascript ベストプラクティス パート1 2つのパートに分けてお届けする「ベストプラクティス」のパート1では、MozillaのWebエバンジェリストであるChristian Heilmannが提供する人気のスライドショーから内容を抜粋しています。JavaScriptにはひどく扱いにくい特徴がいくつかありますが、それはこれまで以上にソフトウェア開発において重要になっています。この「ベストプラクティス」ではより読みやすく、効率の良いコードを書く手助けとなるサンプルコードやその使用例を紹介していきます。 もしWeb開発についてもっと学びたいと思うのであれば、私たちが提供しているフロントエ
文字列から要素を作りたいときはinnerHTMLではなくcreateContextualFragmentを使う - 素人がプログラミングを勉強していたブログ
追記：ベンチマークをコメントを元に修正 文字列から要素を作りたい場合、 var temp = document.createElement('div'); temp.innerHTML = '<span>foo bar fizz buzz!</span>'; とやることが多い。 だが、不要なdiv要素ができて気持ち悪いし、for文でchildNodesをひとつずつ処理する必要があって、不便。 divの中にhead要素を入れることはできないので、innerHTML=''としても、要素は作られない。 RangeのcreateContxtualFragmentを使うと、こういった問題を避けることができる。 例えば、上のコードをcreateContextualFragmentを使って書き直すと、 var range = document.createRange(); range.createCon
JavaScriptで関数型プログラミングを強力に後押しするUnderscore.jsのおすすめメソッド12選（lodashもあるよ） - Qiita
はじめに この記事では、関数型プログラミングを強力に後押しするライブラリ、 Underscore.jsとlodashを紹介します。 両ライブラリとも_で使用できます。 ほかのライブラリにも依存せず、 現在フロントでもサーバでもかなり人気なライブラリです。 個人的にもこれなしでは。。 といった必須なライブラリとなっています。 また、Backbone.jsといった人気なフレームワークが、 Underscoreに依存していたりします。 Underscore.js GitHub: https://github.com/jashkenas/underscore Document: http://underscorejs.org/ 和訳: https://github.com/enja-oss/Underscore lodash GitHub: https://github.com/lodash/lo
ServiceWorker を使った XHR のモックテスト - Block Rockin’ Codes
Intro 似た話は既出なのでご提案にはならないけど、PoC として一応ライブラリっぽくしてみた。 タイトルの通り XHR のリクエストに対して、任意のレスポンスを返すことによって、 再現の面倒なエラー処理などのテストを、 Local Proxy 無しで実現する方法のメモ。 というか、これ自体がブラウザ上の JS だけで完結する Local Proxy と言えるかもしれません。 ざざっと書いただけなので、API というか使い方もまだ適当というかどうしようか考えてるところです。 今これが使えるブラウザ自体がそんなにないので、 SW の実装が普及するまでにもう少しまともにしておきます。 Jxck/response-injection · GitHub 色々踏んだので、 Service Worker 使う際の参考になればと。 モチベーション Service Worker(SW) には色々な機能が
io.js-v1.0.0のリリースによせて - ぼちぼち日記
1. 祝 io.js-v1.0.0/1.0.1 のリリース NodeやJSの情報にアンテナを張っている人なら知っているとは思いますが、昨日無事「io.js」がリリースされました。 リリース直前のバグ修正の追い込みやライブラリアップデートのごたごたは、かつてのNodeのリリースそのままでした。 今日のリリースを予言していたわけではないですが、実は昨年の8月初旬に、 ということを書いていました。 これがまさに現実になってしまったなぁ、と驚きと共に感慨深いものがあります。 Nodeの方は、今Julienが頑張ってチケットをクローズしており、近日中に Node-v0.11.15がリリースされる予定です。問題なければNode-v0.11.15のリリース2週間後にNode-v0.12 になるでしょう。 io.jsができた細かい経緯については、古川さんの「io.jsについて知っていること」が詳しいです。
JSX で Array#forEach が５倍以上速くなった話 - kazuhoのメモ置き場
JSX の進化速度が半端ない - ぐるぐる～ で紹介していただいているとおり、最新の JSX では function expression の型宣言を省略できるようになっています。これを利用して、たとえば配列の合計を求める場合、 var sum = 0; [ 1, 2, 3, 4, 5, 6, 7, 8 ].forEach(function (n) { sum += n; }); のように、JavaScript と 100% 同様に書くことができるようになりました。省略形を利用して [ ... ].forEach((n) -> { sum + n; }); でもいいです。 ところでこのコード、見た目は同じなんですが、実は JSX だと JavaScript よりも５倍以上速く動くんです。まだ最適化があまいところがあるのに。 なぜか。JavaScript の Array#forEach は配
Rails で、Controller に定義されている action を一度に取得する方法はありますか？ - QA@IT
平素よりQA＠ITをご利用いただき、誠にありがとうございます。 QA＠ITは「質問や回答を『共有』し『編集』していくことでベストなQAを蓄積できる、ITエンジニアのための問題解決コミュニティー」として約7年間運営をしてきました。これまでサービスを続けることができたのは、QA＠ITのコンセプトに共感をいただき、適切な質問や回答をお寄せいただいた皆さまのご支援があったからこそと考えております。重ねて御礼申し上げます。 しかしながら、エンジニアの情報入手方法の多様化やQAサービス市場の状況、＠ITの今後のメディア運営方針などを検討した結果、2020年2月28日（金）15:00をもちましてQA＠ITのサービスを終了することにしました。 これまでご利用をいただきました皆さまには残念なお知らせとなり、誠に心苦しく思っております。何とぞ、ご理解をいただけますと幸いです。 QA＠ITの7年間で皆さまの知識
The Refactoring Tales - JavaScriptのリファクタリング本を読んだ
GitHub: jackfranklin/the-refactoring-tales 読んだ日付: 2015年1月11日 まだ4章の途中までしか書かれてないですが、ウェブ版は無料で読めてPDF版等は買えるようになるようです(6-7章ぐらい予定) The Refactoring Tales - JavaScript Playground またGitHubにソースが公開されています(ウェブページはまだ反映されてない感じのtypoの修正等がありました) 感想 1,2章はフロントのJavaScriptで、jQuery世界を例にjQueryでべったり書いてしまったものをどうやって分けていくかの話。 1章はとても読みやすくて完成度もあるので読んでみるといい気がします、2章のカヌーセルの話はもっと深くやっても良かったような気がします。 縦に並ぶ$を見かけるとつらい感じになりますが、まずは手が出しやすい場
ライブラリをES2015(ES6)で書いて公開する所から始めよう
この記事はECMAScript 2015の事始めとして、ライブラリをECMAScript 2015で書いて公開するというところから始めるのがいいのではという内容です。 ECMAScript 2015(ES2015)はES6とも呼ばれていてどちらも同じものを指しますが、この記事ではES2015に統一します。 ECMAScriptのバージョンについては次のページを参照してください。 ECMAScript · JavaScriptの入門書 #jsprimer 2018-12-27: 追記 textlint/textlint-rule-helperのmasterはTypeScriptの実装へ変換されています。 Babelの実装はhttps://github.com/textlint/textlint-rule-helper/tree/2.0.1から参照できます Babel から TypeScrip
2014-12-30のJS: jsdom 2.0.0、6to5 2.0.0、HTMLBars
JSer.info #208 - DOMのJavaScript実装(Node.jsでも動くDOMの実装)であるjsdom 2.0.0がリリースされました。 機能的な追加ではないですが、2.0.0となったのは今までDOM Level{1,2,3}別で実装されていたが、今後はLiving Standardモデルで実装していくという方針を示すためだそうです。 バージョン番号をつけるのはメリットよりもデメリットのほうが多いという過去の経験やjsdom内部でもlevel別だと辛い感じになってきたので、Living Standardモデルへと変えていくことになったようです。 公開APIについては殆ど変更はありませんが、内部的にかなり構造を変更していくリファクタリングをして行くようです。 ES6のコードをES5へ変換するツールである6to5 2.0.0(現時点で2.2.0まで出ていますが)がリリースされ
モダンぽいJavaScriptテスト環境の構築メモ - maru source
こんにちは丸山@h13i32maruです。 ES6でアプリコード、テストコードを書いてテストをするための環境を作ったので、そのメモです。 目標 ES6で書いたアプリコードとテストコードをnpm run testでテストする 最終的な環境 最終的にはこんな環境になった。リポジトリ ECMAScript6 Google Chrome Travis CI npm traceur-compiler mocha espower-cli karma karma-cli karma-mocha karma-chrome-launcher bower power-assert 今回はgrunt/gulpのようなビルドシステムは入れていない。npm runをタスク実行のフロントとすることでタスク自体はお手軽にshで書いた。shだとwindowsが厳しいけど、まあとりあえず自分の環境用だしいいかなと。 以降で
私のJavaScript情報の集め方 - Qiita
ちょっと趣向を変えてJavaScriptの情報をどうやって集めているかという話を書きたいと思います。 使っているもの Twitter RSS(feedly) Pocket はてブ TwitterはただフォローしてTL見ていたり検索してたまに見ているだけでリストを作ったりはしてなくて暇な時に見ている感じです。 RSSはこれから紹介するようなサイトとかこの人のブログ面白い！というものだけを登録しています。未読が100件増えると消化する気がどんどんなくなっていくので...。 PocketはTwitter、RSSで気になったものを後で読むためにとりあえず突っ込むのに使っています。 こうすることでRSSはすぐに終わるので、その後で時間があればPocketで読みます。 Pocketに溜まった記事はちょっとした合間に読んだりしていて、たまにまとめて読んだりして消化しています。 今見ると20件くらいあるの
「生JavaScriptで十分」な人にこそTypeScriptをおすすめしたい理由 – mzsm.me
こんにちは。 TypeScript Advent Calendar 23日目の記事となります。 昨日22日目はmizchiさんでした。 今日は、まだTypeScriptを使っていない人、特に、「普段JavaScriptをよく触っていて、altJSに興味はあるけど、いまいち新しい言語を覚えるほどのモチベーションはない」という人に向けて、僕がTypeScriptを使いはじめて感じたことを書いてみたいと思います。 筆者がTypeScriptを使い始めるまでのプログラミング言語遍歴 話を始める前に、まずは筆者がこれまでに使ってきたプログラミング言語を振り返ってみます。 JavaScript (2000〜現在) HSP (2001〜2003) PHP (2004〜2009) Python (2009〜現在) …というように、まともに触ったことがあって、それなりに使えるようになったプログラミング言語は
IE10 以下を切る場合の JavaScript チェックリスト - Qiita
この投稿は、 JavaScript Advent Calendar 18日目の記事です。 更新履歴 こちら をご覧下さい JavaScript の書き方をアップデートする JavaScript Good Parts で書かれているような JS の書き方は、古くなりつつある部分も多いです。 正直なところ、自分はあの本が「今でも」良書だとは思っていません。 初学者に勧めることもしません。まんべんなさと普遍性と客観性から「パーフェクト JavaScript」 を勧めています。 その頃と比べると、 JavaScript をとりまく環境は変わりました JavaScript の進化に合わせて書き方もアップデートしていくべきなので、今回は分かりやすいしきい値として 「IE10 以下を切れるとしたら」 という前提で、列挙してみます。 たとえば XHR2 や File API に依存したサービスをやる場合な
『意外と遅い、jQuery#clone』
この記事は、jQuery Advent Calendar 2014の4日目です。 jQueryネタで何か書こうとして下調べしていたら、意外なことに気づいたのでそれを記事化することにしました。 ノードのキャッシュ JavaScriptで大量の要素を組み立てる場合、都度HTMLをパースしたり、エレメントを生成したりといったコストを避けるために、あらかじめ1つだけエレメントを用意しておいて、それをcloneNode()することで賄う、というような手法が定石となっていて、jQueryでもclone()メソッドがあります。 コピーしないほうが…速い！？ ところが、jsPerfで測定していたところ、奇妙な現象が起きました。なんと、clone()せずに、都度HTMLからjQueryオブジェクトを生成するほうが速くなってしまったのです。 jQueryのソースコードを追ってみると、HTMLからDOMを生成す
[JavaScript] 最近のjQueryとの付き合い方いろいろ - YoheiM .NET
こんにちは、@yoheiMuneです。 今日はjQuery Advent Calendar 2014の15日目の記事として書きたいと思います。 何を書こうかなーと思っていたのですが、最近の自分とjQueryについてライトに書いてみたいと思います。 Special Thanks to https://flic.kr/p/92J4Qt 目次 利用者としての付き合い方 最近の案件ではjQueryラブの時代は過ぎ去ったようで、案件によってjQueryが使われたり使われなかったりします。 今の案件ではjQueryが導入されていますが、担当者がコロコロと入れ替わったらしく、様々なjQueryの使い方が散乱しています。 ほぉほぉこんな書き方もできるのかと学ぶことが多くて、ある意味有意義ですw。 jQueryを使う理由 最近感じるjQueryを使うメリットは、以下のようなことがあります。 何かサクッと作る
![[JavaScript] 最近のjQueryとの付き合い方いろいろ - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/c317869f558b1e5757165df2d3ac230f00b3dc87/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F349.jpg)
jQuery の関数をオーバーライドする方法 - 株式会社CFlatの明後日スタイルのブログ
今回は、jQuery を使って$('#hoge').hoge()とした時に、元のhogeの機能に加えて追加のコードが走るようにしたいですね、というお話です。 普通の JavaScript で関数をオーバーライドする方法 こちらは JSer なら常識ですね。 var orgHoge = window.hoge; window.hoge = function() { // TODO: 事前の追加のコード var result = orgHoge.apply(this, arguments); // TODO: 事後の追加のコード return result; }; なお、このコードを見て「処理が足りてないじゃないか」と言える方は、以降の話は全く必要ないかと思います。 jQuery の関数をオーバーライドする方法 では、jQuery で$('#hoge').hoge()とした時のhogeはどこで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - enja-oss/README: enja-ossへようこそ! まずはこちらを一読ください。
「Google Chrome」で開いたCSS/JSコードを整形・色分けする拡張機能「PrettyPrint」NOT SUPPORTED
