今どきのnpmパッケージはUNPKGやPika CDNを使えば、ES Modulesとして直接import文読み込めることがあります。 たとえばPreactなら、次のようにUNPKG経由で直接モジュールをインポートできます。 <script type="module"> import { h, Component, render } from 'https://unpkg.com/preact?module'; // Create your app const app = h('h1', null, 'Hello World!'); render(app, document.body); </script> Getting Started | Preact: Fast 3kb React alternative with the same ES6 API. Components & Vir

SecretlintはAPIトークンや秘密鍵のようなリポジトリにコミットしてはいけないデータを含んだファイルがないかをチェックするツールです。 Secretlintが見つけられるCredentials(秘匿情報)はプラグインで拡張できるようになっていて、npm、AWS、GCP、Slack、SSH秘密鍵、ベーシック認証などの検知に対応しています。 Gitのpre-commit hookやCIサービス上でSecretlintを使ってファイルの中身をチェックすることで、 リポジトリにうっかりCredentialsをコミットしてしまうことを防止する目的のLintツールです。 Credentials(秘匿情報)のチェックに特化したESLintやtextlintのようなLintツールです。 まずチェックしてみよう SecretlintはDockerかNode.jsが入っている環境なら次のコマンドで、現

GitHubにブックマークをコミットして管理できるはてなブックマークみたいなブックマークシステムを書きました。 詳しいモチベーションなどについては次のスライドで発表しています。 スライド: ブックマーク管理システム: 動くアプリをとにかく早く安く作ろう はてなブックマークのAPIが2019/5/31ぐらいエラーを返すようになって困ったので自分用のブックマークの仕組みを突貫で作りました。 （はてなブックマーク APIは2019/6/3には直ってました。） 逆にじっくり開発していくアプリについては次のスライドで話しています。 スライド: 考えながらクライアントサイドのウェブアプリケーションを作る話 azu/asocial-bookmark: Personal Bookmark System. socialじゃないのでasocial bookmarkです。 特に運用の費用的なコストはゼロにしたか

一つのリポジトリで複数のパッケージを管理する際には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でのパッケージのリリースフローについて見ていきます

次世代 Web カンファレンス - connpassに参加してきたのでメモ。 このメモは文字起こしではなくあくまでメモなので、そのままの発言じゃなくて解釈や要約が混じっています。 詳細は動画をみてください 次世代Webカンファレンス 2019 - YouTube パフォーマンス 登壇者 @1000ch likr @sisidovski 記録 ローディング周り 1000ch: WebKitのレンダリングの様子の動画を見たのが興味を持ったきっかけ 1000ch: HTTP/2になってきてローディングの通信を気にすることは減った? sisidovski: 同時接続数は気にすることは減ったけど、結局は気になる likr: H2 Pushとかが気になっている? 1000ch: 実際に使ったことないけど、会場で使ったことある人? 2割以内ぐらい sisidovski: 「Pushで早くなる」ということ

$ license-generator --author <name> [LICENSE_TYPE] [LICENSE_TYPE]: - AGPL - Apache - CC0 - GPL - LGPL - MIT - MPL - Unlicense Options: --author input author name おわりに The Rust Programming Language読みながらRust勉強してる感じだとそんなに難しくは感じないけど、実際にアプリを書くとハマる系の言語だと思ったので、とりあえず何か書くためにlicense-generatorを書いてみた。 元々Rubyで書かれてたlicense-generatorを使ってたのだけど、ランタイム言語がいらないものに書き換えたくてライセンスジェネレータを選んだ。 でもバイナリの配布方法とインストール方法(curl | shみ

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

documentationjs + add-text-to-markdownでREADME.mdのAPIリファレンスを自動更新 documentationjsはJSDocからドキュメントを生成できるツールで、ES2015以降のコードにも対応しています。 (TypeScriptは対応してないようです) 以前はMarkdownへの出力が難しかったのですが、いつのまにかdocumentation build -f mdでMarkdownでのAPIドキュメントが生成できるようになっていました。 これを使うことで、ライブラリを書いてそのJSDocからドキュメントを生成して、READMEのUsageセキュクションを自動的に更新できるようになっています。 以前もできたのですが、かなりトリッキーなテーマを書いたりしないといけませんでした。(後stdoutへの出力がなかった気がします) –theme for

シンプルなストレージとしてlocalStorage的なものが欲しくなることはよくあるのですが、Node.jsで動かなかったり、インメモリ版が欲しくなったりと色々な状況があります。 毎回そういうときに考えるのが面倒だったので、modeで全部の状況を切り分けできるlocalStorageのponyfill的なライブラリを作りました。 ponyfillとはmonkey patch的にグローバルを書き換えるのではなく、同じAPIを持ったオブジェクトを返すようなpolyfillライブラリです。 azu/localstorage-ponyfill: Universal LocalStorage for browser and Node.js. インストール Install with npm: TypeScriptで書いてあるので、型定義ファイルは同梱されています。 使い方 Auto(Browser o

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

JavaScript Promiseの本という無料で読める電子書籍を書きました。 タイトルそのままで、JavaScriptのPromiseについて書いた書籍です。 書籍の目的 この書籍を読むことで学べる事として、次の3つを目標にして書きました。 Promiseについて学び、パターンやテストを扱えるようになる事 Promiseの向き不向きについて学び、何でもPromiseで解決するべきではないと知る事 ECMAScript6 Promiseの基本をよく学び、発展した形を自分で形成できるようになる事 Promiseは、次のECMAScriptの言語仕様として策定が進められていて既に多くのブラウザに実装されています。 Promiseについて扱う書籍ですが、この機能はjQuery.Deferred()やAngularJSの$qやBluebird等の類似の機能が既にあるため扱ったことがあるかもしれま