<h1 id="h8a175a9b0e">前提</h1>普段やっているサイト制作では、PCはコンテンツ幅の上限ありでそれを下回ったら縮小、SPは横幅に合わせて拡縮というパターンが多いです。 より昔のサイトだとPCは完全固定幅で横スクロールが出ても良かったり、 デザイン重視のサイトだと画面幅によってすべて拡縮だったり、 色々なパターンがありますが、SPはフォントサイズも合わせて拡縮するものが多い印象です。 今回はデザインを見て横幅を計算するのにいつも使ってるもののご紹介です。<h1 id="hcf2b66e679">コード</h1>stylus - 定義<pre><code>vw(design_px)
&nbsp; return "calc((100vw / 375 ) * %s)" %(design_px)</code></pre>stylus - 使い方<pre><code>.hoge
 width vw(100)</code></pre> sass - 定義<pre><code>@function vw($px) {
&nbsp; @return calc((100vw / 375) * $px);
}</code></pre>sass - 使い方<pre><code>.hoge {
 width: vw(100);
}</code></pre> <h1 id="h86aad43c1c">内容</h1>stylusのコードをベースに説明します。<pre><code>return "calc((100vw / 375 ) * %s)" %(design_px)</code></pre>これは calc((100vw / デザイン幅) * 要素の幅) です。 横幅375pxのデザイン上で、横幅100pxの場合 <code>width vw(100)</code> とします。 横幅だけでなく、 <code>height vw(500)</code> や <code>margin vw(10) vw(20)</code> などもいけます。 横幅750pxのデザインならば<pre><code>return "calc((100vw / 750 ) * %s)" %(design_px)</code></pre>とします。 デザイン幅も変数化しておきたい場合は<pre><code>design_width = 375 // 変数定義

vw(design_px)
&nbsp; return "calc((100vw / %s ) * %s )" %(design_width design_px) // ここで使用</code></pre>とします。 calc内に変数使いたいときの記法がクセ強めですね。 StylusとSassではmixinの作り方が違うものの、書いてあることは同じです。<h2 id="h397e38daae">補足</h2>直接関係はありませんが、vwはスクロールバーの幅を含んでしまうので、横幅指定でvwと%を混在させるとスクロールバーの有無で想定とズレることがあります。 なので変に混在させないことと、個人的にはなるべく%で指定すると良いと思います（vwを紹介しておいてなんですが）。<h1 id="h40404d9e9a">おわり</h1>自作mixinをめちゃ活用されてる方を見るとスゴッと思いますが、自分でやると後から見返したときに訳分かんなくなりがちなのでたくさんは使わないことが多いです。 これは常に使ってて、あとはブレイクポイントくらいかもです。 最近JSばっかであんまりスタイルガチャガチャしてないんですよね・・たまにはやりたいです。 👋

Stylus/Sassでいつも使う可変幅パーツ用mixin

はいどうもウィケです。 私はフライドポテトが大好きで店であれば必ず頼むのですが、まさかの穴場スポットを見つけたので共有します。<h1 id="h9b9adc6fb5">めちゃオシャレカフェに潜む我々の欲望を叶えるポテト</h1>それはどこかといいますと南町田グランベリーパークにある<a href="https://gbp.minamimachida-grandberrypark.com/floor/detail/?cd=000212" target="_blank" rel="noopener noreferrer">ファーマーズキッチン</a>というお店です。 グランベリーパーク自体オサレかつちょい高級志向な、まさしく田園都市線のイメージぴったりと言った場所であり フライドポテトの肩身はマックのポテト幅くらい狭いのであります。 しかーし！ 偶然の出会いはいつも突然！ ご覧にいれるぜ揚げ物界騒然！<h2 id="h8ebf4ad40d">これだ</h2><img src="https://images.microcms-assets.io/assets/49471d94e14e42188fdc89587ae97ee5/63564a1f632442cebd5a02ba767d9418/504BC973-C01C-4802-B9BF-8805A38D92C8.jpeg" alt=""> わかりますか？ <img src="https://images.microcms-assets.io/assets/49471d94e14e42188fdc89587ae97ee5/386ae86502fe4a4da8e1d88282363b14/370762E7-61EB-4275-8D3A-87C0E1E6CADD.jpeg" alt=""> 何が起きてるかわかりますか？ これにはよぉなんと<ul><li>マック的な細いポテト</li><li>フレッシュネス的な皮付きポテト</li><li>朝マック的なハッシュドポテト</li><li>アメリカンなあみあみのポテト</li></ul>が一皿にはいってんだよぉ！ あと写真見ても思い出せないんだがもう一種類入ってた気がするんだよぉ！ これ何気にマジで新しくないですか？ しかもこのファーマーズキッチンという名前の通り、お野菜とかにこだわりのある値段もちょい高めのお店なんですわ。 だから全部めっちゃウマイ。 とくにフレッシュネス型の厚みのあるポテトは、素材の良さが際立ってマジでウマイ。いっちゃん好き。 さ・ら・に オシャレな店あるあるで、わけわからん味のソースついてきがち あると思います。 ところがここはシンプルにケチャップ！！そして全体にササッと粉チーズアンドパセリ！！ 王道かよ……。 この貫禄すら感じる布陣がこのポテトの最強さに拍車をかけていることは疑う余地がありません。 辺鄙な場所にありますがぜひ味わっていただきたく存じマッスル。<h1 id="hce6b745943">他のメニューも美味しいぞい</h1>名前忘れちゃったんですけどオレガノとエビのオイル系なパスタ <img src="https://images.microcms-assets.io/assets/49471d94e14e42188fdc89587ae97ee5/6536a064a39642458cba7e43c4e9f7de/F13BDF6A-C050-475B-9543-6B631CEF899A.jpeg" alt=""> あと自家製レモネードがたくさん種類ありました！フライドポテトとレモネードって最高よね <img src="https://images.microcms-assets.io/assets/49471d94e14e42188fdc89587ae97ee5/28a955d921f74bdc99442f517e4bb1a6/FF1CE2AF-86E7-470D-BEC4-9A39AF9FDA39.jpeg" alt=""> やたらでかいグラス。たしかローズレモネード ポテトフォーエバー

一皿で何種類ものポテトが食べられるの最高すぎ

<h2 id="h8a175a9b0e">前提</h2>このブログを作り直そうと思い、ナウいNext.jsとmicroCMSの組み合わせで行こうとなりました。 全体の作りはmicroCMSの神記事「<a href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer">microCMS + Next.jsでJamstackブログを作ってみよう</a>」を元にしています。 で作る間にその他にもブログを作っている方の記事を読んだのですが、記事取得を各ページのgetStaticPropsでやっていることが多かったです。 一旦マネして作ったのですが、めんどくね？ということが多々あり、<ul><li>違うページで同じ情報を何度も取得している</li><li>componentsではgetStaticPropsできないので渡してあげなくてはいけない</li><li>microCMSのGET APIでは全件を一気に取得できないので、計算してループする必要があるけど各ファイルに書きたくない</li></ul>などなど。 そもそもNext.jsの経験もほぼないので何が正解か分からないのですが、ブログデータを一括で取得し使い回せるようにしてみました。 <h2 id="h922edff87b">実装</h2><h3 id="h878c5f1b9a">JSON生成</h3>さっそくでスミマセンが、全データ取得＆JSON生成はやってる方がいらっしゃいました。 <a href="https://qiita.com/akifumii/items/0f45955d6d517f05a925#%E8%BF%BD%E8%A8%98%E3%83%93%E3%83%AB%E3%83%89%E5%89%8D%E3%81%AB%E5%8F%96%E5%BE%97%E3%81%97%E3%81%9Fmicrocms%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%81%A7json%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%A7%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E4%B8%8A%E3%81%A7%E6%89%B1%E3%81%88%E3%82%8B%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AB%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F" target="_blank" rel="noopener noreferrer">NextJSのinitialize pages( _app.tsx )でgetStaticPropsが使えなかったのでgetInitialPropsを使おうと思ったけどやめた - Qiita</a> next実行前にnodejsでjsonを作っておき、<code>_app.tsx</code>でcontextに登録することで好きな箇所で使うことができます。 もう私のブログを読む必要はありません。 はい で私は全ブログデータと全カテゴリデータ、全タグデータを持つ３つのJSONを生成することにしました。 ブログデータでは、サムネイルが投稿されていないとき、カテゴリごとにデフォルト画像を設定したいので処理を追加しました。<pre><code>～省略～

// サムネがない場合セット
const setThumb = (contents) =&gt; {
&nbsp; contents.forEach((blog) =&gt; {
&nbsp; &nbsp; if(!blog.thumbnail) {
&nbsp; &nbsp; &nbsp; blog.thumbnail = {url: `/images/blog/thumb_${blog.category.id}.jpg`}
&nbsp; &nbsp; }
&nbsp; });
}

const createCmsJson = async() =&gt; {
&nbsp; const contents = await getMicroCMSdata();
&nbsp; setThumb(contents);
&nbsp; const jsonData = JSON.stringify(contents, null, 2);
&nbsp; fs.writeFileSync('data/allBlogData.json', jsonData);
}

createCmsJson();</code></pre> のような感じです。 データの加工をどこでやるべきかは分かりませんが、何度も処理を書かなきゃいけないならこの段階でやるっていうふうに分けてます。 日付の形式処理をここでやっても良いかなと思ったのですが、既に日付パース用のコンポーネントを作成していたので見送りました。 <h3 id="h0fbaa9ebcd">カテゴリごとのブログ件数</h3>そのカテゴリやタグに記事が何件登録されているか知りたいことがあると思います。 とはいえmicroCMSの管理画面では被参照件数を確認できるので、APIにすぐ来るような気もします。 （今はないと思います・・たぶん） まず前述のような全ブログデータJSONがあるものとします。 ブログのJSONはこのような感じ<pre><code>[
&nbsp; {
&nbsp; &nbsp; "id": "hogefugapiyo",
&nbsp; &nbsp; "createdAt": "2022-03-05T11:26:24.554Z",
&nbsp; &nbsp; "updatedAt": "2022-03-05T12:06:21.940Z",
&nbsp; &nbsp; "publishedAt": "2021-06-16T11:26:00.000Z",
&nbsp; &nbsp; "revisedAt": "2022-03-05T12:06:21.940Z",
&nbsp; &nbsp; "title": "ブログタイトル",
&nbsp; &nbsp; "body": "&lt;p&gt;ブログ本文&lt;/p&gt;",
&nbsp; &nbsp; "category": {
&nbsp; &nbsp; &nbsp; "id": "diary",
&nbsp; &nbsp; &nbsp; "createdAt": "2022-01-12T09:57:09.687Z",
&nbsp; &nbsp; &nbsp; "updatedAt": "2022-01-12T10:08:42.729Z",
&nbsp; &nbsp; &nbsp; "publishedAt": "2022-01-12T09:57:09.687Z",
&nbsp; &nbsp; &nbsp; "revisedAt": "2022-01-12T10:08:42.729Z",
&nbsp; &nbsp; &nbsp; "name": "日記"
&nbsp; &nbsp; }
&nbsp; },
&nbsp; {
&nbsp; &nbsp; "id": "foobarbaz",
&nbsp; &nbsp; "createdAt": "2022-03-05T11:21:05.278Z",
&nbsp; &nbsp; "updatedAt": "2022-03-05T12:29:05.980Z",
&nbsp; &nbsp; "publishedAt": "2021-05-25T11:21:00.000Z",
&nbsp; &nbsp; "revisedAt": "2022-03-05T12:29:05.980Z",
&nbsp; &nbsp; "title": "ブログタイトル",
&nbsp; &nbsp; "body": "&lt;p&gt;ブログ本文&lt;/p&gt;",
&nbsp; &nbsp; "category": {
&nbsp; &nbsp; &nbsp; "id": "tech",
&nbsp; &nbsp; &nbsp; "createdAt": "2022-03-05T09:34:08.858Z",
&nbsp; &nbsp; &nbsp; "updatedAt": "2022-03-05T09:34:08.858Z",
&nbsp; &nbsp; &nbsp; "publishedAt": "2022-03-05T09:34:08.858Z",
&nbsp; &nbsp; &nbsp; "revisedAt": "2022-03-05T09:34:08.858Z",
&nbsp; &nbsp; &nbsp; "name": "技術"
&nbsp; &nbsp; }
&nbsp; },
～略～
]</code></pre> で各カテゴリ（「日記」とか「技術」）とかに何件あるんですかってのを、全カテゴリデータのjsonに記録しときます。 全カテゴリデータJSON現状このような感じ<pre><code>[
&nbsp; {
&nbsp; &nbsp; "id": "tech",
&nbsp; &nbsp; "createdAt": "2022-03-26T09:52:14.259Z",
&nbsp; &nbsp; "updatedAt": "2022-03-26T09:52:14.259Z",
&nbsp; &nbsp; "publishedAt": "2022-03-26T09:52:14.259Z",
&nbsp; &nbsp; "revisedAt": "2022-03-26T09:52:14.259Z",
&nbsp; &nbsp; "name": "技術"
&nbsp; },
&nbsp; {
&nbsp; &nbsp; "id": "diary",
&nbsp; &nbsp; "createdAt": "2022-01-12T09:57:09.687Z",
&nbsp; &nbsp; "updatedAt": "2022-01-12T10:08:42.729Z",
&nbsp; &nbsp; "publishedAt": "2022-01-12T09:57:09.687Z",
&nbsp; &nbsp; "revisedAt": "2022-01-12T10:08:42.729Z",
&nbsp; &nbsp; "name": "日記"
&nbsp; },
～略～
]</code></pre> 全カテゴリデータを取得するコードは、最初に紹介した全ブログデータを取得するコードと同様です。 エンドポイントが変わるのみです。 そこにブログ件数を調べる処理を追加します。 生成済みの全ブログデータJSON（ここでは<code>allBlogData.json</code>）を使用します。 なので生成処理は全ブログデータの後に実行する必要があります。並列じゃなくて直列にしておけば問題ないかと思います。<pre><code>～略～

// 各カテゴリのブログ件数を、カテゴリオブジェクトのプロパティに追加
const countBlog = (contents) =&gt; {
 // 生成済みの全ブログデータJSONを使用します
&nbsp; const blogJson = fs.readFileSync('data/allBlogData.json', 'utf-8');
&nbsp; const blogObj = JSON.parse(blogJson);
&nbsp;&nbsp;
&nbsp; contents.forEach((category) =&gt; {
 // ループ中のカテゴリIDとブログのカテゴリIDが一致した数
&nbsp; &nbsp; const count = blogObj.filter(blog =&gt; blog.category.id === category.id).length;

 // プロパティ追加
&nbsp; &nbsp; category.count = count;
&nbsp; });
}

const createCmsJson = async() =&gt; {
&nbsp; const contents = await getMicroCMSdata();

 // 追加
&nbsp; countBlog(contents);

&nbsp; const jsonData = JSON.stringify(contents, null, 2);
&nbsp; fs.writeFileSync('data/allCategoryData.json', jsonData);
}

createCmsJson();</code></pre> このような感じにして実行すると <pre><code>[
&nbsp; {
&nbsp; &nbsp; "id": "tech",
&nbsp; &nbsp; "createdAt": "2022-03-26T09:52:14.259Z",
&nbsp; &nbsp; "updatedAt": "2022-03-26T09:52:14.259Z",
&nbsp; &nbsp; "publishedAt": "2022-03-26T09:52:14.259Z",
&nbsp; &nbsp; "revisedAt": "2022-03-26T09:52:14.259Z",
&nbsp; &nbsp; "name": "技術",
&nbsp; &nbsp; "count": 5
&nbsp; },
&nbsp; {
&nbsp; &nbsp; "id": "diary",
&nbsp; &nbsp; "createdAt": "2022-01-12T09:57:09.687Z",
&nbsp; &nbsp; "updatedAt": "2022-01-12T10:08:42.729Z",
&nbsp; &nbsp; "publishedAt": "2022-01-12T09:57:09.687Z",
&nbsp; &nbsp; "revisedAt": "2022-01-12T10:08:42.729Z",
&nbsp; &nbsp; "name": "日記",
&nbsp; &nbsp; "count": 15
&nbsp; }
]</code></pre> のようにcountプロパティが追加されます。 よくある、カテゴリ名の横に件数が表示されるやつとかがラクラク実装できるようになりましたわね。 次はコンテキストに登録したデータを実際使うのはどんなもんよってのをご紹介します。<h3 id="ha906665483"> pagesで使用</h3>このブログのトップページで、記事一覧を表示するときの記述は以下のようになっています。 <code>pages/index.tsx</code><pre><code>import { useContext } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { microCMS } from '@/libs/context';
import Layout from '@/components/Layout';

export default function Home() {
&nbsp; const allData = useContext(microCMS);
&nbsp; const allBlogData = allData.allBlogData;
&nbsp; allBlogData.splice(20); // 1ページに20件表示する

&nbsp; return (
&nbsp; &nbsp; &lt;Layout home&gt;
&nbsp; &nbsp; &nbsp; &lt;ul&gt;
&nbsp; &nbsp; &nbsp; &nbsp; {allBlogData.map((blog) =&gt; (
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li key={blog.id}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Link href={`/blog/${blog.id}`}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Image
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alt=''
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src={blog.thumbnail.url}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width={1200}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height={630}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;{blog.title}&lt;/h1&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt;{blog.publishedAt}&lt;/span&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt;{blog.category.name}&lt;/span&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Link&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;
&nbsp; &nbsp; &nbsp; &nbsp; ))}
&nbsp; &nbsp; &nbsp; &lt;/ul&gt;
&nbsp; &nbsp; &lt;/Layout&gt;
&nbsp; );
}</code></pre> <h3 id="h0cc65284c5">Componentsで使用</h3>全ページのサイドバーにカテゴリ一覧やタグ一覧を表示している箇所は以下のようになっています。 <code>components/Layout.tsx</code><pre><code>import { useContext } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { microCMS } from '@/libs/context';
import { Header } from '@/components/Header';
import { Footer } from '@/components/Footer';

export default function Layout({ children, home = false } :{
&nbsp; children: Object,
&nbsp; home?: boolean
}) {
&nbsp; // カテゴリ・タグをcontextから取得
&nbsp; const allData = useContext(microCMS);
&nbsp; const allCategoryData = allData.allCategoryData;
&nbsp; const allTagData = allData.allTagData;

&nbsp; // カテゴリー一覧
&nbsp; function createCategoryNav() {
&nbsp; &nbsp; const items: Object[] = [];
&nbsp; &nbsp; if(allCategoryData.length &gt;= 1) {
&nbsp; &nbsp; &nbsp; allCategoryData.forEach((category) =&gt; (
&nbsp; &nbsp; &nbsp; &nbsp; items.push(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li key={category.id}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Link href={`/category/${category.id}/page/1/`}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a&gt;{category.name}&lt;/a&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Link&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;
&nbsp; &nbsp; &nbsp; &nbsp; )
&nbsp; &nbsp; &nbsp; ))
&nbsp; &nbsp; }
&nbsp; &nbsp; return items;
&nbsp; };

&nbsp; // タグ一覧
&nbsp; function createTagNav() {
&nbsp; &nbsp; const items: Object[] = [];
&nbsp; &nbsp; if(allTagData.length &gt;= 1) {
&nbsp; &nbsp; &nbsp; allTagData.forEach((tag) =&gt; (
&nbsp; &nbsp; &nbsp; &nbsp; items.push(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li key={tag.id}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Link href={`/tag/${tag.id}/page/1/`}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a&gt;{tag.name}&lt;/a&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Link&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;
&nbsp; &nbsp; &nbsp; &nbsp; )
&nbsp; &nbsp; &nbsp; ))
&nbsp; &nbsp; }
&nbsp; &nbsp; return items;
&nbsp; };
&nbsp; return (
&nbsp; &nbsp; &lt;&gt;
&nbsp; &nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Header home={home} /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;main&gt;{children}&lt;/main&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;nav&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Link href="/"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a&gt;トップ&lt;/a&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Link&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;dl&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;dt&gt;カテゴリー&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;dd&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {createCategoryNav()}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/dl&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;dl&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;dt&gt;タグ&lt;/dt&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;dd&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {createTagNav()}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/dd&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/dl&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/nav&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Footer /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;/&gt;
&nbsp; )
};</code></pre> <h3 id="hb1876a1c46">useContextができない場合はJSONファイルをimportする</h3>ちょっと記憶が定かじゃないのですが、<code>getStaticPaths</code>か<code>getStaticProps</code>ではuseContextできなかったと思うので、その場合は単純にJSONを使います。 記事詳細ページ <code>pages/blog/[id].tsx</code><pre><code>import path from 'path';
import fs from 'fs';
import { useEffect } from 'react'
import { useRouter } from "next/router"
import Image from 'next/image';
import Layout from '@/components/Layout';
import { blog } from '@/interfaces/index';
import Link from 'next/link';
import allBlogData from '@/data/allBlogData.json';

export default function BlogId({ blog }: {
&nbsp; blog: blog,
}){
&nbsp; return (
&nbsp; &nbsp; &lt;Layout&gt;
&nbsp; &nbsp; &nbsp; &lt;h1&gt;{blog.title}&lt;/h1&gt;
&nbsp; &nbsp; &nbsp; &lt;Image&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; alt=''
&nbsp; &nbsp; &nbsp; &nbsp; src={blog.thumbnail.url}
&nbsp; &nbsp; &nbsp; &nbsp; width={1200}
&nbsp; &nbsp; &nbsp; &nbsp; height={630}
&nbsp; &nbsp; &nbsp; /&gt;
&nbsp; &nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt;{blog.publishedAt}&lt;/span&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;Link href={`/category/${blog.category.id}/page/1/`}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a&gt;{blog.category &amp;&amp; `${blog.category.name}`}&lt;/a&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/Link&gt;
&nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &nbsp; &lt;ul&gt;
&nbsp; &nbsp; &nbsp; &nbsp; {blog.tag.map((tag) =&gt; (
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li key={tag.id}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Link href={`/tag/${tag.id}/page/1/`}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a&gt;{tag.name}&lt;/a&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Link&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;
&nbsp; &nbsp; &nbsp; &nbsp; ))}
&nbsp; &nbsp; &nbsp; &lt;/ul&gt;
&nbsp; &nbsp; &nbsp; &lt;div&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; dangerouslySetInnerHTML={{
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; __html: `${blog.body}`,
&nbsp; &nbsp; &nbsp; &nbsp; }}
&nbsp; &nbsp; &nbsp; /&gt;
&nbsp; &nbsp; &lt;/Layout&gt;
&nbsp; );
}

// 静的生成のパス指定
export const getStaticPaths = async () =&gt; {
 // allBlogDataはjsonから取得したデータ
&nbsp; const paths = allBlogData.map((content: {id:string}) =&gt; `/blog/${content.id}/`);
&nbsp; return { paths, fallback: false};
};

// データをテンプレートに渡す
export const getStaticProps = async (context: {
&nbsp; params: { id: string },
}) =&gt; {
&nbsp; // /dataのjsonファイルを参照
&nbsp; const id = context.params.id;
&nbsp; const filePath = path.join(process.cwd(),'data', 'allBlogData.json');
&nbsp; const blogJson = fs.readFileSync(filePath, 'utf8');
&nbsp; const blogData = JSON.parse(blogJson) as blog[];
&nbsp; const currentBlog = blogData.find((blog) =&gt; blog.id === id) || {body:''};

&nbsp; return {
&nbsp; &nbsp; props: {
&nbsp; &nbsp; &nbsp; blog: currentBlog,
&nbsp; &nbsp; },
&nbsp; };
};</code></pre>こんな感じです。 <h2 id="h9be0c3393d">おわりに</h2>最初はよく分からないあまりReduxに片足突っ込んでオアアアッとなっていたのですが、いや別にデータをnext内でいじりたいわけじゃない・・もっと単純な話なんだよな・・と悟り、やり直して今に至ります。 もっとnextと仲良くなれるようガンバリマス。

Next.js×microCMSなブログデータをJSONにしてContextで使い回す

ハッピーニューイヤー２０２２

めちゃくちゃビビっていたのですがマジで何事もなく終わってしまいました。<h2 id="hcf663d43d1">再びの大規模接種センター</h2>前回、自衛隊大規模接種センターでモデルナワクチン1回目接種を終え、その1ヶ月後に2回目接種行ってまいりました～。 接種の流れは前回と変わらずでしたので割愛しますが、やはり2回目といえば副反応。 巷では40℃超えしたという方もチラホラ・・。 下手したらしんでしまうやんけなどと思いつめた結果、ウィケはスマホのパスワードなどをメモに残して接種へと出かけたのでした。 念には念を😉<h2 id="h97eabfa54a">軽すぎた副反応</h2>昼過ぎにワクチンを打ち、心配しながら帰宅すると、夕方頃には腕が痛くなってきました。 そして18時頃に熱っぽい感じ。来たか・・と思いながら熱をはかると37.1℃。超微熱～！ 1回目のときは当日の夜に即高熱が出ていたので、なぬ・・と拍子抜けしつつ大事を取りさっさと寝ました。 翌日起きて熱をはかってみると37.3℃。微熱～！！なんと結局最高体温はこの37.3℃止まりでした。熱も1日でおさまりました。ナニコレェ。 ちょうど仕事でイライラしていたこともあり、あわよくば３・４日休んでやろかいと意気込んでいましたがまったくその必要はありませんでした。 私はこの有様でしたので（もちろん良かったのですけど）、書くことがなさすぎるワクチン接種記となってしまいました。 友人たちもだいぶ2回目接種した方が増えてきたのですが、高熱か強い関節痛は皆起きていました。私のような1回目高熱からの2回目微熱というパターンは結局誰からも聞かなかったのですが、本当に人によるなというオチでございました。<h2 id="h9be0c3393d">おわりに</h2>これから接種を受ける方、無事受け終わった方も3回目接種がどうたらという話が出ておりますので、副反応とかいう見えている脅威には全力で備えて行きましょうぞ。 たいへん短くなってしまいましたが👋さよなら

ワクチン2回目、拍子抜けでした

私の住んでいるところでは、20代に接種の順番が回ってくる気配もなかったので、重い腰を上げて予約取って行ってきました。<h2 id="h4004b131bb">接種タイミングは地域差がすごい</h2>コロナのワクチン接種については、高齢者や基礎疾患のある方など感染時の危険度が高い方、もしくは人と合わざるを得ない仕事をされている方から受けるのは理にかなっているし、自分は仕事も趣味も引きこもり人間なので、受けたい気持ちはあるけども優先度は低いよなぁ～などと思っていました。 在宅勤務中とはいえ勤めている会社は渋谷区にあるので、ワクチン接種状況どんな感じなんやろなと調べてみたところ、なんと12歳以上まで受けられるようになっているじゃあ～りませんか。 それを知ったとき、キレちまったんですよ・・。ここまでの差ってやつがあるものかとね・・。 というのはまあ冗談で、人口が多かったり人の出入りが激しかったりな都会の方々が早く受けられるに越したことはないと思ってます。 が、こっちはまだ50代以上とかなんですよ！キーッ！（結局キレてる）<h2 id="h53c1d406e7">自衛隊に相談だ</h2>自衛隊の大規模接種センターがあるってのは前々から知っていたのですが、私が知った頃にはすでに予約を取るのは困難になっており、何度かチェックしたのですが空きを見ることすら叶わず・・早々に諦めてしまっていました。 ですがこちらもキレてしまったからには本気で取り組まねばなりません。 こちとら何年オタクやってると思っとんじゃい・・チケット争奪戦なら根性見せたるで・・。<h3 id="h2a86dc67ec">キャンセル待ちのやり方</h3>休日に30分くらいPCに張り付いて取れました。取り方はこちらの方のブログを参考にしました。 <a href="https://jukenn.hatenablog.jp/entry/2021/08/03/013853" target="_blank" rel="noopener noreferrer">【東京】自衛隊大規模接種センターのキャンセル待ちを取るコツ - 受験百景（予備校講師のブログ）</a> ざっくりいうと、予約状況一覧のカレンダーページを見るのではなく、事前に予約したい日のURLを割り出しておき、そっちをチェックします。あとはリロードしまくって他の人がキャンセルするのを待つという感じですね。 １日に対してＡＢＣＤの４ページあり、どこの枠が空くかは分からないです。なので行ける日×４タブを開いておいて、タブ移動→リロードの無限ループです。 枠の開放もなかなかお目にかかれませんが、そこからスピード勝負で負けることもあります。これマジで暇人しかできないな？ キャンセル待ちなので人が操作するであろう時間帯が良いと思います。早朝とか夜中以外。 私の場合は昼過ぎにリロード祭りして、翌日の昼の回が取れました。なんとなくBとDで△をよく見ましたが・・ここはもう運次第な気もします。<h3 id="h271126b1ca">当日の流れ</h3>急遽行けることになったらなったでちと焦ります。 とりあえず必要な持ち物は 接種券 本人確認書類 予診票 です。 接種券は自治体から送られてくるやつです。 本人確認書類は免許証とか保険証です。私はマイナンバーカード持っていきました。 予診票は接種券と一緒に入ってるやつです。太枠内ちゃんと記入して行きましょう～。当日の朝、熱測って記入しておきます。 服装は注射しやすいよう、袖をサッとめくれるTシャツとかが良いでしょう。 また結構頻繁に立ったり座ったり歩いたりしなきゃいけないので、動きやすい服や靴、カバンで行くのが良いです。 待つ場所とかはないので、会場へは早すぎず遅すぎず・・イイ感じの時間に行くのが良いと思います。20分くらい前に駅ついて、トイレ行って、ゆっくり歩いて10分前に到着、みたいな。 私は大手町駅から行きました。C2b出口からすぐで、誘導の方も結構いました。 東京駅からのシャトルバスも出ているみたいですね。 会場に着けばあとは流れに乗るだけです。 まず列に並んで入場し、手指消毒と検温をします。 その後書類が揃っているか確認され、オッケーだとパンフレットと色付きクリアファイルをもらいます。以降このクリアファイルの色別に誘導されます。ピンクの方はこちらです～とか。私は緑でした😆 色別にエレベーターに乗って接種会場へ移動します。6人くらいがセットで誘導された気がします。 そのあと予診票をチェックされ、記入漏れがないかや体調に不安はないかなど聞かれます。あと間違いがないようにか、自分の名前を毎回名乗らされます。 そのあと医師の問診があります。なにか持病など不安がある方はここで相談ですね。どっちの腕に注射したいかも聞かれます。利き腕じゃない方を伝えると良いでしょう。 ここまでで問題がなければ、いよいよお注射の時間です。 アイドルの握手会みたいなブースがたくさんあって、順番に通されます。案内の方と看護師さんがおり、腕をまくって座ります。注射する箇所をアルコール消毒して大丈夫か聞かれ、オッケーならチクっとしますよーで注射ブスリです。 超緊張しましたがまったく痛くなかったです。ほんとにチクでした。手しびれてませんかーと聞かれ異常がなければ終了。絆創膏を貼ってもらい、お風呂は入っていいけど激しい運動や飲酒は控えてね！などの注意を受け、ブースを出ます。 そしたら2回目の接種予約をします。2回目はきっかり4週間後になりますので、そのつもりでスケジュールを確認してから行くと良いでしょう。その日がダメだったときどういうオペレーションになるかは分かんないです。 何時がいいですか～？と聞かれるので希望の時間を伝えましょう。私は何時でも大丈夫です！！と言いました😆 そしたら13時から16時の好きな時間で～と言われたのでじゃあ13時で！！！と言いました（元気） たしかこのへんで予診票とか回収された気がします。接種券は大事に持って帰りますよ～。 その後は通常15分、アレルギーなどがある人は30分待機して、体調に問題がないかを見られます。何時何分まで待機してね～という紙を渡されるので、それまで待機部屋みたいなところで座って待ちます。パンフレット読んだりスマホいじったりしてればすぐです。 10～15分間隔くらいで、○時○分になりました～帰れる人帰ってええで～みたいな呼びかけをしてくれるので、自分の時間が来たら出口へ向かいましょう。時間の書かれた紙を渡して、お疲れっした～となり、またエレベーターに乗って、はい終わり！おうちへ帰りましょう！<h3 id="h44c6cace52">副反応～1回目で熱出ました～</h3>さてやはり恐ろしいのは副反応。 個人差があるとはいえ、1回目の接種では腕の痛み、2回目では高熱に苦しんでいる方が多い印象でした。ファイザーよりモデルナの方が副反応が出やすく（自衛隊はモデルナ）、高齢者より若者、男性より女性の方が出やすいなどの情報がありますね。 <a href="https://www.cov19-vaccine.mhlw.go.jp/qa/0002.html" target="_blank" rel="noopener noreferrer">これまでに認められている副反応にはどのようなものがありますか。｜新型コロナワクチンQ&amp;A｜厚生労働省</a> モデルナ＆若者＆女性と三拍子揃ってしまっている私はもはや悟りの境地です。いや嘘です悟れてません。 まあ・・統計なんてね、個人にとってはど～でもいいんですよ。大事なのは自分がどうなるかですよ・・。 (´Д｀)ﾊｧ… まず1日目（打った当日）からもう腕痛いです。13時半頃に打って、夕方頃には腕イテテで37℃くらいありました。腕のイテテはあれです、ライブで3時間くらい全力でサイリウム振った日の筋肉痛って感じで、上にあがらないです。普通の筋肉痛と違うのは、触ったらめちゃくちゃ痛いコト😉 そしてお熱。私は少数派だと思いますが・・その日の夜38.5℃くらい出ました。 まあ私はインフルの予防注射とかでも毎回熱出すタイプなので、事前にロキソニンや冷えピタなどの用意はバッチリしていました。 ただ風邪の熱とは違い、咳も鼻水もなく、ほんとにただただ熱があるだけって感じです。理由が明確だからか、高熱のわりに精神的ダメージはあまりなかったですね。食欲もあったので、ごはんも普通にガッツリ食べました。カレーうまい🍛 2日目（打った翌日）は37℃前後をウロウロする感じで、夜だけ38℃出ました。でも1日目よりはマシになってました。3日目は熱なくなりました。腕は触るとまだちょっと痛い。 とにかく心配だったのは、発熱が本当にワクチンのせいなのか？ってことでした。本当はコロナにかかっちまったんじゃないか？とか不安になってましたが、とりあえずの見分け方として、咳や鼻水などはワクチン接種で起こりにくいそうです。 <a href="https://www.cov19-vaccine.mhlw.go.jp/qa/0006.html" target="_blank" rel="noopener noreferrer">ワクチンを受けた後に熱が出たら、どうすれば良いですか。｜新型コロナワクチンQ&amp;A｜厚生労働省</a> たしかにそういう症状はなかったですし、いろいろ考えたところでどうしようもないので、ただただ食べて寝ました。今だけはそれが推奨されるのさ・・。 とりあえず副反応は落ち着いたっぽくて一安心ではありますが、周りのワクチン打った方で1回目熱出たって人は一人もいなかったので、これはもうやってみないことにはわからんなぁと思いました。 ただ熱は出る前提で準備しといた方がいいですね！物資も、お仕事も。 解熱剤や冷えピタ、ポカリ、ゼリーとかレトルト食品など、折角の機会だし一通り揃えときましょ。どの道2回目もありますし。2回目ｺﾜｲ・・。<h2 id="h3c81ee1e3c">2回目へつづく</h2>大規模接種センターのオペレーションがすごいと聞いていたので、行けてよかったです。こう言って良いものか分かりませんが、年イチの健康診断もアトラクション気分でフィーバーしてしまう人間なので、なんか楽しかったです。 副反応は全然楽しくないんですけどね。どうせ自分は熱出るだろうなと思ってはいましたが、いざ出るとイラですね。逆にみんなが出る2回目で出ない展開期待してますが、まあ無理でしょうね。40℃とか出てる人いますがそんなん・・耐えられるのかしら。脳細胞がしんでしまう気がします・・。 仕事も繁忙期なもので、あまり副反応に長引かれると困るのですが、こればかりは予想できないことですからね。ホワイト企業パワーで乗り切ろうと思います。 それでは皆さまもご安全に👋

大規模接種センターでワクチン1回目打ってきました

劇場版 少女☆歌劇 レヴュースタァライトを２回見た感想

ども〜ウィケです。 4/4にZeppTokyoで行われたharmoe canvas session Ⅰに行ってきました。 あとだいぶ前ですがオンラインサイン会にも参加してましたので書きます。<h2 id="h5bf5930b2b">harmoeとかいうデビュー時点で最強のユニット</h2>スタァライトやD4DJ等、ブシロードコンテンツに肩まで浸かっているお仲間ならばその強さは察しって感じですよね。そこ通ってないとむしろ知り得ない可能性。 ウィケはミルキィホームズ以降ブシロード沼から抜け出せない人生を送っているかつ、舞台やがて君になるでもえぴガチ恋勢になってしまったので、結成時からharmoeは見てました👀 みんなも岩田陽葵さんと小泉萌香さんによる洒落たユニットharmoeをチェケチェケ。 （もう説明はいいよねの顔）<h2 id="hbeecbb0b6d">オンラインサイン会</h2>で、先日1stシングル「きまぐれチクタック」がリリースされました。 それに伴い、オンラインサイン会があるということで、応募してみました！そして参加できました！（1回落ちた） <img src="https://images.microcms-assets.io/assets/49471d94e14e42188fdc89587ae97ee5/9fe669da7fea4785912b449bb5d133b4/live_1_2200.jpg" alt=""> サインうれぴ〜☺ オンライン形式のサイン会は初めてでしたが、コメントで参加する程度のほうが緊張しなくて良いですね。オンラインお話し会とかは精神が耐えられる気しない。 応募時に記載したコメント読んで、リアクションしてくれるのも嬉しくてオンラインもええな！と思いました。 （ただ私の中の理性は、これってお金払ってラジオのメール読んでもらってるようなものでは？とか言ってますけど鎮めました）<h2 id="h55017cbdd1">ライブ</h2>ライブ絶対行くぜ！とまでは思っていなかったのですが（緊張するから）、CDに応募券が付いていたので応募してみました。そして無事あたったので行ってきました。 <img src="https://images.microcms-assets.io/assets/49471d94e14e42188fdc89587ae97ee5/14ccf6a3cc9c4ae4bc27f4158163b986/live_2_2200.jpg" alt=""> チケットもかわいい！捨てられないですねこりゃ😉 運良く前から4番目という良い席になりまして、お二人の表情までしっかり観えました。ZeppTokyoって前の方ほんと近いですよね〜。 もうほんと、別にナメてたわけじゃないんですけど、歌もトークもダンスもビジュアルも全部が良すぎて感激しました。マジで非の打ち所がないぞ・・・。 お二人ともかわいくてトークもおもしろいってのはもちろん知っていたのですが、目の前で繰り広げられるとやっぱ圧倒されました。あともえぴ終始テーブルに肘ついてて笑いました💪まさにもえぴ 歌は、CDで聞いただけだとなんだか難しそうな曲ねぇとか思ってたのですが、まあ〜〜〜うまい。 生歌でやる曲じゃないでしょ×5だったんですが全部うますぎてシビレました。 ダンサーさんもお二人いるステージで、歌・ダンス・演出全部クオリティ高くて見とれちゃいましたし、CDに入っていないカバー曲は知らなかったのですが、すぐ引き込まれました。いやほんとすごい・・・。 私はアイドルの現場もよく行くのですが、こりゃアイドルの人たち商売上がったりだわ・・などと考えていました😂 もうできないことないじゃんこの人たち！ってね〜。 正直、昔の感覚からすると新人声優ユニットのデビューライブなんてすごい香ばしくなっても不思議じゃないと思うんです。でもファンの方々もなんかこう・・しっかりしてて（？）ほんと全部が良かったです。 ファンの方といえば、お絵かきコーナーで会場の拍手の音量で勝敗を決めるのがあったのですが、近くの方が青振っててはるちゃんファンっぽかったのに、もえぴに投票してて忖度しないところイイゾ〜って勝手に思ってました😆 なかなか甲乙つけがたい勝負でしたけどねｗ さっそく2ndシングル「マイペースにマーメイド」の発売も決まりましたし（しかも作詞がみもりん！）、harmoe勢いすごい。 ガチりはしない予定ですが、これからもこっそりチェックしていく所存です。 <img src="https://images.microcms-assets.io/assets/49471d94e14e42188fdc89587ae97ee5/884b3e168100465ab5247d4dce0abae6/live_3.jpg" alt=""> ライブ特典のかわいいマグカップでおわかれです。ではね〜👋

harmoe canvas session Ⅰに行ってきたよ＆オンラインサイン会の話

ども～ウィケです。 3/28に幕張メッセで行われたHello! Project ひなフェス 2021&nbsp;モーニング娘。’21プレミアムに行ってきました～。<h2 id="h4d48e666a1">2年ぶりの幕張メッセ</h2>やっぱりひなフェスは楽しいですね😆 前回は2019年のひなフェス、モーニング娘プレミアムに行ったので、幕張メッセに向かう景色でそのときのことを思い出しました。 コロナ禍でオール着席＆声援禁止の寂しさは言わずもがなですが、１人１枚しかチケット取れないこともあるのかすごい静かなんですよね。もちろん騒いじゃいけないご時世ではありますが、なんだかほんとにこれからライブあるの？って気持ちになってしまいちょっと切ないです。<h3 id="h7e0ebb481b">ピザうめぇ🍕</h3>会場には午後に着いたので、「石田のパン」は完売していましたが、ピザーラ謹製春のハローピザを食べました！<iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FJYQ6YiPM4hs%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DJYQ6YiPM4hs&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FJYQ6YiPM4hs%2Fhqdefault.jpg&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=youtube" width="560" height="315" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe> これね 朝寝坊してごはん食べられなかったのでとてもありがたい。具はサラミとトマト、アスパラ、サラミとスタンダードなものですが、出来たてのピザは格別のうまさですね！上あごヤケドしましたがめっちゃうまかったです。１人分サイズ売ってくれるの嬉しい～。 ポテトも食べちゃった🍟 一緒に行ったオタクフレンドは石田のパン売り切れを嘆きつつ、せっかくだから・・とジェラートを買っていました🍨<h2 id="hf7cf6f59ad">ひなフェスは目移りしちゃう</h2>自分は最近のモーニング娘しかオタクです！と言い張れるほどの知識はないので、他のユニットはひなフェスくらいでしか見ないのですが、やっぱ次から次へと出てきてくれるのめっちゃテンション上がりますね～。 研修生がOh No 懊悩をやったときは、ああ、こぶしはもういないんや・・って思って切なくなったり BEYOOOOONDSのパフォーマンスが３曲とも最高すぎて心奪われたり つばきファクトリーの三回目のデート神話でブチ上がったり 聖ちゃんソロはあれ？今日バースデーイベントだったっけ？ってなったり Juice=Juiceはちょっと切ない気持ちになったり…… アンジュルムはマジ超絶かっこよかったり 大人数のAre you Happy?がおもしろすぎたり やっぱりモーニング娘は最強やってなったりしました。<h2 id="h9baea1a715">モー娘サイコー</h2>スミマセン、ちょっと今もう眠くてしょうがないんですけど（雨に降られたし） とにかく出演者全員歌上手くて、圧倒されたし モーニング娘の最近の曲ってとにかく難しすぎるなって思いました。 他のグループは歌い上げる曲が多い中、今のモーニング娘はテクニック推しなんだなっていうのが比較してよく分かりました。 まあもしかしたらまーちゃんがいなかったのも大きかったかもです。 居なかったのはさみしいですが、スパイスの効いてないカレーって感じでそれはそれでおいしかったです。インドカレーもうまいけどこくまろもうまいよね的な的な的な🍛 コロナ禍始まりかけのときはオタク側も困惑気味でしたが、今日、コールの入る箇所を完璧に手拍子で再現できるようになってた皆さんを見て感動しました。手拍子ってほんと重なるとチカラすごいっすよね。 しかしまあいろいろ言いながら見る楽しさもあるので、オタクフレンズとカラオケでも行って騒ぎながら中継見るのがいちばん楽しいかもしれない説あります。 もしくはニコ生。前日にやってたひなフェス2019のニコ生楽しかった。コメントは偉大。 眠いのでとりとめもなく終わります。また来年もひなフェス行きたい！！🌸

ひなフェス2021 モーニング娘。'21プレミアム行ってきたよ

泣けました ネタバレとは？ って感じですがいちおう内容について書いてます。<h2 id="hc8a7779c03">時が経つのははやいですね</h2>どうもウィケです。 世間はエヴァの新作で盛り上がってますが、映画館混む前に！と<a style="color:#119da4;background-color:#ffffff" href="https://ariacompany.net/" target="_blank" rel="noopener noreferrer">ARIA The CREPUSCOLO</a>を観に行ってきました。 <img src="https://images.microcms-assets.io/assets/49471d94e14e42188fdc89587ae97ee5/ab599f8623b24faab33cb4f8c6ae171c/crepuscolo_2200.jpg" alt=""> パンフは売り切れてたのでノート買ってみました。あと入場者特典のコースター！ ARIAは皆さんと同じように（？）、自分にとってもものすごく大切な作品で、漫画とアニメシリーズは追いかけてきたので、緊張しながら映画館に向かいました。 というか、AVVENIREですら2015-2016年ってのが超びっくりです。そんなに経ってたのか……。<h2 id="h8d78e14043">感想</h2><h3 id="h6120d007fe">没入感</h3>自分でも驚きましたが、最初の一音でうるっときました。 ああ、ARIAだ……と。 私は普段曲を聞いて感動するとかあんまり無くて、泣くとしてもストーリーとかなんですけど、この一音で泣けるのか、自分は……と驚くほど胸にきました。 また、全編通してキャラも背景も、絵が本当にきれい。 アニメの続編というより、原作を美しくアニメ化した最新の作品だと強く感じました。 今まででいちばん原作の絵に近く、すべてのシーンが本当に綺麗で、現実に引き戻される瞬間がまったくありませんでした。 音楽と映像の美しさによって、自分がいちばん楽しみにしてたはずの、キャラクターが出てくる前にすっかりARIAの世界に入り込んだんですけど それが今まで経験したことなかった感覚だったので、強烈な体験でした。<h3 id="hf9429a5c89">オレンジぷらねっと</h3>もうホント最初っからｳｵｵｵ!となるシーンが来まして。 アテナさんが動いている……しゃべっている……！！ 感動した。そしてかわいい。アテナさんはかわいい（確信） そしてアリスの成長に感動。 初期のこどもっぽさ、頑固さも健在ながら、弾ける笑顔や微笑みの表情が見えるたびに本当に大人になったねぇと思わされました。 灯里や藍華もすっかりお姉さんになって……と感動しますが、やっぱりアリスの成長に対する感動はひとしおですね。気持ちは親よ。 劇場版ではたびたび回想シーンで過去が描かれるのですが、昇格試験はやっぱりずるい。 アニメ放送時も唯一ボロ泣きしたのが灯里の昇格試験だったなと思い出しました。 アリスの昇格試験自体は、テレビアニメの方でもものすごく印象深いシーンでしたが、 アテナさんの心情は普段描かれること少ないし、実際のところどう考えているか具体的には分かりませんでしたが、アリスへの愛に溢れていて泣けました。 ARIAは悪い人がいない穏やかな世界ですが、アリシアさんもアテナさんも、後輩への愛がゆえにわがままな気持ちを抱えててそこがすごく良かったです。 結局後輩たちは立派なプリマになりますが、そんなの叶うわけないって思いながらも今このときが愛おしすぎて終わりたくないって気持ち、本当に泣けます。こっちの世界でもそういうことってたくさんありますよね。 映画館では静かに泣けましたが、家で見たらボロ泣きするかもしれないです😌<h3 id="h2b3700e4e4">サトリナさん</h3>なんといっても思いを巡らせてしまうのはサトリナさんの存在ですよね。 背負うもののとても重い仕事になったと思いますが、サトリナさんのアテナさんも大好きになりました。というかもうアテナさん登場からの開口一番で好きってなりました！ 何回も観に行くつもりはなかったですが、サトリナさんが出る舞台挨拶が追加で決まったとのことだったので、当たったらぜひ現地に行きたいところです。当たらなくてもライビュで行こうかな～。 千和さんも出るから生の恥ずかしいセリフ禁止！聞きたい😆<h2 id="h9be0c3393d">おわりに</h2>今回の劇場版、メインはオレンジぷらねっとでしたが、しっかり全員が描かれていて本当に楽しかったです。またネオ・ベネツィアに行けたんだって気持ちが溢れました。 とにかく観終わった後は、今までARIAを欠かさず見てきて、この世界に肩まで浸かっててよかったぁって思いました。 今まで観てきたし観ないっていう選択肢はそもそもなかったですが、想像以上に感動した自分にびっくりです。 回想シーンもたくさんあったので、あぁあの時のことか……とかこんなことあったなあ……とか、自分の中の思い出も一緒にじわ～っとこみ上げてきて、特別なにかが起きてるわけじゃないシーンでもホロリと泣けることがありました。 内容が良かったのはもちろんですが、細部までとにかくアニメのクオリティが高くて、スタッフ・キャストの方々の愛を全身に浴び続けたから、思ってた以上の感動があったのかなって思います。 本当に観に行ってよかった！ さて……次の劇場版は姫屋ですかね？もう泣いてまうやろですわ。

Stylus/Sassでいつも使う可変幅パーツ用mixin

一皿で何種類ものポテトが食べられるの最高すぎ

Next.js×microCMSなブログデータをJSONにしてContextで使い回す

ハッピーニューイヤー２０２２

ワクチン2回目、拍子抜けでした

大規模接種センターでワクチン1回目打ってきました

劇場版少女☆歌劇レヴュースタァライトを２回見た感想

harmoe canvas session Ⅰに行ってきたよ＆オンラインサイン会の話

ひなフェス2021 モーニング娘。'21プレミアム行ってきたよ

ARIA The CREPUSCOLO＆公開記念舞台挨拶見てきました

Stylus/Sassでいつも使う可変幅パーツ用mixin

一皿で何種類ものポテトが食べられるの最高すぎ

Next.js×microCMSなブログデータをJSONにしてContextで使い回す

ハッピーニューイヤー２０２２

ワクチン2回目、拍子抜けでした

大規模接種センターでワクチン1回目打ってきました

劇場版 少女☆歌劇 レヴュースタァライトを２回見た感想

harmoe canvas session Ⅰに行ってきたよ＆オンラインサイン会の話

ひなフェス2021 モーニング娘。'21プレミアム行ってきたよ

ARIA The CREPUSCOLO＆公開記念舞台挨拶見てきました

劇場版少女☆歌劇レヴュースタァライトを２回見た感想