EventEmitterのようにPub/Subを行うeventmitという小さなライブラリを書きました。 azu/eventmit: Simple EventEmitter. A single event object per an event. eventmitは、TypeScriptで書かれています。 また、Node.jsのEventEmitterなどとは違って、イベント一つに対してeventmitのオブジェクトを一つ作成して使います。 import { eventmit } from "eventmit"; const event = eventmit<{ key: string }>(); // Register handler event.on((value) => { console.log(1, value); }); event.on((value) => { consol

この3つの原則は書籍の構成にも現れています。 第一部の基本文法で「書き方」を学び、第二部のユースケースで「作り方」を学べるようになっています。 「学び方」は、章としてではなく全体的な流れとして取り入れることにしました。 なぜなら、「学び方」自体は学びたいことによっても異なる方法を取る場合があります。 そのため、「学び方」で個別の章とするよりは、他の章で「書き方」や「作り方」と一緒に見たほうがよいと考えたためです。 たとえば、基本文法などの学び方にはMDNのようなリファレンスサイトを見たほうがいいし、 アプリケーションの作り方は実際のサイトなどを参考にしたほうがよいためです。 第一部と第二部がどのように書かれたのかをざっくりと振りかえってみます。 第一部: 基本文法 第一部: 基本文法はJavaScriptの基本的な文法について扱っています。 プログラミングの入門書で文法については避けること

この記事はミーティングログの取り方についてのメモです。 以前書いた勉強会でのメモの取り方と似た話です。 勉強会でのメモの取り方について | Web Scratch 自分は書きながら話を聞くのが習慣化しているので、こんな感じでミーティングログ(ミーティングノート)を書いていますという話です。 この記事はメモ書きなのであんまり読みやすくないです。 このログの取り方は正確さログや整形されたログを取る方法ではありません。 2種類のミーティングログ 自分の場合は主に2種類のミーティングログを取ることが多いです。 ミーティングの内容によってどちらで取るのかを使い分けています。 リアルタイムモード 対面、リモートでのミーティング 回想モード ブレスト系のミーティング(JavaScript Primerの出版に関するミーティングなど) この記事ではこの２つのミーティングログの取り方について書いていきます。

delete-github-branchesというブランチの命名ルールを定義して、そのルールにあっていないブランチを削除するCLIツールを書きました。 delete-github-branchesはCLIですが、GitHub Actionsのcron処理と合わせれば、ルールにあってないブランチをGitHubから自動的に削除できます。 不要なブランチを削除することで、リポジトリからノイズとなるブランチを減らすのが目的です。 Pull Requestなしで放置されてるブランチが単なる消し忘れ以外であることは少ないので、そのようなブランチを減らすことでpullした時のノイズやサイズを減らすの目的です。 (活発なリポジトリだと放置ブランチがconflictだらけになるのでマージが難しいです。またGitHubにはDraft PRもあります) CLIの使い方 delete-github-branche

Node.jsでUnhandled Rejectionsが発生してprocessが終了すると、Exit Statusが0となる問題とその対策についてのメモです。 追記： Node.js 15+からUnhandle Rejectionが発生するとプロセスがExit Status 1で終了する動作がデフォルトとなりました Node.js v15ではunhandled rejectionでプロセスがエラー終了する 事前知識: Async FunctionはPromiseを返す関数定義です。 その辺について詳しくは次のサイトを読んでください。 JavaScript Promiseの本 非同期処理:コールバック/Promise/Async Function · JavaScript Primer #jsprimer 今回のサンプルコードは次のリポジトリにあります。 azu/unhandled-rej

この記事は次のスライドの文字起こし的な内容です。 スライド: クライアントサイドからサーバサイドまで破壊するテンプレートエンジンを利用した攻撃と対策 スライドの画像 + 喋った内容のNote的なものをそれぞれのページごとに書き込んでいます。 リンクとかはスライド版ならクリックできるので、そっちを見るといいのかもしれません。 画像だらけなので、画像が読み込み終わるのを待つといい気がします。 クライアントサイドからサーバサイドまで破壊するテンプレートエンジンを利用した攻撃と対策 テンプレートエンジンに関するセキュリティ的な問題についてのお話です。 テンプレートだからエンドユーザー(サービスの利用者)に書かせて安全だと思っていても、選んだテンプレートエンジンの性質によっては安全ではない場合があります。 また、JavaScriptのテンプレートエンジンはクライアントサイド(Browser)とサーバ

JavaScript Promiseの本 v2リリース、ES2015+に対応、Async Functionの章を追加 JavaScriptのPromiseについて学ぶ書籍であるJavaScript Promiseの本 v2をリリースしました。 Promise本 1.0.0をリリースしたのは2014年6月ですが、そこから少しづつアップデートしていました。 JavaScript Promiseの本を書きました | Web Scratch ES6がリリースされたのでPromiseについて学びましょう | Web Scratch 今回のメジャーアップデートとなる2.0.0では、サンプルコードのコードベースをES2015前提のものへと変更しています。 1.x系からの主な変更点としては次のものがあります。 ES6をES2015に表記を変更 コードベースをES5からES2015+(ES2015以降ベース

Inside Frontendに参加してきたのでアウトラインメモ。 A1: TypeScript: Why and how we adopted it at Slack - Felix TypeScript + React Battle Field 1のUIはReact TIL Battlefield 1 user interface is powered by React+MobX : javascript Electronアプリで書かれてるSlackとかSkypeとかはJavaScriptで動いてる Slackでは、C++とかのネイティブコードも使ってる JSDocなどを使ったドキュメントや型も書いてたけど、スケールしなかった このような場面でTypeScriptを使うことにした TypeScriptはRuntimeに関与しない 多くのnpmモジュールは @types をサポートしてる

一つのリポジトリで複数のパッケージを管理する際にはLernaとYarnのワークスペースを組み合わせて運用するmonorepoにすることが多いです。 lerna/lerna: A tool for managing JavaScript projects with multiple packages. LernaにはFixed(すべてのパッケージが同じバージョン)とIndependent(パッケージごとに異なるバージョン)のモードがあります。 https://github.com/lerna/lerna#how-it-works 基本的にはFixedの方が運用は簡単ですが、不自然なバージョンの上がり方を避けたい場合などはIndependentのmodeを使うことになります。 この記事では、Fixed modeとIndependent modeでのパッケージのリリースフローについて見ていきます

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というライブラリを例にしていきます。 このライブラリは

vscode-read-aloud-textという文章を読み上げるVisual Studio Codeの拡張機能を作りました。 azu/vscode-read-aloud-text: VSCode extension that read aloud text like Markdown and text etc… Read Aloud text - Visual Studio Marketplace vscode-speechを元にしていますが、vscode-read-aloud-textは文章の構造をパースしてから読み上げたり、読み上げている部分をハイライト表示する機能が追加されています。 Markdownなどをパースして、コードブロックなどは読み上げない textlintのプラグインを再利用してるので、現在対応しているのはMarkdown、Txt、Re:Viewのみ 読み上げるのはHe

ここ数年書いているJavaScript入門本ですが https://jsprimer.net/ というURLで無料で公開しました。 まだ開発中です これからJavaScriptを始める人がES2015以降をベースにして学べる本 プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、今のJavaScriptアプリケーションを読み書きできるようになるもの Webサイト: https://jsprimer.net/ リポジトリ: asciidwango/js-primer: JavaScriptの入門書 もともと公開してありましたが、jsprimer.net というドメインを取ったのでURLが変わっただけです。リダイレクトされているので既存のブックマークはリンク切れにはなりませんが、気になる人はブックマークしなおしてください。 またリポジトリ（asciidwan

この記事はJavaScriptの入門書として書いているjs-primerのthisに関する部分をベースにしています。 またjs-primerでは書けなかった現在時点(2018年1月1日)でのブラウザの挙動についてを加えたものです。 次の場所にjs-primer版（書籍版）のthisについての解説があります。 この記事と違って実際にコードを実行しながら読めるので、学習ソースとしては書籍版を推奨します。 書籍版: 関数とthis · JavaScriptの入門書 #jsprimer また、バグ報告やPRも直接リポジトリにして問題ありません。 asciidwango/js-primer: JavaScriptの入門書 おかしい場所を選択した状態で右下にある”Bug Report”ボタンを押せば、簡単にtypoとかのバグを報告できます。(PRでも歓迎) 前置きはこの辺までで、ここから本編。 この記

東京Node学園祭2014 に参加してきたのでその時のメモ 企業JavaScript飯 #企業JavaScript飯というご飯イベントをNode学園祭のお昼に(勝手に)やってました。 @teppeis、@ahomu、@kyosuke、Layzie (敬称略)で企業内でのJavaScript状況ですかという感じの話をしてきました。 質問テーマのスライド: https://github.com/azu/slide/raw/gh-pages/nodefest2014/lunch.pdf という感じのテーマを元に話をしてきました。 参加していただいた皆さん興味深いお話ありがとうございました。 最近企業のJavaScript(er)ってどんな感じになってて、どういうものを求めているのかに興味を持ってるので、面白い話があったらお話きかせて下さい。(to @azu_re にmention) どうやったら

概要 npm 1.xの時はローカルにあるディレクトリへの相対パスをdependencyフィールドで指定できなかった。 そのため、ローカルにあるモジュールをたどるにはrequire("../../../")のような指定が必要になっていた(ライブラリに切り出せればいいけど、アプリケーション固有のUtilsなどがある場合これ面倒になる) Better local require() paths for Node.js avoiding ../../../../../../.. How I Work Around The require(“../../../../../../../”) Problem In NodeJS | ThoughtStream.new :derick_bailey そのため、npm linkやnode_modulesにそのまま追加してやるなど、微妙なハックがひつようだった