2020年のフロントエンドエンジニアの技術スタックの一例
年の瀬なので、私自身が今年利用した技術をベースに技術スタックをまとめてみようと思います。とはいえ Web Standard といった広い対象から、フレームワークやライブラリまで、粒度の違うものを全て言及するのは無理があるというもの。特に強く言及できるものは個別で説明しつつ、最後に利用する機会がなかったものも最後に記載する形で。
Front-End Study #1 の企画・運営と司会をした
11/09 に開催された Front-End Study #1 について、Forkwellとの共催で運営・企画並びに司会に携わりました。参加登録者2,552人、同時視聴者も1,500人を超えるバケモンとしか言えないイベントになったわけですが、無事終わって何よりというところで一筆。
GitHub Actions で Cypress の end-to-end test を実行する
LitElement を利用した Custom Element の開発をしていて、 enzyme や vue-test-utils のようなコンポーネントのテストを記述したい。
Vue 3 ではコンポーネント単位で delimiters を変更できる
サーバーサイドのテンプレートエンジンと Vue.js が混在しているプロジェクトを経験したことがある人には馴染み深い(?) Vue の delimiters オプションですが、Vue 3 になってからコンポーネント単位で設定できるようになっていました。仕事で Nuxt.js の app.html の仕様の説明ついでに、 mustache 記法について説明を行った際に書いた Vue 3 サンプルで初めて気づいたので、メモ程度に残しておきます。
通知してほしいけど Inbox に残ってほしくない Pull Request 通知メールなどを自動で整理する
今や有効活用している人はかなりすくなったように思えるメールボックス。ログインのための Identifier とそれに関する通知システムとしてのみ使っている人も多いかと思います。
ポケモンと勝率の話
この間の連休で生産的な活動をやったので、その分の休憩としてここ一週間ほど仕事以外の時間をポケモンに捧げていた。一ヶ月あるポケモンのシーズンの中で、9月期に3桁を目標としていたが、結果としては1,300位。惜しいところまではいったが、もう一歩頑張りたいところではあった。
Moment.js 送別会を開催した
9/25(金)に Moment.js の送別会を YouTube Live / Discord で行いました。フロントエンドから卒業することになった Moment.js の思い出と、今使っている時刻操作ライブラリなどについて語る会となります。当日のYouTube Liveアーカイブ
2020年秋の連休ふりかえり
かなり濃い連休を過ごせた気がするので、できたこと・できなかったことをふりかえってみる。
ブログに Buy Me a Coffee の投げ銭導線を設置した
最近 zenn.dev がソーシャルで流行っている。サービスコンセプトであったりアプリケーションの品質だったりといろいろな観点で各々が言及しているけれど。個人的には情報を発信した人に対して金銭的なインセンティブがある点がかなり面白いなと。
JavaScript での時刻操作に Moment.js ではなく Day.js を利用し続けている理由
昨日、拙作の Nuxt.js プラグインである @nuxtjs/dayjs の v1.2.0 をリリースしたので、改めてなぜ Day.js を利用しているのかを書こうと思います。
standard-version で chore や doc をリリースノートに入れる方法
Conventional Commits にも参照がある chore や doc 形式のコミットメッセージが、standard-version でリリースノートに含まれないことが不満に思っていたけれど、昨日ようやくカスタマイズ方法を知ったので残しておきます。
rehype-plugin-image-native-lazy-loading を NPM package として公開した
9/2 に書いた記事で紹介した、 nuxt/content で Markdown 内の画像に Native Lazy-Loading をつけるコードに需要がありそうだったので、rehype plugin としてそのまま切り出しました。
Stencil でつくられた Custom Element を React/TypeScript 環境から呼び出したい
会社で Stencil で作られた Web Component の NPM パッケージが OSS として公開されていて、Vue.js のアプリケーションではこれまでも利用していたけれど、React でも利用したくなった。が、やってみるとドキュメント以上の工夫が必要だったのでメモ。
CDN 版の LIFF SDK に型定義をつける
つい最近 NPM パッケージ版が出たばかりの LIFF(LINE Front-end Framework)ですが、まだ NPM パッケージ版は Stable ではなく、現場によっては CDN 版を継続して使っているところも多い印象です。
Gyazo API を Node.js の Buffer から直に使おうとしたらハマった話
久々に Node.js 環境の axios で multipart/form-data を扱ってたら Gyazo API のレスポンスの謎さも相まって辛かったという話です。
イマドキの cron は GitHub Actions / CircleCI でやりたい
昔は cron といえば Heroku と Heroku Scheduler だったけれど、Heroku Scheduler が
nuxt/content で作成した Web サイトで Markdown 内の画像を Native Lazy-loading を行う
ブログや技術メモを書くとき、お手軽な画像ホスティングとして Gyazo を使うけれど、 Gyazo のリンクコピーをそのままやると画像でサイトが重くなるので lazy loading を追加した話。
nuxt-jsonld と schema-dts を利用して型安全で宣言的な JSON-LD を定義する
JSON-LD、結構書くの面倒ですよね。細かな仕様を都度 https://schema.org/ に見に行ったり
Factory 関数の引数は Object にしてほしいという話
自明だと思っていたけれど、割と見かけるので。Factory 関数やそれに相当するようなものは、得てして作成時点、あるいは将来的にかなりのオプションを取る可能性があります。
Vue.js 3 の TSX を TypeScript Compiler だけで動かす方法について
先日の v-tokyo #11 の懇親会で質問されたので、Native TSX Support される Vue 3 でなぜ tsc だけで TSX が動作しないのかを聞かれたのでメモとして残して置こうと思います。