サムネイル

classからclassNameに変換できるclassname-converterを作りました

かみむら
2020年08月02日

タイトル1

タイトル2

タイトル3

タイトル4

タイトル5

今後のOMO & mercari station チームは、ずばりメルカリステーションをよりよい場所にし、より多くのお客さまに、メルカリを楽しく利用いただきたい。そして「限りある資源を循環させ、より豊かな社会をつくりたい」と考えています。

headless

headless

こんにちはかみむらです。

JSX用に、classからclassNameにCLIで変換できる、classname-converterを作成しました。npmのパッケージで配布されてるので、ぜひ使ってください。

npm

https://www.npmjs.com/

エビフライトライアングル

  • リスト1
  • リスト2
  • リスト3

モチベーション

もし、ReactReactベースのフレームワークでアプリケーションを作ったことがある場合、JSX内のclassNameを知っていると思います。
ややマイナーな Next.js + MDX ですが、私はとても気に入っています。

モチベーション

Next.js は(他の Now などの ZEIT のプロダクトと同様)シンプルさを売りにしているため、その分フレキシブルに楽しくブログをカスタマイズしていくことができます。
今回 Next.js + MDX でのブログの書き心地を紹介していくことで、日本でも Next.js や MDX を使う人が少しでも増えればなあと(勝手に)願っています。

使い方

$ yarn add global classname-converter

or

$ yarn classname-conveter index.js

そして、変換したいファイル名を指定します。

// microCMSのAPIキー
const key = {
  headers: { 'X-API-KEY': process.env.API_KEY }
};

export const getBlog = (): Promise<any> => {
  return fetch(process.env.ENDPOINT + `/blog?limit=4`, key);
};

export const getCategory = (): Promise<any> => {
  return fetch(process.env.ENDPOINT + '/category', key);
};

ややマイナーな Next.js + MDX ですが、私はとても気に入っています。
Next.js は(他の Now などの ZEIT のプロダクトと同様)シンプルさを売りにしているため、その分フレキシブルに楽しくブログをカスタマイズしていくことができます。
今回 Next.js + MDX でのブログの書き心地を紹介していくことで、日本でも Next.js や MDX を使う人が少しでも増えればなあと(勝手に)願っています。

最後に

今回は私が開発したclassname-converterを紹介しました。別のフレームワーク移行などで、役立つと思います。

update

ライターイメージ

かみむら

フロントエンドエンジニア。Jamstackアーキテクチャーやサーバレス技術に興味があります。最近では、React/Next.js + TypeScriptをよく書いています。

関連記事