こんにちは、中川です。 今回はJavaScriptで開発していると、うっかりハマってしまうちょっとした罠たちを紹介したいと思います。 JavaScriptでの開発経験者であれば、どれか一度はひっかかったことがあるのではないでしょうか? String ●String#replace()は文字列指定では全部置き換えない 対象文字列を一括して置き換えたいなどでString#replace()を使いますが、 検索対象を文字列で指定してしまうと最初に一致した部分しか置換しません。
こんにちは、中川です。 今回はJavaScriptで開発していると、うっかりハマってしまうちょっとした罠たちを紹介したいと思います。 JavaScriptでの開発経験者であれば、どれか一度はひっかかったことがあるのではないでしょうか? String ●String#replace()は文字列指定では全部置き換えない 対象文字列を一括して置き換えたいなどでString#replace()を使いますが、 検索対象を文字列で指定してしまうと最初に一致した部分しか置換しません。
この記事は賞味期限切れです。(更新から1年が経過しています) JavaScriptユニットテスト一年生の私が、Nettuts+ のチュートリアルで知ったテストツール 「testem」のお陰で大変捗ったので是非お勧めしたく、ここで紹介してみます。 testem ってなに testem via GitHub : airportyh/testem Unit testing in Javascript can be tedious and painful, but Testem makes it so easy that you will actually want to write tests. 要するに、面倒なJSのユニットテストをより快適にしてみんなでハッピーにテスト書こうよ!というツールです。 testem自体はnode.jsベースで動作し、Jasmine/QUnit/Mochaに対応して
altJS altJS is a collection of languages and tools aimed at rebooting JavaScript and making it better. Everything you'll find on this page is designed to output code for use on the web or with JavaScript-enabled servers and devices. This site is a handy guide to what's new in the altJS universe, as well as a place to connect. Missing the conversation? Chat on #altJS or join the . Top-Ranking Langu
JavaScriptはTypeScriptです。ほぼほぼ。.jsを.tsとして変更すれば動きます。というほど世の中甘くなくて、まあ、大抵は動きません。えー、なにそれ、欠陥品じゃないの?と思われるかもですが、いえ、結構単純な話です。例えばですが var x = 0; x = "hogehoge"; このコード、JavaScriptとしては正しいですが、TypeScriptとしては間違っていてコンパイル通りません。xがnumberとして推論されるので、"hogehoge"が代入できないからです。じゃあどうするの?というと、 var x: any = 0; x = "hogehoge"; anyとして型定義してやればいいんですね。もしくは var x = <any>0; x = "hogehoge"; でもいいですが。<>はキャストみたいなものです。ちなみに、こういったことの実例はTypeScr
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
2012年09月09日16:00 カテゴリアルゴリズム百選Lightweight Languages ブラウザー上でJPEG圧縮して非可逆性を体感してみる 詳解 画像処理プログラミング C言語で実装する画像処理アルゴリズムのすべて 昌達慶仁 「GIMPでJPEGの蚊を退治して"PNG"化する」「javascript - で bilateral filter (選択的ガウスぼかし)を実装してみた」の反響で、「JPEGのqualityを100に設定すればいいんじゃね?」という誤解がかなり見受けられたので。 実際に体験していただければいいかと。 Demo: File APIを実装しているブラウザーで動きます。ファイルを読み込ませたら、Qualityをいろいろいじってみてください。元画像、JPEG、両者の差の順で表示されます。差の画像をクリックすると差をエンハンスしてくれます。ブラウザー別に以下の
Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications. Introduction The Vanilla JS team maintains every byte of code in the framework and works hard each day to make sure it is small and intuitive. Who's using Vanilla JS? Glad you asked! Here are a few: FacebookGoogleYouTubeYahooWikipediaWindows LiveTwitterAmazonLinkedInMSN eBayMicros
アンカーを URL に表示させるとソーシャルブックマークや Twitter などで集計する際に同じページが別なものとして扱われる可能性がある。jQuery: Smooth Scrolling Internal Anchor Links で示されている短いコードは event.preventDefault() を使うことでアンカーの表示を防いでいる。 $(function() { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({ scrollTop:$(this.hash).offset().top }, "fast"); }); });
最近のモダンな JavaScript では、必ず "use strict" というのが書かれていると思います。この使い方を雰囲気ではわかってるけど、正しく理解していない場合が自分も含めて多いと思ったので書きとめたいと思います。 ちなみに、"use strict" でググると Perl のそれが出てきますが、Perl の話はしません。あとセミコロンの話もしません。 "use strict"とはそもそもなにか "use strict" は、Use Strict Directive と呼ばれています。 これは ECMA-262 の 14.1 Directive Prologues and the Use Strict Directive によって示されています。 A Use Strict Directive is an ExpressionStatement in a Directive Pro
1. はじめに、 今年も Google I/O が開催されました。一度も現地に行って参加したことはないのですが、毎年セッションの内容は技術的に高度なものばかりでいつも注目しています。今年の一つ興味深いセッションで、 「Google I/O 2012 - Breaking the JavaScript Speed Limit with V8 (Daniel Clifford)」 スライド ,ビデオ というのがありました。(ビデオ・資料をすぐ公開してもらえるのはホントありがたいです。) ご存じの通り V8 は Chrome に搭載されているばかっ速い JavaScript エンジンで Node.js でも採用されています。このセッションは、 V8 の内部実装の解説を元にどう JavaScript の実行速度がパフォーマンスチューニングができるかという内容で、もうこれは必見で見逃せないものです。
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
Canvas Advanced Animation Toolkit CAAT is an scene graph director-based animation framework for javascript. Based in the concept of a timeline, offers a powerful animation environment featuring: Scenes. Input abstraction, where touch, mouse, keyboard and accelerometer coexist. Screen resolution abstraction, where you can make your games up/down scale gracefully. Multi render technology, making you
6月22日未明、Twitter のサーバーがダウン し、全世界でサービスが停止しました。一部マニアの方々は、動いていた ケータイ用サーバー から この状況を楽しんでいた (?) ようですが、OMG..twitter was down….closest thing to living without oxygen for most of us…. (なんてこった、オレたちに酸素なしで生きろっていうのか) という声に代表されるように、世界各地で悲鳴が上がったようです。 さて純正の Twitter ウィジェット を貼っているあなたのサイトは、この障害でページが真っ白になったり途中で引っかかったりせず、無事にコンテンツを提供できたでしょうか? ということで、前回 と同ネタですが、こういった フロントエンドの単一障害点 (SPOF) をより簡単にチェックできる Chrome エクステンション SPO
特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。 | More ≫ 昨今の HTML5 ブームは、グラフ描画ソフトの雄である「gnuplot」にも飛び火しています。 HTML5 とはウェブページ作成用の言語である HTML の最新規格のことですが、単に「ウェブページ」の世界に留まらない魅力にあふれる規格として注目を集めています。 これまでPCの世界では、OS(オペレーションシステム)の選択から始まり、その OS 上で動作するアプリケーションを導入するというスキームでした。 しかしながら、スマートフォンやタブレット型PCなどの様々な情報端末が普及するにつれ、各々の環境で動作するアプリケーシ
2013-11-05:A kind fellow named Ilya informed me that {}+foo is probably parsed by JavaScript as {};+foo. To mitigate the issue, all operations are now being wrapped in parentheses before evaluation (e.g. ({}+foo).)
より適切なものが追加されたのでそっちを使いましょう。 setInterval/setTimeout → requestAnimationFrame; これまでは setInterval function render(){ // アニメーション 1フレーム分の処理 } setInterval(render, 1000 / 60); これはもう古い。 これからは requestAnimationFrame function animationLoop(){ render(); requestAnimationFrame(animationLoop); } animationLoop(); こうすべし。 requestAnimationFrameにすると何がいいの? 複数のアニメーション描写処理を一つにまとめて最適化してくれる 同じ用に動かしている物体A,Bの動きが次第にずれていくとかがなくな
Perlには指定した複数の文字列にマッチする最適な正規表現を生成するRegexp::Assembleというモジュールがあって、それが便利そうなのでJavaScriptに移植されるのを待っていたのですが、一向に移植されそうな気配が無いので移植してみました。 自分はPerlが読めないため、つい最近移植されたっぽいPHP版のRegexp::Assembleを丸々コピペして置換してJavaScriptで動くように書き換えました。 PHP版の作者様は移植の際の情報を色々とまとめられており、それを参考にできたこともあって自分でもなんとか移植することが出来ました。 JSなのでデモ用ツールの名前は「正規表現あせんぶるちゃん」にしました。 http://tanaton.com/lib/regexp-assemble-js/ 正規表現あせんぶるちゃんの動作ですが、例えば、 unko tinko manko を
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 よりも5倍以上速く動くんです。まだ最適化があまいところがあるのに。 なぜか。JavaScript の Array#forEach は配
今やwebプログラマの必須科目と言っても過言ではないくらいに必要な言語となったjavascriptですが、javascriptを用いたプログラミングの複雑さに苦しめられている人は(僕を含め)非常に多いんではないかと思います。 プログラミング学習法として、自分でコードを書くこと以外に人のコードを読むことがありますが、他人の書いたjavascriptを読む行為は中世で言うところのアイアンメイデンに匹敵するレベルの拷問である、という言葉もあるように、javascriptは上達のためのコードリーディングが非常に辛いです。ネット上を探してみても、見当たるのはクソコードばかり… そこで、javascriptをある程度書ける人(http://d.hatena.ne.jp/language_and_engineering/20100111/p1で言うところの「ノーマル」「中級者」くらいの人)が読んだらレベ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く