JavaScript Primer v6.0.0リリース: ES2024の対応とNode.jsのユースケースを刷新
JavaScript Primer v6.0.0をリリースしました 🎉 JavaScript Primer v6.0.0では、ECMAScript 2024の対応とNode.jsのユースケースを新たに増えたnode:utilのparseArgs関数やnode:testを使うように書き直しています。 JavaScript Primer Sponsors JavaScript Primer(jsprimer)では、Open Collectiveを通じてプロジェクトの更新に関わる資金を募っています。 JavaScript Primer - Open Collective 今回のv6リリースにおいては、次の方々にご支援いただきました！ 株式会社コクチョウさんは、Yearly Gold Sponsorとしてご支援いただいています。 ご支援ありがとうございます！ JavaScript Primerス
追加の依存パッケージなしでプロジェクトごとのGitコミットフックを設定する方法
Git 2.9以降はcore.hooksPathというオプションでグローバルまたはローカルのGitフックのディレクトリを指定できるようになっています。 Gitのcore.hooksPathオプションを利用するとhusky、simple-git-hooksのような追加の依存がなくても、Gitの機能だけでGitフックのコードをバージョン管理して、プロジェクトのセットアップ時にプロジェクトごとのGitフックを設定できます。 📝 類似するGitフックを管理するツールとしてpre-commitやLefthookもあります。これらのツールはGitフックの管理だけではなく、ファイルの種類ごとに実行するコマンドをわけて書けるようになっています。 つまり、lint-stagedのような機能も含むので、この記事で紹介するアプローチ以上の機能も同梱されています。 Node.jsプロジェクトの例 ここでは具体例
1Password for Open Source Projectsの申請をした
1Passwordは、オープンソースプロジェクトの開発者が無料で1Passwordを利用できる1Password for Open Source Projectsというものをやっています。 1Password for Open Source Projectsで申請が通ると、Teamプラン相当が無料(無期限)で利用できるようになります。 1PasswordのAccount(組織/チームのこと)に所属してるMemberは、それぞれ個人のパスワード管理機能とAccount(チーム)で共有するパスワード管理機能が利用できるようになります。 1Password/1password-teams-open-source: Get a free 1Password Teams membership for your open source project チームのための手間いらずで安全なパスワード管理 |
textlint 12リリース、ブラウザで動くtextlint editorをベータリリース
日本語などの文章を校正できるルールをもっているLintツールであるtextlint v12をリリースしました。 Markdownプラグインのアップデートと各パッケージのバージョン統一が主な変更となります。 リリースノートは次のページにも書いているので、興味がある人は見てください。 textlint v12.0.0 · textlint 簡単に変更のサマリを書いておきます。 textlint利用者向けの変更点 次のコマンドでtextlint 12へアップデートできます。 textlintは、文章の構文を認識してLintすることで誤検知を減らしています。 たとえば、MarkdownのCodeBlockの中のコードを単純にスペルチェックしてしまうと赤線だらけになってしまいます。 textlintの各ルールには、CodeBlockの中はチェックしないといったように、各ルールごとに文章のどの構文（リ
見ているサイト上に露出している機密情報(APIトークン、IPアドレスなど)を見つけるブラウザ拡張を作りました
見ているサイト上に露出している機密情報(APIトークン、IPアドレスなど)を見つけるブラウザ拡張を作りました SecretlintというAPIトークンなどの機密情報がファイル内に含まれているかをチェックできるツールを書いています。 Secretlintはコマンドラインツールとして動くので、主にCIやGitのpre-commit hookを利用して、リポジトリに機密情報が入るのを防止できます。 SecretlintでAPIトークンや秘密鍵などのコミットを防止する | Web Scratch 一方で、実際のウェブサービスなどは機密情報がファイルにハードコードされているわけではなく(Secrelint自体がこういうハードコードを防ぐツールです)、環境変数やDatabaseに保存していると思います。 このような場合にも、コードのミスなどによって公開するべきではない情報(秘密鍵、APIトークン、Sl
ES2021に対応したJavaScript Primer 3.0を公開しました - JavaScript入門
JavaScript入門書のJavaScript Primerのウェブ版をアップデートして、2021年の最新の仕様であるES2021に対応しました。 JavaScript Primerのウェブサイトから閲覧できます。 ウェブサイト: https://jsprimer.net/ リリースノート: Release 3.0.0: ECMAScript 2021対応 · asciidwango/js-primer 対応のサマリIssue: ES2021の対応 · Issue #1220 · asciidwango/js-primer JavaScript Primerについて JavaScript Primerは、これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。 ECMAScriptの仕様は毎年アップデートされ
スクリーンショットドリブンのメモアプリ mumemo を作った
自分は技術書などの書籍のメモはスクリーンショットを撮ってそれにメモを追加するという形で取っています。 以前はOneNoteにスクショを貼り付けていましたが、OneNoteを立ち上げるのが面倒なので、去年mumemoというスクリーンショットベースのメモアプリを書いて、メモはGitHubのPrivateリポジトリで管理するようにしました。 この記事では、スクリーンショットべースのメモを取るmumemoというアプリを紹介します。 書籍などを読むときにスクリーンショットを撮って、Markdownでメモを書くスタイルでやっているので、それをいい感じにやるElectronアプリを書きました。 "スクリーンショットドリブンのメモアプリ mumemo を作った | Web Scratch"https://t.co/Y26TvxvEvv pic.twitter.com/gA1txccoIw — azu (@
小さなEventEmitterライブラリ - eventmitを書いた
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
JavaScript Primerの書籍版が4月27日に発売予定です！
JavaScript Primerは https://jsprimer.net/ でOSSとして公開しているJavaScriptの入門書です。 JavaScript Primerの書籍版が2020年4月27日にアスキードワンゴから発売されます！ 正式名称は「JavaScript Primer 迷わないための入門書」となっています。 略称は今まで通り jsprimer または js-primerです。 ハッシュタグも引き続き #jsprimer を利用してください。 予約できるのは物理書籍だけですが、電子版(Kindleと達人出版)も発売同日〜後日に発売される予定です。 書店への物理的なアクセスが難しい状況なので、欲しい人はできるだけ予約してください！Amazonなら次のページから物理書籍を予約できます。 JavaScript Primer 迷わないための入門書 | azu, Suguru
複数のGitHubリポジトリにまとめてGitHub Sponsorsボタン(FUNDING.yml)を設定する方法
追記(2021-09-04): username/.githubリポジトリを作ることで一括でSponsorボタンが設定できるようになっています。 また、現在はデフォルトでFUNDING.ymlが認識されてSponsorボタンがでるため、“Sponsorship”の✔を入れる作業は不要となりました。 詳細はuser/.githubリポジトリを使い一括でFUNDING.ymlやCODE_OF_CONDUCT.mdなどを設定する | Web Scratchを参照 GitHubリポジトリにはスポンサーボタンを表示する機能がありますが、これをまとめて設定するツールを書きました。 GitHubリポジトリに、スポンサーボタンを表示するには次のような条件が必要です。(2019-10-27現在) GitHubリポジトリのSettingsで”Sponsorship”の✔をいれて有効化する リポジトリの.git
JavaScript Promiseの本 v2リリース、ES2015+に対応、Async Functionの章を追加
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以降ベース
手元のコードのパフォーマンスを計測するperformance.markのスニペット
一部の機能をパフォーマンス改善したときにそれを計測したり、データを集めたいときがあります。 しかし、それだけのためにライブラリを追加するのも面倒くさい(実装後に計測コードは外すので)し、コンソールに結果を出すのもデータ収集的にイマイチです。 // よくあるコンソールに表示するパフォーマンス計測コード const start = performance.now(); // ------------ // 計測したい処理を書く // ------------ console.log(`${performance.now() - start}ms`); 結果をコピーしてSpreadSheetなどで可視化できたり、処理時間と関連する要素も保存しておきたいです。 (コンソールに出力すると埋もれたり、加工がめんどうです) そのようなときによく使っているPerformance.mark()とPerfor
JXAをTypeScriptでコード補完して書く環境やNode.jsから実行する環境を作った
JXA(JavaScript for Automation)を書いて実行するためにいろいろなパッケージを作りました。 この記事で紹介する内容は次のスライドで発表したものと大体同じです。 スライド: JXA for TypeScript/Node.js リポジトリ: JXA-userland/JXA: JavaScript for Automation(JXA) packages for TypeScript/Node.js. JXAはAppleScriptのJavaScript版(WebKit)のようなもので、macOSにはビルトインされています。 osascript -l javascrript file.jsでJXAを実行できます。 詳しくは次のページで解説されています。 Home · JXA-Cookbook/JXA-Cookbook Wiki [email protected] |
モバイル/オフラインでも動作するはてなブックマーク検索のPWAを作った
はてなブックマーク検索PWAというはてなブックマークでブクマしたデータをオフラインでも検索できるPWAを作りました。 サイト: https://hatebupwa.netlify.com/ ソース: https://github.com/azu/hatebupwa はてなブックマークの自分のブクマを検索できるPWAを作りました。 Service Workerに対応してるブラウザ(IOS Safari 11.3+を含む)ではオフラインでも検索できます。https://t.co/RCVkRYAFz0 モバイルはホームスクリーンアプリで、macOSはアプリ版もあります。https://t.co/5MDuyC9baN pic.twitter.com/KAc3KV690b — azu (@azu_re) April 16, 2018 使い方 使い方は特に難しい話でもないですが、次のように任意のはてな
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を停止するコンポーネ
textlintのコアをTypeScriptで書き直した、textlintの今後について
textlint 9.0.0をリリースしました。 textlint 9.0.0では@textlint/kernelという内部的に使うコアモジュールをTypeScriptで書き直したバージョンが使われています。 元々textlintはNode.jsで動くように作られたため、fsモジュールなどNode.jsに依存しています。 そのため、ブラウザなどで動かす場合などはビルド時に色々工夫しないと動きません。 文書校正ツール textlint の Chrome 拡張を作った - もなでぃっく LocalStorageで誰でも安全にMarkdownでスライドやメモ作れるサービス作ったよ この問題をどうにかするためには、textlintというモジュールからロジックやLint処理部分だけをNode.jsなどに依存しない純粋なJavaScriptとして切り出す必要があります。 アドホックに対応するならブラウ
LDRがサービス終了のため、Inoreader/Feedlyをバックエンドに動くRSSリーダを書いている
LDRがサービス終了のため、Inoreader/Feedlyをバックエンドに動くRSSリーダを書いている 追記: 1.0.0を出して説明を書き直したので、Irodrを使いたい方はLDRライクなRSSリーダのIrodr 1.0.0をリリースした | Web Scratchを参照してください。 2017年8月31日をもってLDRはサービス終了です。乗り換え先となるRSSリーダを探したりしましたが、求めるものを見つけることができなかったので作ることにしました。 【重要】Live Dwango Reader/LDR Pocketサービス終了のお知らせ｜LDR / LDRポケット 開発日誌 次の記事でも書いていましたが、RSSリーダのバックエンドを自前で管理するのはコスト的に難しそうでした。そのため、バックエンドとしてInoreaderやFeedlyのAPI使ったRSSリーダのウェブクライアントを書
Array.prototypeのImmutable版メソッドを個別のパッケージで使えるものを作った
JavaScriptの配列には破壊的なものと非破壊的なものが混在しています。 例えばArrray.prototype.pushは破壊的ですが、Array.prototype.concatは結合した新しい配列を返すので非破壊的です。 破壊的か非破壊的かは、基本的には覚えることでしか区別できません。 配列のメソッドの使い方については次の記事やjs-primerで今書いています。 JavaScriptの配列のパターン | Web Scratch 配列 · JavaScriptの入門書 #jsprimer それらの破壊的メソッドの非破壊的なバージョン - Immutableバージョンのライブラリを作成しました。 azu/immutable-array-prototype: A collection of Immutable Array prototype methods(Per method pa
GitHubのリポジトリをDeprecatedにするスクリプト
GitHubのリポジトリを別の場所に移す場合、リポジトリまるごと移動できるならrepository transfersを利用するのが正解です。 しかし、既存のリポジトリをmonorepoの一部として取り込む場合はそのようなことができません。リポジトリの履歴はLernaなどではlerna importで取り込むことができますが、既に作ったリポジトリからリダイレクトさせることができません。 既存のリポジトリを消してしまうと、既に貼ったリンクなどが404になるためあまり良くありませんし、そのままにしておくと紛らわしいです。 そのため、よく取られるのはリポジトリは空にしてDescriptionなどで移動したことを書いておく手法です。 これをやるmove-github-repositoryというツールを書きました。 move-github-repository move-github-reposit
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
