私のJavaScriptの情報収集法 2024年版
個人的なJavaScriptの情報収集の方法についてまとめてみます。 JSer.infoなどをやっているので、JavaScriptの情報については色々な情報源を見るようにしています。 JSer.infoの範囲の中での情報源については、次の記事でまとめています。 JSer.info 13周年: JavaScriptの情報源を整理する - JSer.info この記事では、少しスコープを広げてJavaScriptの情報収集についてまとめてみます。 かなりスコープが広がってしまうので、万人向けの方法ではなく、個人的な情報収集方法としてまとめています。 この記事では、膨大な情報の中から見つけるというアプローチをとっているので、人によって向き不向きがあると思います。 情報収集の方法 情報の元となる情報源はさまざまなサイトや人になると思います。 しかし、そのサイトや人ごとに見ていくというのはかなり大変
転職時に無職になる手続きをインターネットでする
転職する際に空白期間がない場合は会社側で手続きがほとんど終わりますが、一旦無職を挟んで転職する場合は、保険証、年金、iDeCoなどの手続きが必要になります。 今回の転職活動にあたって、 この手続きをするのに市役所やプリンターを使いたくないので、インターネットだけで完結できるかにトライしました。 Open Job Letterを公開しました | Web Scratch 手続きの前提条件 会社や個人によって前提が異なるので、ここでは次の前提で記事を書いています。 会社員: 厚生年金 保険証: ［ITS］関東ITソフトウェア健康保険組合 iDeCo: 個人型確定拠出年金 退職して次の会社が決まってない場合は、保険証や年金などの手続きが必要になります。 保険証: 国民健康保険か任意継続かは好きな方で 今回は任意継続を選択 年金: 厚生年金から国民年金第1号へ切り替える iDeCo: 「加入者被保険
eslint-cjs-to-esm: CJSをESMへとマイグレーションするツールを書いた
最近、色々なライブラリをCommonJS(CJS)からECMAScript Module(ESM)へとマイグレーションしています。 その際に、ESMでは__dirnameやrequireなどCommonJS特有の機能は使えなくなっています。 また、TypeScriptやBabelなど多くのツールはCJSではimport時に拡張子はなくても大丈夫ですが、ESMの場合はimport時に拡張子が必要になります。 import url from "node:url"; - import { mdEscape } from "./mdEscape"; + import { mdEscape } from "./mdEscape.js"; // ESMでは相対パスに拡張子は省略できない + const __filename = url.fileURLToPath(import.meta.url); /
Secretlint 6リリース: .bash_historyや.zsh_historyに残ったトークンをマスキングする
ファイルに含まれるAPIトークンやパスワードなどの機密情報を見つけるSecretlint v6をリリースしました。 Release v6.0.1 · secretlint/secretlint Secretlintは secretlint "**/*"のようにglobやファイルを指定して実行すると、ファイルに含まれる機密情報を見つけて標準出力に表示します。 一方で、SecretlintはESLintやtextlintなどと違って、--fixといった自動修正はできません。 なぜなら、APIトークンなどを見つけて消しても、ただ単に壊れるだけだからです。 そのため、見つけた機密情報は報告して、ユーザーがそれを手動で修正する必要があります。 たとえば、ソースコードにハードコードするのではなく、環境変数などで受け取るように変更するといった修正をします。 secretlint/credentials-
Nreal Air + Macbook Pro/iPad Proで、文章やコードを書く
最近は、Nreal Airというサングラス型のディスプレイを使って、プログラミングしたり文章を書いたりしています。 Nreal Airは、いわゆるARグラスというジャンルのガジェットです。 ただし、自分の場合はiPad ProやMacbook ProなどのUSB Cで接続できるデバイスから、ただの外部ディスプレイとしてNreal Airを使っています。(AR的な使い方は実質Androidの特定の端末のみが現時点では対応しています。) OculusなどのVRでも同じようなことをやっているので、VRでやる人は次の記事を参照してください。 Immersed + Meta Quest(Oculus Quest) + Macbook Proで、文章やコードを書く | Web Scratch 必要な道具 Nreal Air サングラス型のディスプレイとUSB Cケーブルが同梱されています Nreal
Maintainer Month: オープンソースをメンテナンスするコツ
週に一度まとめて更新のようなパターンだと、体調が悪いときなどにその週はスキップされ、また次の週も更新しようとして偶然タイミングが合わなかった場合などに、1ヶ月更新が止まるみたいな状態は起きやすいです。 1ヶ月更新を止めてしまうと、そこで更新する習慣が失われて、この書籍でいう逆戻りが起きるのかなと思っています。 そのため、JSer.infoではタスクを細分化して進められる時にやっていけるような形を作っています。 ライブラリのメンテナンスのリズムをツール化する JavaScript周りは顕著ですが、ライブラリが細かく分かれていることが多いため、リポジトリの数も多いです。 そのため、リポジトリのCI設定や依存ライブラリのアップデートなどをメンテナンスするだけで無限の時間がかかります。 このメンテナンス作業を手動で毎回やるととても疲れるので、自分の場合はツール化していることが多いです。 作ったり、
Maintainer Month: オープンソースのメンテナーがやっている仕事
2022年の6月は、GitHub主催でMaintainer Monthは、オープンソースのメンテナーが集まって情報共有したり、メンテナーを祝ったり、支援したりするイベントが行われていました。 Welcome to Maintainer Month! 🎉 | The GitHub Blog Maintainer Monthに気づいたのはThank you to our maintainers | The GitHub Blogのとき(6/24)なのだったので、残り一週間でしたがオープンソースのメンテナンスとメンテナーについて色々書いていました。 Maintainer Month: epubリーダーアプリ bi-epub-readerを作った | Web Scratch Maintainer Month: オープンソースをメンテナンスするコツ | Web Scratch Maintainer
GitHubのラベルをいい感じにセットアップするツール
Usage 基本的にはデフォルトのプリセットがあるので、--tokenでGitHubのtokenを渡すだけで後は自動でやってくれます。 ラベルを設定したいプロジェクトのディレクトリに移動してコマンドを叩くだけです。 (git remoteのoriginを見ます) Usage $ github-label-setup --token xxx Options -h, --help output usage information -l, --labels <path> the path or npm packages name to look for the label configuration in. Default: labels.json --token <token> a GitHub access token (also settable with a GITHUB_ACCESS_
Apple Silicon Macbook Proへの移行でやったこと @ 2021
移行ツールを使うと余計なものが色々入ってしまうため、 Intel Macbook ProからApple Silicon Macbook Proへと手動で移行した。 移行元: Macbook Pro 13” Intel Core i7 32GB 2020 移行先: Macbook Pro 14” Apple M1 Max 64 GB 2021 最初にやっておくと便利なこと それぞれのmacでユニバーサルクリップボードを有効化 ファイルとか文字列のやりとりが楽になる ユニバーサルクリップボードを使って Apple デバイス間でコピーアンドペーストする - Apple サポート (日本) 適当に元macでファイルをコピー、新しいmacでペーストするだけでファイルコピーできる scpやrsyncでファイルを渡せるようにする
音声入力でメモを書けるウェブアプリを書いた、x-callbackを使ったアプリケーション連携
voicodという音声入力でメモを書けるシンプルなウェブアプリケーションを書きました。 音声入力でメモができるシンプルなアプリケーションを書きました。https://t.co/EHSKnNKNaL x-callbackを使ってショートカット.app 等と連携すれば、入力内容をNotionに保存したりできます。 Note: SpeechRecognitionに対応したブラウザ(ChromeやSafari)が必要 Source: https://t.co/NnzXVjlGnF pic.twitter.com/yzoA3VIzzl — azu (@azu_re) February 10, 2022 SpeechRecognitionというウェブブラウザで音声認識をするAPIを使っているので、このAPIに対応しているブラウザが必要になります。 具体的にはGoogle ChromeやSafariなど
user/.githubリポジトリを使い、FUNDING.ymlやCODE_OF_CONDUCT.mdなどを一括設定する
user/.githubリポジトリを使い、FUNDING.ymlやCODE_OF_CONDUCT.mdなどを一括設定する GitHubには username/.github というように .github リポジトリというメタファイルを置くリポジトリが作れます。 たとえば、 username/.github リポジトリに CODE_OF_CONDUCT.md ファイルを置くと、usernameのすべてのリポジトリにそのファイルが反映されます。 CODE_OF_CONDUCT.mdをおいた場合は、次のようにIssueを作る際になどにHelpful resourcesにリンクが表示されるようになります。 もともとこの機能はOrganization(個人アカウントではない)のみで動いていたと思いますが、いつのまにか個人アカウントでも.githubリポジトリが機能するようになっていました。 次のペー
The Missing README: A Guide for the New Software Engineerを読んだ
The Missing README: A Guide for the New Software Engineerを読んだ The Missing READMEという新人ソフトウェアのためのエンジニアガイドの書籍を読んだ感想です。 The Missing README learning.oreillyで読める The Missing README: A Guide for the New Software Engineer 2021年8月10日 に出版された書籍 The Missing READMEはコード、設計、テスト、リファクタリング、例外処理やログ、依存管理、コードレビュー、CI/CD、インシデント対応、コミュニケーションやプロジェクト管理など幅広いことがすっきりとまとまってる感じの書籍です。 全体的に説明に出てくるコードは少なめです。逆を言えば特定のプログラミング言語に依存していな
見ているサイト上に露出している機密情報(APIトークン、IPアドレスなど)を見つけるブラウザ拡張を作りました
見ているサイト上に露出している機密情報(APIトークン、IPアドレスなど)を見つけるブラウザ拡張を作りました SecretlintというAPIトークンなどの機密情報がファイル内に含まれているかをチェックできるツールを書いています。 Secretlintはコマンドラインツールとして動くので、主にCIやGitのpre-commit hookを利用して、リポジトリに機密情報が入るのを防止できます。 SecretlintでAPIトークンや秘密鍵などのコミットを防止する | Web Scratch 一方で、実際のウェブサービスなどは機密情報がファイルにハードコードされているわけではなく(Secrelint自体がこういうハードコードを防ぐツールです)、環境変数やDatabaseに保存していると思います。 このような場合にも、コードのミスなどによって公開するべきではない情報(秘密鍵、APIトークン、Sl
スクリーンショットドリブンのメモアプリ mumemo を作った
自分は技術書などの書籍のメモはスクリーンショットを撮ってそれにメモを追加するという形で取っています。 以前はOneNoteにスクショを貼り付けていましたが、OneNoteを立ち上げるのが面倒なので、去年mumemoというスクリーンショットベースのメモアプリを書いて、メモはGitHubのPrivateリポジトリで管理するようにしました。 この記事では、スクリーンショットべースのメモを取るmumemoというアプリを紹介します。 書籍などを読むときにスクリーンショットを撮って、Markdownでメモを書くスタイルでやっているので、それをいい感じにやるElectronアプリを書きました。 "スクリーンショットドリブンのメモアプリ mumemo を作った | Web Scratch"https://t.co/Y26TvxvEvv pic.twitter.com/gA1txccoIw — azu (@
TypeScriptの型定義からバリデーションコードを生成するツールを書いた
create-validator-tsというTypeScriptの型定義からJSON Schemaを使ったバリデーションコードを生成するツールを書きました。 モチベーション expressなどでAPIを書くときに、Request/Responseが意図したものかどうかをバリデーションする必要があります。 特にreq.queryなどはStringが入ると予想しますが、オブジェクトが入ってくることもあります。 これは、expressの内部で使っているqsというURLクエリのパーサが、オブジェクトや配列へ展開する機能を持っているためです。 expressを使ってるサイトは ?q=text があるときに req.query.q には オブジェクトが入る可能性をちゃんと考慮しないといけない。 ?q[a]=text で req.query.q ; // { a: "text" } になる — azu
JavaScript情報の情報源となっているサイトの一覧を作った
JSer.infoで紹介したサイトのデータをドメイン別で一覧できるサイトを作りました。 JSer.info Watch List JSer.info Watch Listは、次の条件でサイトをドメイン別(または作者別)で一覧できます。 JSer.infoで2年以内に紹介したことがあるサイトが対象 紹介した回数順 GitHubやAmazonなど一部特殊なものは除外 JSer.infoを更新するたびにこのリストも更新されます。 そのため、鮮度を保ちつつ、JavaScriptの情報源となるサイトが一覧できるようになっています。 また、タグでの絞り込みもできるようになっているので、興味があるトピックのサイトやブログなどを調べてみるといいかも知れません。 https://t.co/CXy3hOXJ8q のデータを使ったJavaScript情報源リスト タグでの絞り込みができるようになった。 "per
今年のオープンソース活動振り返り @ 2020
2020年のオープンソース活動の振り返り記事です。 今までの振り返り。 今年のOSS活動振り返り @ 2019 | Web Scratch 今年のOSS活動振り返り @ 2018 | Web Scratch 今年のOSS活動振り返り @ 2017 | Web Scratch 今年のOSS活動振り返り @ 2016 | Web Scratch 今年のOSS活動振り返り @ 2015 | Web Scratch 今年のOSS活動振り返り @ 2014 | Web Scratch 2020年のGitHubのPublicなContributionsは7000~9000ぐらいを推移していました。 最近はPrivateリポジトリをメモやブックマーク管理などでも使うようになったので、Private比率は増えてPrivateなContributionsは13400でした。 GitHub Issuesを個人
GitHub Issuesを個人用のTodo管理アプリとして使っている
個人的なタスク管理ツールとしてGitHub Issueを使うようにしてその仕組みを色々と作っているので、そのアーキテクチャについてのメモ書きです。 後述しますが、GitHubをベースとすることでプログラムでの拡張性が高いというのが特徴です。 セットアップが色々と必要になるためぱっと再現しやすい感じではなかったり一部未公開になってます。 需要があったらオープンソースとして公開できるように整えます。 GitHub Issuesとタスク管理ツールでの課題 自分の中で、タスク管理ツールとGitHub Issuesを両方使う場合に次の課題がありました。 自分のタスクの半分以上はGitHubに何かしら紐づく情報(オープンソース、ブログ、仕事)であったため、GitHub Issueとの二重管理感がある GitHub上で複数のリポジトリのタスクを管理するのが難しい 1つ目は、タスク管理ツールを使っても結局
Semgrepを使った構文木ベースの検索と置換でコードのリファクタリングをする
Semgrepはr2cという会社/サービスが開発しているツールです。 Semgrepの特徴としてTree-sitterでコードをパースしたConcrete Syntax Tree(CST)の構文木をベースにして検索や置換ができます。 コードをCSTにパースした構文木に対して検索/置換することで、ただの文字列検索/置換に比べてミスマッチしない検索/置換ができます。 例えば、次のa.js、b.js、c.jsはそれぞれevalを使っていますが、スタイルは違いますが意味はほとんど同じです。 // a.js eval("const a = 1, b = 2; eval(a + b);"); // b.js eval('const a = 1, b = 2;\ eval(a + b);'); // c.js eval(`const a = 1, b = 2; eval(a + b);`); $ sem
OneNoteのデータを画像付きのMarkdownにexportする
今まで技術書のメモをOneNoteに取っていました。 OneNoteを使う理由としては、自分はスクリーンショットをメモの代わりにしていて、OneNoteは画像が扱いやすくOCRも効くためでした。 技術書読むときメモ取る代わりにスクショとって貼って書くこと多いんだけど、これできるアプリ欲しい。 OneNoteでやってるんだけど、もっと気軽に読みながらスクショとメモを貯められる一時置き場みたいのがほしいな。 最終的な貼り付け先はOCRできるOneNoteがいい気がするけど。 pic.twitter.com/TzyRdSgMFh — azu (@azu_re) September 15, 2019 ただし、OneNoteを使うとスクショを取って貼り付けるという作業が面倒でした。 そのため、mumemoというスクリーンショットベースのメモをとり、Markdownファイルとして書き出していくアプリを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
