タグ

JavaScriptに関するtermin2のブックマーク (53)

  • 十三章第二回 Server-Sent Events — JavaScript初級者から中級者になろう — uhyohyo.net

    十三章第二回 Server-Sent Eventsこのページの最終更新日:2017年10月1日 今回紹介するのはServer-Sent Events (SSE)と呼ばれる仕組みです。これはJavaScriptからある種のHTTP通信を行う方法です。前回紹介したXMLHttpRequest (XHR)は、ある程度の制限こそあれ、自由にHTTP通信を行うことができるAPIでした。XHRは“生”のHTTP通信を行うことができます。つまり、自分でリクエストを作って送り、レスポンスの中身をそのまま渡されてあとは自分で処理するというものです。 一方、今回のSSEはXHRに比べてハイレベルなAPIです。SSEで行うことができるHTTP通信の形は決まっていますが、より抽象化された形で通信を扱うことができます。また、実はSSEによるHTTP通信はXHRで真似することはできません。 回りくどくなりましたが、S

    十三章第二回 Server-Sent Events — JavaScript初級者から中級者になろう — uhyohyo.net
  • ESLint 最初の一歩

    We're excited to announce that ESLint v6.0.0 has been released: https://t.co/EO4ZrZIMYM — ESLint (@geteslint) 2019年6月22日 ESLintJavaScript のための静的検証ツールです。コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ちます。同様のツールとしては JSLint, JSHint 等があります。 ESLint の特色は、 すべての検証ルールを自由に on/off できる 自分のプロジェクトに合わせたカスタムルールを簡単に作れる 豊富なビルトイン ルール (5.0.0 時点で 260 個) に加えて、たくさんのプラグインが公開されている ECMAScript 2015 (ES6), 2016, 201

    ESLint 最初の一歩
  • ESLint をグローバルにインストールせずに使う - Qiita

    はじめに ESLint 最初の一歩では、ESLint をグローバル インストールしていました。 グローバル インストールすると eslint コマンドにパスが通って便利ですが、欠点もあります。 プロジェクト毎に異なるバージョンの ESLint を使えない。 ESLint が互換性のないバージョンアップをした時に困る (1.0.0, 2.0.0 のようなメジャーバージョンアップは互換性がありません) 利用するプラグイン・共有設定もグローバル インストールしなければならない チームで同じバージョンに揃えるのが手間である npm のエコシステムでは、コマンドもプロジェクト ローカルにインストールして使うのが主流です。 そうすることで、package.jsonに依存バージョンとともに記述して共有することができます。 npm install 一発で、チームが同じ環境を揃えられるわけですね。 この記事

    ESLint をグローバルにインストールせずに使う - Qiita
  • なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita

    追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか!という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative

    なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita
  • あなたがReactを使うべき理由 - mizchi's blog

    最近フロントエンドでfacebook/reactをずっと使っている。世界的には一部のエンジニアの間で流行っているのだが、国内だとqiitaのタグ等を見てもどうも少ない。みんなもっと使うべきだと思うので、宣伝かねて意見をまとめてみる。 複雑化するデータバインドに対する懸念 MVWのVに対して思いを馳せると、だいたい次のことに行き着く。すなわち、「ある構造体の入力に対して、必ず一意なビューを生成したい」 {items: [1, 2, 3]} を入力とすると、 1, 2, 3のli要素になってほしい。これは単純な例だから問題に成り得ないように見えるが、アプリケーション全体の状態を一つのjsonとして定義し、 そこから常に0から組み立てればアプリケーションの健全性が確保できると考えたことはないだろうか? 現実の問題 UIのだいたいの状態は遷移で表現される。遷移の差分をプログラマが記述する。jQue

    あなたがReactを使うべき理由 - mizchi's blog
  • Deferredな $.ajax をラップしてコールバック関数(done/fail)に共通処理を追加する - Qiita

    Deferred でない場合 コールバック処理を従来の success, error, complete で指定する方法。 こんな感じでプロジェクト特有の共通処理などを追加していることが多いと思います。 実装 var myAjax = function(arg) { var opt = $.extend({}, $.ajaxSettings, arg); opt.success = (function(func) { return function(data, statusText, jqXHR) { console.log('success時の共通処理 ...'); if (func) { func(data, statusText, jqXHR); } }; })(opt.success); opt.error = (function(func) { return function(j

    Deferredな $.ajax をラップしてコールバック関数(done/fail)に共通処理を追加する - Qiita
  • jquery の html() と append を追う

    script 要素を含む dom を jquery の $.html() で動的に挿入するようなケースで意図した動作をしなかった. 動的に追加された script 要素のなかの js のコードや外部 js が実行されることを期待 それらのコードは他の人が書いたものでいろんな種類があり中身は把握しきれない 実際には新しいドキュメントにそれらの script が実行された結果がでたりする document.write を使ってるスクリプトはあるからそれのせいっぽい $.html() $.html() は manipuration.js 基的に innerHTML につっこんでいる ただし引数の文字列に script などの要素が入っている場合は $.append() を呼ぶ rnoInnerhtml = /<(?:script|style|link)/i, .... if ( typeof

    jquery の html() と append を追う
  • jQueryでスマホのスクロールイベントを無効化する - Qiita

    // スクロール禁止 $(window).on('touchmove.noScroll', e => { e.preventDefault(); }); // スクロール禁止 解除 $(window).off('.noScroll'); const $window = $(window); const $menu = $('.menu'); const $menuBtn = $('.menu-btn'); let openFlag = false; $menuBtn.on('click', () => { if (!openFlag) { // スクロール禁止 $window.on('touchmove.noScroll', e => { e.preventDefault(); }); // メニューを表示 $menu.fadeIn(() => { openFlag = true; });

    jQueryでスマホのスクロールイベントを無効化する - Qiita
  • D3.js例文辞典

    このページはD3.jsの用例を扱っています。D3.jsのD3はData-Driven Documentsを意味しています。 D3.jsの入門書、発売中です。D3.jsについて学習したい人はぜひどうぞ。 Kindle版が発売されました。また、Google Play、楽天Koboでも購入できるようになりました。 更新情報はTwitter (@openspc)でアナウンスしています。 *勉強用に作成したページなので間違いや不具合の出るサンプルがあるかもしれません。致命的なもので、これはまずいというサンプルがありましたらopenspc@alpha.ocn.ne.jpまでメールをください。

  • Node.jsエンジニアなら2014年内に知っておきたいPromise入門 | Tokyo Otaku Mode Blog

    Promiseは非同期処理をベースにした並列処理の実装方法の一種です。Promiseでは並列処理の各タスクが必ず1回実行されることが保証され、タスクとタスクからの結果を取得する処理を分離することできます。また、タスクの並列処理/直列処理をユーザーが自由に制御することができます。 ECMAScript Language Specification 6th EditionにPromiseが追加されたことから、しばらくの間JavaScriptの非同期処理に関する話題の中心はPromiseになると思われます。 Node.jsでも既にPromise対応したモジュールも多く、Promiseでのみ非同期処理を提供しているモジュールも存在します。Promiseを使用する機会は今後必然的に増えていくでしょう。 今回のエントリーでは、Node.jsでPromiseを使用する方法を説明します。コード例を中心に理

    Node.jsエンジニアなら2014年内に知っておきたいPromise入門 | Tokyo Otaku Mode Blog
  • D3.jsはなぜ人気があるのか? そして、なぜ難しいのか?

    個人的なD3愛についてはこちらに。 日ではまだまだ知名度の低いD3.jsですが、海外ではGithubの人気レポジトリランキングで上位(現在7位)に上がるなど非常に注目度の高いライブラリです。 JavaScriptには他にも多数のChartライブラリが存在しているのですが、その中でなぜD3がこんなにも注目されているのか? その理由を考えてみました。 結論 なんかスッゲー長くなったので先に結論を書いておきます。 他のChartライブラリより柔軟性が高いコードが簡潔に書けるJavaScriptの面白さを味わえる理解が進む程に惹かれる設計の妙 以上。以下、詳細。 柔軟性 データをグラフとして表示するには、データを画面上の座標に変換しなければなりません。散布図として表示するためにはデータの値を画面上のXY座標変換する必要がありますし、円グラフとして表示するには値の割合からそれぞれの内角の角度などを

    D3.jsはなぜ人気があるのか? そして、なぜ難しいのか?
  • D3.jsにあてはまらないこと | POSTD

    最近D3.jsをかなりいじってみました。APIをあれこれ調べ、すこし複雑なチャートを構築した後、長い間D3を誤解していたことに気づきました。それは私だけではありません。友達と話してみると、彼らもD3について勘違いをしています。そこで、よくある誤解のいくつかをはっきりとさせるために、この記事を書く事にしました。 D3はチャート・ライブラリではありません D3のホームページに行くと、たくさんの素晴らしいチャートとビジュアライゼーションを見ることができます。しかし、D3は、 Highcharts や Chart.js あるいは Google Charts のようなチャート・ライブラリではありません。ただ単に、データセットを受け渡すことや、必要なチャートのタイプ指定、凝ったチャートを入手することはできません。D3はそれよりもずっと低レベルなのです。D3上に構築されたチャート・ライブラリでは、たとえ

    D3.jsにあてはまらないこと | POSTD
  • Mongoose のモデルに独自メソッドを追加する - KrdLab's blog

    久しぶりに Mongoose ネタです.Schema の API である static メソッドについて少しだけ. 今回は短め. 見出し 何ができる? 登録した関数内での処理 実際の定義 参考にした情報 何ができる? 例えば User というモデルを定義 (UserSchema) したとします.User に対しては,find/findOne といったメソッドを呼び出すことができます. しかし,例えば DataMapper のような「first_or_create (あれば最初の 1 つを返す,無ければ作って返す)」が欲しくなった場合はどうすればよいでしょう? 上記のような場合に Schema.static メソッドを使用します.Schema.static メソッドは,モデルに対して独自の処理を追加することができます. var UserSchema = new Schema({ name:

    Mongoose のモデルに独自メソッドを追加する - KrdLab's blog
  • Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

    A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

    Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
  • 爆速でわかるjQuery.Deferred超入門

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結

    爆速でわかるjQuery.Deferred超入門
  • Deferredで無限ループしてポーリング - ぷ~ろぐ

    ぐはああ、 /com/android/sdklib/ISdkLog=コマンドプロンプトでeclipse -clean (立場が変わっても…) ぐはああ、 /com/android/sdklib/ISdkLog=コマンドプロンプトでeclipse -clean (立場が変わっても…) ◎聖闘士星矢Ω第1話星矢が救った命!甦れ聖闘... (ぺろぺろキャンディー) 静岡:淡島リゾートとシダックスと”てんかん発作”の彼女 (脳挫傷による見えない障害と闘いながら) 複数のボタンの動作を設定する (初心者の初心者のためのAndroidアプリ開発!) オープンソースナレッジベース : Opensource Knowlege Base (オープンソースナレッジベース : Opensource Knowlege Base) 川崎:相変わらずの“勝負弱さ”/磐田戦から (サッカーはエンターテインメントだ!)

    Deferredで無限ループしてポーリング - ぷ~ろぐ
  • クロスドメインでiframeの親に値を渡す。 | ホームページを作るときのメモ用ブログ

    iframeについてメモ。 iframeはセキュリティーの都合上で、別ドメインでは値を渡せないらしい。 実際ためしてみても、うまく行かなかった。 使用用途としては、スクロールバーなどを表示させずにインラインフレームとして表示する場合に、横幅は100%で対応できても高さがページによって可変な場合がある。 この場合は、スクロールバーが表示されるか、やけに下に余白ができる感じになってしまい実用的ではない。 そこで、高さの値を子から親へ渡して、iframeの属性で高さを指定できるようにする。 色々調べて今のところこの方法でいけた。 でも、IE6~7までは見対応なのでそのへんはあしからず。逆に対応できる方法を知っている人教えてください。 それではやり方。 まず子のファイルに下記内容が飛鳥 <script type="text/javascript"> function onlo(){ var hei

  • Window.postMessage() - Web API | MDN

    HTML DOM APIWindowインスタンスプロパティclosedconsolecookieStore (en-US) Experimental credentialless (en-US) Experimental customElementsdevicePixelRatiodocumentdocumentPictureInPicture (en-US) Experimental event 非推奨 external (en-US) 非推奨 fence (en-US) Experimental frameElementframesfullScreen Non-standard historyinnerHeightinnerWidthlaunchQueue (en-US) Experimental lengthlocalStoragelocationlocationbarmenubar

    Window.postMessage() - Web API | MDN
  • 挙動が大事! JavaScriptでWindow.closeする時のブラウザ別対応まとめ - TechNote

    社内用のWebシステムにこれまで設置してなかった「閉じる」ボタンを設置することになった際、少々ブラウザ問題でつまずいた点があった。ググっても最近のwindow.close周辺の情報を見つけることができなかったのでまとめておく。 photo credit: flod via photopin cc 1.まず、閉じるボタンの必要性 2.IE(シェア:57.8%) 3.Firefox(シェア:18.9%) 4.Chrome(シェア:16.0%) 5.safari(シェア:5.6%) 6.まとめ あわせて読みたい ※ちなみにバージョンはie10、firefox26.0、chrome 31、safari 5.1.7です。 1.まず、閉じるボタンの必要性 ブラウザには標準で×(閉じる)ボタンがついているのに、どうして閉じるボタンを自作する必要が生じるのか? 一般的には、システム終了のタイミングで何らか

    挙動が大事! JavaScriptでWindow.closeする時のブラウザ別対応まとめ - TechNote
  • 結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 - Qiita

    結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 一年ほど前に JavaScript - jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita [キータ] という記事を書きました。 で、一年経って、ふと、「もっと分かりやすくjQuery.Deferredの便利さを説明できるんじゃないか」と思い立ってざざざっと書いてみました。 小話と言うにはちょっと長いけど。 -- jQuery.Deferredを使うと嬉しいのは、jQuery.Deferredの仕様を満たす部品同士を簡単に組み合わせることが可能だからです。中には処理を書き下すことができるとかコールバックのネストを防げるのがいいとか言う人もいますが、個人的にこっちのほうがよっぽど重要だと感じます。 例えるならレゴブロックです。レゴブロックはあの凸と凹を持ってるブロックを自由に組み合

    結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 - Qiita