2023年のmanatenのフロントエンド

この記事は？

フロントエンドの(に限らずですが)技術はよく言われるように移り変わりが早いです。とはいえ個人で全て追い切るのは難しく、また必ずしも新しいものを使い続けていればいいわけではないとも思います。個人的には新しい技術であっても古い技術であっても、きちんと自分の中に技術採用の軸があることが大事だと思っています。

このエントリではmanatenが2023年末現在でフロントエンド(周辺)でアプリケーション開発をするときに、利用することが多い技術を概要や理由付きで挙げていきます。

(なお年の瀬に思い出して書いてるため、抜けがあったり内容いい加減だったりすると思います。)

JavaScriptを使ったアニメーションgifの切り出しと拡大

自分の場合ドット絵のちびキャラを複数バリエーション書くとき、以下の画像のようにバリエーションを縦に並べて書いていく事が多いです(画像はskebでリクエストを頂いたナマズさんです)。

このような形式で描き、画像をバリエーションずつに分割し更にSNSアイコンとして利用しやすいよう5倍サイズにしてから納品しています。 これをバリエーションが多い場合に手作業でやるのは面倒ですので、今回は簡単なNode.jsスクリプトで分割･拡大を自動化する方法を紹介します。

レガシーなjs環境におすすめなts-checkコメントについて

このエントリの内容

このエントリは、javascriptの型チェックをすることができるtypescriptの機能 @ts-check について紹介し、個人的に感じた便利なところや使い所を紹介していきます。

このエントリの読者は以下のような人を想定しています。

• レガシーな環境でTypeScriptを導入しづらいが、複雑化するコードベースを少しでも楽に保守したい人
• TypeScriptに興味があるが、昨今のjsのツールチェインについていけず、とりあえず試してみたい人

husky + lint-stagedでgitのprecommit時にimageminを行い、minifyした画像のみコミットされるようにする

かなり昔に こちらの記事 でgitのpre-commitを紹介しました。今回は、pre-commitにまつわる便利なnpm package typicode/husky、 okonet/lint-staged を利用し、画像ファイルのコミット時に imagemin/imagemin を使い自動で画像ファイルのminifyを行う方法を紹介します。

Node.js8になって util.promisify が利用できるようになったのでメモ

先日Node.js8 がリリースされました (参考) 。 追加機能の中に util.promisify というものがあります。これは、すでに bluebird や es6-promisify といったパッケージで提供されていた、 コールバック関数を伴う非同期関数を、Promiseを返す関数化するユーティリティ関数ですが、今回のリリースでNode本体に含まれるようになったようです。

Hubotでasync functionを使う

最近(と言っても一ヶ月前ですが･･･)node7.6.0がリリースされ、 --harmony-async-await をつけなくても async/await が利用可能となりました。 これにより、非同期処理を行うスクリプティングがより行いやすくなった(スクリプティング以上の用途ならばどうせ babel を使うためそこまで影響はない)と感じています。

hubotなどのbotプログラミングも 定常タスクを楽にするためのスクリプティングの一種であり、用途上連携サービスのAPIをたくさん叩くため、 恩寵を存分に得ることができます。この記事ではhubotで async/await を使う例を紹介します。

Slack上でインタラクティブに遊べるゲームを作るためのフレームワークを作った

この記事は Slack Advent Calendar 2016 24日目の記事です。