現場のES201x と未来のアーキテクチャ - インサイドフロントエンド2

現場のES201x と未来のアーキテクチャ - インサイドフロントエンド2
[2018-01-30] Unicodeプロパティ関連で、オンラインのデータベースについて情報提供をいただいたので、追記しました。 Stage 4に到達したproposalをまとめました。今回は正規表現関連の追加が多いようです。 全体的にざっくりなまとめですので、詳細は各proposalや、ES2018のドラフトを参照してください。 今回の新機能は既にChrome 64が対応済みなので、現時点ですべての新機能を体験することができます。 以下、サンプルコードがある場合、その結果はすべて手元のChrome 64によるものですので、あらかじめご了承ください。 オブジェクトの Rest/Spread プロパティ(Object Rest/Spread Properties) 配列が既に持っていた機能ですが、オブジェクトでも利用できるようになります。 /* Rest Properties */ con
github.com 先月のTC39のMTGでstage-1になりました。 F#, OCaml, Elixir, Elm, Julia, Hack, LiveScriptなどと似たような機能を提供します。 function doubleSay (str) { return str + ", " + str; } function capitalize (str) { return str[0].toUpperCase() + str.substring(1); } function exclaim (str) { return str + '!'; } let result = exclaim(capitalize(doubleSay("hello"))); // "Hello, hello!" let result = "hello" |> doubleSay // ここの引数が `he
追記: 2019/04/24 本日リリースされたNode v12でESM周りの仕様が大幅に変更されました。 この記事の内容は既に古くなっているため、最新の情報は以下の公式ブログを参考にしてください。 Announcing a new — experimental-modules – Node.js Foundation – Medium 追記終了 この話を今日のNode学園で話すので、ご興味あればどうぞ。 nodejs.connpass.com (今日いくつか加筆修正しました) ECMAScript 2015で待望のES Modules(ESM)の仕様が策定されたものの実装がなかなか進まない、という話を1年前に発表した。 その後、ブラウザでのES Modules仕様が策定完了し、フラグ付きながら全主要モダンブラウザで初期実装が揃った (caniuse)。(dynamitterさん、kijt
Intro 長いこと議論になっていた ES Modules の Node における扱いに一応の決着が付き、 .mjs という拡張子が採択された。 この拡張子の意味と、今後ブラウザと合わせて Universal JS を実装していく上での作法が見えてきたことになる。 合わせてエコシステムが対応していくことで、長年の夢だった JS のモジュール化を進めていくことができるだろう。 ES Modules 徐々に揃いつつある ES Modules(ESM) の仕様は TC39 で行われており、その仕様については主に以下のような部分になる。 import や export と行った構文 module 内はデフォルト strict mode module でスコープを閉じる module 内の this は undefined etc 逆に以下は TC39 での策定範囲外となる どう Module を読
ES2015 introduced many new features to the JavaScript language, including significant improvements to the regular expression syntax with the Unicode (/u) and sticky (/y) flags. But development has not stopped since then. In tight collaboration with other members at TC39 (the ECMAScript standards body), the V8 team has proposed and co-designed several new features to make regular expressions even m
と呟いていたら、 id:caisui さんが と教えてくれた。 広範囲にイベントを取得して、イベント発生元がどの要素に含まれるかで処理を変えたい時があって、そんな時は親ノードを辿って調べるという面倒なことをしていた。これとはおさらばしたいということで、compareDocumentPositionについて調べてみた。 Node.compareDocumentPosition - MDC Doc Center The return value is a bitmask with the following values: DOCUMENT_POSITION_DISCONNECTED = 0x01; DOCUMENT_POSITION_PRECEDING = 0x02; DOCUMENT_POSITION_FOLLOWING = 0x04; DOCUMENT_POSITION_CONTAINS
続編と、コード自体ではなく、何をすればいいかを書きましたAmazonに見るi18n -「国際化対応」とは何を変える事か Webサイトを多言語化する 最近多言語化に関する仕事をしている関係でi18n(l10n)用のライブラリを色々と見たので、 i18nライブラリによくある使い方を紹介します。 とは言ってもほとんどのライブラリは同じような書き方をするのでJavaScriptを例にします。 ライブラリ一覧 書き方の紹介として使用するものはawasome-javascriptにあるものと、他に気になったものを選びました。 ただし、この記事の目的は「書き方」を紹介するもので「ライブラリ」を紹介するものではありません。 動くことは確認しましたがどのくらいまともに動くかはチェックしていないのでご注意ください。 Polyglot Airbnbが公開するシンプルなライブラリ i18next 色々な環境やフレ
autoscale: true JavaScript情報ってなんだっけ? JSer.info 5周年記念イベント アジェンダ 情報の定義 JavaScript情報は欲しい、でも溢れてる 選択肢が多すぎる問題を切り分けする話 ライブラリコミュニティの読み方 ^ アジェンダとしては以下のような感じになっています。 JavaScriptの場合よっぽどエッジな事じゃない限り、基本的に何らかは検索すると出てくると思います。逆にここで出てくる情報が多すぎてノイズが多いとも言われます。 そういう時に何を基準に情報を分けていくのかという話をします。 最初に書いておくが答えはない ^ このスライドで何か新しい情報を得られたりはしないと思うので、若干退屈な内容になっていると思います。なので期待せずに聞きましょう 「情報」って何? ^「情報」「情報」と連呼しているので、最初にここでの「情報」の定義についてお話し
ECMAScript 2015 で導入された Promise の関数 all と race だけで表現できる非同期処理の待ち合わせについての考察です。 考察の対象とした待ち合わせの条件は、「過半数の Promise が解決されるまで待つ」をはじめとした特殊なものです。**結論からいうと、all と race だけを組み合わせて、多数決による待ち合わせを表現可能です。**ただし、与えられた Promise の解決順序に依存する待ち合わせは、all と race だけでは書けません(ただし証明はできてないです 追記2020/11/08 書けるようです(否定的に証明されました)。 制約条件 Promise#then を使えば、なんでもできてしまいます。 そのため、この後の議論では Promise#then は封印します。 待ち合わせの書き方 まず、待ち合わせの表現方法を導入します。 非同期に解決
ECMAScript Version Detector ECMAScript Version Detectorというツールとライブラリを書きました。 azu.github.io/ecmascript-version-detector/へアクセスして、好きなコードをペーストすると、そのコードの構文がECMAScriptのどのバージョンから使える機能なのかを表示してくれます。 たとえば、以下のコードはasyncとawaitの部分がまだProposalであるAsync Functionsであることを検出してくれたりします。 目的 Babelなどの変換ツールでECMAScriptのProposalな機能などが身近になりました。 しかし、それがまだ仕様に入ってないもの(Proposal段階であるもの)ということを意識しないで書いてる人もよく見かけるようになりました。 そのため、まだProposalの
#teppeis_sushiに参加した。 #teppeis_sushi - Togetterまとめ Karma 1.0について @ kyo_ago Karma 1.0について karma/CHANGELOG.md at v1.0.0 · karma-runner/karma Buster.JSのtestbedみたいな機能 実際の環境を読み込ませたうえでテストファイルを読み込ませてテストできる E2Eテストみたいなものを簡単に書ける さらにmiddlewareでproxyを扱える テストしてる内容はメソッド叩いたら要素がでるとか 技術的な側面でE2Eテストな感じ #teppeis_sushi E2Eテストは技術とユーザー的な側面とか色々ある — azu (@azu_re) July 14, 2016 Proxy コミットごとのビルドをS3にアップロードし、本番環境で読み込むChrome拡張P
This document summarizes a Cybozu Meetup event focused on frontend technologies. It discusses Cybozu's transition from traditional server-rendered web applications to single-page applications built with React. It also covers Cybozu's use of Closure Compiler, TypeScript, JSDoc, and other tools for JavaScript development. Best practices are shared around testing, linting, and integrating third-party
JavaScript Primer 迷わないための入門書 Tweet Watch Star Twitterのハッシュタグ: #jsprimer これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。 プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるように書かれています。 初めてのプログラミング言語としてJavaScriptを学ぶ人は、まずは「はじめに」から読んでみてください。 書籍版 このウェブサイトの内容はアスキードワンゴから書籍として出版されています。 書籍版の内容はウェブサイト版と同一ですが、本として読めるように最適化されています。 書籍版は次のサイトから購入できます。 Amazon 達人出版会(電子書籍版
Introduction この記事は最近JavaScriptに入ったGeneratorと呼ばれる機能について知りたい、もっと詳しく知りたいという方をターゲットとしています。 今回はECMAScript 2015に入った機能のgeneratorについて解説していきたいと思います。 generatorはNode界隈では2014年ごろから非同期処理を同期的に書くことができるツールとしてよく使われていました。 最近ではasync/awaitをよく耳にすることがあると思いますが、async/awaitはgeneratorを使ったものに変換可能なので挙動としては近いものと考えてもらって大丈夫です。 ECMAScript Async Functions What is generator 前置き では、generatorとはなんでしょうか?「実はgeneratorはIteratorを返す関数なのです!」
ECMAScript 6(2015年6月に公開され、今もなお比較的新しい JavaScript)の大目玉である イテレータ と ジェネレータ。なかなかに複雑で巨大な仕組みになっていてややこしいです。 そこで今回は ジェネレータ を、順を追って理解できるように解説したいと思います。 Qiita: JavaScript の イテレータ を極める! ←こちらから読むのがオススメです Qiita: JavaScript の ジェネレータ を極める!(この記事) また、実用的なサンプルを「3. 実用サンプル」に示しました。 初めにこちらを見て、何ができるのかを知ってから読み始めるのもオススメです。 (2017年3月現在、オープンなページでの使用はまだ避けたほうがいいかもしれませんが、実装は確実に進んでいます。ECMAScript 6 compatibility table) 1. ジェネレータ、ジェ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く