これは下書きプレビューです

I am a frontend (and Jamstack) developer and happy hacking every time for learning something new.

hiro08

# タイトル１

## タイトル２

### タイトル３

#### タイトル４

##### タイトル５

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

```javascript
headless
```

```javascript
import React from 'react';

const App = () => {
  return <div>Test</div>
}
```

**headless**

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

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

npm

[https://www.npmjs.com/](https://www.npmjs.com/)

![エビフライトライアングル](https://images.microcms-assets.io/protected/ap-northeast-1:2c74e029-93cb-43ad-9026-3e1fd330c060/service/jamzii-blog/media/cypress-react-e2e-thumb.png "サンプル")

- リスト1
- リスト2
- リスト3


デザインシステム

こんにちはhiro08です。

## 構成

## 技術ブログの主な機能

## Gatsby Cloudを使ったビルド・デプロイ

## Lighthouseでの数値

## 最後に

test

# タイトル１

## タイトル２

### タイトル３

#### タイトル４

##### タイトル５

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

```javascript
headless
```

**headless**

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

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

npm

[https://www.npmjs.com/](https://www.npmjs.com/)

![エビフライトライアングル](https://images.microcms-assets.io/protected/ap-northeast-1:2c74e029-93cb-43ad-9026-3e1fd330c060/service/jamzii-blog/media/cypress-react-e2e-thumb.png "サンプル")

- リスト1
- リスト2
- リスト3

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

### モチベーション

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

```javascript
$ yarn add global classname-converter
```

or 

```javascript
$ yarn classname-conveter index.js
```

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

```javascript
// 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

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

Jamzii

最新の記事

これは下書きプレビューです

デザインシステム

test

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