<h1>GitHub の草</h1>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/f7a15830-d6d9-444d-89c1-7ee7efaa18ce%2FSCR-20220824-v6s.png" alt="SCR-20220824-v6s.png"></p>
<p>これ。</p>
<p>特に意味はないけど、なんか可愛いし面白いから載せることにした。</p>
<p>前回のブログでは、ライブラリを使って草を描画したけど、いまいち使いづらかったので今回は TailwindCSS 使って自分でちゃんと表示させることにした。月とか曜日の表示はいらないので簡単にできる。</p>
<h1>実装</h1>
<h2>使ったライブラリ</h2>
<ul>
<li>SWR (キャッシュもしてくれる便利なデータ取得ライブラリ。Vercel製)</li>
<li>Recoil (ReactのProvider地獄を解消してくれるステート管理ライブラリ。Reduxはややこしくてわからん)</li>
<li>date-fns (日付の計算。ややこしいことは全部ライブラリに任せよう)</li>
<li>TailwindCSS (CSSの細かいことを考えなくて済む。嬉しい)</li>
<li>graphql-request (Prisma作ってるとこが作ったGraphQLのクライアント)</li>
</ul>
<h2>流れ</h2>
<p>Next.js の API ルートに、GitHub との通信を行うエンドポイントを作る。実際に表示されるコンポーネントから、そのエンドポイントにリクエストして情報を取得し、表示する感じ。</p>
<h2>GitHub API</h2>
<p>GitHub の API を叩いてコントリビュートの情報を取得する。</p>
<p>GitHub の API は GraphQL と REST の二種類があるが、REST の方でコントリビュートの情報は取得できないっぽい？ので GraphQL を使っていく。</p>
<p>ほぼこの記事と同じことをやった。</p>
<p>https://zenn.dev/yuichkun/articles/b207651f5654b0</p>
<p>実際のコードはこんな感じ</p>
<pre><code class="language-ts:/pages/api/grass.ts">import type { NextApiRequest as Req, NextApiResponse as Res } from &quot;next&quot;
import { gql, GraphQLClient } from &quot;graphql-request&quot;
import { GrassCalendarRes } from &quot;../../types/grass&quot;

const handler = async (req: Req, res: Res) =&gt; {
    const endpoint = &quot;https://api.github.com/graphql&quot;
    const query = gql`
        query ($userName: String!) {
            user(login: $userName) {
                contributionsCollection {
                    contributionCalendar {
                        totalContributions
                        weeks {
                            contributionDays {
                                contributionCount
                                date
                            }
                        }
                    }
                }
            }
        }
    `

    const variables = {
        userName: &quot;p1atdev&quot;,
    }

    const client = new GraphQLClient(endpoint, {
        headers: {
            Authorization: `Bearer ${process.env.GITHUB_API_KEY}`,
        },
    })

    try {
        const data: GrassCalendarRes = await client.request(query, variables)

        res.status(200).json({ ...data })
    } catch (error) {
        res.status(500).json({ error })
    }
}

export default handler
</code></pre>
<p>ユーザー名はハードコードしちゃってます。</p>
<p>GitHub の API キーは <code>https://github.com/settings/tokens</code> から生成できます。今回必要なのは、<code>user:read</code> の権限だけなので、そこだけにチェックを入れます。</p>
<h2>SWR</h2>
<p>このエンドポイントを呼び出すための専用フックを作る。</p>
<pre><code class="language-ts:/hooks/grass.ts">import useSWR from &quot;swr&quot;
import { GrassCalendarRes } from &quot;../types/grass&quot;

export const useGrass = () =&gt; {
    const res = useSWR(&quot;/api/grass&quot;, (url) =&gt; fetch(url).then((res) =&gt; res.json()))
    const data: GrassCalendarRes = res.data
    const error = res.error

    if (error) {
        return {
            error,
        }
    }

    try {
        const grass = data.user.contributionsCollection.contributionCalendar.weeks

        return {
            grass: grass,
            error,
        }
    } catch (error) {
        return {
            error,
        }
    }
}
</code></pre>
<p><code>useSWR</code> を間に入れて <code>fetch</code> すると、レスポンスをキャッシュしていい感じになる。</p>
<p>ちなみに、<code>useSWR</code> の第一引数は識別子の役割にもなっているので、これを使って状態管理をするテクニックもある。</p>
<p><code>GrassCalendarRes</code> は返ってくるレスポンスの型。<a href="https://app.quicktype.io/">quicktype</a> で一瞬で型情報を生成できるので便利。</p>
<h2>カレンダー</h2>
<p>描画部分。レスポンシブにするのがちょっとめんどくて、結局最終的にもゴリ押し感がある。</p>
<p>まずはカレンダー本体</p>
<pre><code class="language-ts:/components/widget/GrassCalendar.tsx">import { differenceInCalendarWeeks, subMonths } from &quot;date-fns&quot;
import { ComponentProps, useEffect, useState } from &quot;react&quot;
import { useGrass } from &quot;../../hooks/useGrass&quot;
import { Week } from &quot;../../types/grass&quot;

interface Props {
    months: number
}

const GrassCalendar = ({ months = 6 }: Props) =&gt; {
    const { grass, error } = useGrass()
    const [weeks, setWeeks] = useState&lt;Week[]&gt;([])

    useEffect(() =&gt; {
        if (grass) {
            const startDate = subMonths(new Date(), months)
            const diffWeeks = differenceInCalendarWeeks(new Date(), startDate)
            setWeeks(grass.slice(grass.length - diffWeeks, grass.length))
        }
    }, [grass, months])

    return (
        &lt;div&gt;
            {error &amp;&amp; &lt;div&gt;植栽中...🌿🌿🌿&lt;/div&gt;}
            &lt;div className=&quot;flex gap-x-1&quot;&gt;
                {weeks &amp;&amp;
                    weeks.map((week, index) =&gt; {
                        return (
                            &lt;div key={`week:${index}`} className=&quot;flex flex-col gap-y-1&quot;&gt;
                                {week.contributionDays.map((day) =&gt; {
                                    return &lt;GrassTile key={day.date} count={day.contributionCount} /&gt;
                                })}
                            &lt;/div&gt;
                        )
                    })}
            &lt;/div&gt;
        &lt;/div&gt;
    )
}
</code></pre>
<p>現在の日付から、渡された月の数の草を表示している。date-fns が全部面倒な計算やってくれて楽。</p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/f7a15830-d6d9-444d-89c1-7ee7efaa18ce%2FSCR-20220824-v6s.png" alt="SCR-20220824-v6s.png"></p>
<p>この、一つの縦の行が一週間で、GitHub の API がちょうど週ごとにデータを返してくれる優良設計なので、そのまま <code>map</code> で回して表示すると本家と同じようなレイアウトになる。</p>
<p>草を表示してくれるライブラリをいくつか探してみたけれども、どれも日付と草の色の指定方法がめんどくて使いづらかった。</p>
<p><code>GrassTile</code> は以下</p>
<pre><code class="language-ts:/components/widget/GrassCalendar.tsx">const defaultColorSet = new Map([
    [0, &quot;#e4f2e4&quot;],
    [1, &quot;#a5e68b&quot;],
    [2, &quot;#60cf64&quot;],
    [4, &quot;#37c94a&quot;],
    [8, &quot;#24904c&quot;],
])

const GrassTile = ({ count, colorSet = defaultColorSet }: GrassTileProps) =&gt; {
    const [color, setColor] = useState&lt;string&gt;(&quot;#f5f5f5&quot;)

    useEffect(() =&gt; {
        colorSet.forEach((value, key) =&gt; {
            if (count &gt;= key) {
                setColor(value)
            }
        })
    }, [count])

    return (
        &lt;div&gt;
            &lt;div
                className=&quot;h-3 w-3 rounded-sm&quot;
                style={{
                    backgroundColor: color,
                }}
            &gt;&lt;/div&gt;
        &lt;/div&gt;
    )
}
</code></pre>
<p>渡された <code>count</code> で色分けしている。一応色のと数の組み合わせは変えられるようにしてある。</p>
<h3>レスポンシブ対応</h3>
<p>デフォルトの 6ヶ月だと、画面幅によっては小さすぎたりはみ出たりしてしまう。なので、無理矢理だけども画面幅によって表示する月が変わるようにした。</p>
<pre><code class="language-ts:/components/widget/GrassCalendarResponsive.tsx">import GrassCalendar from &quot;./GrassCalendar&quot;

interface Props {
    /**
     * default
     */
    def?: number
    sm?: number
    md?: number
    lg?: number
    xl?: number
}

const GrassCalendarResponsive = ({ def = 6, sm = 2, md = 3, lg = 4, xl = 6 }: Props) =&gt; {
    return (
        &lt;div&gt;
            &lt;div className=&quot;sm:hidden&quot;&gt;
                &lt;GrassCalendar months={def} /&gt;
            &lt;/div&gt;
            &lt;div className=&quot;hidden sm:block md:hidden&quot;&gt;
                &lt;GrassCalendar months={sm} /&gt;
            &lt;/div&gt;
            &lt;div className=&quot;hidden md:block lg:hidden&quot;&gt;
                &lt;GrassCalendar months={md} /&gt;
            &lt;/div&gt;
            &lt;div className=&quot;hidden lg:block xl:hidden&quot;&gt;
                &lt;GrassCalendar months={lg} /&gt;
            &lt;/div&gt;
            &lt;div className=&quot;hidden xl:block&quot;&gt;
                &lt;GrassCalendar months={xl} /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    )
}

export default GrassCalendarResponsive
</code></pre>
<p>指定した画面幅にいる時だけ <code>hidden</code> から　<code>block</code> にして表示させている。</p>
<p>正直、レスポンシブに何かの値を変える正攻法わからない。もしかしたらそれ専用のメソッドが用意されているのかもしれない...</p>
<h2>表示</h2>
<p>実際に草を配置する。</p>
<pre><code class="language-ts">&lt;GrassCalendarResponsive def={5} sm={8} md={8} lg={4} xl={5} /&gt;
</code></pre>
<p>指定した幅の時に表示する月の数を指定する。無理矢理レスポンシブにした。</p>
<h1>終わり</h1>
<p>画面幅によって値を変更する正攻法がわからないので誰か教えてください。</p>


ブログにGitHubの草を載せた

<p>フロントエンドの人はなぜかブログをいっぱい作る。</p>
<p>私もそうなのでブログを作り直した。</p>
<p>きっかけは Twitter で <a href="https://www.newt.so/">Newt</a> というヘッドレス CMS を見かけたこと。</p>
<p>https://www.newt.so/</p>
<p>無料プランがあったので早速使って見ることにした。</p>
<h1>他の CMS との比較</h1>
<h2>まずは Newt の情報</h2>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/acac664e-6d3c-4b96-a488-a602d97c86f8%2FSCR-20220822-5bg.png" alt="SCR-20220822-5bg.png"></p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/bd6e3111-48a1-4746-a9ba-7ed9c47b94c5%2FSCR-20220822-5bz.png" alt="SCR-20220822-5bz.png"></p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/01f04c43-2118-437d-8ed3-29ddc76452ef%2FSCR-20220822-5ni.png" alt="SCR-20220822-5ni.png"></p>
<p>https://www.newt.so/plan</p>
<p>無料プランがめちゃくちゃ太っ腹。データ転送量100GB/月に、APIリクエスト制限はなんと 2,000,000回/月！個人で使う分には SSG しておけば絶対に使い切れないレベルの量。<br>
他にもコンテンツ数、モデル数、メンバー数が無制限なので、もうほとんど制限なんてないようなもの。</p>
<p>Newt には CDN API が無料プランからも使えて、アセットをエッジから快適に取得することができる。嬉しい。</p>
<p>画像の最適化も、自分でクラウドストレージを用意すれば無料でできるので良い。Google Cloud Storage ならある程度まで無料なので、機会があったら使ってみることにする。</p>
<p>無料プランでここまでできるのはめちゃくちゃ嬉しい。デプロイ Webhook も無料で使えて、JavaScript SDK も公式から提供されている。TypeScript にも対応している。</p>
<p>デベロッパに優しい設計になっていてめちゃくちゃ快適だった。</p>
<h2>microCMS</h2>
<p>Newt は国産だが、もう一つの国産ヘッドレス CMS の <a href="https://microcms.io/">microCMS</a> と比べると圧倒的に優れているのがわかる。</p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/7d8e2a34-5206-4dd9-a45b-89f8d3770e90%2FSCR-20220822-5gn.png" alt="SCR-20220822-5gn.png"></p>
<p>最大3個のAPI...?最大3人のメンバー...?</p>
<p>リクエスト呼び出し数が無制限だとしても、Newt の200万回も無制限のようなもんなので、これだけ見ても Newt が優勢。さらに詳しく比較してみる。</p>
<p>https://microcms.io/pricing</p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/55ee60a4-f14b-4609-97e9-05c8377998c6%2FSCR-20220822-5ij.png" alt="SCR-20220822-5ij.png"></p>
<p>データ転送量20GB/月...?</p>
<p>コンテンツ数は1万と、到底使い切れるようなものではないと思うが、やはり Newt の方が制限が緩い。</p>
<p>Newt には CSV 出力はないが、フロントエンドエンジニアが CSV に触れる機会もほとんどないんじゃないのかと思うので、個人で扱う場合にはなんら問題ない。</p>
<p>microCMS でできることは大抵 Newt でできる。</p>
<h2>Contentful</h2>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/ee791a77-5a96-4c01-b296-280bf1fb974f%2FSCR-20220822-5t6.png" alt="SCR-20220822-5t6.png"></p>
<p>https://www.contentful.com/pricing/</p>
<p>GraphQL に対応してるらしいが私は別に GraphQL がなくて困ったことはない。<br>
色々なプラグインを使ってカスタマイズしていく形式に近いっぽい。Wordpress みがある。</p>
<p>以前使った時は、ダッシュボードの要素がわかりにくいというか、どこから記事を追加してどこで書くのかわかりにくくてすぐ使うのをやめてしまった。</p>
<p>プラン名にもあるとおり、無料プランは「Community」プランなので、複数人で小規模〜中規模の開発をするときに使うのかもしれない...</p>
<h2>Strapi</h2>
<p>https://strapi.io/</p>
<p>セルフホストするタイプのヘッドレス CMS。無料だが難点が多い。</p>
<p>何回か使ったことがあるが、やはり自分でホストする必要があるのが面倒になってしまう。社内や組織内で使うのなら良いのかもしれないが、APIドキュメントがゴミだったり、SDKが最新版に追いついていなかったり、謎の挙動が多いため、結局プロダクションレベルでは使えないので、どこでも使えない。</p>
<h2>Payload</h2>
<p>https://payloadcms.com/</p>
<p>セルフホストするタイプのヘッドレス CMS。無料だが、最近出てきたもののため挙動が安定しない。</p>
<p>一番のネックは MongoDB を自分で用意する必要があるということ。わざわざこのために Realm で DB 用意するのは面倒。見た目はオシャレだが、使いやすくはないので結局使わない。</p>
<h1>総括</h1>
<p>結局 Newt が一番良い。外国産の CMS では、日本語入力にしばしば難があり、記事を書くことすらままならないことがある。わざわざセルフホストしても、ホストするクラウドに制限が発生してしまうので、大人しく提供されたサービスを受け取った方が楽。</p>
<h1>使いやすさ</h1>
<p>Newt はめちゃくちゃ使いやすい。もちろん、いくつか使いづらい点もあるのだが、他の CMS に比べればマシである。</p>
<h2>良いと思った点</h2>
<h3>ダッシュボードがわかりやすい</h3>
<p>これは重要。ここで変に余計な操作が必要になったり、覚える必要があったりすると疲れるが、Newt はめちゃくちゃ良い設計になっているので、直感的に扱えて楽。</p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/8d4b0ee5-b38d-4e81-bd3f-7ee87b3d26bb%2FSCR-20220822-68k.png" alt="SCR-20220822-68k.png"></p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/cf2a52c9-2706-4677-9325-580403c4915b%2FSCR-20220822-694.png" alt="SCR-20220822-694.png"></p>
<p>一般的な CMS のように、記事やタグなどのモデルを作る画面、記事一覧の画面がある。</p>
<p>モデルを構成する要素には、よくある「テキスト」や「リッチテキスト」に、マークダウン専用の「マークダウン」や、「日付」、「画像」があり、普通のブログサイトを作るのに必要なものは揃っている。しかも、最近流行りなのか「絵文字」という絵文字単体の要素があったり、色の「カラー」や「ファイル」など、ちょっと便利なやつもある。</p>
<p>もちろん、記事のモデルにタグの要素を入れる「参照」も可能。<br>
必須項目やタイトル設定、配列設定も可能。無料プランでも全然困らないレベルで CMS の機能が提供されている。</p>
<h3>マークダウンの記事プレビューができる</h3>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/cd3cb572-1ddd-484e-93cb-5ad86644db84%2FSCR-20220822-l2v.png" alt="SCR-20220822-l2v.png"></p>
<p>普通にありがたい。最低限のプレビューができるので、マークダウンのミスの確認などができる。</p>
<h3>ドキュメントがしっかりしてる</h3>
<p>https://www.newt.so/docs/</p>
<p>日本語で解説されているので、わかりやすい。</p>
<p>https://developers.newt.so/apis/cdn</p>
<p>API のリファレンスもついており、その場ですぐにリクエストをテストすることもできる。</p>
<h2>気になった点</h2>
<h3>マークダウンエディタ</h3>
<ul>
<li>Tab キーを押すとインデントが変わるのではなく、次の要素にフォーカスしてしまう</li>
</ul>
<p>これは、コードをちょっと修正するときやリストのインデントを調整したいときに不便。スペースで無理やり揃えてやる必要がある。</p>
<h3>コンテンツの作成画面</h3>
<ul>
<li>「保存」・「保存して公開ボタン」が押せない瞬間がある</li>
</ul>
<p>内容を更新した後の数秒間は、保存ボタンがグレーアウトして押せない。</p>
<p><img src="https://storage.googleapis.com/p_6301ba6a3183a77882ff001d/3fa2ff50-ed31-4034-8077-455d671213b6%2FSCR-20220822-l9a.png" alt="SCR-20220822-l9a.png"></p>
<p>グレーアウトが解除されるまで保存できないので、地味にだるい。おそらく、実際のコンテンツと保存されるコンテンツが違うものにならないように、変更のマージン期間みたいなのを用意しているのかもしれない(語彙力)。Twitter のファボボタンのような、 楽観的な更新の UI にした方がユーザーには優しいのではないかなと思った。</p>
<h2>総括</h2>
<p>いくつかちょっと気になる点はあるけど、他の CMS と比べたらめちゃくちゃ使いやすい。</p>
<h1>まとめ</h1>
<p>今までの国産・外国産の CMS と比べたら、個人用途なら Newt が圧倒的に使いやすいし無料プランの制限も緩くておすすめ。</p>


Next.js でブログを作った

<h1>コードブロック</h1>
<p>ファイル名つきSwift</p>
<pre><code class="language-swift:main.swift">print(1 + 1)
</code></pre>
<p>長文ts</p>
<pre><code class="language-ts:markdown.ts">// TODO: ここをちゃんとTSXのものに入れ替えるようにする
const reformHeadings = async (dom: JSDOM) =&gt; {
    for (const tag of headingTags) {
        dom.window.document.querySelectorAll(tag).forEach((heading) =&gt; {
            heading.id = heading.innerHTML.replace(/\s/g, &quot;-&quot;)
        })
    }
}

// コードブロックの修正をする
const codeBlock = async (dom: JSDOM) =&gt; {
    dom.window.document.querySelectorAll(&quot;pre code&quot;).forEach((code) =&gt; {
        if (code.className &amp;&amp; code.className.match(/language-.*:.*/)) {
            const before = code.className.match(/language-.*:.*/)![0]

            // split by first &quot;:&quot;
            const [language, ...rest] = before.split(&quot;:&quot;)
            const filename = rest.join(&quot;:&quot;)

            code.className = language
            code.parentElement!.setAttribute(&quot;data-filename&quot;, filename)
        }
    })
}
</code></pre>
<p>ばっしゅ</p>
<pre><code class="language-bash:ターミナル">brew update
</code></pre>
<h1>リスト</h1>
<ul>
<li>一つ目</li>
<li>二つ目
<ul>
<li>ネスト</li>
<li>ネスト２</li>
</ul>
</li>
<li>3つめ</li>
</ul>
<h2>番号付きリスト</h2>
<ol>
<li>First</li>
<li>Second</li>
<li>Third
<ol>
<li>Nested First</li>
</ol>
</li>
</ol>


Plat Dev