JavaScriptフレームワークの寿命 | POSTD
(注記：9/13、いただいた翻訳フィードバックを元に記事を修正いたしました。) 半年ごとに”今一番ホットな”フレームワークが新たに登場しては、私たちは興奮に沸き返ります。 誇大広告を信じてはいけません。 フレームワークの寿命 はプロジェクトの成功を左右するほど重要な要素です。フレームワークを選ぶ際、テクノロジにおける多くの意思決定者は納得のいく選択をするために、コミュニティの大きさ、人気、大企業によるサポートの有無などを基準にしています。しかし実際は、こうした要素によって寿命が決まるわけではありません。 最初は勢いがあったのに、徐々に弱まり、最終的には線香花火のごとく儚く消えてしまうようなフレームワークを選んでしまうと、書き直しに無駄な時間を費やしたり、チームの士気を下げたりする原因となります。本記事は、そうした残念な結果を回避するヒントをまとめたものです。 本記事では以下のことを示したい
JavaScriptにおける継承のパターン4種類の概要と対比 | POSTD
JavaScriptはとても強力な言語です。強力がゆえ、実はプロトタイプをデザインしたり、オブジェクトのインスタンスを生成したりするのに何種類もやり方があります。それぞれの方法には長所も短所もあります。そこでJavaScript初心者の皆さんのために私がそのあたりを整理して説明したいと思います。今回の投稿は、以前私が書いた 「JavaScriptを分類するな」 の続編です。前回の投稿でたくさんのコメントをいただき、コードの例を出してほしいをいう反応をいただいたので、今回はそれらにお応えします。 JavaScriptはプロトタイプを使って継承 つまり、JavaScriptでは、オブジェクトは別のオブジェクトを継承することができます。 { } 波括弧を使って生成されるJavaScriptの基本的なオブジェクトは、唯一のプロトタイプとして Object.prototype をプロトタイプに持ちま
JavaScriptのモナド | POSTD
恒等モナド Maybeモナド リストモナド 継続モナド Do 記法 連鎖呼び出し モナド とは、一連のステップによって実行する計算を記述する際に使用する、1つのデザインパターンです。 純粋関数型プログラミング言語 では、モナドは 副作用を管理する ために広く利用されていますが、 マルチパラダイム言語では、モナドで複雑性を制御することもできます 。 モナドはデータ型をラップして、空の値を自動的に伝播したり（ Maybe モナド）、非同期コードを簡略化したり（ 継続 モナド）といった、新たな動作を既存のデータ型に追加します。 一連のコードをモナドと見なすためには、その構造には次に挙げる3つの要素が含まれていなければなりません。 型コンストラクタ — 基本的な型に対してモナドの動作を追加した型を作成する機能です。例えば、基本的なデータ型 number に対して、 Maybe<number> とい
ブラウザ上で画像処理 ～漫画のコマを領域分割する～ - pixiv inside [archive]
はじめに こんにちは、pixiv でアルバイトをしていた arayuji です。 今回はこれまでやってきたことのまとめとして、漫画やイラストに対する画像処理についてご紹介します。 一口に画像処理といっても様々なものがありますが、ここでは漫画のコマや白黒のイラストを簡単に領域分割する手法についてお話しします。 基本的な画像処理から高度な最適化処理まで、すべての処理をブラウザ上で 実現しました。 実際のコードも、pixiv/manga-segment · GitHubにあるので、興味がある方は見てみてください。 デモ トップに載せた画像が動作イメージなのですが、わかりにくいと思うのでデモを用意しました。（Chrome 40 / Firefox 35 / IE 11 で動作確認しましたが、IE では非常に遅いので注意してください） 右側のパレットで色をひとつ選んで、左側の画像の上にマウスで線を描
JavaScript難読化読経
2019/10/16 初心者向けCTFのWeb分野の強化法 CTFのweb分野を勉強しているものの本番でなかなか解けないと悩んでいないでしょうか？そんな悩みを持った方を対象に、私の経験からweb分野の強化法を解説します。 How to strengthen the CTF Web field for beginners !! Although you are studying the CTF web field, are you worried that you can't solve it in production? For those who have such problems, I will explain how to strengthen the web field based on my experience. (study group) https://yahoo-osa
Relay
Built for scaleRelay is designed for high performance at any scale. Relay keeps management of data-fetching easy, whether your app has tens, hundreds, or thousands of components. And thanks to Relay’s incremental compiler, it keeps your iteration speed fast even as your app grows. Keeps iteration quickRelay is data-fetching turned declarative. Components declare their data dependencies, without wo
JavaScriptoon - TechBooster - BOOTH
2015/8/24 電子書籍（PDF版）を登録しました。 紙面をPCやタブレット用に最適化しています（本文サンプルの1枚目を参照ください）。 JavaScriptoon（148p）は、今のWeb技術を切り取って収録しました。最新技術を扱った一冊です。 流行の兆しをみせているPolymer（とその基盤となるWebComponents）やgRPCプロトコルといった注目技術を収録。 WebGLを触るには最適なthree.js、さらにはECMAScript7のSIMDを先取り解説＆パフォーマンスチェックなどWebの表現力とグラフィックの未来を切り取りました。BabelやStream、セキュリティ技術のFIDO U2Fなど、すぐに活きる知識にも触れています。 本書ではvvakameをはじめ現役エンジニアがあれこれ試した生の情報を独自の視点でまとめています。タイトルはもちろんSplatoonパロディ。
類い稀なMySQLのJavaScript Connector (MySQL High Availabilityより) | Yakst
node.jsを使ってMySQLへのデータアクセスを行うmysql-jsを紹介する。これを利用すればSQLを使わずにオブジェクト指向プログラミングの恩恵を受けることが出来る。 出典について この記事はcraigrussell氏によるMySQL High Availabilityの投稿「The JavaScript Connector for MySQL you never heard of」(2015/7/14)をユーザが翻訳したものであり、Oracle公式の文書ではありません。 Webサーバをたてて、node.jsとExpressを使ってデータベースに接続するのはかつてないほど簡単になっている。node.jsを使ってRDBからデータを取り出すには、かつてはユーザーがSQLの技術に熟練している必要があった。 そこでMySQLの開発チームは、MySQLからのドキュメントを保存、検索し、nod
Abstract Syntax Tree
Introduction: Writing Parser Imperatively Parsing CSV: Imperative Lexer Parsing HTML: Parsing Stack Expression: Operator Precedence Based Parsing REPL, Brackets, and Variables Statement: Top-down Context Based Parsing Full Javascript Parser - Abstract Syntax Tree An abstract syntax tree (AST) is a term in computer science for a tree structure representing the syntactic structure of a source code.
SIMD型について - JS.next
概要 新しいプリミティブ型であるSIMD型及びAPIがV8で実装されてきている。 SIMDとは、複数の数値を並べて１つの値としたようなデータ型である。 これはCPUによって効率良くサポートされているデータ型であり、 1 + 2 -> 3 をするように [ 1, 2, 3, 4 ] + [ 2, 3, 4, 5 ] -> [ 3, 5, 7, 9 ] を1回の演算ですることができる。 つまり、沢山の数値を扱う場面でSIMD型を利用することで、何倍ものパフォーマンス向上が期待できる。 （※WASMに入ることとなり、ESからは一旦取り除かれました。） 実装される型 float32x4 32bit浮動小数点型を4つ並べた128bitのデータ型 float32はJSの通常のnumberであるところのfloat64より精度が低い int32x4 32bit符号付き整数型を4つ並べた128bitのデータ
JavaScript and Type Thinking
At the heart of functional thinking is to ask about the meaning of things. In the case of functions, it’s reasoning about their return values. But, that’s actually insufficient, as important as is, to give the full answer. Basically, a function is a relation between a set of inputs -a domain- and a set of outputs -a codomain- (along with a fundamental constraint: the same inputs always produces th
JavaScriptデザインパターン – 第1部：シングルトン、コンポジット、ファサード | Adobe Developer Connection
Basic JavaScript programming knowledge. Additional required other products (third-party/labs/open source) Query Library Download / Learn この記事は、JavaScriptでよく使用されるデザインパターンに関するシリーズ記事の第1部です。デザインパターンはプログラミングにおける実証済みの手法であり、特に、大規模なJavaScriptアプリケーションを大きなグループで作成する場合に不可欠なコードの保守性、スケーラビリティ、分離性を向上させます。 このシリーズ記事の第2部では、さらに、アダプター、デコレーター、ファクトリという3つのデザインパターンを紹介します。第3部では、さらに、プロキシ、オブザーバー、コマンドという3つのデザインパターンを紹介します。 シング
60 (フレーム・パー・) セカンズ：Pinterestの描画パフォーマンス最適化のケーススタディ | POSTD
今日はWebサイトやWebアプリの描画パフォーマンスをどう改善したらいいのか、ということについて取り上げようと思います。私たちWeb開発者にとって、この分野は比較的新しく注目し始めたエリアで、 ユーザエンゲージメントとユーザ体験 に影響があるため重要です。 フレームレートはWebにも影響がある フレームレートとは、 連続した イメージを端末がスクリーンに映し出すレートのことです。秒間フレーム数（FPS）が低ければ肉眼で個別のフレームを判別でき、FPSの数値が高ければユーザにとっては反応が速いと感じられます。ゲーム業界ではおなじみの概念となっているものですが、Webにも当てはまるのです。 長時間に及ぶイメージのデコード、不必要なイメージのリサイズ、重いアニメーションとデータ処理はすべてフレーム落ちを起こす可能性があり、結果としてフレームレートは下がり、jankが多いページになってしまいます。
JavaScript Scene Tech Survey Results
This summer, JavaScript Scene conducted a JavaScript tech survey via social media over the course of a few days. Just under 800 people participated. Respondents are all engaged in JavaScript discussions on social media including Twitter, Facebook, and Google+. Most of the respondents came from Twitter. As promised, here are the results: React is RisingAlmost half (45%) currently use Angular, and m
大規模Reactアプリケーションを構築するためのベストプラクティス | POSTD
Sift Scienceで製作にReactを使い始めてからほぼ1年になりました。その間、Backbone+Reactという フランケンシュタインのような 複合アプリケーションを、Reactコンポーネントからなる、かなり大きな1つの階層に育て上げました。この記事では、UI不和を最小限にしながら、コードベースをスケーリングするために役立った技法とベストプラクティスを紹介します。また、一般的なコンポーネントのデザインパターンについて、いくつか説明します。 この記事が皆さんの時間の節約と精神衛生の維持に役立ち、UIが複雑になってもReactコードベースの保全性を維持する（破綻するのではなく）ための新しいツールを提供できれば幸いです。 componentDidUpdateで、もっとできる Reactの本質は、DOMの更新というタスクを命令的なものから宣言的なものに変えるということです。他のタイプの命
How to Become a Great JavaScript Developer
When I was growing up, my interests spanned various, seemingly unrelated fields. I loved maths as much as I loved history. I aimed to be a Renaissance man -a polymath-, that excelled at multiple fields. This turned out to be an arduous task and suddenly I faced the danger of being a jack of all trades, master of none. I started thinking about specializing in certain fields so that I could at least
node-inlining
HTMLからlink要素で参照しているCSSの内容をstyle属性に全部展開するNode.jsパッケージ、node-inliningを書いていた。HTMLとCSSを別々に普通に書き、このパッケージに含まれるCLIプログラムでコンパイルすると、HTMLメールとしてうまく機能するHTMLができあがるということになる。GitHubで推奨されている外部リソースに依存しない静的なエラー・ページを作成するためにも使えるかもしれない。 CLIプログラムはごく簡単に使うことができる。 $ npm install -g inlining $ inlining input.html >output.html これでoutput.htmlにインライン化されたHTMLファイルが吐かれる。処理例はREADMEの簡単な例やtestディレクトリーを見てくれればわかるはずだ。 Node.jsパッケージとしての利用は少しや
最近のReactへの言及についての違和感 - mizchi's blog
「最近のReactへの言及についての違和感」というエントリ書いたら燃えますかね— イカid:mizchi0x (@mizchi) 2015, 6月 7 僕がみた資料の中でFluxの設計について正しい理解をしていると思えるのはげたさんのこの資料だけです https://t.co/XaKHhhuP2A— イカid:mizchi0x (@mizchi) 2015, 6月 7 みんなsetStateに騙されてる— イカid:mizchi0x (@mizchi) 2015, 6月 7 一部で「React使うとコード量が増える」という意見、サーバサイドで書いたテンプレートのレタッチをするjQueryと比べたらそりゃそうなんだけど、SPAでそもそもJS側がテンプレート握るような環境では handlebars とかで書いてたところが JSXになるだけでそれ移行コスト— イカid:mizchi0x (@mi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Incremental DOM ざっと見たやつ。追記: 初期バージョンのコードなので最新では異なる場合があります。
GitHub - cujojs/most: Ultra-high performance reactive programming
