mizchi.hatenablog.com エモにはエモ。 わかる だいたいわかる。そもそもSPAの必須パーツであるクライアントサイドルーティングなんてブラウザ機能の再実装の極致だし、ブラウザ上でアプリケーション作るとなるとブラウザに足りてない部分はラップして、アプリケーションプラットフォームにしたてる必要がある。 Angularはアプリケーションフレームワークとして、HTMLの限界をカバーするために独自にHTMLのパーサーを積んでいる。 テンプレート構文をサポートするためでもあるが、おそらく中途半端にブラウザの機能に頼ってデータモデルからビューへの投影にノイズが含まれるよりは、 Angularという世界に閉じた一気通貫なフローを採用して、ブラウザとのコミュニーケーションを最小限にしたかったのも大きいと思う。 というか、Native ScriptとかWeb WorkerとかSSRとか、クロ

と思う次第である。以下理由。 JavaScript, GUI設計の今 JSはそのプラットフォーム特性上、あらゆる言語の使用者の、あらゆる不満が集まる場所で、ヘイトを集めやすい環境だと思う。近年は npm というプラットフォームの登場でエコシステムが生まれ、思いつく限りあらゆるメソッドが適用されてきた。貧弱な言語基盤だが、その中で生き残った方法論が、今一番GUIの課題を上手く扱えている、と自分は考えている。 React/Redux や Angular によって、Flux/MVVMという抽象パターンが枯れてきたように思う。(この際、現場はまだ jQuery だぞ、みたいな話は無視する)。要は View は State の写像である、ということに尽きる。State はシリアライズ可能(JSON)で、Flux Action/Rx.Observable の Event Stream を入力とし、それ

追記：（2017/06/09 00:16） 本記事内に掲載している動画キャプチャが、 Apple.Incの開発者利用規約（APPLE BETA SOFTWARE PROGRAM AGREEMENT APPLE INC.）に抵触しているというご指摘をいただきました。 掲載内容を不適切と判断し、該当箇所を削除させていただきます。Apple.Inc及び読者の皆様に深くお詫び申し上げます。 追記：（2017/07/14 16:32） その後Apple.Incより、自分つくったアプリケーションのスクリーンショットの公開はOKという見解をいただきましたので、 スクリーンショットを再度掲載しました。 1. ざっくりGIFアニメでまとめると こんな感じです。 2. はじめに 昨日、iOS11のMobile SafariがgetUserMediaでカメラにアクセスできることに気づき、しゃかりき急いで この記

Angular 2 has an ability to develop an application in cross-platform because it doesn’t depend on DOM. But it’s breakable easily. If you use `window`,`document` or anything browser-specific, then of course your app will lose the ability. We often use `window` instance to get and set global variables. In browser platform, `window` is a single global context object. In the other side, Node.js enviro

お詫びと訂正：（2017/06/08 23:32） 本記事内に掲載しているスクリーンショットが、 Apple.Incの開発者利用規約（APPLE BETA SOFTWARE PROGRAM AGREEMENT APPLE INC.）に抵触しているというご指摘をいただきました。 Apple.Incの開発者利用規約から、掲載内容を不適切と判断し、該当箇所を削除させていただきました。 Apple.Inc及び読者の皆様に深くお詫び申し上げます。 追記：（2019/02/17） Navigator.getUserMediaが非推奨となったため、MediaDevices.getUserMediaを使うように修正しました。 Navigator.getUserMedia - Web API | MDN MediaDevices.getUserMedia() - Web API | MDN ざっくり1行でま

オブジェクト オブジェクトはプロパティの集合です。プロパティとは名前（キー）と値（バリュー）が対になったものです。 プロパティのキーには文字列またはSymbolが利用でき、値には任意のデータを指定できます。 また、1つのオブジェクトは複数のプロパティを持てるため、1つのオブジェクトで多種多様な値を表現できます。 今までも登場してきた、配列や関数などもオブジェクトの一種です。 JavaScriptには、あらゆるオブジェクトの元となるObjectというビルトインオブジェクトがあります。 ビルトインオブジェクトは、実行環境にあらかじめ定義されているオブジェクトのことです。 ObjectというビルトインオブジェクトはECMAScriptの仕様で定義されているため、あらゆるJavaScriptの実行環境で利用できます。 この章では、オブジェクトの作成や扱い方、Objectというビルトインオブジェクト

[ES2015] Map/Set JavaScriptでデータの集まり（コレクション）を扱うビルトインオブジェクトは、ObjectやArrayだけではありません。 この章では、ES2015で導入されたマップ型のコレクションであるMapと、セット型のコレクションであるSetについて学びます。 Map Mapはマップ型のコレクションを扱うためのビルトインオブジェクトです。 マップとは、キーと値の組み合わせからなる抽象データ型です。 他のプログラミング言語の文脈では辞書やハッシュマップ、連想配列などと呼ばれることもあります。 マップの作成と初期化 Mapオブジェクトをnewすることで、新しいマップを作成できます。 作成されたばかりのマップは何も持っていません。 そのため、マップが持つ要素の数を返すsizeプロパティは0を返します。 const map = new Map(); console.l

注記: undefinedとnullに対応するラッパーオブジェクトはありません。 注意点として、ラッパーオブジェクトは名前のとおりオブジェクトです。 そのため、次のようにtypeof演算子でラッパーオブジェクトを見ると"object"です。 // プリミティブの文字列は"string"型 const str = "文字列"; console.log(typeof str); // => "string" // ラッパーオブジェクトは"object"型 const stringWrapper = new String("文字列"); console.log(typeof stringWrapper); // => "object" プリミティブ型の値からラッパーオブジェクトへの自動変換 JavaScriptでは、プリミティブ型の値に対してプロパティアクセスするとき、自動で対応するラッパーオブ

追記　(2018/09/05) 現在では、 TypeScript 2.8 で導入された Conditional Types を利用したよりよい方法があり、これを使うと最後に書いた「この方法の制限」も克服できます。 上の記事の内容はかなり難易度が高いですが、これを理解しておくと Conditional Types への理解がかなり深まるので、おすすめです。（途中で僕のことにも言及してくれていて、ちょっと嬉しかったです） 追記終わり。 keyof の概要 issue: https://github.com/Microsoft/TypeScript/issues/1295 PR: https://github.com/Microsoft/TypeScript/pull/11929 PR の説明文を省略して簡単に示すと、以下のような機能。 interface Thing { name: strin

はじめに Flux のような unidirectional なアーキテクチャに興味があって、評判のよいものに触ってみた感じです。 実際に業務でやってみたことはないので、ガチ勢の方から見たらまだまだ甘いと思われる点が多々あるかもしれません。 TL;DR (投稿から一日たって少し考えがまとまってきたので追記) Redux の印象 before 思想は分かりやすい (Three Principles) アプリケーションの状態 (state) を単一の store で管理 state は read-only (直接更新できない), 更新は action の発行を介して行う state を更新する reducer は純粋な関数 でも action.type で switch する書き方が好きになれない Rx で簡単に re-implement できるとのことなので、 switch なしで書けるように

表題の通り。 今まではMixinがなかったので、泥臭く型チェックができない方法(文字列とか)でDIしていたが、 typescript 2.2.0からMixinに対応したので、DIを考察する。 Dependency Injectionとは Dependency Injectionとはその名の通り依存性を外から注入する仕組み。 なにが嬉しいかというと、クラス内部で依存しているはずのクラスを外部からコントロールできるようにすることで、 クラスの内部実装と外部への依存を疎結合にし、テストし易いクラスを作ることができる。 猿でも分かる! Dependency Injection: 依存性の注入 - Qiita Inversion of Control コンテナと Dependency Injection パターン DI for Typescript さて、Typescriptで上述のDependen

Victor Savkin is a co-founder of nrwl.io, providing Angular consulting to enterprise teams. He was previously on the Angular core team at Google, and built the dependency injection, change detection, forms, and router modules. Managing application state is a hard problem. You need to coordinate between multiple backends, web workers, and UI components. Patterns like Redux and Flux are designed to

この資料のアレ。 mizchi.hatenablog.com Reducer は単なる (State, Action) => State の関数で、redux.combineReducers は複数の reducer を名前空間でマップした新しい reducer にするもの。 Rx分かる人、Redux分かる人向けに、 redux.combineReducers を実装して、Rx.Observable.scan で reducer として実際に動くコードを書いた。 const Rx = require('rx') const combineReducers = reducerMap => { const initialState = Object.entries( reducerMap ).reduce((acc, [key, reducer]) => { return Object.ass

はじめに このエントリは、画像解析ライブラリであるOpenCVをWeb Assemblyとしてビルドしてブラウザで動かす、というのを一通りやってみたメモです。 主なコンテンツとして下記を含みます。 OpenCVのwasmビルド方法、.wasmのカスタマイズ方法 性能改善(モジュールのキャッシュ、Web Workersなど) 動作はここから確認できます。 お題 主な主眼は「ブラウザでOpenCV動かす」部分で、build筋鍛えること自体が目的なので、題材は正直なんでもいいのですが、ここでは2枚の特徴点を抽出してマッチングする、というのをJavaScriptでやってみることにしました。インターネッツに山のようにサンプルが転がっていますが、Pythonで書くと下記です。 import cv2 img1 = cv2.imread('img1.png') img2 = cv2.imread('img

多様なユーザーニーズに応える フロントエンドデザインパターン 書籍「インクルーシブHTML+CSS & JavaScript」より 太田 良典 伊原 力也 2017.09.24 HTML5 Conference

現在JavaScriptを用いて、関数型プログラミングを学ぼうと勉強中... 今回は、その第三弾 勘違いしがちな部分適用とカリー化について区別しつつ、 カリー化について理解を深めることを目標とする。 前回の記事はこちらから↓↓↓ 【JavaScript】即時関数, 無名関数, クロージャについて 【JavaScript】関数を使いこなす(高階関数, 再帰関数)

HTML5 Conference 2017 http://events.html5j.org/conference/2017/9/ で使用したスライドです。本編45分。

最終更新 2017/09/25 10:43　2017年9月24日（日）に東京電機大学 千住キャンパス（東京都足立区千住旭町5番）で開催されたWeb技術者の祭典「HTML5 Conference 2017」。HTML5に関連する技術について語られたセッション内容とスライド資料をまとめました。最新Web技術のトレンドが知りたい方はぜひチェックしてみてください。 「HTML5 Conference」が今年も開催されました！この記事では、「HTML5 Conference 2017」の講演スライドをまとめています。スライドが公開され次第随時更新していきますので、イベントに参加したエンジニアもできなかったエンジニアも、ぜひチェックしてみてください。 基調講演/村井 純(慶應義塾大学) 及川 卓也 吉川 徹(html5j) https://youtu.be/c_uy7UdUosU 最近の Web パフ

HTML5Conference 2017 Room A Deep Dive Into TypeScriptの発表資料です。