CommonJSからES Modulesへの移行する方法。トップダウンかボトムアップか
Secretlint v7でCommonJS からES Modulesへの移行を行いました。 Secretlint v7.0.0をリリースしました。Pure ESMへの書き直し この記事では、CommonJS(CJS)からES Modules(ESM)への移行を行った経緯と、移行する方法について紹介します。 CJSからESMへの移行は、率直に言えば単調な作業で、メリットが見えにくい作業です。 しかし、将来的にCJSよりもESMが主流になることは間違いないので、移行することは必要です。 移行の作業は、移行方法が決まれば大部分は機械的な書き換えが可能です。 では、実際にどうやって移行したのかを紹介します。 ESMへの移行の影響は依存元へと連鎖する Secretlintのリポジトリはmonorepoになっていて、だいたい40コぐらいのパッケージが含まれています。 そしてパッケージ間で依存関係があ
Immersed + Meta Quest(Oculus Quest) + Macbook Proで、文章やコードを書く
Immersed + Meta Quest(Oculus Quest) + Macbook Proで、文章やコードを書く 最近は、ImmersedというMeta Quest(Oculus Quest)で動くアプリを使ってプログラミングをしたり文章を書いたりしています。 ImmersedはOculus QuestなどのVR機器で動くアプリです。 リモートデスクトップ的にOculus QuestとPCを接続して、Oculus QuestをPCのディスプレイとして使えます。 必要な道具 Oculus Quest 2 Oculus Questでも問題ないそうです Windows or macOS or Linuxが動くPC macOSだと自動で物理的なディスプレイが暗くなったり、macOSの方がサポートは良いのかも MacBook Pro (13-inch, 2020, Four Thunderb
JavaScriptの歴史については「JavaScript: The First 20 Years」を読む
JavaScript/ECMAScriptというプログラミング言語の歴史について書いた文章はWikipediaなどいろいろなものがあります。 その中でも、ECMAScript 2015のSpec EditorであるAllen Wirfs-Brockによって書かれた”JavaScript: The First 20 Years”が特におすすめです。 JavaScript: The First 20 Years JavaScript: The First 20 Years | Zenodo “JavaScript: The First 20 Years”はHOPL IV - History of Programming Languages向けに書かれたPaperです。 JavaScriptの誕生からECMAScriptの策定、ECMAScript/JavaScript各バージョンでの違い、ブラ
JavaScript Primerを出版しました！/JavaScript Primerはなぜ書かれたのか？
この3つの原則は書籍の構成にも現れています。 第一部の基本文法で「書き方」を学び、第二部のユースケースで「作り方」を学べるようになっています。 「学び方」は、章としてではなく全体的な流れとして取り入れることにしました。 なぜなら、「学び方」自体は学びたいことによっても異なる方法を取る場合があります。 そのため、「学び方」で個別の章とするよりは、他の章で「書き方」や「作り方」と一緒に見たほうがよいと考えたためです。 たとえば、基本文法などの学び方にはMDNのようなリファレンスサイトを見たほうがいいし、 アプリケーションの作り方は実際のサイトなどを参考にしたほうがよいためです。 第一部と第二部がどのように書かれたのかをざっくりと振りかえってみます。 第一部: 基本文法 第一部: 基本文法はJavaScriptの基本的な文法について扱っています。 プログラミングの入門書で文法については避けること
Babelで書かれたJavaScriptライブラリをTypeScriptへ移行する方法
Babelを使ってJavaScriptで書いていたライブラリをTypeScriptへマイグレーションする方法についてのメモ書きです。 数十回はライブラリやアプリケーションのコードベースをJavaScriptからTypeScriptへ変換しているので、 ある程度やり方がパターン化されています。 この記事では、自分がよく利用している次の構成のライブラリを元にしています Babel 6 or 7 Mocha + @babel/register この構成を、次のようなTypeScriptを使った構成へと変換していきます。 Babel -> TypeScript Mocha + ts-node + ts-node-test-register Babelで書かれたライブラリをTypeScriptへ変換 今回はtextlint-rule-helperというライブラリを例にしていきます。 このライブラリは
ECMAScriptの仕様/プロポーザルの調べ方を知る
このステージの詳細についてはThe TC39 Processを参照してください。 2ヶ月に1度行われるTC39のミーティングにおいて、プロポーザルごとにステージを進めるかどうかを議論します。 このミーティングの議事録もGitHub上のtc39/tc39-notesにて公開されています。 ステージ4となったプロポーザルはドラフト版であるtc39/ecma262へマージされます。 そして毎年の決まった時期にドラフト版を元にしてECMAScript 20XXとしてリリースします。 この仕様策定プロセスの変更は、ECMAScriptに含まれる機能の形にも影響しています。 たとえば、class構文の策定は最大限に最小のクラス（maximally minimal classes）と呼ばれる形で提案されています。 これによりES2015でclass構文が導入されましたが、クラスとして合意が取れる最低限の
ECMAScript 2015以降のJavaScriptの`this`を理解する
この記事はJavaScriptの入門書として書いているjs-primerのthisに関する部分をベースにしています。 またjs-primerでは書けなかった現在時点(2018年1月1日)でのブラウザの挙動についてを加えたものです。 次の場所にjs-primer版（書籍版）のthisについての解説があります。 この記事と違って実際にコードを実行しながら読めるので、学習ソースとしては書籍版を推奨します。 書籍版: 関数とthis · JavaScriptの入門書 #jsprimer また、バグ報告やPRも直接リポジトリにして問題ありません。 asciidwango/js-primer: JavaScriptの入門書 おかしい場所を選択した状態で右下にある”Bug Report”ボタンを押せば、簡単にtypoとかのバグを報告できます。(PRでも歓迎) 前置きはこの辺までで、ここから本編。 この記
ページ上でずっと動いているsetTimeout、setInterval、requestAnimationFrameを見つけてパフォーマンス改善する
ページ上でずっと動いているsetTimeout、setInterval、requestAnimationFrameを見つけてパフォーマンス改善する 複雑なウェブアプリケーションになってくると、1つのページで複数のTimerなどを回すことがあります。 例えば、Twitterのようなアプリならば、ポーリングで更新するためにsetInvervalのようなタイマーを回します。 また、ゲームなどCanvasで描画を行うアプリケーションならば、メインループをrequestAnimationFrameで回します。 このように色々なタイマー系がありますが、アプリが多機能になっていくと色々なタイマーが同時に動くようになっていきます。 特に問題がなりやすいのが表示中だけタイマーを回すコンポーネントです。 よくあるのが次のようなmount時にtimerを開始して、unmount時にtimerを停止するコンポーネ
#html_modules_study アウトラインメモ
html_modules_study - connpass html_modules_studyに参加したのでメモ。 WebComponents Updates - @1000ch スライド: Web Components Updates Void or Self-closing Element 今は <x-button></x-button> なので省略したい <x-button> assignedElements() assignedNodes()はTextも含まれる 挿入された要素だけをShadom DOM内部で参照したい Custom Psuedo-elements 疑似要素を独自に定義出来るようにしたいPropsal <input paseudo="start-data" type="data"> data-range-selector::start-data CSS shado
Living Documentation by design, with Domain-Driven Designを読んだ
Living Documentation by design, with Domain-Driven Designを読んだ Living Documentation by design, with Domain-Driven Design by Cyrille Martraire [PDF/iPad/Kindle]という電子書籍を読んだ。 leanpubで$0から購入できて、任意の値段で購入できるドキュメンテーションとDDDについての書籍。 追記: 書籍版 Amazon.co.jp: Living Documentation: Continuous Knowledge Sharing by Design (English Edition) 電子書籍: Martraire, Cyrille: 洋書 ドキュメンテーションもソフトウェア開発のように設計やテストといったパターンやアプローチがありま
JavaScriptの配列のパターン
JavaScriptの配列をどう解説するかを考えていて、配列って普段どういう風に使ってるけ?みたいなことを書き出してみました。 Arrayオブジェクト · Issue #49 · asciidwango/js-primer 皆さんは配列をどう使いますか? 追記: 次のページでこの記事をブラッシュアップした話をhttps://jsprimer.net/で公開しています。 配列 · JavaScriptの入門書 #jsprimer 配列の作成 配列の作成には配列リテラル（[]）を使います。 配列リテラルには初期値も指定できます。 var emptyArray = []; // 空の配列を作成 var array = [1, 2, 3]; // 値をもった配列を作成 Arrayオブジェクトをnew演算子でインスタンス化する方法は基本的には使いません。 こちらは配列リテラルとは異なり、初期値ではな
Node学園 23時限目 アウトラインメモ
Node学園 23時限目 (今回はリクルート（東京駅）でやります！) - connpassに参加してきたのメモ npm@4、npm@5 node-gakuen-201610.md npmは後方互換性を重んじている Node.jsにbundleされているので npm@2のbreaking changeについて backwards-incompatible change to the way npm run-script handled its arguments npm@3 flat directory npm@2そのまま使い続ける人もいる 大きな変更は移行の壁になるという話 npm@4 Release v4.0.0 · npm/npm npm 4は小さな変更にした prepublish が npm install 時に実行されるのは Deprecated prepublishOnly と
アーキテクチャをめぐるたび
タイトルに特に意味はありませんが、Alminを作る参考にしたものをまとめた感じの記事です。 スライド: 複雑なJavaScriptアプリケーションを考えながら作る話 リポジトリ: azu/large-scale-javascript: 複雑なJavaScriptアプリケーションを作るために考えること 主に書籍を並べていますがその他のスライドなどの参考資料は以下にまとめてあります。 large-scale-javascript/refs.md at master · azu/large-scale-javascript 自分用のメモなので、読んだ順で並べておきます。 右側の年は書籍の出た年です。 実践ドメイン駆動設計 @ 2013 一番最初に読んだDDD系の本。 この辺ででてくるレイヤーとか用語を把握した感じ。 けど、そこまでよく分かってない感じはする。 カウボーイが出てくるの読みにくい。
Node学園 21時限目でECMAScript as a Living Standardという発表をした
Node学園 21時限目 -ES Modules Meetup-でECMAScript as a Living Standardという発表をしてきました。 スライド: ECMAScript as a Living Standard ECMAScriptの仕様策定は大きなプロジェクトですが、 大部分の作業がGitHub上で見られる形でやり取りされています。 そのため、大きなGitHubプロジェクトとそこまで変わらない感覚で見ることができます。 また標準仕様を作るのでConsensusを取ったり、フォーマルなやり取りもあります。 tc39/proposals: Tracking ECMAScript Proposals tc39/ecma262: Status, process, and documents for ECMA262 tc39/tc39-notes: These are the
Shibuya.XSS techtalk #7 アウトラインメモ
Shibuya.XSS techtalk #7に参加してきたのでメモ 超絶技巧 CSRF - mala スライド: 超絶技巧CSRF / Shibuya.XSS techtalk #7 // Speaker Deck CSRFについて クロスサイトでリクエストを強制する脆弱性 書き込み パスワードの削除 未だによくある XSSは正しく書いていれば防げる CSRFは未だによくある CSRFは事後対処になりやすい 投票とか掲示板とか事後対処になりやすい リスクの高いCSRFの紹介 アカウント乗っ取り 危険なCSRF パスワードの変更 メールアドレスの変更 連携アカウント追加 OAuth2.0 + stateパラメータで防げる いろんなものにCSRFする JSONやXMLを送る form enctype=text/plainを使う CSRFでmemcached protocolとして解釈可能なも
JSDocをランタイムassertに変換するBabelプラグインを書いた
JSDocをassertに変換するライブラリとそれを使ったBabelプラグインを書きました。 azu/babel-plugin-jsdoc-to-assert: Babel plugin for jsdoc-to-assert. azu/jsdoc-to-assert: JSDoc to assert ライブラリのjsdoc-to-assertの方は、JavaScript ASTのコメントからassertの文字列を作り出すだけのシンプルなものです。 実際に使う場合は、Babelのプラグインとしてbabel-plugin-jsdoc-to-assertを使い、コードを変換してランタイムassertを追加させます。 やっていることとしては、FlowTypeをランタイムチェックするbabel-plugin-typecheckのJSDoc版とも言えます。 babel-plugin-typechec
東京Node学園祭2015で技術文書をソフトウェア開発する話をしてきた
東京Node学園祭2015に参加したきたメモです。 また、技術文書をソフトウェア開発する話という内容でブログ以上技術書以下の文書を書く場合における開発方法について話してきました。 The State of JavaScript - @domenic スライド: The State of JavaScript (2015) 皆Babelを使い始めたらそれはスタンダードじゃない可能性があるので気をつけた方がいい Custom Element Service Worker ブラウザの中でプロキシサーバ的なことができる Custom Paint registerPaint 新しいCSSプロパティ 言語 TC39/ecma262 に新しい仕様が置いてある GitHubにある Living Standard的な感じになってる Spec番号 あんまり気にする必要はない 言語ではバージョン番号は必要ない
ブラウザでビジュアルテストをするreftest-runnerを作った
概要 reftest-runnerというブラウザで描画内容やレイアウトといった表示結果をテストするためのライブラリを作りました。 要素技術としてはブラウザ、WebDriver API、レンダリングキャプチャ、画像Diffという感じです。 azu/reftest-runner 時間が無い人向け 以下のスライドに簡単にreftest-runnerやreftestとはなにか、どういうユースケースがあるのかが書いてあります。 reftest-runner-overview.pdf reftestとは reftest(Referrence Test)とは、2つのHTMLの表示結果(スクリーンショット)を比較することで表示結果が意図したものかをテストする方法です。 用意するHTMLとして以下の2種類を1セットとして用意して利用します。 テスト用HTML テストしたい機能を使って実装したHTML リファ
ECMAScript 6ドラフトのDiff検索用リポジトリを作った
タイトルから何を言ってるのか意味わからない気がするので順を追って解説。 スライド版: ECMAScript 6 Draft Hisotry Repo 2015-05-07現在、ES6の仕様はApril 14, 2015 Rev 38 Final Draftが公開されています。 Rev38とわかるようにドラフトは38回ぐらい更新されていて、ちょっとづつ追記されたり変更されたりして結構な変更履歴があります。 Growing #ECMAScript 2015(ES6) Drafts :) pic.twitter.com/tV60cjdmM8 — azu (@azu_re) May 3, 2015 これだけ長い間(4年ぐらい?)やってるとある時点では正しかったかもしれないけど、最終版では違うものになってるという挙動があったりします。 例えば、class構文で以下のようにして定義したmethod()
#error_handling_sushi でPromiseのエラーハンドリングについて発表した
#error_handling_sushi でJavaScriptのエラーハンドリングについて議論した。 自分はPromiseのエラーハンドリングの握りつぶしの問題を見つけやすくするイベントの実装について、Promise Error Handlingという話をした。 ログ: #error_handling_sushi - Togetterまとめ #error_handling_sushi 始まった #寿司とは pic.twitter.com/XZe21QTsDO — Takuto Wada (@t_wada) March 6, 2015 – 基調講演 - teppeis これが #error_handling_sushi pic.twitter.com/vSLDpthYi4 — azu (@azu_re) March 6, 2015 #error_handling_sushi 基調講演 一
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
