<h1 id="h036a913a5e">完成図</h1><figure><img src="https://images.microcms-assets.io/assets/2085cd7944504e42b1e8e114c815bc94/9cc295f63ea844f597965bd718ca1064/295380.jpg" alt="ガラスのボウルの中に入ったカルボナーラ" width="1477" height="1108"><figcaption>ソースとパスタを混ぜたボウルのままなので，見た目が綺麗でないのは勘弁してください</figcaption></figure><h1 id="h05f90ac460">カルボナーラとは？</h1><p>カルボナーラと言えば，日本では生クリームや牛乳が含まれたものが主流ですね。実際に，ソースは水分に富んだものが多いように感じます。しかし本場イタリアのカルボナーラは違います。</p><ul><li>チーズ（ペコリーノ・ロマーノやパルミジャーノ・レッジャーノ）</li><li>グアンチャーレやパンチェッタ（生ベーコンのようなもの）</li><li>卵</li><li>黒こしょう</li></ul><p>これらの単純な材料だけでソースを作るもので，その<strong>濃厚</strong>さと調理の<strong>簡単</strong>さが特徴です。</p><p>原義は「炭焼きのパスタ」で，上にかかっている胡椒が炭のようである（あるいは逆で，パスタにかかった炭を模して胡椒をかけている）ことが由来のようです。<br>そんなわけで，カルボナーラを作るときには，最後に黒こしょうをかけることが欠かせまぜん。</p><h1 id="h59c0294b52">材料</h1><ul><li>パスタ 100 g</li><li>卵 1個（常温に戻しておく）</li><li>粉チーズ 大さじ3（20 g）</li><li>ベーコン 薄切り3枚位，好きなだけ</li><li>オリーブオイル 大さじ1</li><li>にんにく 1かけ?（なくても良い，好きなら増やしても良い）</li><li>粗挽き黒こしょう?（なくても良いが，カルボナーラの定義としては必要）</li></ul><h1 id="h27f157adaa">作り方</h1><ol><li>パスタを茹でておく。塩はお湯の1％の量で。</li><li>フライパンを熱したオリーブオイルでベーコンに焼き目がつくまで炒める。</li><li>フライパンににんにくを加えて香りを出す。</li><li>ボウルに卵と粉チーズ全量を入れて，よく混ぜて卵液を作る。</li><li>炒めたベーコンを熱いままオリーブオイルごと4の卵液に加えてよく混ぜる。</li><li>パスタが茹で上がったら，湯切りをした後すぐに5のボウルに加えてよく混ぜる。</li><li>卵液に熱が通ったら，皿に盛り付ける。</li><li>お好みで粉チーズ（分量外）と黒こしょうをふりかけて，完成。<br></li></ol><p></p>

簡単！本場のカルボナーラの作り方

<h1 id="h8d027c8ed3">はじめに</h1><p>こんにちは。ゆーとぴあです。</p><p>個人サイトに付けたいと思っていた<strong>あるある</strong>機能，ブログを実装しました！</p><p>本投稿はその紹介記事になります。<br></p><h1 id="h1376e79519">使用した技術</h1><ul><li>Next.js<br>フレームワークとしてNext.jsを使用しています。2月頃から長期インターンを始めたのですが，インターン先企業で採用しているのがNext.jsで，最も親しんでいるため採用しました。<s>他のフレームワーク知らないし</s><p></p></li><li>TypeScript<br>Next.jsで開発するにあたり，JavaScriptかTypeScriptか使用する言語を選べますが，ここではTypeScriptを用いています。これもインターン先で採用しているため，素のJSに比べて親しみがあります。というか，素のJS書いたことほぼないです。とりあえず，色々と補完が効くのが便利ですね。<p></p></li><li><a href="https://mantine.dev/" target="_blank" rel="noopener noreferrer nofollow">Mantine</a><br>ReactのUIコンポーネントライブラリです。カスタムフックも提供しています。他に有名なライブラリとして，ChakraUIもありますが，ここではMantineを採用しています。これもインターン先（以下略<p></p></li><li><a href="https://vercel.com/" target="_blank" rel="noopener noreferrer nofollow">Vercel</a><br>本サイトのデプロイ先です。Next.jsなどのフレームワークで作製したWebサイトを，GitHubのリポジトリから数クリックの簡単な操作でデプロイ，ホスティングしてくれるサービスです。Hobby目的であれば無料で使えます。GitHubへのプッシュにより勝手に再ビルドが行われるのが便利です。</li></ul><p>上記3つは，ブログ機能以外でも個人サイトの構築のために利用しています。</p><ul><li><a href="https://microcms.io/" target="_blank" rel="noopener noreferrer nofollow">microCMS</a><br>日本製のヘッドレスCMSです。ブログコンテンツの管理，作製に使用しています。APIを通して自身のWebサイト上でコンテンツを取得することが可能で，簡単にブログを実装することが出来ます。<br>搭載するリッチテキストエディタ上でのコンテンツ作製が可能で，GUIで体裁を整えたものが勝手にHTMLに変換されてJSONで送られます。あとは，表示側でパースしてあげれば終了です。</li></ul><h1 id="h922edff87b">実装</h1><p>気が向いたら書きます……</p><h1 id="h418fcf75e3">展望</h1><ul><li>目次ほしいよね，右側とかに<br>→記事のIDで目次作れるらしい，公式にドキュメントあり<br></li><li>カテゴリごとに記事一覧表示変えられる機能つけたい<br>→そんなに記事書くのか……？</li></ul><p></p><h2 id="h3de35099b3">参考</h2><ul><li><a href="https://document.microcms.io/tutorial/next/next-top">https://document.microcms.io/tutorial/next/next-top</a></li><li><a href="https://blog.microcms.io/microcms-next-jamstack-blog/">https://blog.microcms.io/microcms-next-jamstack-blog/</a><p><br></p></li></ul><p></p>

簡単！本場のカルボナーラの作り方

ブログ機能を実装した