markedで安全にMarkdownからHTMLを生成するsafe-marked
MarkdownをHTMLにコンパイルするmarkedは0.7.0でsanitizeオプションを非推奨にしています。 これはサニタイズの処理をmarkedから外す目的です。 Sanitize and sanitizer · Issue #1232 · markedjs/marked このsanitizeオプションの代わりにDOMPurifyを利用することを推奨していますが、 DOMPurifyはブラウザとNode.js両方で使うには癖があるためちょっとややこしいです。 なぜならDOMPurifyはDOM APIに依存しているため、 Node.jsで動かす場合はjsdom使うためです。 単純にjsdomを使ってしまうとブラウザでもjsdomが含まれてしまい、ファイルサイズが巨大になってしまいます。 そのため、ブラウザ向けの場合では直接DOMPurifyを使い、 Node.jsの場合はDOMP
SecretlintでAPIトークンや秘密鍵などのコミットを防止する
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のブランチを削除するツール/GitHub Actions
delete-github-branchesというブランチの命名ルールを定義して、そのルールにあっていないブランチを削除するCLIツールを書きました。 delete-github-branchesはCLIですが、GitHub Actionsのcron処理と合わせれば、ルールにあってないブランチをGitHubから自動的に削除できます。 不要なブランチを削除することで、リポジトリからノイズとなるブランチを減らすのが目的です。 Pull Requestなしで放置されてるブランチが単なる消し忘れ以外であることは少ないので、そのようなブランチを減らすことでpullした時のノイズやサイズを減らすの目的です。 (活発なリポジトリだと放置ブランチがconflictだらけになるのでマージが難しいです。またGitHubにはDraft PRもあります) CLIの使い方 delete-github-branche
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
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リーダのウェブクライアントを書
NaNはNot a NumberだけどNumber型である話
この記事では、JavaScriptのNaNについて改めて学ぶという趣旨の話をします。 JavaScriptで、文字列などから数値へ値を変換したいことがあると思います。 典型的なケースでは、ユーザーに入力してもらった数字となる文字列を、Number型へ変換するというケースです。 この場合、Numberコンストラクタ関数やNumber.parseInt、Number.parseFloatなどが利用できます。(ここでは、Number.parseIntにしていますが、parseIntと同じです) // ユーザー入力を文字列として受け取る var input = window.prompt("数字を入力してください", "42"); // 文字列を数値に変換する var number = Number(input); console.log(typeof number); // => "number
JavaScript Plugin Architectureというプラグイン設計について学ぶ無料の電子書籍を書いた
JavaScript Plugin ArchitectureというJavaScriptのプラグイン設計についての電子書籍を書きました。 この書籍はJavaScriptのライブラリやツールにおけるプラグインアーキテクチャについて見ていく事を目的としたものです。 以下の形式で読むことができます。 Web版 PDF形式 ePub形式 Mobi形式 GitHub上にソースコードも公開されているでので直接Markdownファイルを読むこともできます。 MarkdownよりはWeb版の方が見やすいのでそちらをオススメします。 Twitterのハッシュタグは#js_plugin_book 更新情報はRSSやリリースノートから見ることができます。 v1.0.0 最初に書くと決めたプラグインアーキテクチャが揃ったので1.0.0としてリリースしました。 JavaScript Promiseの本の時と同じく、継
JavaScript ASTを始める最初の一歩
何かJavaScriptのソースコードを機械的にチェックするためのツールを作りたいという場合に、JavaScriptのASTというものを触る必要が出てくると思います。 この記事では、その取っ掛かりとなる案内を簡単にまとめたものです。 ASTとは AST(Abstract Syntax Tree)はコードをパースした抽象構文木のこと。 JavaScriptの場合はJavaScriptオブジェクト(JSON)として表現されます。 コード: { "range": [ 0, 10 ], "type": "Program", "body": [ { "range": [ 0, 10 ], "type": "VariableDeclaration", "declarations": [ { "range": [ 4, 9 ], "type": "VariableDeclarator", "id": {
ECMAScript, TC39 Meeting Notesの読み方と修正方法
ECMAScriptは毎年リリースの方針となったため、最新の仕様を管理しているtc39/ecma262には毎日のようにコミットされています。 ECMAScriptのリリース方針についてなどは以下を参照してください。 ECMAScriptの仕様策定に関するカンニングペーパー | Web Scratch これらの最新の変更が反映されたLiving Standardなものは以下のURLで公開されています。 tc39.github.io/ecma262/ また、Proposalを元にECMAScript 2016に入る機能は既に決まっています。 何か新しく入るのかは以下の記事を見てみてください。 ECMAScript 2016 features & changes - JSer.info “どこで”決まっているのかというと2ヶ月に1回行われているTC39のミーティングです。(物理的に集合してF2F
メモアプリをDayOneからQuiverに移行した
メモアプリとしてEvernote、OneNote、ファイルベースのMarkdown管理アプリ、DayOneなどを使っていました。 EvernoteとOneNoteはメモ機能は強いですが、あんまり気軽に書けるような感じじゃないのでピンときませんでした。 (画像やテーブルは便利ですが、Markdownみたいなプレーンなテキストじゃないのも微妙な点) そのため、ファイルベースのMarkdown管理アプリなどを作ったりしましたが、UIを作りこまないとあんまり使いやすくないということが分かったので、途中で飽きてました。 DayOneは気軽にMarkdownで書けて、iOSアプリもできがいいのは素晴らしいですが、検索機能が微妙でした。 (書くのはいいが、見るのが難しい) 最近Quiverというアプリを見つけて、これを使うようになりました。 AppStore: Quiver: The Programme
JavaScriptのコードを分解してよく使われてる機能を分析する
今年のOSS活動振り返り @ 2015 | Web Scratchで JavaScript/ECMAScriptを改めてどう学べばいいのか考える azu/how-to-learn-es6とか#thinking_in_es6で考えてるやつ というのを今年考える事としてあげていました。 それを考えるために、既存のコードがどうなってるかを見てみるという話です。 具体的には既存のコードを見て、そこでどういう機能/構文が多く使われているのかが分かれば、どこを中心的に学ぶと結果が出やすくなるのではという感じです。 それを分析するためにazu/es-usage-rateというツールを書いた。 Installation 使い方 例えば、es-usage-rate自体がどういう構文を使って書かれてるかを見てみてます。 es-usage-rateは他のCLIと組み合わせて使う事を前提としてるので、 デフォルト
JavaScriptライブラリの気になる実装をどうやって見ていくか
はじめに 毎日新しいJavaScriptライブラリが登場していると思いますが、それらがどういう実装になっているかを知ることはライブラリを使う以上に大事かもしれません。 ソースを全部読めば分かるかもしれませんが、それをやるには時間が足りません。 JavaScriptに限った話では無いですが、今回はJavaScriptを例に”特定の機能はどうやってるんだろ?”という事を調べる方法についてです。 探す前にドキュメントに載ってないかを見るのが手間がなくて一番よいですが、書いてない場合は実装を見ます。 Vue.js 今回はVue.jsというAngularJSやKnockoutのようなViewとModelのデータバインディグを行うライブラリを例に、データバインディグはどうやっているのかを2つの方法で調べてみたいと思います。 コードをステップで見ていく これはよく見る方法で皆さんもやったことがあると思い
power-assertの使い方 Node.js編
Power Assertとはassert(a === b); のような単純なアサーションでも、 Assert失敗時(テストが通らなかった時)に分かりやすい情報を表示できるようにする機能の事を言います。 JasmineやChaiが持つshouldやexpect等言った豊富なアサーションを覚える必要なく、 シンプルにassert()を使うだけでも十分な失敗時の情報が得られるため、沢山のアサーションを使い分けしなくていいというメリットがあります。 この記事ではPower AssertのJavaScript実装であるtwada/power-assertの使い方について紹介します。 記事を読む前に このNode.js編とブラウザ編で分けるぐらい長い記事となってるので、 お忙しい方は5分ぐらいで分かるpower-assertというスライドもあるので、そちらを読んでざっくり把握してみるのもいいでしょう。
textlint 1.4 パーサの安定化、ルールの自由度の改善をして現実的に使えるLintツールへ
azu/textlint 1.4.3 先週リリースした textlint ですが、色々修正や課題だった部分を実装して現在1.4.3が最新になってます。 textlintはMarkdown等をJavaScriptでルールを書いてLint出来るツールで、詳しくは以下を参照して下さい。 JavaScriptでルールを書けるテキスト/Markdownの校正ツール textlint を作った | Web Scratch 1.0.0から1.4.3での変更点をまとめると以下のような感じです。 Comparing 1.0.0…1.4.3 · azu/textlint ルールで <Type>:exit が利用できるように textlint/create-rules.md at master · azu/textlint ドキュメントの方も更新してありますが、ESLintと同じように以下のように書けるようにな
JavaScriptでルールを書けるテキスト/Markdownの校正ツール textlint を作った
azu/textlint textlint というテキスト(plain textとMarkdown)の校正をするためのコマンドラインツールを書きました。textlintはNode.jsで書かれていて、Node.jsモジュールとしての利用することもできます。 一番の特徴は校正するルールをJavaScriptで書くことで拡張可能な作りになっています。 The pluggable linting tool for text(plain text and markdown). 逆にデフォルトではルールはサンプル扱いのno-todoというTODOが含まれてることを検知するルールしか今のところ入れていません。 Example: creating no-todo rules. デフォルトでルールが用意されていて、それの設定を変更することでLintする場合はRedPenなどがお勧めです。 RedPen:
textlintで日本語の文章をチェックする
textlintはMarkdownなどテキスト向けのLintツールで、テキスト版ESLintみたいな感じのツールです。 JavaScriptでルールを書けるテキスト/Markdownの校正ツール textlint を作った | Web Scratch 最近azu/JavaScript-Plugin-Architectureという小さな書籍を書いていて、色々簡単に使えるような仕組みを追加しています。 この記事では簡単なtextlintの導入方法について紹介します。 公式サイトには一部ルールを含むオンラインデモが公開されています。 textlint · The pluggable linting tool for text and markdown ドットインストールにてNode.jsのインストール、textlintの利用方法、エディタとの連携などのチュートリアルが公開されています。Node.
ルールプリセットを使ってお手軽にtextlint入門
textlintはルールで拡張出来る自然言語向けのLintツールです。 textlint 5.1.0でルールのプリセットをサポートしました。 ルール、プリセット、プラグインは以下のような関係です。 rule いわゆるルール rule-preset ルールをまとめたもの plugin ルールとプロセッサ(拡張機能)を持ってる textlintはデフォルトでは一つもルールを持っていません。 そのため、どのルールを入れたらいいか迷った場合に、誰かがまとめてくれたプリセットをとりあえず入れれば、とりあえず文章のチェックが出来るようになります。 textlintの使い方は以下で解説しているのと基本的に同じですが、今回はプリセットの使い方を紹介します。 textlintで日本語の文章をチェックする | Web Scratch インストール textlint本体と2つのプリセットをインストールしてみます
[pdf.js] テキスト選択出来るスライド表示ライブラリを書いた
pdf.js-controllerというライブラリを書きました。 名前の通りmozilla/pdf.jsを扱うものです。 PDFをスライドのようなページめくりをするものを作るときに簡単に作れるようにする目的で作成しています。 実際に以下のスライドはこのライブラリを使って動作しています。 https://azu.github.io//slide/2015/year-end/pdf.js.html 使い方 インストールして、以下のように書くだけでとりあえずpdfを表示できます。 普通にpdf.jsを扱うと文字列の選択ができない、日本語が文字化けする、リンクがクリック出来ないなどハマりどころがたくさんあります。 このライブラリではpdfjs-distのディレクトリをpdfDistDirで指定する以外はあまり意識しなくても自動的にやってくれます。 (pdfjs-distはdependenciesと
textlint 5.0.0で非同期処理に対応、kuromoji.jsで校正、テキストの統計処理 | Web Scratch
textlint 5.0.0をリリースしました。 非同期対応のためAPIを変更したのがメインの理由です。 Release 5.0.0: Async support · textlint/textlint textlint自体については以下の記事で紹介しています。 textlintで日本語の文章をチェックする | Web Scratch 前回は4.0リリースの時に書いたので、4.0から5.0での変更点に紹介していきます。 Comparing 4.0.0…5.0.0 · textlint/textlint 変更点 Breaking Change 大きな変更点として全てのLint APIが非同期処理となりました。 そのため、以下のメソッドはそれぞれPromiseを返すようになっています。 textlintツール利用者には影響なくて、textlintをモジュールとして使ってる人のみに影響します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
