ゼロランタイムのミニマルな静的サイトジェネレーター『dodai』の開発と JSX First な世界観について
本記事では来たる2/3のKyoto.js #18に備え、年末年始に npm パッケージとして公開した『@potato4d/dodai』という静的サイトジェネレーター(以下SSG)について紹介します。なお、開発にあたって本ブログも @nuxt/content からこの dodai へと移行しています。移行作業の所要時間は 30 分程度でした。
遊戯王カードゲームインストラクター試験に合格した
『遊戯王カードゲームインストラクター試験』に合格しました。他のゲームだとジャッジ資格などに近い立ち位置となる、「ユーザーでありながら公式側として対応する立場」の資格となります。この合格はもちろん、関連ゲームの『遊戯王マスターデュエル』で「ドライトロン」の流行の発祥となったり、公式の大会イベントでも安定した戦績が出ていたこともあり、しっかりプレイしていると言えるようになった気がするので、せっかくなので potato4d としてはじめてガッツリ遊戯王の話をしようと思います。
Node.js での devServer の構築では初手 unjs/get-port-please の導入が便利
業務で複数の devServer を同時に立ち上げたいケースがあり、チーム内で「Reactプロジェクトを起動してからNext.jsプロジェクトを起動するとNext.jsが気を利かせてくれる」
失敗しない業務の兼任 〜兼任しても良い業務としてはいけない業務について〜
本業と副業であったり、あるいは本業の中での複数の業務であったり、仕事をしていると業務の掛け持ちというのはいずれ発生してきます。それは自らの希望である場合も、組織の都合である場合も存在しますが、これが一度発生すると、以降複数の業務に対して自分のリソースをどう分配するかに頭を悩ませ続けることになります。私自身、これまで幾度となく業務の兼任は経験してきましたし、その中でうまくいったものもあれば、失敗したものも勿論あります。この記事では、そんな自分の経験を思い出し、私ならの業務の兼任に対しての結論について述べたいと思います。
Node.js で最小限の Hot Reload サーバーを実現する
2022年にもなって HMR ではなく普通の Hot Reload を実装する機会に恵まれたので、現代的な API でできるだけローコストに実現してみることにしました。
LIFF のバグレポートやフィードバックを円滑にする liff-screenshot-plugin を公開しました
2022年4月にLIFFのプラグインシステムがリリースされたため、サードパーティプラグインとして『liff-screenshot-plugin』を開発・公開してみました。
LIFF プラグインの型定義の記述方法について
GW に良い機会ということでリリースされたばかりのLIFFのプラグインシステムを利用して third-party プラグインの開発をしていた。概ねドキュメント通りに利用することで、 Vue 2 時代のプラグインシステムのような書き心地でプラグインを開発できるのであまり躓くことはないが、 TypeScript に関する記述だけはどこを見てもあまり情報がない。少し調べて解決できたので、同じようなシチュエーションに出会った人のために簡単に情報を残しておくことにした。
僕らを縛る Node.js という呪いについて
これ僕らの物語であり、僕と君の物語であるかもしれない。数日前、友人が言った。「久しぶりに Rails を書いたけれど、Node.js の良さに敵わない」と。その言葉に同意しながらも、他方で少し不思議に思う。いつから僕らは Node.js しか使わなくなったのか。あれだけ話していた Rails などの多くの Web 技術にときめかなくなったのか。と。
Colors as a Service こと Shiki を開発・リリースしました
”色” を自由に取り回せるサービス『Shiki』をリリースしました。
Nuxt.js + Content Module のブログをダークモード対応した
「MTG中とかでカメラオンにしてると、自分が見てるページがダークモード対応してるか否かで露骨に自分の顔の明るさが変わるのめっちゃ嫌」というツイートをしておいて、自分のブログ対応していないのまずいのでは。と思い急遽。
AMP対応をやめた
当ブログでは昨年 1 月より AMP に対応したページを提供していました。その折に Nuxt.js の AMP モジュールに Contribute する機会があったり、実際に AMP ページから記事が閲覧されることもそれなりにあったのですが、2021年 4 月に Google 検索セントラルにて、Google よりオフィシャルに AMP を優遇しない旨が告知され、以降は特別提供する理由もなかったのですが、剥がす理由もないということで提供を続けていた状態です。
同じ組織で働く人は常に転職活動をしていてほしい
早いものでLINE株式会社に入社して3年が経ちました。今日から勤務4年目となり、業界としてはそれなりに長く働いている側に足を突っ込んできた自覚があります。仕事もエンジニアからマネージャーになり、役割も変わってきたところ。現職でまだやりたいこともあるだけでなく、明確にバリューを出せていて組織からも評価されている現状、しばらく転職する予定はないのですが、一方で、私は常に他の選択肢がないかを探し続けています。そして一緒に働く同僚やチームメンバーには語弊を恐れずに言えば「常に転職活動をしながら仕事をしてほしい」と思っています。現職についてのエントリに興味がある人はそう多くないと思うので、3年目が終わった節目として、今日は市場を見て仕事をすることの重要性について書き記すことにしました。
どのようなシチュエーションにおいて、マネージャーである自分に開発の工数をつけているか
こと開発において、マネージャーがどの程度現場で手を動かすべきか。あるいは動かすべきではないか。というのは、ソフトウェア開発において常々語られるテーマです。
CircleCI や GitHub Actions の cron を祝日だけ停止させたい
先日の ua-parse-js のハイジャックの件 を受けて、業務の中で毎日動かしている On-premise Renovate の cron を土日祝に停止させたいという話が上がった。
ソフトウェアエンジニアが所属組織の採用イベントに参加する大きなメリットについて
私はソフトウェアエンジニアが所属組織の採用イベントに出演することにはかなりポジティブな作用があると考えています。もちろんそれには明確な理由があるのですが、それがなぜなのかをアウトプットしてこなかったので、試しに書き連ねてみることにしました。
『遊戯王オフィシャルデータベース ドローシミュレーター』を Chrome Extension として公開しました
タイトルの通り、遊戯王オフィシャルデータベースにドローシミュレーターを追加する Chrome 拡張を開発しました。遊戯王ニューロンに存在するドローとマリガン機能を Web 版にも追加できる拡張機能となっています。
5/7(金) 開催の #web24 にて、26時50分より開催される Stack トラックのご紹介
Web24 という、Web についてぶっ通しで 24 時間語るという、今の時代、そして GW という時期でしかできないイベントに、 Front-End Stack のセッションオーナーに任命されました。この記事では、せっかくなので簡単にトラックの設立意図について紹介します。
rehype-plugin-auto-resolve-layout-shift を利用した Markdown ドキュメントにおける Layout Shift の解消
このブログは @nuxt/content で運用しており、執筆環境としては非常に快適に利用できている一方で、Markdown ベースの宿命として、Markdown 記法で画像を貼り付けている限り Layout Shift が発生するという課題が存在していました。暫定的な対処としてしばらく <img> で置き換えてきましたが、根本的に対処するために rehype-plugin-auto-resolve-layout-shift を開発したのでその報告と紹介をしたいと思います。
SpeakerDeck を Web サイトに埋め込み時に意識する ID と screen_name の関係と oEmbed について
最近仕事で SpeakerDeck の埋め込みを実装する機会があり、 SpeakerDeck のスライド URL から埋め込みコードを生成することになった。SpeakerDeck には埋め込みコードを取得できる機能があるが、利便性およびユーザーから提供される任意の HTML をそのまま表示したくないという理由から URL から自動的に生成するほうが都合が良いという結論に至り、実装を進めた。
Google 日本語入力で利用している辞書データを Mac/iPhone の標準辞書向けに変換する
iPhone に辞書の一括インポート機能がないので、 iCloud Drive を経由する形で Mac から辞書登録をしようとしたところ、Google 日本語入力で一般に用いられている辞書データの形式(txt)が、Mac や iPhone と互換性がない(こちらは plist)ことがわかった。
Nuxt.js の Sitemap Module を SSR 環境下で利用する
Nuxt.js の Sitemap Module について、何故か Generate による Static Page / Full Static でしか利用できないと思いこんでいたのでメモ。
Nuxt.js の Content Module(nuxt/content) を利用している Web サイトを AMP に対応させる
@nuxtjs/amp に投げていたパッチが無事マージ・リリースされたので、 @nuxt/content を利用した静的 Web サイトを AMP 対応させる方法について紹介したいと思います。
2020年やっていた仕事などのまとめ
2020 年は一般的なソフトウェアエンジニア。というよりは少し経路が違う仕事を主にやっていたので、良い機会なのでまとめようと思います。
採用技術問わずWebサイトに設置できるソーシャルシェアボタンを Web Component として開発する
先日、「”地上最強”のエンジニア向け情報サービス」を謳うTechFeed Proが新規アップデート。様々な機能追加がなされ、更に多くの情報収集が可能となりました。今回はそんな TechFeed のアップデートで追加された URL 共有機能の導線として、 techfeed-share-button パッケージを OSS として公開した記録を紹介します。
私が東京脱出できない3つの理由
今年はフルリモートを契機に、東京都心から郊外や関東4県へ引っ越すケースを TL や職場でよく見る一年でした。「家賃は下がる上に静かだし部屋も広くなった」みたいな話を聞くたびにそれも良いなと思いつつも、冷静に考えると私は都心以外で生活できる場所はかなり限定されるなと思うので、その辺りについて改めて残しておこうと思います。
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
Factory 関数の引数は Object にしてほしいという話
自明だと思っていたけれど、割と見かけるので。Factory 関数やそれに相当するようなものは、得てして作成時点、あるいは将来的にかなりのオプションを取る可能性があります。
Vue.js 3 の TSX を TypeScript Compiler だけで動かす方法について
先日の v-tokyo #11 の懇親会で質問されたので、Native TSX Support される Vue 3 でなぜ tsc だけで TSX が動作しないのかを聞かれたのでメモとして残して置こうと思います。