JavaScript Patterns Workshop | JavaScript Patterns
The content is based on Patterns.dev - a free online resource on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React. The patterns covered on this website and in the workshop can guide you when facing a problem other developers have encountered many times before, but are not a blunt tool for jamming into every scenario. The goal is to raise aware
仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう｜ハイクラス転職・求人情報サイト AMBI（アンビ）
仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう 最近のJavaScriptフレームワークで利用される「仮想DOM」について、リアルDOMの違い、メリット・デメリット、仮想DOMを使ったフレームワーク開発などを、ダーシノ（bc_rikko）さんが解説します。 はじめまして、ダーシノ（@bc_rikko）です。さくらインターネットでフロントエンドエンジニアをする傍ら、NES.cssというファミコン風CSSフレームワークを開発しています。 さっそくですが、皆さんは、ReactやVue.jsといったJavaScriptフレームワークを使ったことがありますか？ そういったフレームワークで使われている、仮想DOMについて知っていますか？ 「聞いたことない」「聞いたことはあるけど、どう実装されているかは知らない」「熟知している」。いろいろなレベルの方がい
レコメンドシステム入門 Javascriptで実装する｜es
レコメンド（推薦システム）に関して素晴らしい記事があったので訳してみました。訳に難があるが、そこはご勘弁ください。 プログラム実行してみると理解できると思います。入門者に打って付けの記事です。 以下、本文。 インターネットの世界はレコメンドで溢れていますね。 Amazonのように商品を購入するeコマース・サイト、Facebookのようなソーシャルネットワーク、YoutubeやNetflixのようなビデオ/映画サイトなど。これらのサイトに共通するのは、あなたに新しいものを推薦するために、映画、商品と友人などの過去のデータを使うことです。 この記事では、レコメンド機能がJavaScriptで、どのように動くか簡単に紹介します。推薦システムを実現するための、異なるアプローチも見ていきます。最終的にはアルゴリズムを切り替えただけで、結果を出力できるようにします。映画評論家の小さいデータセットと、M
【翻訳】あなたが求めていたリアクティブプログラミング入門 - ninjinkun's diary
original: The introduction to Reactive Programming you've been missing (by @andrestaltz) (translated by @ninjinkun, reviewed by @ma0e) あなたはリアクティブプログラミングと呼ばれる新しい方法が気になっている。 勉強するのは大変で、良い教材がないのでさらに難しい。私が勉強を始めたときは、まずチュートリアルを探した。見つけたのは一握りの実践的なガイドだけ、しかもそれらは表面をなぞっているだけで、リアクティブプログラミングのアーキテクチャ全体像を構築しようとしてはいなかった。ある関数を理解するのに、ライブラリのドキュメントは役に立たないことがある。 これを見て欲しい。 Rx.Observable.prototype.flatMapLatest(selector,
GitHub - fbeline/Design-Patterns-JS: All the 23 (GoF) design patterns implemented in Javascript
Creational patterns are ones that create objects for you, rather than having you instantiate objects directly. This gives your program more flexibility in deciding which objects need to be created for a given case. Abstract factory: provide an interface for creating families of related or dependent objects without specifying their concrete classes. Builder: separate the construction of a complex o
一から学ぶベジェ曲線 | POSTD
(編注：SVGアニメーションを元記事にならい追加しました。リクエストありがとうございました。) 皆さんは線分のことをどう表現しますか？ 線分は、端点によって考えられるかもしれません。その端点を P0 、 P1 と呼ぶことにしましょう。 線分を厳密に定義するならば、「 P0 と P1 を結ぶ直線において、 P0 と P1 の間にある全ての点の集合」と言えるかもしれません。これは以下のように表せるでしょう。 便利なことに、上記の定義から、その線分上のどこにある点の座標でも簡単に求めることができます。例えば、中点は L(0.5) にあります。 実は、2点間のどんな値でも、任意の精度で 線形補間する ことが可能です。そのため、時間関数 L(t) の t で線をたどるといった、より複雑なことができるのです。 ここまで来ると、「それが曲線と何の関係があるのか？」と不思議に思うかもしれません。2つの点だ
reduce関数は結構有用っていうお話 - あと味
JavaScriptに限った話ではないのですが、reduce関数を持つプログラミング言語がいくつかあります。 JavaScriptに関しては、一応、ECMAScript5の仕様に登場するようで、将来的にはどのブラウザでも使えるようになりそうな気配はあります。 Standard ECMA-262 また、MDCではreduceのアルゴリズムが掲載されているので、これを利用すれば現時点でもどのブラウザでもreduce関数を利用することができます。 reduce関数とは？ MDCに掲載されている文章を引用します。 配列の（左から右へ） 2 つの値に対して同時に関数を適用し、単一の値にします。 JavaScriptのreduceは、配列のメソッドです。左ら右へとありますが、右から左へ関数を適用するreduceRightという関数もあります。*1 どういう時に使えるか 元となる配列があって、それを累積
JavaScript でオセロを実装する(原始モンテカルロAI編) | Webシステム開発／教育ソリューションのタイムインターメディア
以前、オセロの対戦AIの作成しましたが、そこでは実装を簡略化する為に盤面の価値を 盤面の価値 = 自分の石の数 – 相手の石の数 という単純な方法で決めていました。 でも、これには問題があります。 同じ石でも配置場所によって価値は異なるはずです(例: 角は最強)。それが考慮されていません。ゲーム終盤になってくると石の数が重要になってきます。でも序盤から石の数を重視するのは方向性としておかしいです。 という訳で、 序盤から中盤では石の配置場所を重視する終盤では石の数を重視する 形で盤面の価値を算出すれば、結構良さそうなAIになりそうです。 しかし、今度は 「序盤」「中盤」「終盤」をどのように区別するのか?石の配置場所の強弱はどう決めるのか?同じ配置場所でも周囲の状況次第で強弱が異なるのでは? という問題が出てきます。これは作るのが面倒臭そうです。 どうにかしてお手軽かつそこそこ強そうなAIを
Javascriptを使うなら理解しておきたいアルゴリズム - 抽出・ソート・結合・集計 - いろいろ解析日記
Javascriptでのアルゴリズムの書き方の覚書です。 目次 説明に使用するデータ構造 抽出 ソート Javascriptでの配列のソート ソートの例(五十音順) ソートの例(数値順) 結合 集計 関連記事 説明に使用するデータ構造 アルゴリズムの説明のために、以下のようなオブジェクトの配列を使います。 var countries = []; countries.push( { name: "日本", currency: "JPY", population: 127156000 } ); countries.push( { name: "フランス", currency: "EUR", population: 65073482 } ); countries.push( { name: "スペイン", currency: "EUR", population: 44904000 } ); co
JavaScript でハッシュアルゴリズム
Hash algorithm of JavaScript CRC16/32, MD2, MD4, MD5, SHA-1, SHA-256, RIPEMD-128, RIPEMD-160, RIPEMD-256, RIPEMD-320 IE4+, NN4.06+, Gecko, Opera Download CRC16/32 MD2 MD4 MD5 SHA-1 SHA-256 RIPEMD Sample CRC16 CRC32 MD2 MD4 MD5 SHA-1 SHA-256 RIPEMD-128 RIPEMD-256 RIPEMD-160 RIPEMD-320 Input Hash Memo マルチバイト文字から生成されるハッシュ値に疑問を持つかもしれませんが 内部では入力文字の文字コードは Unicode ですので あしからず。 ありえないと思われるので入力データが 0xFFFFFFF
最速インターフェース研究会 :: HTMLドキュメントを解析して特徴的なループを見つけるBookmarklet
- 全てのDOMノードを列挙する - ノードは次のように文字列化される。 0: /html[0]/body[0]/div 1: /html[0]/body[0]/div[0]/div 2: /html[0]/body[0]/div[0]/div[0]/ul[0]/li 3: /html[0]/body[0]/div[0]/div[0]/ul[0]/li 4: /html[0]/body[0]/div[0]/div[0]/ul[0]/li 5: /html[0]/body[0]/div[0]/div[0]/ul[0]/li 直前の階層までは添え字つき、最後のノードはタグ名のみにする。 class名、id名は排除する。各々のサイトのルールで記述されたruleよりも タグのネスト構造の方が変化に強いし機械的に抽出しやすいのではないか？ 出現回数でソートする。li要素2-5はループであることが分か
Javascriptでdiffる ( with 形態素解析 ) (nakatani @ cybozu labs)
Javascript で diff というのはいくつか試された例はあるようですが、まだこれといった決定打は出ていない様子です。 実は diff は見た目ほど軽い処理ではないので、Javascript にやらせるのはこれが結構大変…… diff の計算量は、おおざっぱに言うと比較対象の要素数の二乗に比例し（実際にはそれより小さくすることができるのですが、まあ話のイメージとして）、かつメモリを大量に消費するので、バッチ的な処理に最適化されていない Javascript にはどうしても荷が重いものとなってしまいます。 比較対象の要素数を減らせば当然計算量は減りますが、行単位で比較してもあまり嬉しくない（わざわざ Javascript で処理するということは自然文が対象と思って良いでしょう）。最小の文字単位だとギブアップ。 ということは形態素解析で分かち書きして、単語単位で diff するのが J
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
the-offline-cookbook-ja/ja.md at master · kuu/the-offline-cookbook-ja
直線の交差判定 - jsdo.it - Share JavaScript, HTML5 and CSS
Amazon.co.jp: JavaScriptによるアルゴリズムデザイン: オブジェクト指向からDB・Web・マイニングまで: 石川博: 本