この記事は Jamstack Advent Calendar 2020 4日目の記事です。 はじめに Markdown -> HTML の変換に使われる事が多い、Remark / Rehype について書いていきます。 検索すると、Gatsby.js のプラグイン関連の記事は結構出てくるのですが、素の Remark / Rehype にフォーカスを当てた記事は少ないので、よく分からないまま使っているという人も多いのではないでしょうか。 全体像 実はこれらは、Unified と呼ばれるエコシステムの一部に属しています。その中でも、 Markdown を扱う処理系が Remark HTML を扱う処理系が Rehype となっています。 処理の仕組み その処理の仕組みは、Babel や PostCSS によく似ていて、 Parse : 文字列を AST に変換する Transform : AS
iconify が良いとの噂を聞き、早速試してみた。 こういうライブラリは本当にありがたいので、作成者さんに感謝なのだが、意外と日本語の知見が少ない印象。 実戦投入が難しい何かしらの理由があると困るので、ハロワと、使い勝手を試してみたので備忘も兼ねて。 iconify とは 膨大なアイコンセットフレームワークを混在させて使える（ Browse icons ) 全体ではなく使うアイコンだけロードする 異なるアイコンセットも同じコードで書ける 主要なjsフレームワークに最適化されてる 自作のアイコンも追加できる Figmaの超便利なプラグインがある なぜiconify？ デザイン戦略としてのアイコンセット問題 「このセットに、あのアイコンが無い。。」 Webデザイナーならほぼ全員がこの問題に頭を抱えた経験があるはず。 フロントエンドなら、その「たった1個の例外のアイコン」をどう実装するか？ と
Gatsby だと時折見かける gray-matter ですが、Next.js でも非常に役立つので使い方と利点を書いておきます。 マークダウンでコンテンツを分けることを合わせて pages/ の負担を減らせます。 pages/ の管理 pages/ 下には設定用にスクリプト（js, jsx, ts, tsx）を置けません。 data/ などを外に用意してもいいんですが疎になりすぎてフォルダを行き来するのが面倒になります。 jsonで管理してもいいんですがコンテンツを入れると構造がごちゃごちゃします。 マークダウンならタグ付きのコンテンツを簡単に管理できます。 この辺は以前の内容ですが、gray-matter を使って config 付きのコンテンツとして管理することが出来ます。 gray-matter とは gray-matter は front matter の YAML 解析を行うラ
現在( 2021/09/13 )、この記事の情報は古くなっている可能性があります！ そのため、なるべくは公式ドキュメントを参照してください。 参照: 公式ドキュメント この記事について 先日、「 エンジニアとして一番怖いモノは何？ 」と知人に尋ねると、 「 実は、TypeScript が一番怖い 」 と言ってきました。 そんな訳ないだろうと思っていたのですが、どうやら知人は本気の様子。 「 TypeScript が嫌いならまだしも、TypeScript が怖いとは、これはナニかあるな 🤔 」 と思った私は、TypeScript First なライブラリである Zod を知人に紹介して、事の真意を確かめようとしたのでした。 怖いならもっと怖がらせてやろうと思ったのは内緒 🤫 しかし、知人に紹介するだけでは勿体ないので、今回は皆さんに知見を交えながら Zod の事を紹介していこうと思います
import useSWR from 'swr' function Profile() { const { data, error, isLoading } = useSWR('/api/user', fetcher) if (error) return <div>failed to load</div> if (isLoading) return <div>loading...</div> return <div>hello {data.name}!</div> } この例では、useSWR フックは key 文字列と fetcher 関数を受け取ります。 key はデータの一意な識別子（通常は API の URL）で、fetcher に渡されます。 fetcher はデータを返す任意の非同期関数で、ネイティブの fetch や Axios のようなツールを使うことができます。 このフッ
最近は ECMAScript 自身の機能も豊富になってきて lodash のユーティリティ関数の出番はだいぶ少なってきたけど、debounce と throttle だけは未だに使う機会がまあまあある。 しかし、lodash は何も考えずに使うとバンドルサイズが肥大化するのでいい感じに Tree Shaking するために lodash-es を使う必用があったり、自分が使っている機能とは全然関係ないアップデートが Dependabot から大量に降ってきたりしてしんどかったりする。 lodash は lodash.debounce のように個別のモジュールも提供されているけど、Last Published が 5 years ago になっていたりして、あまり継続的にメンテされてない様子が伺える。これに関する Issue は探すといっぱいあって、対応したいけど手が回ってないみたいな様子ら
encoding.js is a JavaScript library for converting and detecting character encodings, supporting both Japanese character encodings (Shift_JIS, EUC-JP, ISO-2022-JP) and Unicode formats (UTF-8, UTF-16). Since JavaScript string values are internally encoded as UTF-16 code units (ref: ECMAScript® 2019 Language Specification - 6.1.4 The String Type), they cannot directly handle other character encoding
モチベーション とあるwebサービスの新機能で、 1. 任意精度の小数も含む計算 2. 浮動小数点誤差の除去 をしたかったので、 a. min.jsがあるかどうか（ファイルサイズが小さくなったもの） b. 型定義ファイルがあるかどうか を検討項目に入れ、既存のライブラリを比較しました。 前提 JSのプリミティブNumber型は、倍精度浮動小数点数なので、特有の誤差を生じます。 もし任意精度での計算をしたいとなると、その実装はとてもめんどくさいです。 実は、BigIntという新たな数値型が任意精度計算をサポートしますが、 まだプロポーザルの状態です。 TC39でプロポーザルに挙がっている新しい数値型 現在はStage3 採用確定ではない（Stage4になるまでは却下される可能性あり） 任意精度の整数 ハードウェアがサポートしているのではなく、各処理系がソフトウェア的に実装する JavaScr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く