タグ

JavaScriptに関するrryuのブックマーク (231)

  • JavaScriptでうっかりやってしまいそうなこと色々

    こんにちは、中川です。 今回はJavaScriptで開発していると、うっかりハマってしまうちょっとした罠たちを紹介したいと思います。 JavaScriptでの開発経験者であれば、どれか一度はひっかかったことがあるのではないでしょうか? String ●String#replace()は文字列指定では全部置き換えない 対象文字列を一括して置き換えたいなどでString#replace()を使いますが、 検索対象を文字列で指定してしまうと最初に一致した部分しか置換しません。

    rryu
    rryu 2012/11/01
    「条件付きで関数を定義する」のところはECMA-262的にはfoo()でエラーになるはずだが、厳密にやるといろんなところが死にそうなのであえてゆるいのかも。
  • 大規模 JavaScript その設計と実装と現実

    1. 大規模 JavaScript その設計と実装と現実 株式会社Aiming ソフトウェアエンジニア 竹馬光太郎 2012/10/24@AimingStudy#6 12年10月24日水曜日 2. @mizchi / Koutaro Chikuba 2012/3/1- Aiming/Software Engineer * github https://github.com/mizchi * blog http://d.hatena.ne.jp/mizchi 12年10月24日水曜日

    大規模 JavaScript その設計と実装と現実
  • JavaScriptでネイティブ並の速度を誇るゲームを開発·Ejecta MOONGIFT

    EjectaはCanvasとオーディオ、JavaScriptをサポートしたフレームワークでネイティブ並のiOSアプリ(ゲーム)を開発できます。 iOSアプリでゲームを開発する際にはObjective-Cを使うのが基でしょう。WebベースであったりTitaniumのようにJavaScriptのエンジンを経由するとそれだけ速度が低下してしまいます。しかしそんな限界に果敢に挑戦するフレームワークがEjectaです。 サンプルです。JavaScriptとは思えないほどスムーズな動きです。 指を動かすと線の太さ、明るさが変化します。 これくらい細くもできます。 線の数をぐっと減らしました。 Ejectaはゲームとアニメーションに特化したソフトウェアで、Canvasとオーディオだけで構成されています。JavaScriptは素のJavaScriptとして実行されます。これによりHTML5のゲームは多少

    JavaScriptでネイティブ並の速度を誇るゲームを開発·Ejecta MOONGIFT
    rryu
    rryu 2012/10/09
    描いたものを全画面フェードアウトで消しつつ描き重ねていく系の効果は、見た目の派手さに比べて処理は全然軽いので、速い証拠にはならないなあ。
  • Ruby脳が理解するJavaScriptのオブジェクト指向

    (追記:2012-12-15) 記事およびこれに続くその2,その3をまとめて電子書籍化しました。「Gumroad」を通して100円にて販売しています。内容についての追加・変更はありませんが、誤記の修正およびメディア向けの調整を行っています。 電子書籍Ruby脳が理解するJavaScriptのオブジェクト指向」EPUB版 このリンクはGumroadにおける商品購入リンクになっています。クリックすると、オーバーレイ・ウインドウが立ち上がって、この場でクレジットカード決済による購入が可能です。購入にはクレジット情報およびメールアドレスの入力が必要になります。購入すると、入力したメールアドレスにコンテンツのDLリンクが送られてきます。 購入ご検討のほどよろしくお願いしますm(__)m 関連記事: 電子書籍Ruby脳が理解するJavaScriptのオブジェクト指向」EPUB版をGumroadか

    rryu
    rryu 2012/09/11
    プロトタイプチェーンが触れればこんなにも簡単なのに、何で内部プロパティなので見えもしないというめんどくさい仕様にしてしまったのか。
  • jQueryについての所感

    昨今jQueryについての所感とつきあい方を考える はじめはPHPとa-blog cmsがメインだったこのブログも、いつの間にかJavaScript(jQuery)とご飯レシピブログという謎な方向への珍走を遂げています。 そんな中、個人的にjQueryとのつきあい方について色々聞いたり思ったりで、だらだらとアウトプットしてみます。オチはつきませんでした。ダラァ...('A`) ってこれ、今年の3月に大半書いていて、なぜか8月も末の今頃に加筆修正かけたので色々アレなところあったらごめんなさい!!!もったいないから公開させてください、、てへぺろ(・ω<) なぜjQueryなのか jQuery周辺のノリ(何でもjQuery・コスト感なくjQuery・jQueryスニペット信仰)などに、正直ネガティブな感情抱くこともありますが、素直な気持ちで見ればjQueryはとても効率的だと思います。Web上

    jQueryについての所感
    rryu
    rryu 2012/09/02
    jQueryはDOM操作に関してはいい感じにDSLっぽいので、jQueryが使えるならJSも書けるということにはならないのがあれな感じ。
  • Loading...

    rryu
    rryu 2012/09/01
    HyperCardのスタックをそのままJSで実行するサービス。
  • phiary

    JavaScript における比較演算子 == と === の使い分けって, C や Java といった他の言語にはない仕組みなので意外と戸惑う人もいるみたいですね. 今回はその違いについてまとめました. Runstant Lite で作ったサンプルもあります. 良かったら fork して遊んでくださいな♪ 等価演算子と厳密等価演算子 JavaScript には, 型変換して比較するあいまいな比較と厳密に比較する方法の2通りがあります. あいまいな比較 == は等価演算子, 厳密な比較 === は厳密等価演算子と呼びます. JavaScript の比較における特徴はこちら 2つの文字列は、文字の順序が同一で、長さが等しく、かつ対応する位置の文字が等しいとき、厳密に等しくなります。 2つの数値は、数字的に等しいとき(数字の値が等しいとき)、厳密に等しくなります。NaNは、どんなものとも(Na

    phiary
    rryu
    rryu 2012/08/20
    バグの元という話は必ず出るけど、具体的にどんなバグが起こるのだろう。
  • JavaScriptの継承について

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    JavaScriptの継承について
    rryu
    rryu 2012/08/18
    JSでの継承は継承とインスタンス生成がまとめて行われるnewとの戦いである。
  • 不思議な言語JavaScript | L'eclat des jours(2012-07-25)

    _ 不思議な言語JavaScript たとえば、Excelのセルに文字を入れまくるのが嫌いだとする。ならば、適当なマークアップとWin32OLE(たまにVBA)だ。 というように、ある言語が不快だけど使わなければならなければ代替の言語を使う/作って、その言語に流し込むというのはあると思う。というかある。 で、筆頭はJavaで、あまりよろしくない部分があるので、EclipseというDSLを使ったり、Clojureでコード書いたり、Scalaでコードを書いたりすることになる。おれはEmacsで普通に書く程度には嫌いじゃないけど。 ある意味ではCもそうで、機械語を直接書く(というかアドレスリロケーションしたり、ジャンプ先のバイト数を数えたりするのがいやな人が)マクロアセンブラを使い、マクロアセンブラを直接書くのがいやな人がCを作ったり使ったりして、今ではCを使うのがいやな人がC++を作ったり使っ

    rryu
    rryu 2012/07/25
    文法というよりもプロトタイプベースともクラスベースとも言いづらいアレ、すぐにどこかへ行ってしまうthis、もはや貧弱すぎる標準クラス郡あたりな感じが。
  • PhantomJS - Scriptable Headless Browser

    Important: PhantomJS development is suspended until further notice (more details). PhantomJS is a headless web browser scriptable with JavaScript. It runs on Windows, macOS, Linux, and FreeBSD. Using QtWebKit as the back-end, it offers fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG. The following simple script for PhantomJS loads Google homepag

    rryu
    rryu 2012/05/26
    headlessなWebKitレンダラをJSで制御できるコマンド。DOMも触れるといいつつ基本はキャプチャ取るもののような。
  • Private Presentation

    Private content!This content has been marked as private by the uploader.

    Private Presentation
    rryu
    rryu 2012/05/17
    「単体のJSファイルを200行書くと人間は死ぬ」
  • すでにある機能の廃止は難しい - fragmentary

    OperaがWebKitの接頭辞を…というのは、まあとりあえずは中の人からの報告を待っておくとして。 さて、WebKitプロジェクトは接頭辞についてどう考えているんだろうか。先週やっていたWebKit Contributor Meetingで接頭辞などについて取り上げたセッションがあったらしい。 Deprecating features and vendor prefixes 機能の廃止、接頭辞の削除と、ふたつトピックがあったので、ふたつに分けて書く。 機能は廃止できるのか この前WebKitは接頭辞をエイリアスとして残す方針があると書いた。もう少し広げてかくと、既存のコンテンツが依存している機能は、接頭辞の有無にかかわらず、削除せず残しておく感じだ。カジュアルに使われやすいCSSの機能は、たぶん削除されることは今後もほぼないと考えている。 けれど、APIについては実装を削除している場合も

    すでにある機能の廃止は難しい - fragmentary
    rryu
    rryu 2012/04/28
    インターフェースの変更は直ちに確実に影響が出るし、実行されるコードと実行環境の更新が全く同期しないしで、ブラウザのJS APIは絶対に削除できないんじゃないだろうか。
  • グローバルコンテキストでビルトインオブジェクト/関数と同名のものを定義した場合の動作 - Enjoy*Study

    下記のようなページを実行すると、Firefox11とIE8だとエラーになって、Chrome18だとエラーとならずにalertが実行されました。 <html> <body> <script type="text/javascript"> var alert = alert; alert(1); </script> </body> </html> Firefox、IEの動作だと、var宣言された時点で、右辺のその変数が未定義扱いとなっているようです。 もともとは、下記のようなコードがFirefoxで動作しなくて気がつきました。 (これはグローバルコンテキストで実行された場合で、関数内なら意図した動作(window.URLが代入)になります) var URL = window.URL || window.webkitURL;

    グローバルコンテキストでビルトインオブジェクト/関数と同名のものを定義した場合の動作 - Enjoy*Study
    rryu
    rryu 2012/04/24
    varに関する未定義動作について。
  • 「Meteor」は、JavaScript/HTMLで開発するリアルタイムWebアプリケーション基盤。何が起きているのかすぐに分からないほどすごい

    「Meteor」は、JavaScript/HTMLで開発するリアルタイムWebアプリケーション基盤。何が起きているのかすぐに分からないほどすごい 「Meteor」は、Webアプリケーションを開発するためのフレームワークと実行環境を提供しています。アプリケーションはすべてJavaScriptHTMLCSSで記述できるため、サーバ側でRubyPerlJavaなどのプログラミングをする必要はありません。 TechCrunchの記事では、JavaScript/HTML/CSSだけでWebアプリケーションが開発できる点にフォーカスが当たり話題になりましたが、公開されたデモンストレーションのスクリーンキャストを見たところ、Meteorにはそれ以上に新しい仕掛けが盛り込まれていました(スクリーンキャストはこの記事の末尾に埋め込んであります)。 それは「リアルタイムなWebアプリケーションを構築す

    「Meteor」は、JavaScript/HTMLで開発するリアルタイムWebアプリケーション基盤。何が起きているのかすぐに分からないほどすごい
    rryu
    rryu 2012/04/18
    Meteorはモデル・ビュー自動同期の仕組みを持ったフレームワークだった件。ビューの同期は今のところ全リフレッシュぽいが…
  • 1分でWebアプリを作れて、3分で公開できた!オールJavaScriptでWebアプリを開発できるMeteorを触ってみた - IT-Walker on hatena

    もうJavaRubyも要らない?–JavaScriptオンリーの未来派WebアプリフレームワークMeteorがデビューという記事で知った、新しいフレームワークMeteor。 ちょっと気になったので、軽く触ってみました。すごすぎるフレームワークの登場です!! 正確に言うと、実行環境&フレームワーク&クラウドPaaS&パッケージマネージャーといったところでしょうか。Node.jsとHerokuとnpmが一緒になったようなもんだと思えば、イメージがわくと思いますが、実態はそれらを上回っています(パッケージ数はnpmの比じゃありませんが・・・使い勝手という意味で)。 インストール ターミナルをたちあげて、以下のコマンドを実行するだけ。 (行頭の$はターミナルであることを表してるだけで、コマンドの一部じゃありません) $ curl install.meteor.com | sh これで /usr/

    1分でWebアプリを作れて、3分で公開できた!オールJavaScriptでWebアプリを開発できるMeteorを触ってみた - IT-Walker on hatena
    rryu
    rryu 2012/04/15
    なんか、サーバ側で動くJSとテンプレレンダリング時に動くJSとjQueryなりで動的に動くJSがごっちゃになって非常に混乱しそう。
  • 七章第二回 ノードどうしの位置関係を知る — JavaScript初級者から中級者になろう — uhyohyo.net

    七章第二回 ノードどうしの位置関係を知るこのページの最終更新日:2018年7月29日 今回はcompareDocumentPositionというメソッドを紹介します。これはノードが持つメソッドで、題にある通り、ノードどうしの位置関係を知るというものです。いきなりサンプルを見てみましょう。 <!doctype html> <html> <head> <title>test</title> </head> <body> <p id="p1">p1</p> <p id="p2">p2</p> <script type="text/javascript"> var p1 = document.getElementById('p1'); var p2 = document.getElementById('p2'); console.log(p1.compareDocumentPosition(p2)

    七章第二回 ノードどうしの位置関係を知る — JavaScript初級者から中級者になろう — uhyohyo.net
    rryu
    rryu 2012/03/30
    node. compareDocumentPosition()について。
  • こんな手が!Faviconを使って通知数を表示する·Tinycon MOONGIFT

    Tinyconは未読などの通知をWebブラウザのお気に入りアイコンの上に表示するソフトウェアです。 Webサービスでメッセージをやり取りしたり、チャットなどで新着通知を出したいことがあります。そんな時にタイトルで教える方法もありますが、Tinyconは面白いことにFaviconを使って通知ができます。 Faviconの下に数字が書かれています。数秒ごとに自動で繰り上がっていきます。 デモです。どんどん数字が繰り上がっていきます。 実装する際のコードです。数値を当てるだけの簡単な使い方です。 Faviconの画像に数値を重ねて表示する程度であればサーバサイドでも実装できるでしょうが、TinyconはリアルタイムにFaviconを変化させられる点が強みです。メッセージを受け取ったタイミングで変化させればユーザの気付きにも役立つことでしょう。 TinyconはJavaScript製のオープンソー

    rryu
    rryu 2012/02/20
    キャンバスにfaviconと数字を重ね書きして、そのdata URLをlink要素に設定することで実現。
  • JavaScriptの無名関数の実行 (function(){})() と (function(){}()) の違い | 圧縮電子精神音楽浮遊構造体

    2011年12月17日土曜日 JavaScriptの無名関数の実行 (function(){})() と (function(){}()) の違い JavaScript Advent Calendar 2011 (オレ標準コース) 17 日目、polygon_planet です。 ずっと Advent Calendar 参加してみたいなぁと思ってたんですが ネタが思いつかない日々で半分諦めてたんですが、考え過ぎな気がしてきたので 別におもしろい記事でもないし、技術的にも参考になるのか不明ですがとりあえず書きます。 もしかしたら同じようなこと解説してる記事がすでにあるかも…(うまく検索できてない) JavaScript で無名関数をその場で実行するとき、 (function() { // 処理 })(); という書き方が主流っぽいですが、 (function() { // 処理

    rryu
    rryu 2011/12/18
    実行上も構文通り括弧があるかないかの違いだった、と。強い処理系だと最適化で括弧の処理は消されそうな気がしないでもない。
  • Backbone.js で HTML の View と Model を分離してみるよ - スタジオ・アルカナ技術ブログ

    はいどうも~。Japanese Schoolgirlsが好きなエンジニアの吉田です。 以前「jQuery.tmpl() で HTML の View と Model を分離してみるよ」という 記事を書きましたが、引き続きJavaScriptによるMVCシリーズ第二弾! 今回は、Backbone.jsでViewとModelを分離させてみるという試みです。 ここ最近、JavaScriptのMVCライブラリだと「JavaScriptMVC」や「Knockout.js」 「Backbone.js」などがぼちぼちと知名度を挙げてきているような印象です。 (※注)正確にはKnockout.jsはMVCではなくMVVM(Model-View-ViewModel)ですね。 そんな中SoundCloudなどでも使用されているBackbone.jsがとても気になって いたので、どのような感じで利用できるのか試し

    rryu
    rryu 2011/11/23
    MVCというよりはview特化のObserver/Observableパターンという感じ? モデルへの操作にどこまで追随してくれるのかは謎。表示機能自体はjQuery.tmpl()等を使っている自力で実装する。
  • 『JavaScript:The Good Parts』にツッコミ (Kanasansoft Web Lab.)

    前エントリで、『JavaScript:The Good Parts 「良いパーツ」によるベストプラクティス』が万人向けでないことを書きました。 自分の実力を顧みず、こののベストでない部分をつっこんでいこうと思います。ゴリアテどころかゴリアテの集団に挑んでいくような状態ですね。 さて、全エントリで書いた通り、このは悪いではなく良であり、読む人が読むと良い刺激になるに違いないと思っています。これを契機によりよいJavaScriptの書き方について論議が進むのではないかと期待しています。しかし、対象と思われる層が中級者以上で、初級者が読むと逆に悪になりかねない部分を持っています。勘違いしそうな部分、気になった部分を中心に記述していきます。このため、否定的な内容は沢山出てきますが、上記のような前提ですので、書籍全体がこのような内容が散見されるわけではありません。そして、これを読んでの内

    rryu
    rryu 2011/11/13
    ++と--演算子は前置と後置で評価結果が異なって罠っぽいので禁止みたいな話は見たことあるけど、それは三項演算子禁止と同じレベルのアレな世界だけだと思っていたのによもやJS界にも——