From d6205df80d2b4ebe35a416161938bce59f3b1e7b Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Mon, 24 Jun 2019 00:30:47 -0700
Subject: [PATCH 1/3] Support v2 content

---
 next.config.js                    |    4 +-
 package.json                      |    7 +-
 scripts/generateContentsBundle.ts |   70 --
 src/contents/0.v2.jp.tsx          |  622 ++++++++++++++++
 src/contents/1.v2.jp.tsx          |  420 +++++++++++
 src/contents/10.v2.jp.tsx         |  460 ++++++++++++
 src/contents/11.v2.jp.tsx         |  399 +++++++++++
 src/contents/12.v2.jp.tsx         |  469 +++++++++++++
 src/contents/13.v2.jp.tsx         |  505 +++++++++++++
 src/contents/14.v2.jp.tsx         |  736 +++++++++++++++++++
 src/contents/15.v2.jp.tsx         |  823 ++++++++++++++++++++++
 src/contents/16.v2.jp.tsx         | 1094 +++++++++++++++++++++++++++++
 src/contents/2.v2.jp.tsx          |  421 +++++++++++
 src/contents/3.v2.jp.tsx          |  412 +++++++++++
 src/contents/4.v2.jp.tsx          |  320 +++++++++
 src/contents/5.v2.jp.tsx          |  494 +++++++++++++
 src/contents/6.v2.jp.tsx          |  469 +++++++++++++
 src/contents/7.v2.jp.tsx          |  357 ++++++++++
 src/contents/8.v2.jp.tsx          |  236 +++++++
 src/contents/9.v2.jp.tsx          |  498 +++++++++++++
 src/lib/contentVersion.ts         |    8 +
 src/lib/contentsBundle.tsx        |   53 +-
 22 files changed, 8784 insertions(+), 93 deletions(-)
 delete mode 100644 scripts/generateContentsBundle.ts
 create mode 100644 src/contents/0.v2.jp.tsx
 create mode 100644 src/contents/1.v2.jp.tsx
 create mode 100644 src/contents/10.v2.jp.tsx
 create mode 100644 src/contents/11.v2.jp.tsx
 create mode 100644 src/contents/12.v2.jp.tsx
 create mode 100644 src/contents/13.v2.jp.tsx
 create mode 100644 src/contents/14.v2.jp.tsx
 create mode 100644 src/contents/15.v2.jp.tsx
 create mode 100644 src/contents/16.v2.jp.tsx
 create mode 100644 src/contents/2.v2.jp.tsx
 create mode 100644 src/contents/3.v2.jp.tsx
 create mode 100644 src/contents/4.v2.jp.tsx
 create mode 100644 src/contents/5.v2.jp.tsx
 create mode 100644 src/contents/6.v2.jp.tsx
 create mode 100644 src/contents/7.v2.jp.tsx
 create mode 100644 src/contents/8.v2.jp.tsx
 create mode 100644 src/contents/9.v2.jp.tsx
 create mode 100644 src/lib/contentVersion.ts

diff --git a/next.config.js b/next.config.js
index dc72b544b..37c6fbeea 100644
--- a/next.config.js
+++ b/next.config.js
@@ -14,13 +14,15 @@ const config = withTypescript({
   },
   env: {
     productionLocale: process.env.PRODUCTION_LOCALE,
+    productionContentVersion: process.env.PRODUCTION_CONTENT_VERSION,
     isDevelopment: process.env.IS_DEVELOPMENT
   },
   // For locale, if running 2 servers (JP and EN) locally, if you use build-time config
   // (env instead of publicRuntimeConfig) then the config overlaps in both servers.
   // So must use publicRuntimeConfig instead.
   publicRuntimeConfig: {
-    devLocale: process.env.DEV_LOCALE
+    devLocale: process.env.DEV_LOCALE,
+    devContentVersion: process.env.DEV_CONTENT_VERSION
   },
   exportPathMap(defaultPathMap, { dev, outDir }) {
     if (!dev) {
diff --git a/package.json b/package.json
index 15d2ef6ee..c50c07c9e 100644
--- a/package.json
+++ b/package.json
@@ -18,15 +18,14 @@
   "scripts": {
     "jp": "IS_DEVELOPMENT=true DEV_LOCALE=jp next -p 9991",
     "en": "IS_DEVELOPMENT=true DEV_LOCALE=en next -p 9990",
+    "jp:v2": "IS_DEVELOPMENT=true DEV_LOCALE=jp DEV_CONTENT_VERSION=v2 next -p 9992",
     "jp:hide-cards": "DEV_LOCALE=jp next -p 9991",
     "en:hide-cards": "DEV_LOCALE=en next -p 9990",
-    "dev": "rm -rf .next && concurrently \"yarn jp\" \"yarn en\" \"yarn contents:watch\" \"yarn twemoji:watch\"",
-    "dev:hide-cards": "rm -rf .next && concurrently \"yarn jp:hide-cards\" \"yarn en:hide-cards\" \"yarn contents:watch\" \"yarn twemoji:watch\"",
+    "dev": "rm -rf .next && concurrently \"yarn jp\" \"yarn jp:v2\" \"yarn en\" \"yarn twemoji:watch\"",
+    "dev:hide-cards": "rm -rf .next && concurrently \"yarn jp:hide-cards\" \"yarn en:hide-cards\" \"yarn twemoji:watch\"",
     "ts-node": "ts-node --project tsconfig.scripts.json",
     "ts-node:add-paths-no-watch": "yarn ts-node -r tsconfig-paths/register",
-    "contents": "yarn ts-node ./scripts/generateContentsBundle.ts",
     "sitemap": "yarn ts-node:add-paths-no-watch ./scripts/generateSitemap.ts",
-    "contents:watch": "yarn ts-node ./scripts/generateContentsBundle.ts watch",
     "precompute": "yarn ts-node:add-paths-no-watch ./scripts/precomputeExpressionContainers.ts",
     "tsc": "tsc",
     "eslint": "eslint --ext .js,.ts,.tsx .",
diff --git a/scripts/generateContentsBundle.ts b/scripts/generateContentsBundle.ts
deleted file mode 100644
index 827e7c53c..000000000
--- a/scripts/generateContentsBundle.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-// NOTE: If you use -r tsconfig-paths/register then for some reason chokidar fails
-import chokidar from 'chokidar'
-import glob from 'glob'
-import fs from 'fs'
-import prettierFormat from './lib/prettierFormat'
-
-const regenerate = (path?: string) => {
-  glob(
-    './src/contents/**/*.+(en|jp).tsx',
-    (_: any, files: readonly string[]) => {
-      const uniqueNames = [
-        ...new Set(
-          files.map(x =>
-            x.replace('./src/contents/', '').replace(/\.(en|jp)\.tsx/, '')
-          )
-        )
-      ]
-
-      const importString = uniqueNames
-        .map(
-          name =>
-            `import Jp${name} from 'src/contents/${name}.jp'
-           import En${name} from 'src/contents/${name}.en'`
-        )
-        .join('\n')
-
-      const bundleObjectString = uniqueNames
-        .map(
-          name => `
-          '${name}': {
-            en: En${name},
-            jp: Jp${name}
-          }
-        `
-        )
-        .join(',\n')
-
-      const fileContents = prettierFormat(
-        `// WARNING: Do not modify this file - it's generated automatically.
-      ${importString}
-
-      export default {
-        ${bundleObjectString}
-      }`
-      )
-
-      fs.writeFile('./src/lib/contentsBundle.tsx', fileContents, err => {
-        if (err) {
-          throw err
-        }
-        if (path) {
-          console.log(`${path} updated; Bundle regenerated`)
-        } else {
-          console.log('Bundle regenerated')
-        }
-      })
-    }
-  )
-}
-
-if (process.argv[2] === 'watch') {
-  chokidar
-    .watch('./src/contents/**/*.tsx', { ignoreInitial: true })
-    .on('add', path => regenerate(path))
-  chokidar
-    .watch('./src/contents/**/*.tsx')
-    .on('unlink', path => regenerate(path))
-} else {
-  regenerate()
-}
diff --git a/src/contents/0.v2.jp.tsx b/src/contents/0.v2.jp.tsx
new file mode 100644
index 000000000..6900fe7a8
--- /dev/null
+++ b/src/contents/0.v2.jp.tsx
@@ -0,0 +1,622 @@
+import React from 'react'
+import { numEpisodesExceptFirstAndLast } from 'src/lib/episodeCategories'
+import {
+  Blockquote,
+  Em,
+  Img,
+  ExternalLink,
+  P,
+  Strong,
+  InlineHeader
+} from 'src/components/ContentTags'
+import Emoji from 'src/components/Emoji'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import EpisodeCardList from 'src/components/EpisodeCardList'
+import NextLessonButton from 'src/components/NextLessonButton'
+import YesNoButtons from 'src/components/YesNoButtons'
+import Toc from 'src/components/Toc'
+import H from 'src/components/H'
+import { lessonTitle } from 'src/lib/titles'
+import YoutubeEmbed from 'src/components/YoutubeEmbed'
+import { githubRepo } from 'src/lib/meta'
+
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: '自己紹介',
+        footer: {
+          content: <H args={{ name: 'dateAndSource' }} />
+        },
+        content: (
+          <>
+            <EmojiSeparator emojis={['🇺🇸', '👨🏻‍💻', '📙']} />
+            <P>
+              こんにちは、<Strong>上杉周作</Strong>
+              と申します。米国在住のプログラマ兼ブロガーです。2019年に日経BP社から発売された『
+              <ExternalLink href="https://amzn.to/2QlZIqm">
+                <Strong>ファクトフルネス</Strong>
+              </ExternalLink>
+              』の共訳者でもあります。
+              <ExternalLink href="https://jp.chibicode.com/">
+                詳しいプロフィールとブログはこちら
+              </ExternalLink>
+              。
+            </P>
+            <P>
+              <ExternalLink href="https://amzn.to/2QlZIqm">
+                <Img
+                  size="small"
+                  src="/static/images/factfulness.jpg"
+                  alt="ファクトフルネス"
+                />
+              </ExternalLink>
+            </P>
+            <P>
+              当記事「<Strong>{lessonTitle}</Strong>
+              」は、今までわたしが書いたなかで
+              <Strong>最も文章量が多い記事</Strong>
+              です。すべて
+              <Strong>無料</Strong>
+              で公開しています。
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'meta',
+        title: <>目次</>,
+        content: (
+          <>
+            <P>
+              当記事は、
+              <InlineHeader>
+                <H
+                  args={{ name: 'categoryNameColored', category: 'beginner' }}
+                />
+                ・
+                <H
+                  args={{
+                    name: 'categoryNameColored',
+                    category: 'intermediate'
+                  }}
+                />
+                ・
+                <H
+                  args={{
+                    name: 'categoryNameColored',
+                    category: 'advanced'
+                  }}
+                />
+              </InlineHeader>
+              それぞれ<Strong>5ページずつ、</Strong>
+              それに「
+              <InlineHeader>
+                <H
+                  args={{ name: 'titlePrefixColored' }}
+                  episodeNumberOverrides={0}
+                />
+              </InlineHeader>
+              」と「
+              <InlineHeader>
+                <H
+                  args={{ name: 'titlePrefixColored' }}
+                  episodeNumberOverrides={numEpisodesExceptFirstAndLast + 1}
+                />
+              </InlineHeader>
+              」を加えた
+              <Strong>全17ページ</Strong>
+              で構成されています。非常に長いですが、
+              <Em>記事というより電子書籍</Em>
+              だと思って、少しずつ読み進めてくだされば幸いです。
+            </P>
+            <EmojiSeparator emojis={['📗', '📘', '📕']} />
+            <Toc />
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'computerScience' }} />
+            って何？
+          </>
+        ),
+        content: (
+          <>
+            <EmojiSeparator emojis={['🤖', '🤔', '🤖']} />
+            <P>
+              いきなりですが、
+              <H args={{ name: 'yesNoQuiz' }} />
+              を行います。分からなくてもいいので、勘で答えてみてください！
+            </P>
+            <P>
+              <H args={{ name: 'question' }} /> 当記事のタイトルは「
+              <Em>{lessonTitle}</Em>」ですが、
+              <Strong>
+                <H args={{ name: 'computerScience' }} />
+                とは、非常に単純化して言うと「ソフトウェア開発や、コンピュータによる情報処理の根幹となる学問」だ。
+              </Strong>
+              <H args={{ name: 'yesOrNo' }} />
+            </P>
+            <YesNoButtons answer="yes" />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: true }} />
+          </>
+        ),
+        content: (
+          <>
+            <EmojiSeparator emojis={['⭕️', '🤗', '⭕️']} />
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: true, sentence: true }} />
+              <H args={{ name: 'csDescriptionPreface' }} />
+            </P>
+            <H
+              args={{
+                name: 'csDescription'
+              }}
+            />
+            <EmojiSeparator emojis={['🔎', '🗺', '📷']} />
+            <P>
+              もしも、「
+              <Em>
+                世間を騒がせているアプリやAIが、どんな仕組みでできているのか、ほんの少しでいいから理解してみたい
+              </Em>
+              」と思われたことがありましたら、
+              <H args={{ name: 'computerScience' }} />
+              を少しかじってみても良いかもしれません。
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: <>プログラミングは必要？</>,
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'computerScience' }} />
+              については後に詳しく説明しますが、ここでもう一問
+              <H args={{ name: 'yesNoQuiz' }} />
+              にチャレンジしてみましょう！
+            </P>
+            <EmojiSeparator emojis={['💻', '🤔', '💻']} />
+            <P>
+              <H args={{ name: 'question' }} />{' '}
+              <Em>
+                <H args={{ name: 'computerScience' }} />
+                を学ぶためには、
+                <Strong>プログラミングの知識が必要だ</Strong>。
+              </Em>
+              <H args={{ name: 'yesOrNo' }} />
+            </P>
+            <YesNoButtons answer="no" />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            プログラミングは必須ではない<Emoji>❌</Emoji>
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: false, sentence: true }} />
+              あくまで筆者の考えですが、
+              <Strong>
+                <H args={{ name: 'computerScience' }} />
+                を学ぶのに、プログラミングの知識は必須ではありません。
+              </Strong>
+              プログラミングができるのに越したことはありませんが、プログラミングができなくても
+              <H args={{ name: 'computerScience' }} />
+              の知識をある程度身につけることは可能です。
+            </P>
+            <EmojiSeparator emojis={['😉', '💻', '❌']} />
+            <P>
+              当記事ではこのことを証明すべく、
+              <Em>
+                プログラミングを一切使わずに、
+                <H args={{ name: 'computerScience' }} />
+                の中でも 「<Strong>ある程度難しい題材</Strong>
+                」について解説します。
+              </Em>
+              記事を通して、「
+              <Em>
+                簡単な
+                <H args={{ name: 'computerScience' }} />
+                の題材だけでなく、ある程度難しい題材でも、プログラミング抜きに学ぶことができる
+              </Em>
+              」ということを体感していただけたら幸いです。
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yCombinator' }} />
+            って何？
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              当記事で解説する、
+              <H args={{ name: 'computerScience' }} />
+              の中でも「ある程度難しい題材」とは何なのか。それは、題名「
+              <Em>{lessonTitle}</Em>」にもある「
+              <Strong>
+                <H args={{ name: 'yCombinator' }} />
+              </Strong>
+              」です。
+            </P>
+            <P>
+              この「
+              <H args={{ name: 'yCombinator' }} />
+              」とは、いったい何のことなのでしょう？またしても
+              <H args={{ name: 'yesNoQuiz' }} />
+              形式で出題しますので、勘で答えてみてください！
+            </P>
+            <EmojiSeparator emojis={['🧙‍♀️', '🤔', '🧙‍♀️']} />
+            <P>
+              <H args={{ name: 'question' }} /> 「
+              <Strong>
+                <H args={{ name: 'yCombinator' }} />
+              </Strong>
+              」とは、非常に単純化して言うと
+              <Em>
+                「繰り返し処理」に関連する
+                <H args={{ name: 'computerScience' }} />
+                用語だ
+              </Em>
+              。<H args={{ name: 'yesOrNo' }} />
+            </P>
+            <YesNoButtons answer="yes" />
+          </>
+        )
+      },
+      {
+        title: <H args={{ name: 'theAnswerIs', isYes: true }} />,
+        content: (
+          <>
+            <EmojiSeparator emojis={['⭕️', '🤗', '⭕️']} />
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: true, sentence: true }} />
+              <Em>
+                「
+                <Strong>
+                  <H args={{ name: 'yCombinator' }} />
+                </Strong>
+                」とは、非常に単純化して言うと「繰り返し処理」に関連する
+                <H args={{ name: 'computerScience' }} />
+                用語です。
+              </Em>
+            </P>
+            <P>
+              <H args={{ name: 'yCombinator' }} />
+              は、筆者が学んだコンピュータサイエンスの題材の中でも特に興味深いものでした。はじめて
+              <H args={{ name: 'yCombinator' }} />
+              について学んだときは、「
+              <Em>まるで魔法みたいだ！</Em>
+              」と感動したのを覚えています。
+            </P>
+            <EmojiSeparator emojis={['😭', '✨', '🧙‍♀️']} />
+            <P>
+              ちなみに、筆者は米国の大学で
+              <H args={{ name: 'computerScience' }} />
+              を専攻したのですが、
+              <H args={{ name: 'yCombinator' }} />は
+              <Em>3年生向けの授業で教わる題材でした</Em>
+              。1〜2年生向けの内容ではないので、「ある程度難しい題材」であることがうかがえます。
+            </P>
+            <P>
+              話を戻しましょう。今回の記事では、
+              <Strong>
+                <H args={{ name: 'yCombinator' }} />
+                とは何なのか、そしてなぜ興味深いのかを、プログラミングを使わずに可能な限り分かりやすく説明します
+              </Strong>
+              。そうすることで、
+              <H args={{ name: 'computerScience' }} />
+              の魅力が伝わればいいなと思っています。
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>スマホでOK、難しい数式もない</>,
+        content: (
+          <>
+            <P>
+              当記事ではプログラミングを行わないので、
+              <Strong>パソコンは必要ありません</Strong>
+              。スマホで読み進めることができます。もちろん、パソコンでもタブレットでも読むことができます。
+            </P>
+            <EmojiSeparator emojis={['😉', '📱', '🆗']} />
+            <P>
+              また、当記事では数学の知識もほとんど必要ありません。
+              <Em>単純な足し算、引き算、掛け算以外の数式は一切登場しません</Em>
+              ので、ご安心ください。
+            </P>
+            <EmojiSeparator emojis={['➕', '➖', '✖️']} />
+          </>
+        )
+      },
+      {
+        title: <>無料なので、あしからず</>,
+        content: (
+          <>
+            <P>
+              さらに、当記事は最後まで<Strong>無料</Strong>で公開しています。
+            </P>
+            <EmojiSeparator emojis={['🆓', '🤗', '🆓']} />
+            <P>
+              だからというのも変ですが、
+              <Strong>当記事の内容に期待しすぎないでほしい</Strong>
+              です。
+            </P>
+            <P>
+              というのも、<Strong>当記事は実用的な記事ではない</Strong>
+              からです。
+              <Em>
+                最後まで読み終えてもプログラミングのスキルは上達しませんし、当記事の内容が仕事やキャリアに役立つことはないでしょう。
+              </Em>
+              どちらかというと、<Em>別に知らなくても構わない</Em>
+              内容です。
+            </P>
+            <P>
+              だから、
+              <Strong>
+                「わたしは実用的な記事だけ読みたいんだ <Emoji>😡</Emoji>
+                」という方は、今すぐこのページを閉じてください。
+              </Strong>
+            </P>
+            <EmojiSeparator emojis={['❌', '😡', '❌']} />
+            <P>
+              一方で、当記事を読めば、「
+              <Em>コンピュータサイエンスって面白そう</Em>」「
+              <Em>自分にもできるかも</Em>」「
+              <Em>もっと学んでみたい</Em>
+              」といった、<Strong>何らかのきっかけ</Strong>
+              が得られるかもしれません。そうなればいいなと思っていますが、「
+              <Em>つまらん</Em>」「<Em>難しすぎる</Em>」「
+              <Em>逆に興味が失せた</Em>」と思われる方もいるでしょう。
+            </P>
+            <P>あまり期待しすぎず、最後までお楽しみいただけると嬉しいです。</P>
+          </>
+        ),
+        footer: {
+          content: (
+            <>
+              <P>
+                <InlineHeader>ちなみに:</InlineHeader> 先述した通り、この記事は
+                <Strong>全17ページ</Strong>
+                で構成されています。
+                <Strong>
+                  おそらく読者の方々の半数以上は、読了までに最低1時間はかかるでしょう。
+                </Strong>
+                「
+                <Em>
+                  そんな長い記事は読みたくない <Emoji>😡</Emoji>
+                </Em>
+                」という方も、今すぐこのページを閉じてください。
+              </P>
+            </>
+          )
+        }
+      },
+      {
+        title: <>さっそくはじめてみましょう！</>,
+        content: (
+          <>
+            <EmojiSeparator emojis={['✨', '🙂', '✨']} />
+            <P>
+              もしも「
+              <Em>
+                とりあえず読んでみたい <Emoji>🙂</Emoji>
+              </Em>
+              」と思ってくださったのであれば、下のボタンを押して先に進んでみてください！
+            </P>
+            <NextLessonButton />
+          </>
+        ),
+        footer: {
+          content: (
+            <P>
+              <Em>
+                プログラミングができる方や、別の意味で「
+                <H args={{ name: 'yCombinator' }} />
+                」という言葉をご存知の方
+              </Em>
+              は、さらに下にある余談も読んでみてください。
+            </P>
+          )
+        }
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'sideNotePrefix' }} />: プログラミングができる方へ
+          </>
+        ),
+        type: 'sideNote',
+        preview: {
+          content: (
+            <P>
+              プログラミングができる方が「繰り返し処理」と聞くと、「
+              <Strong>for文</Strong>」「<Strong>while文</Strong>」「
+              <Strong>再帰</Strong>
+              」を思い浮かべると思います。
+            </P>
+          ),
+          text: (
+            <>
+              <H args={{ name: 'continueReading' }} /> (プログラマ向け)
+            </>
+          )
+        },
+        content: (
+          <>
+            <P>
+              <Em>
+                <H args={{ name: 'yCombinator' }} />
+                は、「
+                <Strong>for文</Strong>」「<Strong>while文</Strong>」「
+                <Strong>再帰</Strong>
+                」が存在しないプログラミング言語でも、繰り返し処理を可能にするテクニック
+              </Em>
+              なのです。詳しくは後に説明します。
+            </P>
+            <P>
+              <H args={{ name: 'byTheWay' }} />{' '}
+              当記事はプログラミング知識ゼロの方でも分かるように書いていますので、「
+              <Em>プログラマに特化した説明のほうがいい</Em>
+              」と思う方もいらっしゃるかもしれません。
+            </P>
+            <P>
+              そんな方には、Rakeの作者でもある故・Jim Weirich氏がRubyConf
+              2012にて行った講演「
+              <ExternalLink href="https://www.youtube.com/watch?v=FITJMJjASUs">
+                <InlineHeader>
+                  Y Not - Adventures in Functional Programming
+                </InlineHeader>
+              </ExternalLink>
+              」をおすすめします。英語ですが字幕付きで見ることができます。
+            </P>
+            <YoutubeEmbed
+              width={560}
+              height={315}
+              src="https://www.youtube.com/embed/FITJMJjASUs"
+              caption={'ちなみにこの時、筆者は観客として参加していました。'}
+            />
+            <P>
+              <InlineHeader>余談:</InlineHeader>{' '}
+              当記事はTypeScriptとNext.jsで書いています。ソースコードは
+              <ExternalLink href={githubRepo}>GitHubで公開中</ExternalLink>
+              です。
+            </P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'sideNotePrefix' }} />: IT業界の「
+            <H args={{ name: 'yCombinator' }} />」
+          </>
+        ),
+        type: 'sideNote',
+        preview: {
+          content: (
+            <>
+              <P>
+                <Em>IT業界</Em>にいる方なら、別の意味で 「
+                <H args={{ name: 'yCombinator' }} />
+                」という言葉をご存知かもしれません。
+              </P>
+            </>
+          ),
+          text: (
+            <>
+              <H args={{ name: 'continueReading' }} /> (IT業界の方向け)
+            </>
+          )
+        },
+        content: (
+          <>
+            <P>
+              <Em>
+                <H args={{ name: 'yCombinator' }} />
+                は、シリコンバレーで最も有名なITベンチャー養成機関の名でもあります。
+              </Em>
+              AirBnBをはじめとする超有名ITベンチャーを多数輩出しており、
+              約2000の卒業企業のうち、トップ100社の企業価値を合計すると
+              <ExternalLink href="https://www.ycombinator.com/topcompanies/">
+                10兆円以上になります(2018年10月時点)
+              </ExternalLink>
+              。
+              企業価値には偏りがありますが、単純に割り算をすると、1社あたりの企業価値は1000億円以上になります。
+            </P>
+            <P>
+              <Strong>
+                では、なぜ
+                <H args={{ name: 'yCombinator' }} />
+                という名称がつけられたのでしょうか？
+              </Strong>
+              <H args={{ name: 'yCombinator' }} />
+              創業者のひとり、ポール・グレアム氏は
+              <ExternalLink href="https://mixergy.com/interviews/y-combinator-paul-graham/">
+                インタビューでこう語っていました
+              </ExternalLink>
+              。
+            </P>
+            <EmojiSeparator emojis={['😎', '🆚', '👔']} Component={P} />
+            <Blockquote>
+              <P>
+                <Strong>
+                  <Em>
+                    <H args={{ name: 'yCombinator' }} />
+                    とは、プログラミングのテクニックのひとつです。
+                  </Em>
+                </Strong>{' '}
+                (中略) 個人的に、
+                <H args={{ name: 'yCombinator' }} />
+                があまりにも興味深いテクニックだと思ったので、われわれのITベンチャー養成機関もそう名付けてしまったのです。しかし結果的には、
+                <Em>われわれが投資する起業家を選別する</Em>
+                際に、この名前が役立ちました。
+              </P>
+              <P>
+                <Em>
+                  わたしたちは凄腕プログラマの起業家は招き入れたかったが、スーツ姿のビジネスパーソンは門前払いにしたかった。
+                </Em>
+                凄腕プログラマがわたしたちのことを聞いたら、こう思うでしょう。「
+                <H args={{ name: 'yCombinator' }} />
+                って名のITベンチャー養成機関だって？最高じゃん！きっと、面白い人たちが集まっているに違いない」と。いっぽう、スーツの人たちは、
+                <H args={{ name: 'yCombinator' }} />
+                と聞いても何のことやらさっぱり、となりますから。
+              </P>
+            </Blockquote>
+            <P>
+              <Strong>ざっくり言うと:</Strong>{' '}
+              彼らは凄腕プログラマの起業家に投資したかった。だから、「
+              <H args={{ name: 'yCombinator' }} />
+              」という
+              <Em>
+                高度な
+                <H args={{ name: 'computerScience' }} />
+                の専門用語
+              </Em>
+              をITベンチャー養成機関の名前につけることで、凄腕プログラマを呼び寄せたのです。
+            </P>
+            <P>
+              <Em>
+                しかし、当記事を読めば、プログラマではなくても
+                <H args={{ name: 'yCombinator' }} />
+                を理解できます
+              </Em>
+              。ITベンチャー養成機関としての「
+              <H args={{ name: 'yCombinator' }} />
+              」をご存知の方も、ぜひ読み進めてみてください！
+            </P>
+          </>
+        )
+      },
+      {
+        title: '余談はこれくらいにして、早速始めましょう！',
+        content: (
+          <>
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/1.v2.jp.tsx b/src/contents/1.v2.jp.tsx
new file mode 100644
index 000000000..6b6d4fb2b
--- /dev/null
+++ b/src/contents/1.v2.jp.tsx
@@ -0,0 +1,420 @@
+import React from 'react'
+import {
+  Em,
+  Img,
+  P,
+  PFullWidth,
+  Hr,
+  Strong,
+  InlineHeader
+} from 'src/components/ContentTags'
+import Emoji from 'src/components/Emoji'
+import EmojiWithText from 'src/components/EmojiWithText'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import YesNoButtons from 'src/components/YesNoButtons'
+import NextLessonButton from 'src/components/NextLessonButton'
+import EpisodeCardList from 'src/components/EpisodeCardList'
+import H from 'src/components/H'
+import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
+import * as R from 'src/components/Runners'
+
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <H args={{ name: 'bentoBoxPuzzle' }} />,
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'episodeWelcomeText' }} />
+              当記事では、<Strong>とあるパズル</Strong>
+              を使って
+              <H args={{ name: 'yCombinator' }} />
+              とは何かを学んでいきます。 今回は、
+              <Em>このパズルの基本法則</Em>
+              を紹介します。
+            </P>
+            <P>
+              まずはじめにこちらの写真をご覧ください。筆者の地元・横浜の崎陽軒で販売されているお弁当です(撮影は筆者)。
+            </P>
+            <PFullWidth>
+              <Img src="/static/images/bentoboxes.jpg" alt="Bento Boxes" />
+            </PFullWidth>
+            <P>
+              なぜお弁当の写真をお見せしたかというと、今回紹介するパズルには
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              という名前がついているからです。
+            </P>
+            <EmojiSeparator emojis={['🍱', '🤔', '🍱']} />
+            <P>
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              がどんなものか、説明しますね！
+            </P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            これが
+            <H args={{ name: 'bentoBoxPuzzle' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              下の図が、
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              です。実際の弁当箱のように、
+              <Em>
+                四角の中にいくつかマスがあり、それぞれのマスの中に料理が入っています
+              </Em>
+              。
+            </P>
+            <P>
+              <InlineHeader>例その1:</InlineHeader> 上段には
+              <EmojiWithText letter="b" />
+              、下段には
+              <EmojiWithText letter="a" />
+              がふたつ入っています。
+            </P>
+            <R.Ilpo />
+            <P>
+              「寿司とサンドイッチが同時に入っている弁当箱なんてあるの？」というツッコミは無しの方向でお願いします。
+            </P>
+            <EmojiSeparator emojis={['🍣', '😅', '🥪']} />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            まだあるよ
+            <H args={{ name: 'bentoBoxPuzzle' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              さらにいくつか、
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              の例を紹介していきます:
+            </P>
+            <P>
+              <InlineHeader>例その2:</InlineHeader> 上段には
+              <EmojiWithText letter="e" />
+              、下段には
+              <EmojiWithText letter="c" />と
+              <EmojiWithText letter="d" />
+              が入っています。
+            </P>
+            <R.Imyd />
+            <P>マクドナルドのメニューにありそうな料理ばかりですね！</P>
+            <Hr />
+            <P>
+              <InlineHeader>例その3:</InlineHeader> 上段には
+              <EmojiWithText letter="g" />
+              、下段には
+              <EmojiWithText letter="f" />
+              がふたつ入っています。
+            </P>
+            <R.Emmb />
+            <P>こちらは、イタリアンな弁当箱ですね！</P>
+            <Hr />
+            <P>
+              <InlineHeader>例その4:</InlineHeader> 上段には
+              <EmojiWithText letter="j" />
+              、下段には
+              <EmojiWithText letter="h" />と
+              <EmojiWithText letter="i" />
+              が入っています。
+            </P>
+            <R.Jozw />
+            <P>こちらは普通に美味しそうですね。</P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'playButton' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              それぞれの
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              には、
+              <H args={{ name: 'playButton' }} />
+              があります。
+            </P>
+            <P>
+              <InlineHeader>例その1:</InlineHeader> こちらは、最初に紹介した
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              です。
+              <H args={{ name: 'pressPlay' }} />
+            </P>
+            <R.Itbm />
+          </>
+        ),
+        footer: {
+          content: (
+            <>
+              <P>
+                <H args={{ name: 'byTheWay' }} /> <H args={{ name: 'reset' }} />{' '}
+                を押せばもう一度最初から実行できます。
+              </P>
+            </>
+          )
+        }
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'play' }} />
+            するとこうなります
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              どうやら、さきほどの
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              は、
+              <H args={{ name: 'play' }} />
+              すると、最終的に
+              <EmojiWithText letter="b" />
+              だけになるようです。
+            </P>
+            <P>
+              <InlineHeader>例その1:</InlineHeader>
+            </P>
+            <R.Ilpo />
+            <ExpressionRunnerSeparator />
+            <R.Osqo />
+            <P>
+              実はこれ、
+              <H args={{ name: 'unknownRule' }} />
+              に従っているんです。
+            </P>
+            <P>
+              その法則を説明する前に、他の
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              も実行してみましょう。
+            </P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            他のも
+            <H args={{ name: 'play' }} />
+            してみましょう
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              先ほど紹介した3つの
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              を、それぞれ
+              <H args={{ name: 'play' }} />
+              してみましょう！
+            </P>
+            <P>
+              <InlineHeader>例その2:</InlineHeader>
+            </P>
+            <R.Zwpj />
+            <P>
+              <InlineHeader>例その3:</InlineHeader>
+            </P>
+            <R.Dqkc />
+            <P>
+              <InlineHeader>例その4:</InlineHeader>
+            </P>
+            <R.Ldox />
+          </>
+        ),
+        footer: {
+          content: (
+            <P>
+              どれも
+              <H args={{ name: 'unknownRule' }} />
+              に従っています。どんな法則か、考えみてください！
+            </P>
+          )
+        }
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'afterPlay' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>それぞれ、このような結果になりました！</P>
+            <P>
+              <InlineHeader>例その2:</InlineHeader>
+            </P>
+            <R.Imyd />
+            <ExpressionRunnerSeparator />
+            <R.Bgfl />
+            <P>
+              <InlineHeader>例その3:</InlineHeader>
+            </P>
+            <R.Emmb />
+            <ExpressionRunnerSeparator />
+            <R.Tuqr />
+            <P>
+              <InlineHeader>例その4:</InlineHeader>
+            </P>
+            <R.Jozw />
+            <ExpressionRunnerSeparator />
+            <R.Cpkp />
+          </>
+        ),
+        footer: {
+          content: (
+            <P>
+              どれも
+              <H args={{ name: 'unknownRule' }} />
+              に従っています。どんな法則か、考えみてください！
+            </P>
+          )
+        }
+      },
+      {
+        title: <>法則がわかりましたか？</>,
+        content: (
+          <>
+            <EmojiSeparator emojis={['🍱', '🤔', '▶️']} />
+            <P>
+              上記あわせて4種類の
+              <H args={{ name: 'bentoBoxPuzzle' }} />を
+              <H args={{ name: 'play' }} />
+              しましたが、どれも
+              <H args={{ name: 'unknownRule' }} />
+              に従っています。
+            </P>
+            <P>
+              <InlineHeader>その法則がわかりましたか？</InlineHeader>
+              もう一度4つの例を見て、考えてみてください！
+            </P>
+            <P>
+              なんとなく予想がついたら、合っているかどうか次の
+              <H args={{ name: 'yesNoQuiz' }} />
+              でチェックしてみましょう！
+            </P>
+            <P>
+              <Em>さっぱり分からなくてもご心配なく！</Em>
+              とりあえず勘で答えてみてください。<Emoji>😉</Emoji>
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+            、その1
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'question' }} />{' '}
+              こちらに、ヘルシーな野菜が入っている
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              があります。
+            </P>
+            <R.Loai />
+            <P>
+              これを
+              <H args={{ name: 'play' }} />
+              すると、<Strong>最終的に下のようになるでしょうか？</Strong>
+              これまでの法則から予想してみてください。
+            </P>
+            <R.Vvjn />
+            <YesNoButtons answer="yes" />
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+            、その2
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'question' }} /> こちらの
+              <H args={{ name: 'bentoBoxPuzzle' }} />を
+              <H args={{ name: 'play' }} />
+              すると、
+            </P>
+            <R.Hbgo />
+            <P>
+              <Strong>最終的に下のようになるでしょうか？</Strong>
+              これまでの法則から予想してみてください。
+            </P>
+            <R.Olef />
+            <YesNoButtons answer="no" />
+          </>
+        )
+      },
+      {
+        title: <>答え合わせ</>,
+        content: (
+          <>
+            <P>それぞれ実行すると、次のようになります。</P>
+            <P>
+              <InlineHeader>例その5:</InlineHeader>
+            </P>
+            <R.Zzyu />
+            <P>
+              つまり
+              <Strong>
+                1問目の
+                <H args={{ name: 'theAnswerIs', isYes: true }} />
+              </Strong>
+              でした。
+            </P>
+            <P>
+              <InlineHeader>例その6:</InlineHeader>
+            </P>
+            <R.Qpjt />
+            <P>
+              つまり
+              <Strong>
+                2問目の
+                <H args={{ name: 'theAnswerIs', isYes: false }} />
+              </Strong>{' '}
+              (<EmojiWithText letter="k" />
+              ではない) でした。
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>法則は次のページに</>,
+        content: (
+          <>
+            <P>
+              次のページで
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              の法則を紹介します。予想が当たった方も、よく分からなかった方も、ぜひ次に進んでみてください。
+            </P>
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/10.v2.jp.tsx b/src/contents/10.v2.jp.tsx
new file mode 100644
index 000000000..2d5c11533
--- /dev/null
+++ b/src/contents/10.v2.jp.tsx
@@ -0,0 +1,460 @@
+import React from 'react'
+import { Ul, UlLi, Em, P, Strong } from 'src/components/ContentTags'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import EmojiForLetter from 'src/components/EmojiForLetter'
+import Emoji from 'src/components/Emoji'
+import EpisodeCardList from 'src/components/EpisodeCardList'
+import EmojiWithText from 'src/components/EmojiWithText'
+import YesNoButtons from 'src/components/YesNoButtons'
+import NextLessonButton from 'src/components/NextLessonButton'
+import H from 'src/components/H'
+import { InlineEmojiBoxesForQuestion } from 'src/components/InlineEmojiBoxes'
+import BottomRightBadge from 'src/components/BottomRightBadge'
+import { cakeVariableName } from 'src/lib/specialVariableNames'
+import * as R from 'src/components/Runners'
+
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: (
+          <>
+            <EmojiWithText letter={cakeVariableName} />
+            の入った弁当箱
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'episodeWelcomeText' }} />
+              <Strong>今回が中級の最後です。</Strong>
+            </P>
+            <EmojiSeparator emojis={['🎉', '🤗', '🎉']} />
+            <P>
+              早速、
+              <H args={{ name: 'lookAtThisBentoBox' }} />。
+            </P>
+            <R.Wbpx />
+            <P>注目ポイントはふたつあります:</P>
+            <Ul>
+              <UlLi>
+                <Em>
+                  一番上に
+                  <Strong>
+                    <EmojiWithText letter={cakeVariableName} />
+                  </Strong>
+                  が入っています。
+                </Em>
+              </UlLi>
+              <UlLi>
+                <Em>
+                  <InlineEmojiBoxesForQuestion />
+                  の部分には、料理が「<Strong>ひとつだけ</Strong>」入ります。
+                </Em>
+              </UlLi>
+            </Ul>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <InlineEmojiBoxesForQuestion size="md" /> に何か入れてみる
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              とりあえず、
+              <EmojiWithText letter="c" />
+              を<InlineEmojiBoxesForQuestion />
+              に入れてみました。
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Gszp />
+            <P>
+              <InlineEmojiBoxesForQuestion />
+              に入っていた
+              <Strong>
+                <EmojiWithText letter="c" />
+              </Strong>
+              が最後に残りますね。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetter letter="c" />,
+                <Emoji>➡️</Emoji>,
+                <EmojiForLetter letter="c" />
+              ]}
+            />
+            <P>
+              <EmojiWithText letter="d" />
+              を<InlineEmojiBoxesForQuestion />
+              に入れてみたらどうでしょう？
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Kntz />
+            <P>
+              今回も、
+              <InlineEmojiBoxesForQuestion />
+              に入っていた
+              <Strong>
+                <EmojiWithText letter="d" />
+              </Strong>
+              が最後に残りました。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetter letter="d" />,
+                <Emoji>➡️</Emoji>,
+                <EmojiForLetter letter="d" />
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>では、ここで質問です！</P>
+            <R.Wbpx />
+            <P>
+              <H args={{ name: 'question' }} />
+            </P>
+            <Ul>
+              <UlLi>
+                こちらの弁当箱の
+                <Strong>
+                  <InlineEmojiBoxesForQuestion />
+                  に料理をひとつだけ入れて
+                  <H args={{ name: 'play' }} />
+                  すると
+                </Strong>
+                、
+              </UlLi>
+              <UlLi>
+                最終的にかならず
+                <Strong>
+                  <InlineEmojiBoxesForQuestion />
+                  に入れた料理が残る
+                </Strong>
+                。<H args={{ name: 'yesOrNo' }} />
+              </UlLi>
+              <YesNoButtons answer="no" tooHard />
+            </Ul>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: false }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: false, sentence: true }} />
+            </P>
+            <P>
+              <Strong>
+                <InlineEmojiBoxesForQuestion />に<EmojiWithText letter="b" />
+                を入れる
+              </Strong>
+              のがポイントです。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetter letter="b" />,
+                <Emoji>🤔</Emoji>,
+                <InlineEmojiBoxesForQuestion size="md" />
+              ]}
+            />
+            <P>
+              <InlineEmojiBoxesForQuestion />に<EmojiWithText letter="b" />
+              を入れてみると下のようになります。
+              <H args={{ name: 'pressFastForward' }} />{' '}
+            </P>
+            <R.Bmms />
+            <P>
+              なんと、最後に
+              <Strong>
+                <EmojiWithText letter={cakeVariableName} />
+              </Strong>
+              が残りました！
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetter letter={cakeVariableName} />,
+                <Emoji>🥳</Emoji>,
+                <EmojiForLetter letter={cakeVariableName} />
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>こちらの弁当箱の…</P>
+            <R.Wbpx />
+            <Ul>
+              <UlLi>
+                <Em>
+                  <InlineEmojiBoxesForQuestion />に
+                  <Strong>
+                    <EmojiWithText letter="b" />
+                  </Strong>
+                  を入れた場合、
+                  <Strong>
+                    <EmojiWithText letter={cakeVariableName} />
+                  </Strong>
+                  が残る。
+                </Em>
+              </UlLi>
+              <UlLi>
+                <Em>
+                  <InlineEmojiBoxesForQuestion />
+                  にそれ以外を入れた場合、
+                  <InlineEmojiBoxesForQuestion />
+                  に入れた料理が残る。
+                </Em>
+              </UlLi>
+            </Ul>
+            <P>でも、どうしてこうなったのでしょう？</P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <BottomRightBadge inline bottomRightBadgeType="callArg" />と
+            <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+            が両方とも
+            <EmojiWithText letter="b" />
+            になるから
+          </>
+        ),
+        content: (
+          <>
+            <EmojiSeparator
+              nodes={[
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />,
+                <EmojiForLetter letter="b" />,
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              ]}
+            />
+            <P>
+              理由は、
+              <InlineEmojiBoxesForQuestion />に
+              <Strong>
+                <EmojiWithText letter="b" />
+              </Strong>
+              を入れた場合、
+              <BottomRightBadge inline bottomRightBadgeType="callArg" />と
+              <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />が
+              <Strong>
+                両方とも
+                <Strong>
+                  <EmojiWithText letter="b" />
+                </Strong>
+                になるから
+              </Strong>
+              です。
+            </P>
+            <R.Gmcn />
+            <P>
+              すると途中で
+              <BottomRightBadge inline bottomRightBadgeType="funcArg" />と
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+              が両方とも
+              <EmojiWithText letter="b" />
+              になり…(
+              <H args={{ name: 'pressFastForward', skipColon: true }} />)
+            </P>
+            <R.Vpjw />
+            <P>
+              最後に
+              <EmojiWithText letter={cakeVariableName} />
+              が残るのです。(
+              <H args={{ name: 'pressFastForward', skipColon: true }} />)
+            </P>
+            <R.Kjyi />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <BottomRightBadge inline bottomRightBadgeType="callArg" />と
+            <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+            が違うとどうなるか
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              それ以外の料理(たとえば
+              <EmojiWithText letter="c" />
+              )を
+              <InlineEmojiBoxesForQuestion />
+              に入れた場合、
+              <Strong>
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />と
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+                が異なります。
+              </Strong>
+            </P>
+            <R.Dpst />
+            <P>
+              すると先ほどと違い、途中で
+              <BottomRightBadge inline bottomRightBadgeType="funcArg" />と
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+              が同じにならず…(
+              <H args={{ name: 'pressFastForward', skipColon: true }} />)
+            </P>
+            <R.Xhwx />
+            <P>
+              最初に
+              <InlineEmojiBoxesForQuestion />
+              に入れた
+              <EmojiWithText letter="c" />
+              が残るのです。(
+              <H args={{ name: 'pressFastForward', skipColon: true }} />)
+            </P>
+            <R.Ttvy />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <Strong>
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />と
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+                に同じ料理があるかどうかで、結果が変わることがある。
+              </Strong>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />,
+                <Emoji>🆚</Emoji>,
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              ]}
+            />
+            <P>先ほどの弁当箱だと、</P>
+            <R.Wbpx />
+            <P>
+              <Em>
+                <InlineEmojiBoxesForQuestion />に
+                <Strong>
+                  <EmojiWithText letter="b" />
+                </Strong>
+                を入れた場合、
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />と
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />が
+                <Strong>同じになる。</Strong>
+              </Em>
+            </P>
+            <R.Gmcn />
+            <P>
+              <Em>
+                <InlineEmojiBoxesForQuestion />
+                にそれ以外を入れた場合、
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />と
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />が
+                <Strong>異なる。</Strong>
+              </Em>
+            </P>
+            <R.Dpst />
+            <P>
+              だから、<Strong>それぞれ違う結果になる。</Strong>
+            </P>
+            <Ul>
+              <UlLi>
+                <InlineEmojiBoxesForQuestion />に
+                <Strong>
+                  <EmojiWithText letter="b" />
+                </Strong>
+                を入れた場合、
+                <Strong>
+                  <EmojiWithText letter={cakeVariableName} />
+                </Strong>
+                が残る。
+              </UlLi>
+              <UlLi>
+                <InlineEmojiBoxesForQuestion />
+                にそれ以外を入れた場合、
+                <InlineEmojiBoxesForQuestion />
+                に入れた料理が残る。
+              </UlLi>
+            </Ul>
+          </>
+        )
+      },
+      {
+        title: <>何か問題でも？</>,
+        content: (
+          <>
+            <P>
+              <BottomRightBadge inline bottomRightBadgeType="callArg" />と
+              <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              に同じ料理があるかどうかで、結果が変わる弁当箱があることがわかりました。
+            </P>
+            <P>
+              でも、「<Em>それで何か問題でもあるの？</Em>
+              」と思う方がいらっしゃるかもしれません。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />,
+                <Emoji>🤔</Emoji>,
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              ]}
+            />
+            <P>
+              というわけで、次のページでは、
+              <Em>
+                結果が変わることによってどんな問題が発生するのか、以前紹介した
+                <Strong>弁当箱の暗号</Strong>
+                を用いて解説していきます！
+              </Em>
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>中級はここまで！</>,
+        content: (
+          <>
+            <P>
+              以上で中級編は終わりです。ここまで読んでくださり、ありがとうございます！次から上級編に入ります。
+            </P>
+            <EmojiSeparator emojis={['🎉', '🤗', '🎉']} />
+            <P>最後まで楽しんでいただけると嬉しいです。</P>
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/11.v2.jp.tsx b/src/contents/11.v2.jp.tsx
new file mode 100644
index 000000000..e837887c4
--- /dev/null
+++ b/src/contents/11.v2.jp.tsx
@@ -0,0 +1,399 @@
+import React from 'react'
+import EpisodeCardList from 'src/components/EpisodeCardList'
+import { P, Em, Strong, InlineHeader } from 'src/components/ContentTags'
+import H from 'src/components/H'
+import { InlineEmojiBoxesForQuestion } from 'src/components/InlineEmojiBoxes'
+import YesNoButtons from 'src/components/YesNoButtons'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import Emoji from 'src/components/Emoji'
+import BottomRightBadge from 'src/components/BottomRightBadge'
+import NextLessonButton from 'src/components/NextLessonButton'
+import EmojiWithText from 'src/components/EmojiWithText'
+import EmojiForLetter from 'src/components/EmojiForLetter'
+import EmojiNumber from 'src/components/EmojiNumber'
+import EmojiForLetterWithBottomRightBadgeWrapper from 'src/components/EmojiForLetterWithBottomRightBadgeWrapper'
+import * as R from 'src/components/Runners'
+
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>1を足す弁当箱</>,
+        content: (
+          <>
+            <EmojiSeparator
+              nodes={[
+                <InlineEmojiBoxesForQuestion size="md" />,
+                <Emoji>➕</Emoji>,
+                <EmojiNumber number={1} />
+              ]}
+            />
+            <P>
+              以前紹介した、「
+              <Strong>
+                <InlineEmojiBoxesForQuestion />
+                の暗号に1を足す弁当箱
+              </Strong>
+              」をご覧ください。
+            </P>
+            <R.Xgei />
+            <P>
+              そしてこちらに、暗号が「<Strong>1</Strong>
+              」の弁当箱を用意しました。
+            </P>
+            <R.Slyk />
+            <P>
+              これを
+              <InlineEmojiBoxesForQuestion />
+              に入れて、
+              <H args={{ name: 'fastForward' }} />
+              してみましょう。
+            </P>
+            <R.Eemn />
+            <P>
+              最終的に暗号が「<Strong>2</Strong>」の弁当箱が残りました。
+            </P>
+            <R.Rceu />
+            <P>
+              以前話した通り、「<Strong>1 + 1 = 2</Strong>
+              」が計算できたわけですね。
+            </P>
+            <EmojiSeparator emojis={['1️⃣', '➕', '1️⃣']} />
+            <P>
+              では、ここでまた
+              <H args={{ name: 'yesNoQuiz' }} />
+              をしてみましょう！
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              こちらに別の暗号が「<Strong>1</Strong>」の弁当箱があります。
+            </P>
+            <R.Lrja />
+            <P>
+              これを、先ほどの「
+              <Strong>
+                <InlineEmojiBoxesForQuestion />
+                の暗号に1を足す弁当箱
+              </Strong>
+              」に入れてみます。
+            </P>
+            <R.Bcae />
+            <P>
+              <H args={{ name: 'whatsTheNumberQuestion', number: 2 }} />
+            </P>
+            <YesNoButtons answer="no" />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: false }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: false, sentence: true }} />
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Zuam />
+            <P>
+              最後に残ったのは、
+              <Strong>暗号が「2」の弁当箱ではありません。</Strong>
+              よく似ていますが、違います。
+            </P>
+            <EmojiSeparator emojis={['❌', '2️⃣', '❌']} />
+            <P>
+              なぜなら、
+              <Strong>
+                <EmojiWithText letter="b" />
+                が右下にひとつしかないからです
+              </Strong>
+              。暗号が「2」の場合、
+              <EmojiWithText letter="b" />
+              が右下にふたつありますが、ここではひとつしかありません。
+            </P>
+            <R.Kfcw />
+            <P>
+              <InlineHeader>復習:</InlineHeader>{' '}
+              <Em>
+                暗号が隠されている弁当箱は、必ず以下のようなパターンに沿っています。上の弁当箱は、以下のようなパターンに沿っていません。
+              </Em>
+              上の弁当箱には、右上に
+              <EmojiWithText letter="c" />
+              がふたつありますが、暗号が隠れている弁当箱には、右上に同じ料理がふたつ並ぶことはありません。
+              <Em>だから、そもそも暗号として成り立っていないのです。</Em>
+            </P>
+            <R.Eozk />
+            <P>
+              <InlineHeader>話を戻すと:</InlineHeader> クイズの弁当箱を
+              <H args={{ name: 'play' }} />
+              しても<Strong>1 + 1 = 2</Strong>にならなかったのです。
+            </P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            理由: <EmojiWithText letter="b" />が
+            <BottomRightBadge inline bottomRightBadgeType="callArg" />と
+            <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+            にあるから
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              前回、「
+              <Em>
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />と
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+                に同じ料理があるかどうかで、結果が変わることがある。
+              </Em>
+              」と説明しました。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />,
+                <EmojiForLetter letter="b" />,
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              ]}
+            />
+            <P>
+              「1 + 1 = 2」にならなかった理由は、
+              <Strong>
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />と
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+                に同じ料理(
+                <EmojiWithText letter="b" />
+                )があり、
+              </Strong>
+              これが結果を狂わせてしまったからです。
+            </P>
+            <R.Jxyg />
+            <P>
+              では、
+              <Strong>
+                どうすれば「1 + 1 = 2」を正しく計算できるでしょうか？
+              </Strong>
+            </P>
+            <EmojiSeparator emojis={['❓', '🤔', '❓']} />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            解決策: どちらかの
+            <EmojiWithText letter="b" />
+            を別の料理にする
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              これを解決するには、
+              <BottomRightBadge inline bottomRightBadgeType="callArg" />か
+              <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              のどちらかの
+              <EmojiWithText letter="b" />
+              を別の料理にしないといけません。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetter letter="b" />,
+                <Emoji>➡️</Emoji>,
+                <Emoji>❓</Emoji>
+              ]}
+            />
+            <P>
+              どちらでもいいですが、ここでは
+              <Strong>
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+                の
+                <EmojiWithText letter="b" />
+                を変えることにしましょう。
+              </Strong>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetterWithBottomRightBadgeWrapper bottomRightBadgeType="funcUnbound">
+                  <EmojiForLetter letter="b" />
+                </EmojiForLetterWithBottomRightBadgeWrapper>,
+                <Emoji>➡️</Emoji>,
+                <Emoji>❓</Emoji>
+              ]}
+            />
+            <P>
+              しかし、
+              <Strong>
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+                の
+                <EmojiWithText letter="b" />
+                を変えるなら、
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />の
+                <EmojiWithText letter="b" />
+                も同じく変えないといけません。
+              </Strong>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetterWithBottomRightBadgeWrapper bottomRightBadgeType="funcBound">
+                  <EmojiForLetter letter="b" />
+                </EmojiForLetterWithBottomRightBadgeWrapper>,
+                <Emoji>➡️</Emoji>,
+                <Emoji>❓</Emoji>
+              ]}
+            />
+            <P>
+              でないと、
+              <H args={{ name: 'match' }} />や<H args={{ name: 'unmatch' }} />
+              などのパターンが変わってしまい、 「<Strong>1を足す弁当箱</Strong>
+              」として機能しなくなってしまいます。だから、
+              <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />と
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+              を同時に変えないといけないのです。
+            </P>
+            <R.Oiwu />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <EmojiWithText letter="b" />を<EmojiWithText letter="e" />に
+          </>
+        ),
+        content: (
+          <>
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetter letter="b" />,
+                <Emoji>➡️</Emoji>,
+                <EmojiForLetter letter="e" />
+              ]}
+            />
+            <P>
+              というわけで、
+              <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />と
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />の
+              <Strong>
+                <EmojiWithText letter="b" />を<EmojiWithText letter="e" />
+                に変えてみました。
+              </Strong>
+            </P>
+            <R.Uqpp />
+            <P>
+              <InlineHeader>ちなみに:</InlineHeader>{' '}
+              <Em>
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+                の他の料理と被らなければ、何の料理に変えても構いません。
+              </Em>
+            </P>
+            <P>
+              こうすることで、
+              <BottomRightBadge inline bottomRightBadgeType="callArg" />と
+              <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              が被らなくなりました！
+            </P>
+            <R.Hxmk />
+            <P>
+              このまま最後まで進めてみましょう。
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Rzbq />
+            <P>
+              すると、最後に暗号が「<Strong>2</Strong>」の弁当箱が残りました。「
+              <Strong>1 + 1 = 2</Strong>」が計算できたわけです。
+            </P>
+            <R.Jlet />
+            <P>というわけで、まとめに入りましょう！</P>
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <Strong>
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />と
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+                に同じ料理がある場合は…
+              </Strong>
+            </P>
+            <R.Kqip />
+            <P>
+              <Strong>
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />と
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+                の該当する料理を別の料理に変えることによって、結果が変わってしまうのを避けることができます。
+              </Strong>
+            </P>
+            <R.Tkbr />
+            <P>
+              <InlineHeader>ちなみに:</InlineHeader>{' '}
+              <BottomRightBadge inline bottomRightBadgeType="callArg" />
+              <BottomRightBadge inline bottomRightBadgeType="funcArg" />
+              <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+              の他の料理と被らなければ、何の料理に変えても構いません。
+            </P>
+          </>
+        ),
+        footer: {
+          content: (
+            <>
+              <P>
+                この法則は次のページにある弁当箱から
+                <Strong>自動で発動するので、 暗記する必要はありません。</Strong>
+                なんとなく「
+                <Em>こういう法則があるんだな</Em>
+                」と思ってくだされば大丈夫です。
+              </P>
+            </>
+          )
+        }
+      },
+      {
+        title: <>お疲れ様でした！</>,
+        content: (
+          <>
+            <P>
+              <BottomRightBadge inline bottomRightBadgeType="callArg" />と
+              <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              にまつわる新法則についてはこれで終了です。
+            </P>
+            <EmojiSeparator emojis={['🎉', '🥳', '🎉']} />
+            <P>
+              次のページからは、弁当箱の「<Strong>省略表記</Strong>
+              」について見ていきます。
+            </P>
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/12.v2.jp.tsx b/src/contents/12.v2.jp.tsx
new file mode 100644
index 000000000..c51cca3bc
--- /dev/null
+++ b/src/contents/12.v2.jp.tsx
@@ -0,0 +1,469 @@
+import React from 'react'
+import EpisodeCardList from 'src/components/EpisodeCardList'
+import EmojiNumber from 'src/components/EmojiNumber'
+import { Hr, P, Em, Strong, InlineHeader } from 'src/components/ContentTags'
+import H from 'src/components/H'
+import { InlineEmojiBoxesForQuestion } from 'src/components/InlineEmojiBoxes'
+import YesNoButtons from 'src/components/YesNoButtons'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import Emoji from 'src/components/Emoji'
+import BottomRightBadge from 'src/components/BottomRightBadge'
+import NextLessonButton from 'src/components/NextLessonButton'
+import EmojiWithText from 'src/components/EmojiWithText'
+import EmojiForLetter from 'src/components/EmojiForLetter'
+import TopRightBadge from 'src/components/TopRightBadge'
+import EmojiForLetterWithTopRightBadgeWrapper from 'src/components/EmojiForLetterWithTopRightBadgeWrapper'
+import * as R from 'src/components/Runners'
+
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>複雑な弁当箱</>,
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'episodeWelcomeText' }} />
+              早速、
+              <H args={{ name: 'lookAtThisBentoBox' }} />。
+            </P>
+            <R.Gopk />
+            <P>
+              今まで見たことがないくらい複雑な弁当箱ですね。これは、どんな効果があるのでしょうか？
+            </P>
+            <P>
+              <H args={{ name: 'yesNoQuiz' }} />
+              で検証してみましょう！
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              こちらに、暗号が「<Strong>2</Strong>」の弁当箱を用意しました。
+            </P>
+            <R.Imgp />
+            <P>
+              これを、先ほどの弁当箱の
+              <InlineEmojiBoxesForQuestion />
+              の部分に入れてみます。
+            </P>
+            <R.Lxnu />
+            <P>
+              <H args={{ name: 'whatsTheNumberQuestion', number: 1 }} />
+            </P>
+            <YesNoButtons answer="yes" tooHard />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: true }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: true, sentence: true }} />
+              <H args={{ name: 'pressFastForward', pleaseWait: true }} />
+            </P>
+            <R.Ccon />
+            <P>
+              最後に残ったのは、暗号が「<Strong>1</Strong>」の弁当箱でした。
+            </P>
+            <R.Npfx />
+            <P>
+              もともとの暗号は「<Strong>2</Strong>」だったので、「
+              <Strong>2</Strong>」が「<Strong>1</Strong>」になったわけです。
+            </P>
+            <EmojiSeparator emojis={['2️⃣', '➡️', '1️⃣']} />
+          </>
+        )
+      },
+      {
+        title: <>1を引く弁当箱</>,
+        content: (
+          <>
+            <R.Pnob />
+            <P>
+              つまり、これは
+              <InlineEmojiBoxesForQuestion />
+              の暗号から「<Strong>1を引く</Strong>」弁当箱なのです。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <InlineEmojiBoxesForQuestion size="md" />,
+                <Emoji>➖</Emoji>,
+                <EmojiNumber number={1} />
+              ]}
+            />
+            <P>足し算や掛け算の弁当箱より、かなり複雑ですよね。</P>
+          </>
+        )
+      },
+      {
+        type: 'sideNote',
+        title: (
+          <>
+            <H args={{ name: 'sideNotePrefix' }} />:{' '}
+            <BottomRightBadge inline bottomRightBadgeType="callArg" />と
+            <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+            が必ず同じになる
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <InlineHeader>ちなみに:</InlineHeader> この弁当箱は
+              <H args={{ name: 'fastForward' }} />
+              の途中で、
+              <Strong>
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />と
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+                に必ず同じ料理が登場します。
+              </Strong>
+            </P>
+            <P>
+              先ほどの例で確かめてみましょう。
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Fiab />
+            <P>
+              <Strong>
+                <EmojiWithText letter="e" />が
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />と
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              </Strong>
+              にそれぞれありますね。前回説明した通り、このままだと正しい結果が出ません。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />,
+                <EmojiForLetter letter="e" />,
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              ]}
+            />
+            <P>
+              というわけで、正しい結果を出すために、
+              <Strong>
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+                と
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+                にある
+                <EmojiWithText letter="e" />
+                が、まだ使われていない別の料理(
+                <EmojiWithText letter="a" />
+                )に自動的に変わります。
+              </Strong>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetter letter="e" />,
+                <Emoji>➡️</Emoji>,
+                <EmojiForLetter letter="a" />
+              ]}
+            />
+            <P>
+              実際に確かめてみましょう。
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Plxd />
+            <P>
+              ご覧の通り、
+              <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              と
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+              にある
+              <EmojiWithText letter="e" />
+              が、
+              <EmojiWithText letter="a" />
+              に変わりました。
+            </P>
+            <P>
+              これを行わないと、「<Strong>1を引く</Strong>
+              」弁当箱として機能しません。ここでは詳しく書きませんが、間違った答えが出てしまうのです。
+            </P>
+            <Hr />
+            <P>以上、前回紹介した法則が役に立っているよ、という余談でした。</P>
+          </>
+        )
+      },
+      {
+        title: <>弁当箱を「省略表記」できないか？</>,
+        content: (
+          <>
+            <R.Zaoc />
+            <P>
+              上の弁当箱は、「<Strong>2 - 1</Strong>
+              」を計算できることがわかりましたが、
+              <Em>
+                少し複雑すぎて、ひと目見て何が起きているかわかりにくいですよね。
+              </Em>
+            </P>
+            <EmojiSeparator emojis={['❓', '🤯', '❓']} />
+            <P>
+              <InlineHeader>疑問:</InlineHeader>{' '}
+              <Em>
+                上の弁当箱を何らかの手法で「<Strong>省略表記</Strong>
+                」することで、何が起きているをかわかりやすくする方法はないでしょうか？
+              </Em>
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>暗号の省略表記</>,
+        content: (
+          <>
+            <P>
+              まず、
+              <Em>
+                暗号の弁当箱を<Strong>数字で</Strong>
+                表示してみます
+              </Em>
+              。たとえば、こちらは
+              <Strong>暗号が「2」</Strong>の弁当箱なので、
+            </P>
+            <R.Imgp />
+            <P>このように数字で表示してみます。</P>
+            <R.Xekr />
+            <P>
+              数字で省略表記することで、ひと目見て何のことか分かりやすくなりました。
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>「1を引く」の省略表記</>,
+        content: (
+          <>
+            <P>
+              <EmojiNumber number={2} />
+              の弁当箱を、先ほどの「<Strong>1を引く</Strong>
+              」弁当箱に入れてみました。
+            </P>
+            <R.Uqts />
+            <P>
+              今度は、「<Strong>1を引く</Strong>」部分も省略してみましょう。
+            </P>
+            <P>
+              <Strong>
+                <TopRightBadge topRightBadgeType="pred" inline />
+                の記号を
+                <EmojiNumber number={2} />
+                の右上に表示
+              </Strong>
+              することによって、2から「<Strong>1を引く</Strong>
+              」ことを省略表記してみます。
+            </P>
+            <R.Ojma />
+            <P>
+              これを
+              <H args={{ name: 'play' }} />
+              すると、
+              <EmojiNumber number={2} />が<EmojiNumber number={1} />
+              になります。
+            </P>
+            <R.Yykk />
+            <P>このように省略表記することで、だいぶ分かりやすくなりました。</P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetterWithTopRightBadgeWrapper topRightBadgeType="pred">
+                  <EmojiNumber number={2} />
+                </EmojiForLetterWithTopRightBadgeWrapper>,
+                <Emoji>➡️</Emoji>,
+                <EmojiNumber number={1} />
+              ]}
+            />
+            <P>
+              次は、
+              <H args={{ name: 'yesNoQuiz' }} />
+              をしながら、これを実際に役立ててみましょう！
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'lookAtThisBentoBox' }} />:
+            </P>
+            <R.Exww />
+            <P>
+              <H args={{ name: 'whatsTheNumberQuestion', number: 0 }} />
+            </P>
+            <YesNoButtons answer="yes" tooHard />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: true }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: true, sentence: true }} />
+              最終的に暗号は
+              <EmojiNumber number={0} />
+              になります。
+            </P>
+            <EmojiSeparator emojis={['1️⃣', '➡️', '0️⃣']} />
+            <P>
+              <H args={{ name: 'fastForward' }} />
+              する前に、先ほどの弁当箱を省略表記してみましょう。
+            </P>
+            <P>
+              まず、上の部分は「<Strong>1</Strong>」の暗号の弁当箱なので、
+            </P>
+            <R.Qgun />
+            <P>
+              <EmojiNumber number={1} />
+              と省略表記します。
+            </P>
+            <R.Yvia />
+            <P>
+              次に、こちらに
+              <Strong>
+                <EmojiWithText letter="i" />
+              </Strong>
+              と、
+            </P>
+            <R.Qifg />
+            <P>
+              <EmojiWithText letter="i" />
+              の下に「
+              <Strong>1を引く弁当箱</Strong>
+              」があります。
+            </P>
+            <R.Tboe />
+            <P>
+              この場合、「1を引く弁当箱」が
+              <Strong>
+                <EmojiWithText letter="i" />
+                の真下にある
+              </Strong>
+              ので、「
+              <Strong>
+                <EmojiWithText letter="i" />
+                に入る暗号から1を引く
+              </Strong>
+              」ということになります。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetterWithTopRightBadgeWrapper topRightBadgeType="pred">
+                  <EmojiForLetter letter="i" />
+                </EmojiForLetterWithTopRightBadgeWrapper>
+              ]}
+            />
+            <P>つまり、右下の部分が、</P>
+            <R.Ssns />
+            <P>省略表記されてこうなります:</P>
+            <R.Ufyc />
+            <P>
+              ここまでくると、どうなるかわかりやすいですね。
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Pbgd />
+            <P>
+              つまり、「<Strong>1 - 1</Strong>
+              」の計算が行われるので、最終的に暗号は
+              <EmojiNumber number={0} />
+              になります。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetterWithTopRightBadgeWrapper topRightBadgeType="pred">
+                  <EmojiNumber number={1} />
+                </EmojiForLetterWithTopRightBadgeWrapper>,
+                <Emoji>➡️</Emoji>,
+                <EmojiNumber number={0} />
+              ]}
+            />
+            <P>
+              もともとの弁当箱は複雑でしたが、
+              <Strong>
+                省略表記をすることで、何が起きているかがひと目で分かるようになった
+              </Strong>
+              、という例でした。
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              今回の内容を短くまとめておきましょう。まず、こちらは
+              <InlineEmojiBoxesForQuestion />
+              から「<Strong>1を引く</Strong>」弁当箱です。
+            </P>
+            <R.Pnob />
+            <P>
+              なかなか複雑なので、省略表記をすると何が起きてるか分かりやすくなります。たとえば
+              <Strong>
+                <EmojiNumber number={2} />
+                から1を引く弁当箱
+              </Strong>
+              は、以下のように省略表記できます:
+            </P>
+            <R.Ojma />
+            <P>
+              これを実行すると、
+              <EmojiNumber number={1} />
+              になります。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetterWithTopRightBadgeWrapper topRightBadgeType="pred">
+                  <EmojiNumber number={2} />
+                </EmojiForLetterWithTopRightBadgeWrapper>,
+                <Emoji>➡️</Emoji>,
+                <EmojiNumber number={1} />
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>以前紹介した弁当箱も省略表記してみます</>,
+        content: (
+          <>
+            <EmojiSeparator emojis={['✖️', '🥴', '↕️']} />
+            <P>
+              お疲れ様でした！次のページでは、以前紹介した
+              <Strong>掛け算の弁当箱</Strong>と<Strong>条件分岐の弁当箱</Strong>
+              を省略表記していきます。
+            </P>
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/13.v2.jp.tsx b/src/contents/13.v2.jp.tsx
new file mode 100644
index 000000000..2e579bfff
--- /dev/null
+++ b/src/contents/13.v2.jp.tsx
@@ -0,0 +1,505 @@
+import React from 'react'
+import EpisodeCardList from 'src/components/EpisodeCardList'
+import YesNoButtons from 'src/components/YesNoButtons'
+import EmojiNumber from 'src/components/EmojiNumber'
+import NextLessonButton from 'src/components/NextLessonButton'
+import BottomRightBadge from 'src/components/BottomRightBadge'
+import {
+  Em,
+  InlineHeader,
+  P,
+  Strong,
+  Ul,
+  UlLi
+} from 'src/components/ContentTags'
+import H from 'src/components/H'
+import EmojiWithText from 'src/components/EmojiWithText'
+import Emoji from 'src/components/Emoji'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import {
+  InlineEmojiBoxesForCondition,
+  InlineEmojiBoxesForQuestion
+} from 'src/components/InlineEmojiBoxes'
+import { magicalVariableName } from 'src/lib/specialVariableNames'
+import TopRightBadge from 'src/components/TopRightBadge'
+import EmojiForLetter from 'src/components/EmojiForLetter'
+import * as R from 'src/components/Runners'
+
+const ConditionSummary = () => (
+  <>
+    <Ul>
+      <UlLi>
+        まず、
+        <InlineEmojiBoxesForCondition type="condition" />{' '}
+        (真ん中、黄色い左枠)の中にある
+        <InlineEmojiBoxesForQuestion />
+        の暗号が「0」かどうかチェックします。
+      </UlLi>
+      <UlLi>
+        もし「<Strong>0</Strong>」なら、{' '}
+        <InlineEmojiBoxesForCondition type="trueCase" />{' '}
+        (一番下、青い左枠)に入っている料理が残ります。この場合は
+        <EmojiWithText letter="y" />
+        です。
+      </UlLi>
+      <UlLi>
+        もし「<Strong>1以上</Strong>なら」、{' '}
+        <InlineEmojiBoxesForCondition type="falseCase" />{' '}
+        (一番上、赤い左枠)に入っている料理が残ります。この場合は
+        <EmojiWithText letter="z" />
+        です。
+      </UlLi>
+    </Ul>
+  </>
+)
+
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>掛け算の弁当箱</>,
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'episodeWelcomeText' }} />
+              今回はまず、中級で紹介した「<Strong>掛け算の弁当箱</Strong>
+              」を省略表記していきます。
+            </P>
+            <EmojiSeparator emojis={['✖️', '🍱', '✖️']} />
+            <P>
+              下にあるのが「<Strong>掛け算の弁当箱</Strong>
+              」です。
+              <InlineEmojiBoxesForQuestion />
+              にそれぞれ暗号を入れて
+              <H args={{ name: 'play' }} />
+              すると、そのふたつの暗号を掛け算してくれます。
+            </P>
+            <R.Drvu />
+            <P>では、さっそく省略表記してみましょう！</P>
+          </>
+        )
+      },
+      {
+        title: <>掛け算の省略表記</>,
+        content: (
+          <>
+            <P>
+              先ほどの掛け算の弁当箱の下の部分を、<Emoji>✖️</Emoji>
+              の記号に入れ替えてみると、以下のようになります:
+            </P>
+            <R.Lyod />
+            <P>
+              このままでもいいですが、
+              <Em>
+                せっかく省略表記をするのであれば、もう少しひと目見て分かりやすくしたいところです。
+              </Em>
+            </P>
+            <EmojiSeparator emojis={['✖️', '🤔', '✖️']} />
+            <P>
+              では、
+              <Strong>
+                次のように<Emoji>✖️</Emoji>
+                の記号を真ん中に配置してみたらどうでしょう？
+              </Strong>
+              こちらのほうが、ひと目見て「掛け算だ」と分かりやすいですよね。
+            </P>
+            <R.Imba />
+            <P>
+              <Strong>
+                あくまで省略表記なので、<Emoji>✖️</Emoji>
+                の印をどこに配置しようが意味は変わりません。
+              </Strong>
+              それなら、ひと目見たときに分かりやすい方を優先したほうが良いのです。というわけで、こちらの案(
+              <Emoji>✖️</Emoji>が真ん中)を採用したいと思います。
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>掛け算の省略表記の実践</>,
+        content: (
+          <>
+            <P>
+              さっそく省略表記を使ってみましょう。こちらの弁当箱をご覧ください:
+            </P>
+            <R.Pzwe />
+            <P>解説すると、</P>
+            <Ul>
+              <UlLi>
+                一番上の部分は、
+                <Em>
+                  暗号が「<Strong>2</Strong>」の弁当箱
+                </Em>{' '}
+                (右下に
+                <EmojiWithText letter="e" />
+                がふたつ)
+              </UlLi>
+              <UlLi>
+                真ん中の部分は、
+                <Em>
+                  暗号が「<Strong>3</Strong>」の弁当箱
+                </Em>{' '}
+                (右下に
+                <EmojiWithText letter="g" />
+                が3つ)
+              </UlLi>
+              <UlLi>
+                一番下の部分は、<Em>掛け算の弁当箱</Em>
+              </UlLi>
+            </Ul>
+            <P>というわけで、「2 ✕ 3」を計算する弁当箱ですね。</P>
+            <EmojiSeparator emojis={['2️⃣', '✖️', '3️⃣']} />
+            <P>
+              省略表記すると下のようになります。 早速、
+              <H args={{ name: 'pressPlay' }} />
+            </P>
+            <R.Zifr />
+            <P>
+              というわけで、最終的に暗号は「<Strong>6</Strong>
+              」になります。掛け算の省略表記については以上です！
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              というわけで、こちらが
+              <InlineEmojiBoxesForQuestion /> <Emoji>✖️</Emoji>{' '}
+              <InlineEmojiBoxesForQuestion />
+              を計算する弁当箱の省略表記です。
+            </P>
+            <R.Imba />
+          </>
+        )
+      },
+      {
+        title: <>条件分岐の弁当箱</>,
+        content: (
+          <>
+            <P>
+              続いて、以前紹介した「
+              <Strong>条件分岐の弁当箱</Strong>
+              」を省略表記していきます。まずは、復習から:
+            </P>
+            <R.Nlxe />
+            <H args={{ name: 'isZeroReview' }} />
+          </>
+        )
+      },
+      {
+        title: <>条件分岐の省略表記</>,
+        content: (
+          <>
+            <P>では、この条件分岐の弁当箱を、</P>
+            <R.Nlxe />
+            <P>次のように省略表記してみましょう:</P>
+            <R.Hvdn />
+            <ConditionSummary />
+            <EmojiSeparator emojis={['0️⃣', '🚦', '🔢']} />
+            <P>
+              <InlineHeader>赤</InlineHeader>・<InlineHeader>黄色</InlineHeader>
+              ・<InlineHeader>青</InlineHeader>
+              と、まるで縦型の信号機 <Emoji>🚦</Emoji> みたいですね。
+            </P>
+          </>
+        ),
+        footer: {
+          content: (
+            <>
+              <P>
+                <InlineHeader>補足:</InlineHeader>{' '}
+                <Em>
+                  省略前と違う点としては、
+                  <InlineEmojiBoxesForQuestion />
+                  が一番下から真ん中に移動した点です。
+                </Em>
+              </P>
+              <P>
+                掛け算の省略表記のときにも話しましたが、
+                <Em>
+                  あくまで省略表記である限り、
+                  <InlineEmojiBoxesForQuestion />
+                  をどこに配置しようが意味は変わりません。{' '}
+                </Em>
+                ここでは、
+                <InlineEmojiBoxesForQuestion />
+                を真ん中に配置にしたほうが、ひと目見て分かりやすいと判断しました。
+              </P>
+            </>
+          )
+        }
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              では、試しに
+              <H args={{ name: 'yesNoQuiz' }} />
+              を行ってみましょう！
+              <H args={{ name: 'lookAtThisBentoBox' }} />:
+            </P>
+            <R.Vxnm />
+            <P>
+              <H args={{ name: 'whatsTheNumberQuestion', number: 4 }} />
+            </P>
+            <YesNoButtons answer="no" />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: false }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: false, sentence: true }} />
+              暗号は「<Strong>4</Strong>」ではなく、「<Strong>2</Strong>
+              」になります。
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Xefx />
+            <P>
+              手短に解説します。まず、
+              <InlineEmojiBoxesForCondition type="condition" />{' '}
+              の中にある暗号が「0」かどうかチェックします。
+            </P>
+            <R.Wcsz />
+            <P>
+              <InlineEmojiBoxesForCondition type="condition" /> の暗号は{' '}
+              <EmojiNumber number={3} /> なので、「1以上」の方、つまり上の{' '}
+              <InlineEmojiBoxesForCondition type="falseCase" /> が残ります。
+            </P>
+            <R.Psqo />
+            <P>
+              というわけで、最後は <EmojiNumber number={2} /> だけになります。
+            </P>
+            <R.Xsby />
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              次に進む前に、理解を確実にするためにもう一問やってみましょう。
+              <H args={{ name: 'lookAtThisBentoBox' }} />:
+            </P>
+            <R.Repd />
+            <P>
+              <H args={{ name: 'whatsTheNumberQuestion', number: 1 }} />
+            </P>
+            <YesNoButtons answer="no" />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: false, sentence: true }} />
+              暗号は「<Strong>1</Strong>」ではなく、「<Strong>2</Strong>
+              」になります。
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Cnoq />
+            <P>
+              今回も手短に解説します。まず、
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />の
+              <EmojiWithText letter="a" />が<EmojiNumber number={0} />
+              に変わります。
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Dwnj />
+            <P>
+              ここで、
+              <InlineEmojiBoxesForCondition type="condition" />{' '}
+              の中にある暗号が「0」かどうかチェックします。
+            </P>
+            <R.Guuf />
+            <P>
+              <InlineEmojiBoxesForCondition type="condition" /> の暗号は{' '}
+              <EmojiNumber number={0} /> なので、下の{' '}
+              <InlineEmojiBoxesForCondition type="trueCase" /> が残ります。
+            </P>
+            <R.Lrrr />
+            <P>
+              そして、最後に
+              <EmojiNumber number={2} />
+              が残ります。
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Dpar />
+          </>
+        )
+      },
+      {
+        title: <>あくまで「省略表記」です</>,
+        content: (
+          <>
+            <P>
+              忘れないでおきたいのが、
+              <Em>これらはあくまで「省略表記」だということです</Em>。
+              <Strong>
+                省略表記は「今まであった機能」をひと目で分かりやすいようにしているだけです。
+              </Strong>
+            </P>
+            <EmojiSeparator emojis={['0️⃣', '↔️', '🔢']} />
+            <P>
+              たとえば、先ほどの
+              <H args={{ name: 'yesNoQuiz' }} />
+              で出題したこちらの弁当箱は、
+            </P>
+            <R.Repd />
+            <P>
+              <InlineHeader>
+                条件分岐の省略表記を使わないと、次のようになります
+              </InlineHeader>
+              <Em>(黄色の部分):</Em>
+            </P>
+            <R.Ylil />
+            <P>
+              さらに、
+              <InlineHeader>
+                暗号の省略表記を使わないと、次のようになります
+              </InlineHeader>
+              <Em>(黄色の部分):</Em>
+            </P>
+            <R.Vqcw />
+            <P>
+              結果は同じになるでしょうか？
+              <H args={{ name: 'pressFastForward' }} />:
+            </P>
+            <R.Dcfi />
+            <P>
+              結果、暗号は「<Strong>2</Strong>」になりました。
+            </P>
+            <R.Bmnc />
+            <P>
+              先ほどの
+              <H args={{ name: 'yesNoQuiz' }} />
+              でも、結果は
+              <EmojiNumber number={2} />
+              になったので、
+              <Strong>
+                省略表記をした場合もしない場合も、同じ暗号の結果になる
+              </Strong>
+              ということがお分かりいただけたでしょうか。
+            </P>
+            <R.Ufze />
+            <P>
+              繰り返しますが、
+              <Strong>
+                省略表記は「今まであった機能」をひと目で分かりやすいようにしているだけです。
+              </Strong>
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              まとめると、こちらが、
+              <InlineEmojiBoxesForQuestion />が<EmojiNumber number={0} />
+              なら
+              <EmojiWithText letter="y" />、<EmojiNumber number={1} />
+              以上なら
+              <EmojiWithText letter="z" />
+              になる弁当箱の省略表記です。
+            </P>
+            <R.Hvdn />
+            <ConditionSummary />
+          </>
+        )
+      },
+      {
+        title: <>ところで: なぜ省略表記について語ったの？</>,
+        content: (
+          <>
+            <P>
+              前回と今回で、「<Strong>1を引く弁当箱</Strong>」「
+              <Strong>掛け算の弁当箱</Strong>」「
+              <Strong>条件分岐の弁当箱</Strong>
+              」の省略表記について語りました。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <TopRightBadge inline topRightBadgeType="pred" />,
+                <Emoji>✖️</Emoji>,
+                <Emoji>↕️</Emoji>
+              ]}
+            />
+            <P>省略表記について説明した理由は、以下の通りです:</P>
+            <Ul>
+              <UlLi>
+                次のページから、「<Em>1を引く弁当箱</Em>」「
+                <Em>掛け算の弁当箱</Em>」「
+                <Em>条件分岐の弁当箱</Em>
+                」を全部使って、
+                <Strong>今までで最も複雑な計算</Strong>を行います。
+              </UlLi>
+              <UlLi>
+                とても複雑なので、それぞれの弁当箱を省略表記することで、
+                <Strong>何が起きているかを少しでも分かりやすくしたい</Strong>
+                、というわけです。
+              </UlLi>
+            </Ul>
+          </>
+        )
+      },
+      {
+        title: <>上級も残り2ページ！</>,
+        content: (
+          <>
+            <P>
+              お疲れ様でした！上級も残り2ページです。次のページでは、「
+              <Strong>弁当箱の魔女</Strong>」が登場します。お楽しみに！
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetter letter={magicalVariableName} />,
+                <Emoji>🧙‍♀️</Emoji>,
+                <EmojiForLetter letter={magicalVariableName} />
+              ]}
+            />
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/14.v2.jp.tsx b/src/contents/14.v2.jp.tsx
new file mode 100644
index 000000000..cb72a4a76
--- /dev/null
+++ b/src/contents/14.v2.jp.tsx
@@ -0,0 +1,736 @@
+import React from 'react'
+import EpisodeCardList from 'src/components/EpisodeCardList'
+import EmojiNumber from 'src/components/EmojiNumber'
+import {
+  Ul,
+  UlLi,
+  P,
+  Strong,
+  Ol,
+  OlLi,
+  Em,
+  Hr
+} from 'src/components/ContentTags'
+import H from 'src/components/H'
+import {
+  InlineEmojiBoxesForQuestion,
+  InlineEmojiBoxesForCondition
+} from 'src/components/InlineEmojiBoxes'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import TopRightBadge from 'src/components/TopRightBadge'
+import Emoji from 'src/components/Emoji'
+import EmojiWithText from 'src/components/EmojiWithText'
+import EmojiForLetter from 'src/components/EmojiForLetter'
+import EmojiForLetterWithTopRightBadgeWrapper from 'src/components/EmojiForLetterWithTopRightBadgeWrapper'
+import { magicalVariableName } from 'src/lib/specialVariableNames'
+import YesNoButtons from 'src/components/YesNoButtons'
+import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
+import NextLessonButton from 'src/components/NextLessonButton'
+import * as R from 'src/components/Runners'
+
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>複雑な計算</>,
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'episodeWelcomeText' }} />
+              今回は、弁当箱を使った<Strong>複雑な計算</Strong>
+              にチャレンジしていきます。まずは下の式をご覧下さい。
+            </P>
+            <EmojiSeparator size="sm" emojis={['3️⃣', '✖️', '2️⃣', '✖️', '1️⃣']} />
+            <P>上の式は、</P>
+            <Ul>
+              <UlLi>
+                <Strong>「3」からはじめて、</Strong>
+              </UlLi>
+              <UlLi>
+                <Strong>どんどん「1」を引いた数を掛け算していき、</Strong>
+              </UlLi>
+              <UlLi>
+                <Strong>最後に「1」を掛けるまで繰り返す</Strong>
+              </UlLi>
+            </Ul>
+            <P>
+              という計算です。(ちなみに、<Em>3 ✕ 2 ✕ 1 = 6</Em>です。)
+            </P>
+            <P>
+              これを、たとえば「<Strong>4</Strong>
+              」からはじめた場合は以下の通りになり、
+            </P>
+            <EmojiSeparator
+              size="sm"
+              emojis={['4️⃣', '✖️', '3️⃣', '✖️', '2️⃣', '✖️', '1️⃣']}
+              description={
+                <>
+                  ちなみに、答えは「<Strong>24</Strong>」になります
+                </>
+              }
+            />
+            <P>
+              「<Strong>5</Strong>
+              」からはじめた場合は以下の通りになります。
+            </P>
+            <EmojiSeparator
+              size="sm"
+              emojis={['5️⃣', '✖️', '4️⃣', '✖️', '3️⃣', '✖️', '2️⃣', '✖️', '1️⃣']}
+              description={
+                <>
+                  ちなみに、答えは「<Strong>120</Strong>」になります
+                </>
+              }
+            />
+            <P>
+              このように、
+              <H args={{ name: 'factorialDefinition' }} />
+              という計算を、数学用語で「<Strong>階乗</Strong>
+              」と呼びます。(豆知識なので、覚えなくても大丈夫です。)
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>弁当箱で計算できる？</>,
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'question' }} />
+              では、
+              <Strong>
+                こういった計算を、弁当箱を使って行うことができるでしょうか？
+              </Strong>
+            </P>
+            <P>
+              たとえば、
+              <Em>
+                下の弁当箱の
+                <InlineEmojiBoxesForQuestion />
+                に何を入れたら、「<Strong>3 ✕ 2 ✕ 1</Strong>
+                」を計算できるでしょう？
+              </Em>
+            </P>
+            <R.Rreb />
+            <P>
+              また、「<Strong>4 ✕ 3 ✕ 2 ✕ 1</Strong>」「
+              <Strong>5 ✕ 4 ✕ 3 ✕ 2 ✕ 1</Strong>」も計算できるでしょうか？
+            </P>
+            <R.Kqzn />
+            <R.Aimh />
+            <P>今回は、こういった計算ができるかどうか検証していきます！</P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            弁当箱の
+            <H args={{ name: 'witch' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              はじめに、「
+              <Strong>
+                弁当箱の
+                <H args={{ name: 'witch' }} />
+              </Strong>
+              」という「<Em>架空の</Em>」機能を紹介します。
+            </P>
+            <EmojiSeparator emojis={['✨', '🧙‍♀️', '✨']} />
+            <P>
+              なぜ「<Em>架空の</Em>」機能かというと、これは
+              <Strong>実際には弁当箱に備わっていない機能だから</Strong>です。
+            </P>
+            <P>
+              しかし、
+              <Strong>もし仮にこの機能を使うことができるとしたら</Strong>
+              、先ほどの
+            </P>
+            <EmojiSeparator size="sm" emojis={['3️⃣', '✖️', '2️⃣', '✖️', '1️⃣']} />
+            <P>といった計算をカンタンに行うことができます。だから、</P>
+            <Ol>
+              <OlLi>
+                <Em>まずは、この架空の機能を使って上の計算を行い</Em>
+                (カンタン)、
+              </OlLi>
+              <OlLi>
+                <Em>その後、この架空の機能を使わずに上の計算を行う</Em>(複雑)
+              </OlLi>
+            </Ol>
+            <P>
+              といった順番で説明していきます。この順番で説明したほうが、分かりやすいかなと判断した次第です。
+              <Strong>とりあえず、読み進めてみてください！</Strong>
+            </P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            弁当箱の
+            <H args={{ name: 'witch' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              前置きはこれくらいにして、「
+              <Strong>
+                弁当箱の
+                <H args={{ name: 'witch' }} />
+              </Strong>
+              」がどんな機能か説明しましょう。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetter letter={magicalVariableName} />,
+                <Emoji>🧙‍♀️</Emoji>,
+                <EmojiForLetter letter={magicalVariableName} />
+              ]}
+            />
+            <P>
+              次の弁当箱は、下に
+              <H args={{ name: 'witch' }} />
+              が、上に
+              <EmojiNumber number={3} />
+              が入っています。
+            </P>
+            <R.Zxux />
+            <P>
+              これを進めると、下の
+              <H args={{ name: 'witch' }} />
+              の部分が次のように変化します。
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Itzl />
+            <P>ポイントは次の3点です:</P>
+            <Ul>
+              <UlLi>
+                先ほどのように、弁当箱の下側に
+                <H args={{ name: 'witch' }} />
+                がある場合、必ずこのように変化します。
+              </UlLi>
+              <UlLi>
+                上の
+                <EmojiNumber number={3} />
+                には何も起きません。
+              </UlLi>
+              <UlLi>
+                変化後の弁当箱には
+                <EmojiWithText letter={magicalVariableName} />や
+                <EmojiNumber number={1} />
+                があるのに加え、
+                <Strong>
+                  <H args={{ name: 'witch' }} />
+                  がまた登場しているのに注目です
+                </Strong>
+                (黄色の部分)。
+              </UlLi>
+            </Ul>
+            <R.Gtnr />
+            <P>
+              <Strong>この変化の法則がまるで魔法のよう</Strong>なので、弁当箱の
+              <H args={{ name: 'witch' }} />
+              と名付けた次第です。特に深い意味はありません。
+            </P>
+            <EmojiSeparator emojis={['✨', '🧙‍♀️', '✨']} />
+            <P>
+              <Strong>重要: この変化の法則を覚える必要はありません！</Strong>
+              とりあえず読み進めてみてください。
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>先に進めてみる</>,
+        content: (
+          <>
+            <P>
+              先に進めてみましょう。
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Syfp />
+            <P>
+              ご覧の通り、
+              <EmojiWithText letter={magicalVariableName} />
+              が、上にあった
+              <EmojiNumber number={3} />
+              に変わりました。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetter letter={magicalVariableName} />,
+                <Emoji>➡️</Emoji>,
+                <EmojiNumber number={3} />
+              ]}
+            />
+            <P>
+              続きを見てみましょう。
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Wdol />
+            <P>
+              ご覧の通り、
+              <TopRightBadge inline topRightBadgeType="pred" />
+              がついている
+              <EmojiNumber number={3} />
+              は、
+              <EmojiNumber number={2} />
+              になりました。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetterWithTopRightBadgeWrapper topRightBadgeType="pred">
+                  <EmojiNumber number={3} />
+                </EmojiForLetterWithTopRightBadgeWrapper>,
+                <Emoji>➡️</Emoji>,
+                <EmojiNumber number={2} />
+              ]}
+            />
+            <P>
+              続きを見てみましょう。
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Luir />
+            <P>
+              ご覧の通り、条件分岐の弁当箱で、
+              <InlineEmojiBoxesForCondition type="condition" /> の中にある暗号が
+              <EmojiNumber number={2} />
+              だったため、上にある{' '}
+              <InlineEmojiBoxesForCondition type="falseCase" /> が残りました。
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>ここまでの振り返り</>,
+        type: 'summary',
+        content: (
+          <>
+            <P>まだ途中ですが、ここまでを振り返ると、</P>
+            <Ul>
+              <UlLi>
+                <Em>
+                  一番上の数字が
+                  <EmojiNumber number={3} />
+                  から
+                  <EmojiNumber number={2} />
+                  になり、(黄色の部分)
+                </Em>
+              </UlLi>
+              <UlLi>
+                <Em highlightType="blue">
+                  <H args={{ name: 'witch' }} />
+                  の下に<Emoji>✖️</Emoji>
+                  <EmojiNumber number={3} />
+                  が追加されました。(青色の部分)
+                </Em>
+              </UlLi>
+            </Ul>
+            <R.Zxux />
+            <ExpressionRunnerSeparator />
+            <R.Ifxr />
+            <P>
+              ちなみに前回説明した通り、
+              <Strong>
+                <Emoji>✖️</Emoji>は掛け算の省略表記
+              </Strong>
+              です。
+            </P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <EmojiNumber number={2} />
+            から
+            <EmojiNumber number={1} />へ
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              さらに続きを見てみましょう。
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Vkpm />
+            <P>
+              またしても、
+              <Em>
+                <H args={{ name: 'witch' }} />
+                の部分が前回と同じように変化しました。
+              </Em>
+              その後どうなるのか、
+              <Em>
+                <H args={{ name: 'fastForward' }} />
+                して見てみましょう！
+              </Em>
+            </P>
+            <R.Mihy />
+            <P>
+              <Em>
+                一番上の数字が
+                <EmojiNumber number={2} />
+                から
+                <EmojiNumber number={1} />
+                になり、
+              </Em>
+              <Em highlightType="blue">
+                <H args={{ name: 'witch' }} />
+                の下に<Emoji>✖️</Emoji>
+                <EmojiNumber number={2} />
+                が追加されました。
+              </Em>
+            </P>
+            <R.Dxum />
+            <ExpressionRunnerSeparator />
+            <R.Davn />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'witch' }} />
+            が消える
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              さらに続きを見てみましょう。
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Qltx />
+            <P>
+              以前と同じく、
+              <H args={{ name: 'witch' }} />
+              が変化しました。続いて、
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Zvet />
+            <P>
+              ここで、条件分岐の
+              <Strong>
+                <InlineEmojiBoxesForCondition type="condition" />{' '}
+                の中にある暗号が
+                <EmojiNumber number={0} />
+                になりました。
+              </Strong>
+            </P>
+            <R.Yvty />
+            <P>
+              ということは、条件分岐が行われた後に、
+              <Strong>
+                下側の
+                <InlineEmojiBoxesForCondition type="trueCase" />
+                に入っている
+                <EmojiNumber number={1} />
+                が残ります。
+              </Strong>
+            </P>
+            <R.Umce />
+            <P>
+              すると、
+              <Strong>
+                <H args={{ name: 'witch' }} />
+                が消え
+              </Strong>
+              、<Strong>残ったのは掛け算の省略表記</Strong>だけになりました。
+              <H args={{ name: 'pressPlay' }} />
+            </P>
+            <R.Orhx />
+            <P>
+              つまり、これで <H args={{ name: 'inlineFactorial', start: 3 }} />
+              の計算ができたわけです！
+            </P>
+            <EmojiSeparator emojis={['🎉', '🤗', '🎉']} />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <Strong>
+                つまり、
+                <EmojiNumber number={3} />と<H args={{ name: 'witch' }} />
+                が入っている弁当箱を
+                <H args={{ name: 'fastForward' }} />
+                すると、
+              </Strong>
+            </P>
+            <R.Zxux />
+            <P>
+              途中で、下から上に{' '}
+              <H args={{ name: 'inlineFactorial', start: 3 }} />{' '}
+              という順番になり、
+            </P>
+            <R.Wqdb />
+            <P>
+              最終的に、
+              <H args={{ name: 'factorialComputation', start: 3 }} />
+              になります。
+            </P>
+            <R.Xtjt />
+            <Hr />
+            <P>
+              下の
+              <H args={{ name: 'fastForward' }} />
+              を押すと、最初から最後まで超特急で見ることができます。
+            </P>
+            <R.Mnfh />
+            <P>
+              それでは、ここで
+              <H args={{ name: 'yesNoQuiz' }} />
+              をしてみましょう！
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              今度は、上に
+              <EmojiNumber number={4} />
+              があります。
+            </P>
+            <R.Yklt />
+            <P>
+              <H args={{ name: 'whatHappensInTheMiddleQuestion' }} />
+            </P>
+            <R.Fsmk />
+            <YesNoButtons answer="yes" tooHard />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: true }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: true, sentence: true }} />
+              <H args={{ name: 'pressFastForward', pleaseWait: true }} />
+            </P>
+            <R.Peoq />
+            <P>
+              というわけで、途中で下から上に
+              <H args={{ name: 'inlineFactorial', start: 4 }} />
+              という順番になります。
+            </P>
+            <P>
+              では、最後まで見てみましょう。
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Nfkp />
+            <P>
+              というわけで、最終的に
+              <H args={{ name: 'factorialComputation', start: 4 }} />
+              になります。
+            </P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <EmojiNumber number={5} />
+            からはじめた場合
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              時間の都合上省略しますが、
+              <EmojiNumber number={5} />
+              からはじめる場合も、途中で下から
+              <H args={{ name: 'inlineFactorial', start: 5 }} />
+              という順番になります。
+            </P>
+            <R.Fora />
+            <ExpressionRunnerSeparator />
+            <R.Eobj />
+            <ExpressionRunnerSeparator />
+            <R.Osqg />
+            <P>
+              そして、最終的に
+              <H args={{ name: 'factorialComputation', start: 5 }} />
+              になります。
+            </P>
+            <P>それでは、まとめに入りましょう！</P>
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            <H args={{ name: 'witch' }} />
+            のまとめ
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              「
+              <Strong>
+                弁当箱の
+                <H args={{ name: 'witch' }} />
+              </Strong>
+              」を使うと、
+              <H args={{ name: 'factorialDefinition' }} />
+              という計算を行うことができます。
+            </P>
+            <R.Vrwt />
+            <ExpressionRunnerSeparator />
+            <EmojiSeparator
+              size="sm"
+              emojis={['3️⃣', '✖️', '2️⃣', '✖️', '1️⃣']}
+              description={
+                <>
+                  ちなみに、答えは「<Strong>6</Strong>」になります
+                </>
+              }
+            />
+            <R.Lodr />
+            <ExpressionRunnerSeparator />
+            <EmojiSeparator
+              size="sm"
+              emojis={['4️⃣', '✖️', '3️⃣', '✖️', '2️⃣', '✖️', '1️⃣']}
+              description={
+                <>
+                  ちなみに、答えは「<Strong>24</Strong>」になります
+                </>
+              }
+            />
+            <R.Fjyk />
+            <ExpressionRunnerSeparator />
+            <EmojiSeparator
+              size="sm"
+              emojis={['5️⃣', '✖️', '4️⃣', '✖️', '3️⃣', '✖️', '2️⃣', '✖️', '1️⃣']}
+              description={
+                <>
+                  ちなみに、答えは「<Strong>120</Strong>」になります
+                </>
+              }
+            />
+            <P>上側にどんな暗号を入れても、</P>
+            <R.Miez />
+            <P>途中で以下のような形になるのがポイントです。</P>
+            <R.Fapu />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'witch' }} />
+            を使わずにできるか？
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              復習になりますが、「
+              <Strong>
+                弁当箱の
+                <H args={{ name: 'witch' }} />
+              </Strong>
+              」は、
+              <H args={{ name: 'witch' }} />
+              の部分が次のように変化する機能です。この変化が、先ほどの計算を可能にしているわけです。
+            </P>
+            <R.Xjae />
+            <ExpressionRunnerSeparator />
+            <R.Xsve />
+            <P>
+              しかし、冒頭でも書いた通り、「
+              <Strong>
+                弁当箱の
+                <H args={{ name: 'witch' }} />
+              </Strong>
+              」は<Strong>架空の機能</Strong>
+              で、実際には弁当箱に備わっていない機能です。
+            </P>
+            <EmojiSeparator emojis={['❌', '🧙‍♀️', '❌']} />
+            <P>
+              繰り返しますが、「
+              <Em>
+                もし仮に
+                <H args={{ name: 'witch' }} />
+                の機能を使うことができたら、
+                <H args={{ name: 'inlineFactorial', start: 3 }} />
+                といった計算をカンタンに行うことができる
+              </Em>
+              」から、この
+              <H args={{ name: 'witch' }} />
+              の機能を紹介したまでなのです。
+            </P>
+            <P>
+              <Em>
+                <H args={{ name: 'witch' }} />
+                を使うのは、いわばズルをするようなもの。
+              </Em>
+              従来の弁当箱の機能だけで、正々堂々とやるのが理想です。
+            </P>
+            <P>
+              <Strong>
+                では、
+                <H args={{ name: 'witch' }} />
+                を使わずに、従来の弁当箱の機能だけを使って
+                <H args={{ name: 'inlineFactorial', start: 3 }} />
+                といった計算を行うには、どうすればいいのでしょうか？
+              </Strong>
+            </P>
+            <EmojiSeparator emojis={['❓', '🤔', '❓']} />
+          </>
+        )
+      },
+      {
+        title: <>答えは上級最後のページで！</>,
+        content: (
+          <>
+            <P>
+              答えは、次の上級最後のページで紹介します。ここでついに、記事のタイトルにもある「
+              <Strong>
+                魔法の
+                <H args={{ name: 'yCombinator' }} />
+              </Strong>
+              」が登場します。
+            </P>
+            <EmojiSeparator emojis={['✨', '🤗', '✨']} />
+            <P>
+              ここまでお付き合いくださり、ありがとうございます。
+              <Em>
+                次の上級最後のページの後は、もうエピローグしか残っていません。
+              </Em>
+              あと少しでゴールです！
+            </P>
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/15.v2.jp.tsx b/src/contents/15.v2.jp.tsx
new file mode 100644
index 000000000..2e395613d
--- /dev/null
+++ b/src/contents/15.v2.jp.tsx
@@ -0,0 +1,823 @@
+import React from 'react'
+import EpisodeCardList from 'src/components/EpisodeCardList'
+import {
+  P,
+  Strong,
+  Em,
+  Ul,
+  UlLi,
+  Hr,
+  InlineHeader
+} from 'src/components/ContentTags'
+import H from 'src/components/H'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import EmojiWithText from 'src/components/EmojiWithText'
+import EmojiForLetter from 'src/components/EmojiForLetter'
+import Emoji from 'src/components/Emoji'
+import EmojiNumber from 'src/components/EmojiNumber'
+import {
+  InlineEmojiBoxesForCondition,
+  InlineEmojiBoxesForQuestion
+} from 'src/components/InlineEmojiBoxes'
+import YesNoButtons from 'src/components/YesNoButtons'
+import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
+import NextLessonButton from 'src/components/NextLessonButton'
+import * as R from 'src/components/Runners'
+
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>今回が上級最後！</>,
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'episodeWelcomeText' }} />
+              今回が上級最後です！残るのはこのページと、次のページにあるエピローグだけです。ここまでお疲れ様でした！
+            </P>
+            <EmojiSeparator emojis={['🎉', '🤗', '🎉']} />
+            <P>
+              前回は、「
+              <Strong>
+                弁当箱の
+                <H args={{ name: 'witch' }} />
+              </Strong>
+              」について解説しました。復習になりますが、
+              <H args={{ name: 'witch' }} />
+              は次のように変化します。
+            </P>
+            <R.Xjae />
+            <ExpressionRunnerSeparator />
+            <R.Xsve />
+            <P>
+              この
+              <H args={{ name: 'witch' }} />
+              を使うと、
+            </P>
+            <EmojiSeparator size="sm" emojis={['3️⃣', '✖️', '2️⃣', '✖️', '1️⃣']} />
+            <P>といった計算を行うことができます。</P>
+            <R.Igrt />
+            <ExpressionRunnerSeparator />
+            <R.Woft />
+            <ExpressionRunnerSeparator />
+            <R.Urhc />
+            <P>
+              しかし、「
+              <Strong>
+                弁当箱の
+                <H args={{ name: 'witch' }} />
+              </Strong>
+              」は、実際には弁当箱に備わっていない「架空の」機能です。
+              <Strong>
+                <H args={{ name: 'witch' }} />
+                を使わず、従来の弁当箱の機能だけで、同じ計算ができるでしょうか？
+              </Strong>
+            </P>
+            <EmojiSeparator emojis={['❌', '🧙‍♀️', '❌']} />
+            <P>今回はそれを検証していきます。</P>
+          </>
+        )
+      },
+      {
+        title: <>魔女の代わりに</>,
+        content: (
+          <>
+            <P>
+              まず、
+              <H args={{ name: 'witch' }} />
+              の変化に注目してみます。
+            </P>
+            <R.Xjae />
+            <ExpressionRunnerSeparator />
+            <R.Xsve />
+            <P>
+              変化後の弁当箱にも
+              <H args={{ name: 'witch' }} />
+              がまた登場しています。
+            </P>
+            <R.Cfms />
+            <P>
+              <Strong>
+                この
+                <H args={{ name: 'witch' }} />
+                の代わりに、他の料理を使ってみることを検討してみましょう。
+              </Strong>
+              別に何でもいいですが、とりあえず
+              <H args={{ name: 'witch' }} />
+              の代わりに
+              <EmojiWithText letter="s" />
+              を使ってみます。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <Emoji>🧙‍♀️</Emoji>,
+                <Emoji>➡</Emoji>,
+                <EmojiForLetter letter="s" />
+              ]}
+            />
+            <P>すると、こうなります。</P>
+            <R.Tdau />
+            <P>
+              そして、理由はまだ明かしませんが、左側にも
+              <EmojiWithText letter="s" />
+              を入れます。
+            </P>
+            <R.Lkwr />
+            <P>
+              そして、同じく理由はまだ明かしませんが、下側にも次のように
+              <EmojiWithText letter="a" />と<EmojiWithText letter="b" />
+              が入っている弁当箱を配置します。
+            </P>
+            <R.Osih />
+            <P>
+              では、ここで質問です:{' '}
+              <Strong>
+                上の弁当箱の
+                <InlineEmojiBoxesForQuestion />
+                に暗号の数字を入れてみると、何が起きるでしょう？
+              </Strong>
+            </P>
+            <EmojiSeparator emojis={['❓', '🤔', '❓']} />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <EmojiNumber number={3} />
+            を入れた場合
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              たとえば、
+              <Strong>
+                先ほどの弁当箱の
+                <InlineEmojiBoxesForQuestion />
+                の部分に
+                <EmojiNumber number={3} />
+                を入れたとします
+              </Strong>
+              (<Em>一番上の黄色の部分</Em>)。
+            </P>
+            <R.Hzlj />
+            <P>
+              これを
+              <H args={{ name: 'play' }} />
+              すると、結果はどうなるでしょう？
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>検証してみましょう</>,
+        content: (
+          <>
+            <P>
+              途中で何回か止めながら見ていきましょう！
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Plts />
+            <P>
+              かなり複雑な弁当箱になりましたが、落ち着いて見ていきましょう。まず、
+              <Strong>上から2番目と3番目の部分</Strong>
+              <Em>を黄色に塗りつぶしてみました</Em>。
+            </P>
+            <R.Pnux />
+            <P>
+              この<Em>黄色に塗りつぶした部分</Em>
+              を省略してみましょう。すると次のようになります。
+            </P>
+            <R.Zhby />
+            <P>省略していない部分をよく見ると、</P>
+            <Ul>
+              <UlLi>
+                <Em>
+                  一番上の数字が
+                  <EmojiNumber number={3} />
+                  から
+                  <EmojiNumber number={2} />
+                  になり、(黄色の部分)
+                </Em>
+              </UlLi>
+              <UlLi>
+                <Em highlightType="blue">
+                  一番下に<Emoji>✖️</Emoji>
+                  <EmojiNumber number={3} />
+                  が追加されました。(青色の部分)
+                </Em>
+              </UlLi>
+            </Ul>
+            <R.Xcnu />
+            <P>
+              これを、
+              <Strong>
+                前回
+                <H args={{ name: 'witch' }} />
+                を使った時と比べてみましょう。
+              </Strong>
+              <H args={{ name: 'witch' }} />
+              を使った場合は、途中で下のような形になっていました。
+              <Em>かなり似ていると思いませんか？</Em>
+            </P>
+            <R.Iisx />
+            <P>
+              ということは、
+              <Em>
+                最終的な結果も、
+                <H args={{ name: 'witch' }} />
+                を使った場合と同じになるのかもしれません。
+              </Em>
+              引き続き見ていきましょう！
+            </P>
+            <EmojiSeparator emojis={['🤔', '❓', '🧙‍♀️']} />
+          </>
+        )
+      },
+      {
+        title: <>続きはどうなる？</>,
+        content: (
+          <>
+            <P>
+              続きを見てみましょう。
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Pzui />
+            <P>
+              前回と同じように、
+              <Em>
+                <Strong>上から2番目と3番目の部分</Strong>
+                を黄色に塗りつぶしてみました。
+              </Em>
+            </P>
+            <R.Kfrt />
+            <P>省略すると、こうなります。</P>
+            <R.Iygh />
+            <P>
+              よく見ると、
+              <Em>
+                一番上の数字が
+                <EmojiNumber number={2} />
+                から
+                <EmojiNumber number={1} />
+                になり、
+              </Em>
+              <Em highlightType="blue">
+                <Emoji>✖️</Emoji>
+                <EmojiNumber number={2} />
+                が追加されました。
+              </Em>
+            </P>
+            <R.Ines />
+            <P>
+              またしても、前回
+              <H args={{ name: 'witch' }} />
+              を使った場合と同じような途中経過になっています。
+            </P>
+            <R.Gcnt />
+            <P>それでは、最後まで進めてみましょう！</P>
+          </>
+        )
+      },
+      {
+        title: <>結果は…？</>,
+        content: (
+          <>
+            <P>
+              先ほどの続きからです。
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Pgtx />
+            <P>
+              ここで、
+              <InlineEmojiBoxesForCondition type="condition" /> の中にある暗号が
+              <EmojiNumber number={0} />
+              になりました。ということは、下側の{' '}
+              <InlineEmojiBoxesForCondition type="trueCase" /> に入っている
+              <EmojiNumber number={1} />
+              が残るということです。
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Gswd />
+            <P>
+              なんと、
+              <H args={{ name: 'inlineFactorial', start: 3 }} />
+              の計算を行う弁当箱になりました！
+            </P>
+            <P>
+              というわけで、最終結果は
+              <H args={{ name: 'factorialComputation', start: 3 }} />
+              になります。
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Jruw />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: <>ということは…</>,
+        content: (
+          <>
+            <P>
+              <Strong>
+                <H args={{ name: 'witch' }} />
+                を一切使わずに、
+                <H args={{ name: 'inlineFactorial', start: 3 }} />
+                の計算ができてしまった
+              </Strong>
+              、ということになります！
+            </P>
+            <R.Nnhc />
+            <ExpressionRunnerSeparator />
+            <R.Pzvr />
+            <ExpressionRunnerSeparator />
+            <R.Mscz />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <EmojiNumber number={4} />や<EmojiNumber number={5} />
+            からはじめた場合
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              では、
+              <EmojiNumber number={4} />や<EmojiNumber number={5} />
+              からはじめた場合はどうなるでしょう？同じような計算ができるでしょうか？
+            </P>
+            <EmojiSeparator
+              size="sm"
+              emojis={['4️⃣', '✖️', '3️⃣', '✖️', '2️⃣', '✖️', '1️⃣']}
+              description={
+                <>
+                  ちなみに、答えは「<Strong>24</Strong>」になります
+                </>
+              }
+            />
+            <EmojiSeparator
+              size="sm"
+              emojis={['5️⃣', '✖️', '4️⃣', '✖️', '3️⃣', '✖️', '2️⃣', '✖️', '1️⃣']}
+              description={
+                <>
+                  ちなみに、答えは「<Strong>120</Strong>」になります
+                </>
+              }
+            />
+            <P>
+              ここからは時間を節約するために、最初から最後まで超特急で見ていきましょう！
+            </P>
+            <EmojiSeparator emojis={['🚅', '🤗', '🚅']} />
+            <P>
+              先ほどと同じく、こちらの弁当箱を使います。
+              <Strong>
+                <H args={{ name: 'witch' }} />
+                はどこにも入っていないので、タネも仕掛けもありません！
+              </Strong>
+            </P>
+            <R.Dkbt />
+          </>
+        )
+      },
+      {
+        title: <>結果は…</>,
+        content: (
+          <>
+            <P>
+              まず、
+              <InlineEmojiBoxesForQuestion />に<EmojiNumber number={4} />
+              を入れてみました(<Em>黄色の部分</Em>)。
+              <H args={{ name: 'pressFastForward', skippingSteps: true }} />
+            </P>
+            <R.Jreq />
+            <P>
+              結果、
+              <H args={{ name: 'inlineFactorial', start: 4 }} />
+              の弁当箱になりました！というわけで、最終的に
+              <H args={{ name: 'factorialComputation', start: 4 }} />
+              になります。
+            </P>
+            <R.Vpmj />
+            <ExpressionRunnerSeparator />
+            <R.Uitu />
+            <Hr />
+            <P>
+              次は、
+              <InlineEmojiBoxesForQuestion />に<EmojiNumber number={5} />
+              を入れてみましょう(<Em>黄色の部分</Em>)。
+              <H args={{ name: 'pressFastForward', skippingSteps: true }} />
+            </P>
+            <R.Bozr />
+            <P>
+              結果、
+              <H args={{ name: 'inlineFactorial', start: 5 }} />
+              の弁当箱になりました！というわけで、最終的に
+              <H args={{ name: 'factorialComputation', start: 5 }} />
+              になります。
+            </P>
+            <R.Angp />
+            <ExpressionRunnerSeparator />
+            <R.Wxqy />
+            <P>
+              つまり、
+              <Strong>
+                <EmojiNumber number={4} />
+                からはじめても
+                <EmojiNumber number={5} />
+                からはじめても、
+                <H args={{ name: 'witch' }} />
+                を使った場合と同じ結果になる
+              </Strong>
+              のです！
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              こちらのような弁当箱の一番上に<Em>暗号を入れて(黄色の部分)</Em>
+              <H args={{ name: 'fastForward' }} />
+              すると、
+            </P>
+            <R.Wcwd />
+            <P>途中で以下のような形になります。</P>
+            <R.Fapu />
+            <P>
+              つまり、
+              <H args={{ name: 'factorialDefinition' }} />
+              という計算を行うことができるのです。
+            </P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'witch' }} />
+            よりも有能
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              繰り返しますが、たとえば
+              <H args={{ name: 'inlineFactorial', start: 3 }} />
+              を計算するのに、下のような
+              <H args={{ name: 'witch' }} />
+              の弁当箱を使わずとも、
+            </P>
+            <R.Zxux />
+            <P>
+              下の弁当箱を使えば、<Strong>従来の弁当箱の機能だけで</Strong>
+              <H args={{ name: 'inlineFactorial', start: 3 }} />
+              を計算できます。
+            </P>
+            <R.Bcgc />
+            <P>
+              しかも、上の弁当箱は
+              <H args={{ name: 'witch' }} />
+              よりも<Strong>優れている点</Strong>があります。それは、
+              <Strong>少し変更を加えることで、さらに違う計算もできる</Strong>
+              ということです。
+            </P>
+            <EmojiSeparator emojis={['❓', '🤔', '❓']} />
+            <P>
+              <Strong>さらに違う計算もできる</Strong>とはどういうことか、
+              <H args={{ name: 'yesNoQuiz' }} />
+              で見てみましょう！
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'lookAtThisBentoBox' }} />
+              。前回の弁当箱に<Strong>二箇所</Strong>変更を加えました。
+              前回と比べて、
+              <Strong>
+                黄色の部分が両方とも
+                <EmojiNumber number={2} />
+                になっています。
+              </Strong>
+            </P>
+            <R.Szou />
+            <P>
+              <H args={{ name: 'whatHappensAtTheEndQuestion' }} />
+            </P>
+            <R.Ysji />
+            <YesNoButtons answer="yes" />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: true }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: true, sentence: true }} />
+              <H args={{ name: 'pressFastForward', skippingSteps: true }} />
+            </P>
+            <R.Ilrn />
+            <P>
+              つまり、
+              <Strong>
+                <EmojiNumber number={2} />
+                を3回繰り返して掛ける計算
+              </Strong>
+              になりました！(数学用語だと「<Em>2の3乗</Em>
+              」と言いますが、覚えなくても結構です。)
+            </P>
+            <EmojiSeparator size="sm" emojis={['2️⃣', '✖️', '2️⃣', '✖️', '2️⃣']} />
+            <P>
+              というわけで、最終的に
+              <H args={{ name: 'powerComputation', power: 3 }} />
+              になります。
+            </P>
+            <R.Xsgz />
+            <ExpressionRunnerSeparator />
+            <R.Dret />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <EmojiNumber number={4} />
+            を入れた場合
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              では、一番上に
+              <EmojiNumber number={4} />
+              を入れた場合はどうなるでしょう？(<Em>黄色の部分</Em>)
+            </P>
+            <P>
+              <H args={{ name: 'pressFastForward', skippingSteps: true }} />
+            </P>
+            <R.Bpsz />
+            <P>
+              つまり、
+              <Strong>
+                <EmojiNumber number={2} />
+                を4回繰り返して掛ける計算
+              </Strong>
+              になりました！
+            </P>
+            <EmojiSeparator
+              size="sm"
+              emojis={['2️⃣', '✖️', '2️⃣', '✖️', '2️⃣', '✖️', '2️⃣']}
+            />
+            <P>
+              というわけで、最終的に
+              <H args={{ name: 'powerComputation', power: 4 }} />
+              になります。
+            </P>
+            <R.Fotb />
+            <ExpressionRunnerSeparator />
+            <R.Zfcz />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: <>ということは…</>,
+        content: (
+          <>
+            <P>
+              この弁当箱は、
+              <Strong>
+                上に入っている暗号の回数分、
+                <EmojiNumber number={2} />
+                を繰り返して掛ける
+              </Strong>
+              弁当箱ということになります。
+            </P>
+            <R.Jtai />
+            <ExpressionRunnerSeparator />
+            <EmojiSeparator
+              size="sm"
+              addDotDotDotEnd
+              emojis={['2️⃣', '✖️', '2️⃣', '✖️', '2️⃣', '✖️']}
+              description={
+                <>
+                  暗号の回数分、
+                  <EmojiNumber number={2} />
+                  を繰り返して掛ける
+                </>
+              }
+            />
+          </>
+        )
+      },
+      {
+        title: <>弁当箱は、繰り返し処理ができる</>,
+        content: (
+          <>
+            <P>
+              何が言いたいかというと、下の弁当箱の
+              <InlineEmojiBoxesForQuestion />
+              の部分を変えることで、さまざまな<Strong>繰り返し処理</Strong>
+              を行うことができるのです。
+            </P>
+            <R.Nmoc />
+            <P>
+              たとえば、これまでは<Em>掛け算</Em>を紹介してきましたが、たとえば
+              <Em>
+                上に入っている暗号が
+                <EmojiNumber number={1} />
+                になるまで「<Strong>足し算</Strong>」を繰り返す、
+              </Em>
+              という計算もできます。
+            </P>
+            <EmojiSeparator
+              size="sm"
+              emojis={['➕', '3️⃣', '➕', '2️⃣', '➕', '1️⃣']}
+              addDotDotDotFront
+              description={
+                <>
+                  暗号が
+                  <EmojiNumber number={1} />
+                  になるまで繰り返して足す
+                </>
+              }
+            />
+            <P>
+              ここでは紹介しませんが、もっと<Strong>複雑な繰り返し処理</Strong>
+              を行うこともできます。
+            </P>
+            <P>
+              <InlineHeader>結論:</InlineHeader>{' '}
+              <Strong>
+                弁当箱は、工夫をすることで、繰り返し処理を行うことができるのです。
+              </Strong>
+            </P>
+            <EmojiSeparator emojis={['🔁', '🍱', '🔁']} />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            魔法の
+            <H args={{ name: 'yCombinator' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              弁当箱の繰り返し処理を可能にしているのは、
+              <Strong>
+                下側に追加した、
+                <EmojiWithText letter="a" />と<EmojiWithText letter="b" />
+                からなる部分
+              </Strong>
+              です。
+            </P>
+            <R.Cnef />
+            <P>
+              この黄色の部分がないと、繰り返し処理を行うことができません。また、
+              <Em>
+                どんな繰り返し処理をするかによって
+                <InlineEmojiBoxesForQuestion />
+                の部分は変わっても、この黄色の部分は変わりません。
+              </Em>
+              毎回同じなのです。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetter letter="a" />,
+                <Emoji>🤩</Emoji>,
+                <EmojiForLetter letter="b" />
+              ]}
+            />
+            <P>
+              実は、この黄色の部分には呼び名があります。そう、題名にもある「
+              <Strong>
+                <H args={{ name: 'yCombinator' }} />
+              </Strong>
+              」です。
+            </P>
+            <R.News />
+            <P>
+              すなわち
+              <Strong>
+                <H args={{ name: 'yCombinator' }} />
+              </Strong>
+              とは、
+              <Strong>
+                繰り返し処理を行う際に必要となる、上のような形の弁当箱
+              </Strong>
+              のことを指すのです。
+            </P>
+            <P>
+              この
+              <Strong>
+                <H args={{ name: 'yCombinator' }} />
+              </Strong>
+              を使えば、
+              <H args={{ name: 'witch' }} />
+              を使わなくても繰り返し処理を行うことができる。
+              <Em>
+                まるで魔法のようだから、記事に「
+                <Strong>
+                  魔法の
+                  <H args={{ name: 'yCombinator' }} />
+                </Strong>
+                」という題名をつけたのです。
+              </Em>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetter letter="a" />,
+                <Emoji>🧙‍♀️</Emoji>,
+                <EmojiForLetter letter="b" />
+              ]}
+            />
+          </>
+        ),
+        footer: {
+          content: (
+            <>
+              <P>
+                <InlineHeader>ちなみに:</InlineHeader>{' '}
+                <EmojiWithText letter="a" />や<EmojiWithText letter="b" />
+                を使う必要はありません。他の料理を使っても、同じパターンであれば
+                <Strong>
+                  <H args={{ name: 'yCombinator' }} />
+                </Strong>
+                になります。
+              </P>
+              <P>
+                たとえば、
+                <EmojiWithText letter="c" />や<EmojiWithText letter="d" />
+                を使ってみました。こちらも
+                <Strong>
+                  <H args={{ name: 'yCombinator' }} />
+                </Strong>
+                です。もちろん、同じように機能します。
+              </P>
+              <R.Xrzv />
+              <P>
+                <InlineHeader>由来について:</InlineHeader> なぜ「
+                <H args={{ name: 'yCombinator' }} />
+                」という名前が付けられたのかを説明するのは非常に難しいので、ここでは説明しません。
+                <H args={{ name: 'yCombinator' }} />
+                がどんな機能かを理解していただければ、それだけで十分です！
+              </P>
+            </>
+          )
+        }
+      },
+      {
+        title: <>残すはエピローグだけ！</>,
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'yCombinator' }} />
+              も説明し終えたので、残すはエピローグだけです！ここまでお疲れ様でした。
+            </P>
+            <EmojiSeparator emojis={['🎉', '🤗', '🎉']} />
+            <P>
+              エピローグでは、
+              <Strong>
+                弁当箱と
+                <H args={{ name: 'computerScience' }} />
+                のつながり
+              </Strong>
+              について語ります。あと少しだけお付き合いいただけると嬉しいです。
+            </P>
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/16.v2.jp.tsx b/src/contents/16.v2.jp.tsx
new file mode 100644
index 000000000..c071f5636
--- /dev/null
+++ b/src/contents/16.v2.jp.tsx
@@ -0,0 +1,1094 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core'
+import {
+  Em,
+  P,
+  Strong,
+  ExternalLink,
+  Blockquote,
+  Img,
+  Ol,
+  OlLi,
+  Ul,
+  UlLi,
+  InlineHeader,
+  CenteredCode,
+  Pre,
+  Code,
+  Hr
+} from 'src/components/ContentTags'
+import { InlineEmojiBoxesForCondition } from 'src/components/InlineEmojiBoxes'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import EpisodeCardList from 'src/components/EpisodeCardList'
+import InlineEmojiBoxes from 'src/components/InlineEmojiBoxes'
+import Emoji from 'src/components/Emoji'
+import InlinePrioritiesLabel from 'src/components/InlinePrioritiesLabel'
+import BottomRightBadge from 'src/components/BottomRightBadge'
+import EmojiNumber from 'src/components/EmojiNumber'
+import H from 'src/components/H'
+import { colors, spaces, fontSizes } from 'src/lib/theme'
+import { BasicRules } from 'src/contents/2.jp'
+import * as R from 'src/components/Runners'
+
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>最後のページです！</>,
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'episodeWelcomeText' }} />
+              これが最後のページです。ここまで読んでくださり、ありがとうございます！
+            </P>
+            <EmojiSeparator emojis={['🎉', '🤗', '🎉']} />
+            <P>
+              最後に、
+              <Strong>
+                弁当箱と
+                <H args={{ name: 'computerScience' }} />
+                のつながり
+              </Strong>
+              について語って終わりにしたいと思います。
+            </P>
+            <EmojiSeparator emojis={['🍱', '🤔', '🤖']} />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'computerScience' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              当記事の題名に入っている「
+              <Strong>
+                <H args={{ name: 'computerScience' }} />
+              </Strong>
+              」という学問について、冒頭で以下のように説明しました:
+            </P>
+            <Blockquote>
+              <P>
+                <H args={{ name: 'csDescriptionPreface' }} />
+              </P>
+              <H
+                args={{
+                  name: 'csDescription'
+                }}
+              />
+            </Blockquote>
+            <EmojiSeparator emojis={['🔎', '🗺', '📷']} />
+            <P>今回は、この説明の続きをしていきます！</P>
+          </>
+        ),
+        footer: {
+          content: (
+            <>
+              <P>
+                <InlineHeader>ちなみに:</InlineHeader> これからコンピュータや
+                <H args={{ name: 'computerScience' }} />
+                の歴史について非常に手短に語りますが、
+                <Em>
+                  わかりやすさや簡潔さを優先するために、正確性をあえて犠牲にしたり、さまざまな出来事を省いたりしています
+                </Em>
+                。コンピュータ史に詳しい方のなかには、怒り心頭に発する方が出てくるかもしれません。雑な歴史の紹介であることをお許しください。
+              </P>
+            </>
+          )
+        }
+      },
+      {
+        title: <>計算機科学</>,
+        content: (
+          <>
+            <P>
+              実は
+              <H args={{ name: 'computerScience' }} />
+              には「
+              <ExternalLink href="https://ja.wikipedia.org/wiki/%E8%A8%88%E7%AE%97%E6%A9%9F%E7%A7%91%E5%AD%A6">
+                <Strong>計算機科学</Strong>
+              </ExternalLink>
+              」という日本語訳もあります。
+            </P>
+            <EmojiSeparator emojis={['💻', '📱', '🤖']} />
+            <P>
+              コンピュータというとパソコンやタブレット、スマホ、ロボットを思い浮かべるかもしれませんが、コンピュータは本質的には
+              <Strong>「計算機」</Strong>です。
+            </P>
+            <P>
+              <Strong>電卓という意味での計算機ではなく</Strong>、 「
+              <Em>膨大な量の計算を行うことで、便利な機能を実現している</Em>
+              」という意味での計算機です。たとえば美しいCGや賢いAIも、大量の計算を短時間で正確に行うことによって実現されています。
+            </P>
+            <EmojiSeparator emojis={['🔢', '🔢', '🔢']} />
+            <P>
+              <Em>計算機は時代とともに進化してきました。</Em>
+              たとえば昔の日本では、中国から伝わったそろばん <Emoji>
+                🧮
+              </Emoji>{' '}
+              が計算機の主役でした。
+            </P>
+            <P>
+              アメリカでは、1890年の国勢調査において、
+              <Em>
+                <ExternalLink href="https://ja.wikipedia.org/wiki/%E3%83%91%E3%83%B3%E3%83%81%E3%82%AB%E3%83%BC%E3%83%89">
+                  パンチカード
+                </ExternalLink>
+                と呼ばれるマークシートのような紙に空いた穴を読み取り、データを集計できる計算機「
+                <ExternalLink href="https://ja.wikipedia.org/wiki/%E3%82%BF%E3%83%93%E3%83%A5%E3%83%AC%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%83%9E%E3%82%B7%E3%83%B3">
+                  タビュレーティングマシン
+                </ExternalLink>
+                」が使われました。
+              </Em>
+              これを発明した
+              <ExternalLink href="https://ja.wikipedia.org/wiki/%E3%83%8F%E3%83%BC%E3%83%9E%E3%83%B3%E3%83%BB%E3%83%9B%E3%83%AC%E3%83%AA%E3%82%B9">
+                ハーマン・ホレリス
+              </ExternalLink>
+              は、後のIBMになる会社を創業しています。IBMはパンチカードを読み取る機械を更に進化させ、1960年代に世界一のコンピュータ企業になりました。
+            </P>
+            <P>
+              <Img
+                src="/static/images/Hollerith_census_machine_at_the_Computer_History_Museum.jpg"
+                alt="Hollerith_census_machine_at_the_Computer_History_Museum"
+                size="medium"
+                caption={
+                  <>
+                    シリコンバレーのコンピュータ歴史博物館には、ホレリスのタビュレーティングマシンが展示されています。(
+                    <ExternalLink href="https://commons.wikimedia.org/wiki/File:Hollerith_census_machine_at_the_Computer_History_Museum.jpg">
+                      撮影: Anton Chiang, CC BY 2.0
+                    </ExternalLink>
+                    )
+                  </>
+                }
+              />
+            </P>
+            <P>
+              一方で20世紀前半には、計算機の進化とは別に「
+              <Strong>計算機について研究する学問</Strong>
+              」も発展していきました。研究者たちは、「
+              <Em>
+                計算機の作り方や使い方をどう工夫すれば、より効率的に問題を解けるのか
+              </Em>
+              」「<Em>そもそも、計算機にできない計算はあるのか</Em>
+              」といった問いに取り組んだのです。こうして、
+              <H args={{ name: 'computerScience' }} /> =
+              計算機科学が注目を浴びるようになりました。
+            </P>
+            <EmojiSeparator emojis={['🧮', '🤔', '🧮']} />
+          </>
+        )
+      },
+      {
+        title: <>空想上の計算機</>,
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'computerScience' }} />
+              が発展しはじめたころ、<Strong>空想上の計算機</Strong>
+              について考える研究者が出てきました。
+              <Em>
+                空想上の計算機とはその名の通り、物理的には存在しない(または作ることができない)計算機のことです。
+              </Em>
+            </P>
+            <EmojiSeparator emojis={['🤔', '💭', '❓']} />
+            <P>
+              空想上の計算機について考える研究者は、1930年代に次のような問いに取り組んでいました。(分かりやすさを優先した、雑な説明です)
+            </P>
+            <Ol>
+              <OlLi>
+                <Em>これから、物理的な計算機はどんどん進化していくだろう。</Em>
+              </OlLi>
+              <OlLi>
+                <Em>
+                  しかし、計算機がどれほど進化しようと、「
+                  <Strong>計算機で行える計算の限界</Strong>
+                  」がいつかはくるはずだ。
+                </Em>
+              </OlLi>
+              <OlLi>
+                <Em>
+                  では、
+                  <Strong>
+                    「計算機で行える計算の限界」とは、どんな計算なんだろう？
+                  </Strong>
+                </Em>
+              </OlLi>
+              <OlLi>
+                <Em>
+                  それを知るために、まず空想上でいいから、「
+                  <Strong>最強の計算機</Strong>
+                  」を考案してみよう。
+                </Em>
+              </OlLi>
+              <OlLi>
+                <Em>
+                  「最強」とはすなわち、これからどれほど計算機が進化しようが、それを上回ることができないということ。
+                </Em>
+              </OlLi>
+              <OlLi>
+                <Em>
+                  これからどれほど計算機が進化しようが、それにできる計算であれば、「空想上の最強の計算機」でも同じ計算ができる、ということだ。
+                </Em>
+              </OlLi>
+              <OlLi>
+                <Strong>
+                  ということは、その「空想上の最強の計算機」が行うことができる計算のすべてが、「計算機で行える計算の限界」というわけだ。
+                </Strong>
+              </OlLi>
+              <OlLi>
+                <Strong>
+                  では、その「空想上の最強の計算機」とはどんなものだろう？
+                </Strong>
+              </OlLi>
+              <OlLi>
+                <Em>
+                  そうそう、その「空想上の最強の計算機」は、
+                  <Strong>できるだけシンプルな設計にしたい</Strong>
+                  。そのほうが論じやすいからだ。
+                </Em>
+              </OlLi>
+            </Ol>
+            <EmojiSeparator emojis={['🤔', '💭', '🤖']} />
+            <P>
+              <Em>
+                こうして、1930年代に「空想上の最強の計算機」がいくつか考案されました。
+              </Em>
+              ここでは詳しく説明しませんが、アラン・チューリングが1936年に発表した「
+              <ExternalLink href="https://ja.wikipedia.org/wiki/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%9E%E3%82%B7%E3%83%B3">
+                <Em>チューリングマシン</Em>
+              </ExternalLink>
+              」が、「空想上の最強の計算機」として有名になりました。このチューリングマシンは、近代のコンピュータ開発に大きな影響を与えました。
+            </P>
+            <EmojiSeparator
+              emojis={['0️⃣', '📼', '1️⃣']}
+              description={
+                <>
+                  チューリングマシンは、<Emoji>0️⃣</Emoji>と<Emoji>1️⃣</Emoji>
+                  が書かれた無限の長さのテープ<Emoji>📼</Emoji>
+                  でできた空想上の計算機です。ここでは紹介しませんが、とても興味深いので、ぜひ調べてみてください！
+                </>
+              }
+            />
+            <P>
+              <Em>
+                さらに同時期に、「このチューリングマシンと同じくらい最強な、空想上の計算機」が考案されました。みなさんは、その計算機のことをすでに知っています。
+              </Em>
+            </P>
+            <P>
+              <Strong>そう、弁当箱のことです。</Strong>
+            </P>
+            <EmojiSeparator emojis={['🤔', '💭', '🍱']} />
+          </>
+        ),
+        footer: {
+          content: (
+            <>
+              <P>
+                ここまで読んで、「言っていることが難しすぎる」「何が何だか分からない」と思われても大丈夫です。すぐに具体例を用いて解説します！
+              </P>
+            </>
+          )
+        }
+      },
+      {
+        title: <>弁当箱は「空想上の最強の計算機」</>,
+        content: (
+          <>
+            <P>
+              <Strong>弁当箱は、空想上の最強の計算機のひとつです。</Strong>
+              これはつまり、
+              <Strong>
+                どれだけ計算機が進化しようと、それで行うことができる計算は、弁当箱でも行うことができる
+              </Strong>
+              という意味です。
+            </P>
+            <EmojiSeparator emojis={['💪', '🍱', '💪']} />
+            <P>
+              たとえば、みなさんが使われている<Strong>スマホ</Strong>
+              は、非常に強力な計算機です。これは先ほど書いたように、
+              <Strong>電卓という意味での計算機ではありません。</Strong>
+              <Em>
+                スマホのさまざまな機能を実現するために、膨大な量の計算が行われているから、非常に強力な計算機なのです。
+              </Em>
+            </P>
+            <EmojiSeparator emojis={['💪', '📱', '💪']} />
+            <P>
+              たとえば、最新のスマホには<Strong>顔認証機能</Strong>
+              があります。顔認証機能は、まずセンサーやカメラから顔のデータを数値化して取り込み、その数値をもとに膨大な計算を行い、最終的に本人かどうかを判断します。スマホが超強力な計算機であるからこそ、顔認証機能が実現できているのです。
+            </P>
+            <EmojiSeparator emojis={['👩🏻', '📱', '🧑🏿']} />
+            <P>
+              この「
+              <Em>
+                数値化された顔のデータから膨大な計算を行い、本人かどうかを判断する
+              </Em>
+              」という計算は、
+              <Strong>理論上は弁当箱でも行うことができます</Strong>。
+            </P>
+            <EmojiSeparator emojis={['👩🏽', '🍱', '🧑']} />
+            <P>
+              今回学んだように、弁当箱は数字を暗号として表すことができ、四則演算や条件分岐、繰り返しを行うことができます。今回は紹介できませんでしたが、それ以上に複雑な計算も行うことができます。
+            </P>
+            <P>
+              <Em>
+                スマホが顔認証の際に行っている計算を弁当箱でやろうとすると、気が遠くなるほど複雑な弁当箱を用意しなければならないし、実行を終えるまでにも気が遠くなるほどの時間が必要かもしれません。
+                <Strong>しかし、理論上は可能なのです。</Strong>
+              </Em>
+            </P>
+            <EmojiSeparator emojis={['💪', '🍱', '💪']} />
+            <P>
+              <Em>
+                どれだけ計算機(現代ならコンピュータやスマホ)が進化しようと、それで行うことができる計算は、弁当箱でも行うことができる。
+                <Strong>
+                  この事実は、ここでは詳しく書きませんが、1930年代に研究者によって発見されました。
+                </Strong>
+                そしてこれが、弁当箱は空想上の最強の計算機と言われる所以です。
+              </Em>
+            </P>
+          </>
+        ),
+        footer: {
+          content: (
+            <>
+              <P>
+                <InlineHeader>ところで:</InlineHeader> なぜ弁当箱は「
+                <Strong>空想上の</Strong>
+                」計算機なのか？と思われるかもしれません。
+              </P>
+              <P>
+                「空想上の」と呼ぶ第一の理由は、少なくとも1930年代には弁当箱のような計算機を実際に作ることはできず、空想上で考え出されたアイデアだからです。第二の理由は、顔認証の計算ができるような、気が遠くなるほど複雑な弁当箱を作るには、世界中のスーパーコンピュータを集めても処理能力がおそらく足りないからです。
+              </P>
+              <EmojiSeparator emojis={['🤔', '💭', '🍱']} />
+              <P>
+                <Em>
+                  理論上は弁当箱はどんな計算でもできるけど、実際には複雑な弁当箱を作ろうとしたら資源が足りないから、「空想上の」計算機、というわけです。
+                </Em>
+              </P>
+            </>
+          )
+        }
+      },
+      {
+        title: <>ラムダ計算</>,
+        content: (
+          <>
+            <P>
+              ここで、ひとつ謝らないといけないことがあります。
+              <Em>実は、今まで嘘をついていました。</Em>
+              <Strong>
+                「弁当箱」というコンセプトは、筆者が勝手に考えたものです。
+              </Strong>
+            </P>
+            <P>
+              弁当箱は「
+              <Strong>
+                <ExternalLink href="https://ja.wikipedia.org/wiki/%E3%83%A9%E3%83%A0%E3%83%80%E8%A8%88%E7%AE%97">
+                  ラムダ計算
+                </ExternalLink>
+              </Strong>
+              」をもとにしており、これはアロンゾ・チャーチとスティーヴン・コール・クリーネによって1930年代に考案された空想上の計算機です。
+            </P>
+            <EmojiSeparator emojis={['🧓🏻', '🍱', '🧓🏻']} />
+            <P>
+              ラムダ計算の
+              <Em>
+                仕組みは弁当箱と同じですが、<Strong>記述の方法</Strong>
+                はかなり違います。
+              </Em>
+              機能は同じだけど、見た目が違うということです。
+            </P>
+            <P>
+              それを説明するために、こちらの弁当箱をラムダ計算の記述に置き換えてみましょう。当記事の一番最初に紹介した弁当箱です。
+            </P>
+            <R.Ilpo />
+            <P>
+              <Em>
+                まず、ラムダ計算では料理を使わず、アルファベットを使います。
+              </Em>
+              それぞれアルファベットに置き換えてみると、こうなります:
+            </P>
+            <R.Ytcf />
+            <P>
+              <Em>次に、ラムダ計算ではマスを次のように配置します。</Em>
+              下側にあった
+              <InlineEmojiBoxes emojis={['🅰️', '🅰️']} />
+              が一番左に来ており、その右にスペースをあけて上にあった
+              <InlineEmojiBoxes emojis={['🅱️']} />
+              を配置しています。
+            </P>
+            <div
+              css={css`
+                text-align: center;
+                font-size: ${fontSizes(1.6)};
+                margin: ${spaces(1.75)} 0;
+              `}
+            >
+              <InlineEmojiBoxes emojis={['🅰️', '🅰️']} />{' '}
+              <InlineEmojiBoxes emojis={['🅱️']} />
+            </div>
+            <P>
+              最後に、ギリシャ文字の「<Strong>ラムダ</Strong>」(
+              <Strong
+                css={css`
+                  font-size: ${fontSizes(1.4)};
+                `}
+              >
+                {' '}
+                λ{' '}
+              </Strong>
+              )などを使い、以下のように表記を変えます。これで、弁当箱をラムダ計算の記述に書き換えることができました。
+            </P>
+            <CenteredCode size="md">λA.A B</CenteredCode>
+            <P>
+              1930年代に考案されたラムダ計算は、このような見た目だったのです。ちなみに、なぜギリシャ文字の「
+              <Strong>ラムダ</Strong>」が使われたのかは
+              <ExternalLink href="https://en.wikipedia.org/wiki/Lambda_calculus#Origin_of_the_lambda_symbol">
+                諸説あるようです
+              </ExternalLink>
+              。
+            </P>
+            <Hr />
+            <P>
+              他の例も見てみましょう。たとえば、前回紹介した
+              <Strong>
+                <H args={{ name: 'yCombinator' }} />
+              </Strong>
+              をご覧ください。
+            </P>
+            <R.News />
+            <P>これを、ラムダ計算の記述に書き換えると、次のようになります。</P>
+            <CenteredCode size="sm">λA.(λB.A(B B))(λB.A(B B))</CenteredCode>
+            <P>
+              大学の
+              <H args={{ name: 'computerScience' }} />
+              の授業で
+              <H args={{ name: 'yCombinator' }} />
+              について学ぶときは、おそらくこのラムダ計算の記述方法で学ぶはずです。
+              <ExternalLink href="https://ja.wikipedia.org/wiki/%E4%B8%8D%E5%8B%95%E7%82%B9%E3%82%B3%E3%83%B3%E3%83%93%E3%83%8D%E3%83%BC%E3%82%BF">
+                Wikipediaにも、この記述方法で載っています
+              </ExternalLink>
+              。なんとなく、弁当箱に比べて小難しそうな記述方法ですよね。特に数学が嫌いな人には敬遠されそうです。
+            </P>
+            <P>
+              だからわたしは、「
+              <Em>
+                ラムダ計算の機能はそのままに、もっと分かりやすい見た目で表現できないか？
+              </Em>
+              」と考えました。
+              <Strong>
+                そこでわたしが思いついたのが、弁当箱という形でラムダ計算を表現することだったのです。
+              </Strong>
+            </P>
+            <EmojiSeparator emojis={['🔠', '🤔', '🍱']} />
+            <P>まとめると、</P>
+            <Ul>
+              <UlLi>
+                <Em>
+                  弁当箱は筆者のアイデアですが、1930年代に考えられた空想上の最強の計算機「ラムダ計算」がもとになっています。
+                </Em>
+              </UlLi>
+              <UlLi>
+                <Em>
+                  ラムダ計算は複雑な見た目なので、とっつきやすい見た目の弁当箱を説明に使うことで、読者の方の心理的なハードルを下げようとした、というわけです。
+                </Em>
+              </UlLi>
+            </Ul>
+          </>
+        ),
+        footer: {
+          content: (
+            <>
+              <P>
+                <InlineHeader>ちなみに:</InlineHeader>{' '}
+                ラムダ計算は厳密に言うと「計算機」というよりは「計算模型」です。また、ラムダ計算は「最強の計算機を作ろう」として作られたものではなく、「別の目的のために計算模型を作ったら、たまたま最強のものができてしまった」というほうが正しいです。
+              </P>
+              <P>
+                <Em>
+                  これらの違いは説明しにくいので、分かりやすくするためにあえて違いをぼかしています。
+                </Em>
+                このことを、
+                <H args={{ name: 'computerScience' }} />
+                に詳しい方にはご理解いただけると嬉しいです。
+              </P>
+              <P>
+                さらに余談ですが、弁当箱の暗号は専門用語で言うと「
+                <ExternalLink href="https://en.wikipedia.org/wiki/Church_encoding">
+                  チャーチ・エンコーディング
+                </ExternalLink>
+                」となります。
+              </P>
+            </>
+          )
+        }
+      },
+      {
+        title: <>ラムダ計算とプログラミング言語</>,
+        content: (
+          <>
+            <P>
+              こちらがラムダ計算で記述した
+              <H args={{ name: 'yCombinator' }} />
+              ですが、
+            </P>
+            <CenteredCode size="sm">λA.(λB.A(B B))(λB.A(B B))</CenteredCode>
+            <P>
+              これを見て、なんとなく「<Em>プログラミング言語みたい</Em>
+              」と思いませんか？プログラミング経験者の方も、未経験者の方も、「これはプログラミング言語だよ」と言われれば、頷いてしまうのではないでしょうか。
+            </P>
+            <P>
+              <Em>
+                1930年代に考案されたラムダ計算は、後に誕生したいくつかのプログラミング言語の設計に大きな影響を与えました。
+              </Em>
+              現存するプログラミング言語の多くには、ラムダ計算の名残が残っています。
+            </P>
+            <Hr />
+            <P>
+              たとえば、執筆時点で世界で最も使われているプログラミング言語のひとつで、特にAI開発で人気の
+              <Strong>Python (パイソン)</Strong>
+              という言語があります。ちなみにパイソンとは大蛇のことで、Python言語のロゴにもヘビの絵が描かれています。
+            </P>
+            <EmojiSeparator emojis={['🐍', '🐍', '🐍']} />
+            <P>
+              <Strong>
+                そのPython言語で
+                <H args={{ name: 'yCombinator' }} />
+                を記述すると、次のようになります。
+              </Strong>
+            </P>
+            <Pre>
+              <Code
+                children={`lambda a: (
+    lambda b: a(lambda c: (b(b))(c))
+)(lambda b: a(lambda c: (b(b))(c)))`}
+              ></Code>
+            </Pre>
+            <P>
+              <Em>
+                <Strong>lambda</Strong>{' '}
+                (ラムダ)という単語が使われており、それ以外もラムダ計算の
+                <H args={{ name: 'yCombinator' }} />
+                となんとなく似ていますよね。
+              </Em>
+            </P>
+            <P>
+              <Strong>
+                まとめると、Python言語のような現在人気のプログラミング言語にも、1930年代に考えられたラムダ計算の名残が残っているのです。
+              </Strong>
+            </P>
+          </>
+        ),
+        footer: {
+          content: (
+            <>
+              <P>
+                <InlineHeader>ちなみに:</InlineHeader> Python言語の
+                <H args={{ name: 'yCombinator' }} />
+                で使われているアルファベットをよく見ると、<Code>a</Code>と
+                <Code>b</Code>
+                以外に
+                <Code>c</Code>が使われています。<Code>c</Code>
+                が使われている理由は、Python言語の仕様がラムダ計算と微妙に異なるからです。専門用語を使うと、言語の
+                <ExternalLink href="https://ja.wikipedia.org/wiki/%E8%A9%95%E4%BE%A1%E6%88%A6%E7%95%A5">
+                  評価戦略
+                </ExternalLink>
+                が「値渡し」か「名前渡し」かの違いによるものです。
+              </P>
+            </>
+          )
+        }
+      },
+      {
+        type: 'sideNote',
+        title: <>余談: プログラミングができる方へ</>,
+        content: (
+          <>
+            <P>
+              以下はプログラミングができる方への余談なので、
+              <Em>プログラミング未経験の方は読み飛ばして結構です</Em>。
+            </P>
+            <EmojiSeparator emojis={['🐍', '🤔', '🐍']} />
+            <P>
+              <H args={{ name: 'question' }} />{' '}
+              <Strong>
+                Python言語で、前回やったような
+                <H args={{ name: 'inlineFactorial', start: 5 }} />
+                といった計算を行うには、どうすればいいでしょう？
+              </Strong>
+            </P>
+            <P>
+              (もちろん、
+              <Em>
+                <EmojiNumber number={5} />
+                だけでなく、それ以外の数字からはじめる場合にも対応できる実装
+              </Em>
+              でなければいけません。また、<Code>math.factorial</Code>
+              を使うのは禁止です！)
+            </P>
+            <P>
+              おそらく、多くの方は<Code>for</Code>や<Code>while</Code>、または
+              <Code>functools.reduce</Code>などのループ機能を使うか、
+            </P>
+            <Pre>
+              <Code
+                children={`result = 1
+for i in range(5):
+    result *= i + 1
+print(result)`}
+              ></Code>
+            </Pre>
+            <P>
+              もしくは<Code>def</Code>による関数定義を用いた
+              <Strong>再帰</Strong>
+              を使うのではないでしょうか。
+            </P>
+            <Pre>
+              <Code
+                children={`def f(n):
+    if n == 0:
+        return 1
+    else:
+        return n * f(n - 1)
+
+print(f(5))`}
+              ></Code>
+            </Pre>
+            <P>
+              上記のどちらのコードを実行しても、
+              <H args={{ name: 'factorialComputation', start: 5 }} />
+              が出力されます。
+            </P>
+            <P>では、こちらの実装をご覧ください。</P>
+            <Pre>
+              <Code
+                children={`print(
+    (
+`}
+              ></Code>
+              <Code
+                css={css`
+                  color: ${colors('pink600')};
+                `}
+                children={`        lambda a: (
+            lambda b: a(lambda c: (b(b))(c))
+        )(lambda b: a(lambda c: (b(b))(c)))`}
+              ></Code>
+              <Code
+                css={css`
+                  color: ${colors('blue400')};
+                `}
+                children={`
+    )(
+        lambda f: lambda n: 1
+        if n == 0
+        else n * f(n - 1)`}
+              ></Code>
+              <Code
+                children={`
+    )(
+        5
+    )
+)`}
+              ></Code>
+            </Pre>
+            <P>
+              これを実行してみても、同じく
+              <H args={{ name: 'factorialComputation', start: 5 }} />
+              が出力されます。
+            </P>
+            <P>コードをよく見てみると、</P>
+            <Ul>
+              <UlLi>
+                <Strong
+                  css={css`
+                    color: ${colors('pink600')};
+                  `}
+                >
+                  ピンクの文字
+                </Strong>
+                の部分は、先述したPython言語の
+                <H args={{ name: 'yCombinator' }} />
+                です。
+              </UlLi>
+              <UlLi>
+                <Strong
+                  css={css`
+                    color: ${colors('blue400')};
+                  `}
+                >
+                  青の文字
+                </Strong>
+                の部分には、条件分岐(<Code>if</Code>と<Code>else</Code>
+                )・掛け算・1を引く計算があります。
+              </UlLi>
+              <UlLi>
+                一番下に数字の
+                <EmojiNumber number={5} />
+                があります。
+              </UlLi>
+              <UlLi>ループや、再帰はどこにも使われていません。</UlLi>
+            </Ul>
+            <P>
+              すなわちこれは、
+              <Strong>
+                <H args={{ name: 'yCombinator' }} />
+                を使って
+                <H args={{ name: 'inlineFactorial', start: 5 }} />
+                を計算するPython言語のコードなのです。
+              </Strong>
+              もちろん、最後の<Code>5</Code>を他の数字に変えても機能します。
+            </P>
+            <EmojiSeparator emojis={['🔁', '🐍', '🔁']} />
+            <P>
+              本来、Pythonで繰り返し処理を行うときは、<Code>for</Code>
+              などのループ機能を使うか、関数を定義して再帰処理を行います。
+              <Em>
+                しかし上記の例のように、
+                <H args={{ name: 'yCombinator' }} />
+                を使えば、ループ機能や再帰処理を一切使わずに、
+                <Code>lambda</Code>
+                だけで繰り返し処理を行うことも可能なのです。
+              </Em>
+            </P>
+            <P>
+              言いかえると、
+              <Em>
+                <Code>lambda</Code>
+                が備わっているプログラミング言語なら、ループ機能や再帰機能が備わっていなくても、
+                <H args={{ name: 'yCombinator' }} />
+                を使うことで繰り返し処理を行うことができるのです。
+              </Em>
+            </P>
+            <Hr />
+            <P>
+              ちなみに、ブラウザ上で実行できる言語・<Strong>JavaScript</Strong>
+              でも、
+              <H args={{ name: 'yCombinator' }} />
+              を使って同じ計算ができます。
+            </P>
+            <P>
+              下のコードをブラウザの開発者ツールに入れて実行すれば、
+              <H args={{ name: 'factorialComputation', start: 5 }} />
+              が出力されます。ループ機能も、再帰機能も一切使っていません。もちろん、最後の
+              <Code>5</Code>を他の数字に変えても機能します。
+            </P>
+            <Pre>
+              <Code
+                children={`console.log(
+  (a =>
+    (b => a(c => b(b)(c)))(b =>
+      a(c => b(b)(c))
+    ))(f => n =>
+    n === 0 ? 1 : n * f(n - 1)
+  )(5)
+)`}
+              ></Code>
+            </Pre>
+          </>
+        )
+      },
+      {
+        title: <>弁当箱はシンプル</>,
+        content: (
+          <>
+            <P>
+              文字数も残り少なくなってまいりました。
+              <Strong>ここから、話を弁当箱に戻します。</Strong>
+              (弁当箱とラムダ計算は、記述方法が違うだけで機能は同じなので、この話はラムダ計算にも当てはまります。)
+            </P>
+            <EmojiSeparator emojis={['✨', '🍱', '✨']} />
+            <P>
+              弁当箱は、<Em>法則としてはとてもシンプルです。</Em>
+              基本的な法則は、初級その2で紹介した以下の4つしかありません。
+            </P>
+            <Hr />
+            <BasicRules includeFuncUnbound />
+            <Hr />
+            <P>これ以外の法則は、</P>
+            <Ul>
+              <UlLi>
+                初級その3〜その5で紹介した「<Strong>実行の順番</Strong>
+                」(
+                <InlinePrioritiesLabel>2</InlinePrioritiesLabel>より
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+                を先にやる等)
+              </UlLi>
+              <UlLi>
+                上級その1で紹介した「
+                <Strong>結果が変わるのを避ける</Strong>」(
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />と
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+                に同じ料理がある場合は、
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />と
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+                を別の料理に変える)
+              </UlLi>
+            </Ul>
+            <P>
+              しかありません。弁当箱の法則はたったこれだけ。
+              <Strong>非常にシンプル</Strong>なのです。
+            </P>
+            <EmojiSeparator
+              size="sm"
+              nodes={[
+                <InlinePrioritiesLabel>2</InlinePrioritiesLabel>,
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>,
+                <Emoji>✅</Emoji>,
+                <Emoji>🍱</Emoji>,
+                <Emoji>❌</Emoji>,
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />,
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+              ]}
+            />
+            <P>
+              しかし、
+              <Em>
+                こんなシンプルな弁当箱でも、<Strong>工夫すること</Strong>
+                で非常に複雑な計算を行うことができます。
+              </Em>
+              今回紹介しただけでも、以下のことができます。
+            </P>
+            <Ul>
+              <UlLi>
+                <Em>
+                  弁当箱の暗号を使って<Strong>数字</Strong> <Emoji>🔢</Emoji>{' '}
+                  として表すことができる。
+                </Em>
+              </UlLi>
+              <UlLi>
+                <Em>
+                  弁当箱の暗号を使って<Strong>四則演算</Strong>
+                  を行うことができる。
+                  <Emoji>➕</Emoji> <Emoji>✖️</Emoji> <Emoji>➖</Emoji>
+                </Em>
+              </UlLi>
+              <UlLi>
+                <Em>
+                  弁当箱の暗号を使って<Strong>条件分岐</Strong>ができる。{' '}
+                  <InlineEmojiBoxesForCondition type="condition" />{' '}
+                  <InlineEmojiBoxesForCondition type="trueCase" />{' '}
+                  <InlineEmojiBoxesForCondition type="falseCase" />
+                </Em>
+              </UlLi>
+              <UlLi>
+                <Em>
+                  <H args={{ name: 'yCombinator' }} />
+                  を使って<Strong>繰り返し処理</Strong>ができる。
+                </Em>
+              </UlLi>
+            </Ul>
+            <P>
+              弁当箱は、今回紹介できなかったさらに複雑な計算も行うことができます。コンピュータにできる計算なら、理論上は弁当箱でも実行できるのです。
+            </P>
+            <EmojiSeparator emojis={['✨', '🍱', '✨']} />
+            <P>
+              <Em>
+                弁当箱はシンプルだけど、
+                <Strong>工夫の力で</Strong>、最強の計算機になれるのです。
+              </Em>
+            </P>
+          </>
+        ),
+        footer: {
+          content: (
+            <>
+              <P>
+                <InlineHeader>余談:</InlineHeader> じゃあ、
+                <Em>弁当箱にできない計算はあるの？</Em>
+                と思われた方がいるかもしれません。
+                <Em>
+                  実は、弁当箱にも、どんなに進化した計算機(コンピュータ)にも絶対に解けない計算問題は存在します。
+                </Em>
+                それは「
+                <ExternalLink href="https://ja.wikipedia.org/wiki/%E5%81%9C%E6%AD%A2%E6%80%A7%E5%95%8F%E9%A1%8C">
+                  <Strong>停止性問題</Strong>
+                </ExternalLink>
+                」という特殊な計算問題です。難しいのでここでは説明しませんが、興味のある方は調べてみてください。
+              </P>
+            </>
+          )
+        }
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            <H args={{ name: 'computerScience' }} />
+            とは
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              当記事では、
+              <Strong>
+                シンプルな法則しかない弁当箱でも、工夫して
+                <H args={{ name: 'yCombinator' }} />
+                などを作ることによって、さまざまな計算が行えることを証明しました。
+              </Strong>
+              このことに、
+              <H args={{ name: 'computerScience' }} />
+              のエッセンスが詰まっている気がします。
+            </P>
+            <EmojiSeparator emojis={['🤔', '💭', '💡']} />
+            <P>
+              <H args={{ name: 'computerScience' }} />
+              とは、突き詰めると「
+              <Strong>計算機(コンピュータ)を工夫して、問題を解く</Strong>
+              」ことを学べる学問です。
+            </P>
+            <P>
+              今回紹介したのは、
+              <H args={{ name: 'computerScience' }} />
+              のなかでも「<Em>計算理論</Em>」と呼ばれる分野ですが、
+              <H args={{ name: 'computerScience' }} />
+              にある他の分野でも、「
+              <Strong>計算機(コンピュータ)を工夫して、問題を解く</Strong>
+              」ことが命題となっています。「
+              <Em>
+                コンピュータをどう工夫して使えば、美しいCGや、人工知能や、仮想通貨が作れるだろう？
+              </Em>
+              」といった感じですね。
+            </P>
+            <EmojiSeparator emojis={['✨', '🍱', '✨']} />
+            <P>
+              今回紹介できるのはここまでですが、当記事を読んで、 「
+              <Em>
+                <H args={{ name: 'computerScience' }} />
+                のことが、なんとなくわかった気がする
+              </Em>
+              」「<Em>工夫の力ってすごいなあ</Em>
+              」と思っていただけたら幸いです。
+            </P>
+            <P>
+              そして、「
+              <Strong>
+                <H args={{ name: 'yCombinator' }} />
+                は、シンプルな計算機でも、繰り返し処理を可能にする工夫
+              </Strong>
+              」だいうことも、頭の片隅に入れておいてくださると嬉しいです。
+            </P>
+            <R.News />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            最後に: スマホ向けの
+            <H args={{ name: 'computerScience' }} />
+            の教材
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              最後に私見を述べさせていただきますが、わたしは当記事のような「
+              <Strong>
+                スマホで学べる
+                <H args={{ name: 'computerScience' }} />
+                の教材
+              </Strong>
+              」がもっと増えたらいいな、と思っています。
+            </P>
+            <EmojiSeparator emojis={['📱', '🤔', '📱']} />
+            <P>
+              ほとんどの
+              <H args={{ name: 'computerScience' }} />
+              の教材は、「講義を聞いたり文章を読み、そこで紹介された問題を紙で解いたり、コードをパソコンで書いて学ぶ」ことが前提となっています。
+              <Em>
+                講義を聞いたり文章を読むのはスマホでできますが、実際に手を動かしたり、問題を解いて学ぶときには、どうしても紙やパソコンが必要になる場合が多いです。
+              </Em>
+              スマホで数式を解いたり、コードを書くのは苦痛だからです。
+            </P>
+            <P>
+              <Strong>
+                そして手を動かしたり、問題を解いて学ばないと、
+                <H args={{ name: 'computerScience' }} />
+                は身に付きません。
+              </Strong>
+            </P>
+            <P>
+              しかし、当記事で紹介した
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              のように、<Strong>スマホでもできるパズル的な教材</Strong>
+              を作れば、紙やパソコン抜きにスマホだけで手を動かして学ぶことができます。
+            </P>
+            <EmojiSeparator emojis={['📱', '🍱', '📱']} />
+            <P>
+              これは仮説ですが、
+              <Strong>
+                ほとんどの
+                <H args={{ name: 'computerScience' }} />
+                の題材は、スマホでもできるパズル教材にすることができると思うのです。
+              </Strong>
+              たとえばAIなら
+              <ExternalLink href="https://ja.wikipedia.org/wiki/%E3%83%90%E3%83%83%E3%82%AF%E3%83%97%E3%83%AD%E3%83%91%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3">
+                誤差逆伝播法
+              </ExternalLink>
+              、アルゴリズムなら
+              <ExternalLink href="https://ja.wikipedia.org/wiki/%E5%8B%95%E7%9A%84%E8%A8%88%E7%94%BB%E6%B3%95">
+                動的計画法
+              </ExternalLink>
+              、コンパイラなら
+              <ExternalLink href="https://ja.wikipedia.org/wiki/%E3%83%AC%E3%82%B8%E3%82%B9%E3%82%BF%E5%89%B2%E3%82%8A%E4%BB%98%E3%81%91">
+                レジスタ割り付け
+              </ExternalLink>
+              など、
+              <Em>
+                どんな基礎的な学習内容でも、ちょっと考えればスマホで学べるパズルを作ることができる気がします。
+              </Em>
+            </P>
+            <P>
+              <Strong>
+                <H args={{ name: 'yCombinator' }} />
+                のパズルが作れるなら、どんな
+                <H args={{ name: 'computerScience' }} />
+                の題材のパズルも作れるはずです。
+              </Strong>
+            </P>
+            <EmojiSeparator emojis={['🤔', '🤔', '🤔']} />
+            <P>
+              そして、「なぜスマホ向けの
+              <H args={{ name: 'computerScience' }} />
+              の教材が大事なのか」聞かれれば、わたしはこう答えます。
+            </P>
+            <Ul>
+              <UlLi>
+                <Em>
+                  <Strong>
+                    ほとんどの人にとって、プログラミングを行う機会はほとんどありません。どれだけプログラミング教育が充実したとしても、「世の中の圧倒的多数の人は、プログラミング未経験」という状態はおそらく未来永劫続くでしょう。
+                  </Strong>
+                </Em>
+              </UlLi>
+              <UlLi>
+                <Em>
+                  一方、これからソフトウェアが世の中を変え続け、「AIが仕事を奪う」と言われ続けるなかで、
+                  <H args={{ name: 'computerScience' }} />
+                  のリテラシーを少しでも体得することは大事になってきます。
+                </Em>
+              </UlLi>
+              <UlLi>
+                <Em>
+                  世の中の圧倒的多数の人は、
+                  <Strong>
+                    プログラミング未経験でも、スマホを持っています。
+                  </Strong>
+                  だから、プログラミング抜きにスマホで学べる
+                  <H args={{ name: 'computerScience' }} />
+                  の教材がもっと増えるべきだと思います。
+                </Em>
+              </UlLi>
+            </Ul>
+            <EmojiSeparator emojis={['📱', '🤗', '🤖']} />
+            <P>
+              言いたいことは以上です！ここまでお付き合いくださり、本当にありがとうございました。
+            </P>
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/2.v2.jp.tsx b/src/contents/2.v2.jp.tsx
new file mode 100644
index 000000000..49b841533
--- /dev/null
+++ b/src/contents/2.v2.jp.tsx
@@ -0,0 +1,421 @@
+import React from 'react'
+import { P, Em, Strong, InlineHeader } from 'src/components/ContentTags'
+import Emoji from 'src/components/Emoji'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import BottomRightBadge from 'src/components/BottomRightBadge'
+import NextLessonButton from 'src/components/NextLessonButton'
+import EmojiWithText from 'src/components/EmojiWithText'
+import YesNoButtons from 'src/components/YesNoButtons'
+import EpisodeCardList from 'src/components/EpisodeCardList'
+import H from 'src/components/H'
+import episodeEmojis from 'src/lib/episodeEmojis'
+import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
+import * as R from 'src/components/Runners'
+
+export const BasicRules = ({
+  includeFuncUnbound
+}: {
+  includeFuncUnbound: boolean
+}) => (
+  <>
+    <P>
+      1. <InlineHeader>印をつける:</InlineHeader>{' '}
+      <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+      <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+      {includeFuncUnbound && (
+        <>
+          <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
+        </>
+      )}
+      <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+    </P>
+    <R.Zzxj />
+    <P>
+      2. <InlineHeader>一致チェック:</InlineHeader>{' '}
+      <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+      <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
+      <Emoji>✅</Emoji>
+    </P>
+    <R.Keck />
+    <P>
+      3. <InlineHeader>コピーする:</InlineHeader>{' '}
+      <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+      <Emoji>↘️</Emoji>{' '}
+      <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+    </P>
+    <R.Qoms />
+    <P>
+      4. <InlineHeader>消す:</InlineHeader> <Emoji>💥</Emoji>{' '}
+      <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+      <BottomRightBadge inline bottomRightBadgeType="funcArg" />
+    </P>
+    <R.Mhgm />
+    <ExpressionRunnerSeparator />
+    <R.Osqo />
+  </>
+)
+
+BasicRules.defaultProps = {
+  includeFuncUnbound: false
+}
+
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: '弁当箱の法則',
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'episodeWelcomeText' }} />
+              さっそく前回紹介した
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              の法則 <Emoji>🤫</Emoji> を紹介していきましょう。
+            </P>
+            <P>
+              ここでは、前回のはじめに登場した弁当箱(<Strong>例その1</Strong>
+              )を使って説明します:
+            </P>
+            <R.Ilpo />
+            <ExpressionRunnerSeparator />
+            <R.Osqo />
+          </>
+        )
+      },
+      {
+        title: '法則その1: 印をつける',
+        content: (
+          <>
+            <P>
+              まず、
+              <Strong>
+                上の料理には{' '}
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />
+                、左の料理には
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />
+                、右の料理には
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+                の印をつけます。
+              </Strong>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />,
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />,
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+              ]}
+            />
+            <P>
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Ozbe />
+            <P>
+              <EmojiWithText letter="b" />に
+              <BottomRightBadge inline bottomRightBadgeType="callArg" />
+              の印が、下の
+              <EmojiWithText letter="a" />
+              ふたつにそれぞれ
+              <BottomRightBadge inline bottomRightBadgeType="funcArg" />と
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+              の印がつきました。
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>法則その2: 一致チェック</>,
+        content: (
+          <>
+            <P>
+              続いて、
+              <Strong>
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />と
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+                が一致するかチェックし、一致した料理には、
+                <Emoji>✅</Emoji>を付けます。
+              </Strong>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />,
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />,
+                <Emoji>✅</Emoji>
+              ]}
+            />
+            <P>
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Rqjo />
+            <P>
+              <BottomRightBadge inline bottomRightBadgeType="funcArg" />と
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />の
+              <EmojiWithText letter="a" />が<H args={{ name: 'match' }} />
+              しました。
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>法則その3: コピーする</>,
+        content: (
+          <>
+            <P>
+              続いて、
+              <Strong>
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />
+                の料理を、
+                <H args={{ name: 'match' }} />
+                した
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+                の部分にコピーします。
+              </Strong>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />,
+                <Emoji>↘️</Emoji>,
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+              ]}
+            />
+            <P>
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Evqx />
+            <P>
+              <BottomRightBadge inline bottomRightBadgeType="callArg" />の
+              <EmojiWithText letter="b" />が
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />に
+              <H args={{ name: 'copy' }} />
+              されました。
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>法則その4: 消す</>,
+        content: (
+          <>
+            <P>
+              最後に、
+              <Strong>
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />と
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />
+                が消えます。
+              </Strong>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <Emoji>💥</Emoji>,
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />,
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />
+              ]}
+            />
+            <P>
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Msiw />
+            <P>
+              そして、最終的に
+              <EmojiWithText letter="b" />
+              だけになります。
+            </P>
+            <R.Osqo />
+            <P>以上です！簡単だったでしょう？</P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />
+          </>
+        ),
+        type: 'summary',
+        content: (
+          <>
+            <BasicRules />
+          </>
+        )
+      },
+      {
+        title: <>一致しなかったら？</>,
+        content: (
+          <>
+            <P>
+              <Strong>
+                もし
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />と
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+                が一致しなかったらどうするのでしょうか？
+              </Strong>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />,
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />,
+                <Emoji>❌</Emoji>
+              ]}
+            />
+            <P>
+              たとえば、前回にもあったマクドナルド風の弁当箱は、
+              <BottomRightBadge inline bottomRightBadgeType="funcArg" />と
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+              が一致しません。
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Sgfj />
+            <P>こういう場合どうするかというと…(下に続く)</P>
+          </>
+        )
+      },
+      {
+        title: <>コピーはせず、消すだけ！</>,
+        content: (
+          <>
+            <P>
+              <Strong>
+                コピー (
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+                <Emoji>↘️</Emoji>{' '}
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+                )はせずに、ただ
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />と
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />
+                を消すだけです。
+              </Strong>
+            </P>
+            <P>
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Gwtp />
+            <P>
+              そして、最終的に
+              <EmojiWithText letter="d" />
+              だけになります。
+            </P>
+            <R.Ahsd />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />: 一致しなかった場合
+          </>
+        ),
+        type: 'summary',
+        content: (
+          <>
+            <P>
+              一致しなかった場合、
+              <Strong>
+                コピー (
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+                <Emoji>↘️</Emoji>{' '}
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+                )はせずに、ただ
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />と
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />
+                を消す
+              </Strong>
+              。
+            </P>
+            <R.Jwzh />
+            <ExpressionRunnerSeparator />
+            <R.Knhw />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'fastForward' }} />
+            で見てみましょう
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              締めくくりに、それぞれ最初から最後まで
+              <H args={{ name: 'fastForward' }} />
+              で見てみましょう。
+              <H args={{ name: 'fastForward' }} />
+              を使うと、<Em>最後まで自動で進めることができます。</Em>
+            </P>
+            <EmojiSeparator emojis={['⏩', '🍱', '⏩']} />
+            <P>
+              <H args={{ name: 'pressFastForward', mentionRightArrow: true }} />
+            </P>
+            <R.Wunw />
+            <P>
+              こちらも
+              <H args={{ name: 'pressFastForward', mentionRightArrow: true }} />
+            </P>
+            <R.Jbam />
+            <P>法則を覚えたら、次に進みましょう！</P>
+          </>
+        )
+      },
+      {
+        title: <>予告: 4品の弁当箱</>,
+        content: (
+          <>
+            <P>
+              次のページからは4品の料理が入った
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              が登場します。
+            </P>
+            <EmojiSeparator emojis={episodeEmojis[3]} />
+            <P>
+              <InlineHeader>たとえばこちらをご覧ください。</InlineHeader>
+              <Strong>上に2マス、下にも2マス</Strong>
+              ありますね。この場合はどうなるのでしょうか？
+            </P>
+            <R.Ljjg />
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              次のページで詳しく説明しますが、先に
+              <H args={{ name: 'yesNoQuiz' }} />
+              をやってみましょう。勘で答えてみてください。
+            </P>
+            <R.Ljjg />
+            <P>
+              <H args={{ name: 'whatHappensAtTheEndQuestion' }} />
+            </P>
+            <R.Ebag />
+            <YesNoButtons answer="yes" />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: true }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: true, sentence: true }} />
+              <H args={{ name: 'pressPlay' }} />
+            </P>
+            <R.Skzv />
+            <P>どんな法則でこうなるのかは、次のページで説明します！</P>
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/3.v2.jp.tsx b/src/contents/3.v2.jp.tsx
new file mode 100644
index 000000000..08025df18
--- /dev/null
+++ b/src/contents/3.v2.jp.tsx
@@ -0,0 +1,412 @@
+import React from 'react'
+import {
+  InlineHeader,
+  Em,
+  P,
+  Strong,
+  Ul,
+  UlLi,
+  Hr
+} from 'src/components/ContentTags'
+import Emoji from 'src/components/Emoji'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import NextLessonButton from 'src/components/NextLessonButton'
+import EpisodeCardList from 'src/components/EpisodeCardList'
+import YesNoButtons from 'src/components/YesNoButtons'
+import H from 'src/components/H'
+import EmojiWithText from 'src/components/EmojiWithText'
+import EmojiForLetter from 'src/components/EmojiForLetter'
+import BottomRightBadge from 'src/components/BottomRightBadge'
+import InlinePrioritiesLabel from 'src/components/InlinePrioritiesLabel'
+import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
+import * as R from 'src/components/Runners'
+
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>2✕2の弁当箱</>,
+        content: (
+          <>
+            <EmojiSeparator emojis={['2️⃣', '✖️', '2️⃣']} />
+            <P>
+              <H args={{ name: 'episodeWelcomeText' }} />
+              前回の最後には、以下のような
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              を紹介しました。
+            </P>
+            <R.Ljjg />
+            <P>
+              <Strong>
+                上段にふたつの料理(
+                <EmojiWithText letter="e" />と<EmojiWithText letter="f" />)
+              </Strong>
+              がありますが、この場合どうなるのかを解説していきます。
+            </P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <BottomRightBadge inline bottomRightBadgeType="callArg" />
+            がふたつ
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              さっそく
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Egmr />
+            <P>
+              このように、
+              <EmojiWithText letter="e" />と<EmojiWithText letter="f" />
+              が両方とも
+              <BottomRightBadge inline bottomRightBadgeType="callArg" />
+              になります。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetter letter="e" />,
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />,
+                <EmojiForLetter letter="f" />
+              ]}
+            />
+            <P>
+              <Strong>
+                上段にある料理すべてに
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />
+                の印がつくというわけです。
+              </Strong>
+            </P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <BottomRightBadge inline bottomRightBadgeType="callArg" />
+            はふたつとも
+            <H args={{ name: 'copy' }} />
+            する
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              先に進めると、
+              <BottomRightBadge inline bottomRightBadgeType="funcArg" />と
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+              が両方とも
+              <EmojiWithText letter="d" />
+              なので
+              <H args={{ name: 'match' }} />
+              します。
+            </P>
+            <R.Lygz />
+            <P>
+              その次の
+              <H args={{ name: 'copy' }} />
+              のステップがどうなるか見てみましょう。
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Fivy />
+            <P>
+              <Strong>
+                このように、
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />
+                の料理は両方とも
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />に
+                <H args={{ name: 'copy' }} />
+                されます。
+              </Strong>
+            </P>
+            <Hr />
+            <P>
+              そして最終的に
+              <BottomRightBadge inline bottomRightBadgeType="callArg" />と
+              <BottomRightBadge inline bottomRightBadgeType="funcArg" />
+              が消えて終了です。
+              <H args={{ name: 'pressFastForward', mentionRightArrow: true }} />
+            </P>
+            <R.Dmwy />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />: 上段に複数の料理がある場合
+          </>
+        ),
+        type: 'summary',
+        content: (
+          <>
+            <P>
+              <Strong>
+                1. 上段に複数の料理があるときは、すべてに
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />
+                の印がつく。
+              </Strong>
+            </P>
+            <R.Fpsd />
+            <P>
+              2. (<H args={{ name: 'match' }} />
+              した場合のみ)
+              <Strong>
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />
+                の料理はすべて
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />に
+                <H args={{ name: 'copy' }} />
+                される。
+              </Strong>
+            </P>
+            <R.Vegw />
+          </>
+        )
+      },
+      {
+        title: '下段に3つの料理',
+        content: (
+          <>
+            <P>
+              続いて、こちらの
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              をご覧ください。
+            </P>
+            <R.Xwim />
+            <P>
+              <Strong>
+                下段に3つの料理(
+                <EmojiWithText letter="a" />、<EmojiWithText letter="b" />、
+                <EmojiWithText letter="a" />)
+              </Strong>
+              がありますが、この場合はどうなるのでしょう？
+            </P>
+            <EmojiSeparator letters={['a', 'b', 'a']} />
+          </>
+        )
+      },
+      {
+        title: '真ん中の料理',
+        content: (
+          <>
+            <P>
+              <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+              の代わりに、
+              <Strong>
+                真ん中にある料理には
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+                の印をつけます。
+              </Strong>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />,
+                <Emoji>🤗</Emoji>,
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              ]}
+            />
+            <P>
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Rmsd />
+            <P>
+              <EmojiWithText letter="b" />に
+              <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              の印がつきました。
+            </P>
+          </>
+        )
+      },
+      {
+        title: '真ん中の料理は無視',
+        content: (
+          <>
+            <P>
+              <Strong>
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+                の料理は、
+              </Strong>
+            </P>
+            <Ul>
+              <UlLi>
+                <InlineHeader>
+                  コピー(
+                  <BottomRightBadge
+                    inline
+                    bottomRightBadgeType="callArg"
+                  />{' '}
+                  <Emoji>➡️</Emoji>{' '}
+                  <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+                  )にも影響されず、
+                </InlineHeader>
+              </UlLi>
+              <UlLi>
+                <InlineHeader>
+                  消されること(<Emoji>💥</Emoji>{' '}
+                  <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+                  <BottomRightBadge inline bottomRightBadgeType="funcArg" />
+                  )もありません。
+                </InlineHeader>
+              </UlLi>
+            </Ul>
+            <P>
+              <Strong>つまり、無視して大丈夫ということです。</Strong>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />,
+                <Emoji>🙄</Emoji>,
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: '無視した結果',
+        content: (
+          <>
+            <P>
+              というわけで最後まで見てみましょう。
+              <H args={{ name: 'pressFastForward', mentionRightArrow: true }} />
+            </P>
+            <R.Jmqh />
+            <P>
+              ご覧の通り
+              <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              にある
+              <EmojiWithText letter="b" />
+              には、最後まで何も起きません。
+            </P>
+            <P>というわけで、実行結果はこうなります。</P>
+            <R.Xwim />
+            <ExpressionRunnerSeparator />
+            <R.Awxz />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />:
+            下段に左でも右でもない料理がある場合
+          </>
+        ),
+        type: 'summary',
+        content: (
+          <>
+            <P>
+              1.{' '}
+              <Strong>
+                下段の真ん中の料理には
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+                の印をつける。
+              </Strong>
+            </P>
+            <R.Qwke />
+            <P>
+              2.{' '}
+              <Strong>
+                残りのステップで
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+                は無視する。
+              </Strong>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />,
+                <Emoji>🙄</Emoji>,
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>予告: 3段の弁当箱</>,
+        content: (
+          <>
+            <EmojiSeparator emojis={['🍱', '3️⃣', '🍱']} />
+            <P>
+              次のページからは、下のような
+              <Strong>
+                3段の
+                <H args={{ name: 'bentoBoxPuzzle' }} />
+              </Strong>
+              が登場します:
+            </P>
+            <R.Cvtc />
+            <P>
+              <InlineHeader>今までになかった特徴が2つあります:</InlineHeader>
+            </P>
+            <Ul>
+              <UlLi>
+                下の2段は先ほどと一緒ですが、
+                <Em>
+                  一番上に
+                  <EmojiWithText letter="d" />
+                  が追加されており、<Strong>3段</Strong>になっています。
+                </Em>
+              </UlLi>
+              <UlLi>
+                <Em>
+                  <InlinePrioritiesLabel>1</InlinePrioritiesLabel> や{' '}
+                  <InlinePrioritiesLabel>2</InlinePrioritiesLabel>
+                  という数字が左端に表示されています。
+                </Em>
+              </UlLi>
+            </Ul>
+            <P>この場合はどうなるのでしょうか？</P>
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              次のページで詳しく説明しますが、先に
+              <H args={{ name: 'yesNoQuiz' }} />
+              をやってみましょう。勘で答えてみてください。
+            </P>
+            <R.Cvtc />
+            <P>
+              <H args={{ name: 'whatHappensAtTheEndQuestion' }} />
+            </P>
+            <R.Uemm />
+            <YesNoButtons answer="yes" />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: true }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: true, sentence: true }} />
+              <H args={{ name: 'pressPlay' }} />
+            </P>
+            <R.Xhbi />
+            <P>どんな法則でこうなるのかは、次のページで説明します！</P>
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/4.v2.jp.tsx b/src/contents/4.v2.jp.tsx
new file mode 100644
index 000000000..792776665
--- /dev/null
+++ b/src/contents/4.v2.jp.tsx
@@ -0,0 +1,320 @@
+import React from 'react'
+import { Hr, Em, P, Strong, InlineHeader } from 'src/components/ContentTags'
+import Emoji from 'src/components/Emoji'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import InlineBackground from 'src/components/InlineBackground'
+import InlinePrioritiesLabel from 'src/components/InlinePrioritiesLabel'
+import NextLessonButton from 'src/components/NextLessonButton'
+import EpisodeCardList from 'src/components/EpisodeCardList'
+import H from 'src/components/H'
+import EmojiWithText from 'src/components/EmojiWithText'
+import YesNoButtons from 'src/components/YesNoButtons'
+import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
+import * as R from 'src/components/Runners'
+
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>3段の弁当箱の法則</>,
+        content: (
+          <>
+            <EmojiSeparator emojis={['🍱', '3️⃣', '🍱']} />
+            <P>
+              <H args={{ name: 'episodeWelcomeText' }} />
+              前回は、以下のような3段の
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              を紹介しました。
+            </P>
+            <R.Cvtc />
+            <P>
+              これを
+              <H args={{ name: 'play' }} />
+              するとどうなるのか説明していきます！
+            </P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            先に<InlinePrioritiesLabel>1</InlinePrioritiesLabel>のペアに注目
+          </>
+        ),
+        content: (
+          <>
+            <EmojiSeparator
+              nodes={[
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>,
+                <Emoji>🥇</Emoji>,
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+              ]}
+            />
+            <P>
+              <Strong>
+                まず、左上と左下に
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+                の印がある部分に注目します。
+              </Strong>
+            </P>
+            <P>
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Aaov />
+            <P>
+              <Em>
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+                のペアがピンク色
+                <InlinePrioritiesLabel revert>1</InlinePrioritiesLabel>
+                になり、中段と下段以外の背景が暗い色{' '}
+                <InlineBackground bgColor={'indigo50'} /> になりました。
+              </Em>
+            </P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <InlinePrioritiesLabel revert>1</InlinePrioritiesLabel>
+            のペア部分を終わらせる
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              次に、
+              <InlinePrioritiesLabel revert>1</InlinePrioritiesLabel>
+              のペア部分(
+              <Em>
+                背景が白色 <InlineBackground bgColor={'white'} />
+              </Em>
+              )を今までと同じように終わらせます。
+            </P>
+            <P>
+              <H args={{ name: 'pressFastForward', mentionRightArrow: true }} />
+            </P>
+            <R.Qxgl />
+            <P>
+              <InlineHeader>ポイント:</InlineHeader> 最後に
+              <InlinePrioritiesLabel revert>1</InlinePrioritiesLabel>
+              の印も<Emoji>💥</Emoji>に変化していることに注目です。
+            </P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <InlinePrioritiesLabel revert>1</InlinePrioritiesLabel>が消え
+            <Emoji>💥</Emoji>、<InlinePrioritiesLabel>2</InlinePrioritiesLabel>
+            が<InlinePrioritiesLabel>1</InlinePrioritiesLabel>に
+          </>
+        ),
+        footer: {
+          content: (
+            <>
+              <P>
+                <InlineHeader>余談:</InlineHeader> このタイミングで
+                <EmojiWithText letter="d" />
+                の部分の背景も暗い色 <InlineBackground
+                  bgColor={'indigo50'}
+                />{' '}
+                から白色 <InlineBackground bgColor={'white'} />{' '}
+                にリセットされます。
+              </P>
+            </>
+          )
+        },
+        content: (
+          <>
+            <P>
+              続いて<InlinePrioritiesLabel revert>1</InlinePrioritiesLabel>
+              の印が消え <Emoji>💥</Emoji>、
+              <Strong>
+                <InlinePrioritiesLabel>2</InlinePrioritiesLabel>の印が
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>の印になります。
+              </Strong>
+            </P>
+            <P>
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Uwma />
+            <P>
+              ご覧の通り、
+              <Strong>
+                <InlinePrioritiesLabel>2</InlinePrioritiesLabel>の印が
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+                の印になりました。
+              </Strong>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <InlinePrioritiesLabel>2</InlinePrioritiesLabel>,
+                <Emoji>➡</Emoji>,
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            残った<InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+            のペアを終わらせる
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              最後に、残った<InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+              のペアを終わらせます。
+              <H args={{ name: 'pressFastForward', mentionRightArrow: true }} />
+            </P>
+            <R.Kvso />
+            <P>以上です！</P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />
+          </>
+        ),
+        type: 'summary',
+        content: (
+          <>
+            <P>
+              1.{' '}
+              <InlineHeader>
+                先に<InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+                のペアをやる
+              </InlineHeader>
+            </P>
+            <P>
+              2.{' '}
+              <InlineHeader>
+                それが終わると同時に、
+                <InlinePrioritiesLabel>2</InlinePrioritiesLabel>が
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>になる
+              </InlineHeader>
+            </P>
+            <R.Udic />
+            <ExpressionRunnerSeparator />
+            <R.Xzqu />
+            <P>
+              3.{' '}
+              <InlineHeader>
+                同じことを繰り返して最後まで終わらせる
+              </InlineHeader>
+            </P>
+            <R.Dnvw />
+            <ExpressionRunnerSeparator />
+            <R.Nric />
+          </>
+        ),
+        footer: {
+          content: (
+            <>
+              <P>
+                <H args={{ name: 'byTheWay' }} />{' '}
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>や
+                <InlinePrioritiesLabel>2</InlinePrioritiesLabel>以外にも、
+                <InlinePrioritiesLabel>3</InlinePrioritiesLabel>や
+                <InlinePrioritiesLabel>4</InlinePrioritiesLabel>
+                などが登場する場合もあります。
+              </P>
+              <P>
+                この場合も似たようになります。すなわち
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+                のペアが終わったときに、
+                <Strong>
+                  <InlinePrioritiesLabel>3</InlinePrioritiesLabel>が
+                  <InlinePrioritiesLabel>2</InlinePrioritiesLabel>になり、
+                  <InlinePrioritiesLabel>4</InlinePrioritiesLabel>が
+                  <InlinePrioritiesLabel>3</InlinePrioritiesLabel>に
+                </Strong>
+                なります。
+              </P>
+            </>
+          )
+        }
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              マスターしたか、
+              <H args={{ name: 'yesNoQuiz' }} />
+              でチェックしてみましょう！
+              <H args={{ name: 'lookAtThisBentoBox' }} />:
+            </P>
+            <R.Dkiy />
+            <P>
+              <H args={{ name: 'whatHappensAtTheEndQuestion' }} />
+            </P>
+            <R.Owcy />
+            <YesNoButtons answer="no" />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: false }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: false, sentence: true }} />
+              <H args={{ name: 'pressFastForward', mentionRightArrow: true }} />
+            </P>
+            <R.Hdxc />
+            <P>
+              <H args={{ name: 'pauseIfLost' }} />
+            </P>
+            <Hr />
+            <P>
+              <InlineHeader>1周目はこうなり…</InlineHeader>
+            </P>
+            <R.Eial />
+            <ExpressionRunnerSeparator />
+            <R.Iwkx />
+            <P>
+              <InlineHeader>
+                最終的には
+                <EmojiWithText letter="h" />
+                が残ります:
+              </InlineHeader>
+            </P>
+            <R.Vjaa />
+            <ExpressionRunnerSeparator />
+            <R.Iifq />
+          </>
+        )
+      },
+      {
+        title: <>次が初級ラスト！</>,
+        content: (
+          <>
+            <P>
+              お疲れ様です！<Strong>次が初級最後</Strong>
+              のページです。ここまでお付き合いいただき、ありがとうございます！
+            </P>
+            <EmojiSeparator emojis={['🎉', '🤗', '🎉']} />
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/5.v2.jp.tsx b/src/contents/5.v2.jp.tsx
new file mode 100644
index 000000000..4d5c923e1
--- /dev/null
+++ b/src/contents/5.v2.jp.tsx
@@ -0,0 +1,494 @@
+import React from 'react'
+import {
+  Em,
+  P,
+  Strong,
+  Hr,
+  Ul,
+  UlLi,
+  InlineHeader
+} from 'src/components/ContentTags'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import BottomRightBadge from 'src/components/BottomRightBadge'
+import InlinePrioritiesLabel from 'src/components/InlinePrioritiesLabel'
+import NextLessonButton from 'src/components/NextLessonButton'
+import H from 'src/components/H'
+import EpisodeCardList from 'src/components/EpisodeCardList'
+import YesNoButtons from 'src/components/YesNoButtons'
+import EmojiWithText from 'src/components/EmojiWithText'
+import * as R from 'src/components/Runners'
+
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>初級の最後です！</>,
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'episodeWelcomeText' }} />
+              <Strong>今回が初級の最後です。</Strong>
+            </P>
+            <EmojiSeparator emojis={['🎉', '🤗', '🎉']} />
+            <P>
+              中級に進む前に、
+              <Strong>どう進めるのか分かりにくい</Strong>
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              を3つ紹介します:
+            </P>
+            <Ul>
+              <UlLi>
+                <InlineHeader>第1問:</InlineHeader>{' '}
+                <Strong>
+                  <InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+                  のツーペア
+                </Strong>
+              </UlLi>
+              <UlLi>
+                <InlineHeader>第2問:</InlineHeader>{' '}
+                <Strong>
+                  <InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+                  のペアの中に<InlinePrioritiesLabel>2</InlinePrioritiesLabel>
+                  のペアがある
+                </Strong>
+              </UlLi>
+              <UlLi>
+                <InlineHeader>第3問:</InlineHeader>{' '}
+                <Strong>
+                  <InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+                  のペアからはじめられない
+                </Strong>
+              </UlLi>
+            </Ul>
+            <P>さっそく見ていきましょう！</P>
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            第1問: <InlinePrioritiesLabel>1</InlinePrioritiesLabel>のツーペア
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              わからなくてもいいので、先に
+              <H args={{ name: 'yesNoQuiz' }} />
+              を解いてみましょう！クイズの後に解説していきます。
+            </P>
+            <P>
+              <H args={{ name: 'lookAtThisBentoBox' }} />。
+              <Strong>
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+                のペアがふたつありますね。
+              </Strong>
+            </P>
+            <R.Laea />
+            <P>
+              <H args={{ name: 'whatHappensAtTheEndQuestion' }} />
+            </P>
+            <R.Cgpd />
+            <YesNoButtons answer="yes" />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: true }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: true, sentence: true }} />
+              <H args={{ name: 'pressPlay' }} />
+            </P>
+            <R.Ijot />
+            <P>詳しく解説しますね！</P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            第1問の解説その1: いちばん左の
+            <InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+            のペアからはじめる
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+              のペアがふたつ以上ある場合は、
+              <Strong>いちばん左のペアからはじめます。</Strong>
+            </P>
+            <P>
+              下のような場合、 左側にある
+              <InlinePrioritiesLabel revert>1</InlinePrioritiesLabel>
+              のペアからはじめます。
+            </P>
+            <R.Aezk />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            第1問の解説その2:{' '}
+            <BottomRightBadge inline bottomRightBadgeType="funcBound" />と
+            <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+            はこうなる
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              さらに、
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <P>
+              (解説のために、
+              <BottomRightBadge inline bottomRightBadgeType="callArg" /> →
+              <BottomRightBadge inline bottomRightBadgeType="funcArg" /> →
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" /> →
+              …と順番に表示します。)
+            </P>
+            <R.Ainx />
+            <P>
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+              になったのは
+              <EmojiWithText letter="b" />
+              と右側の
+              <EmojiWithText letter="c" />
+              でした。
+              <Strong>
+                このふたつは右端の枠に接してるので、
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+                になるのです。
+              </Strong>
+            </P>
+            <Hr />
+            <P>
+              そして、
+              <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              になるのは真ん中の
+              <EmojiWithText letter="c" />
+              です。
+            </P>
+            <R.Ielw />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            第1問の解説その3: <H args={{ name: 'match' }} />と
+            <H args={{ name: 'unmatch' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+              にあるふたつの料理のうち、
+              <BottomRightBadge inline bottomRightBadgeType="funcArg" />と
+              <H args={{ name: 'match' }} />
+              するのは
+              <EmojiWithText letter="b" />
+              だけです。
+            </P>
+            <R.Dtzu />
+            <Hr />
+            <P>
+              というわけで、
+              <BottomRightBadge inline bottomRightBadgeType="callArg" />
+              にある
+              <EmojiWithText letter="a" />
+              が、
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />の
+              <EmojiWithText letter="b" />
+              のところに
+              <H args={{ name: 'copy' }} />
+              されます。
+            </P>
+            <P>
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Efyy />
+            <P>
+              残りは
+              <H args={{ name: 'fastForward' }} />
+              で見ていきましょう:
+            </P>
+            <R.Izgz />
+            <P>
+              というわけで、最後に残ったのは
+              <EmojiWithText letter="a" />
+              でした。
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            第2問: <InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+            のペアの中に<InlinePrioritiesLabel>2</InlinePrioritiesLabel>
+            のペアがある
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'lookAtThisBentoBox' }} />:
+            </P>
+            <R.Zywk />
+            <P>
+              <H args={{ name: 'whatHappensAtTheEndQuestion' }} />
+            </P>
+            <R.Mbrh />
+            <YesNoButtons answer="yes" />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: true }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: true, sentence: true }} />
+              <H args={{ name: 'pressPlay' }} />
+            </P>
+            <R.Wbru />
+            <P>詳しく解説しますね！</P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            第2問の解説: <InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+            のペアの中に<InlinePrioritiesLabel>2</InlinePrioritiesLabel>
+            のペアがある場合、
+            <BottomRightBadge bottomRightBadgeType="callArg" inline />
+            はこうなる
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <Strong>
+                この弁当箱の
+                <InlinePrioritiesLabel revert>1</InlinePrioritiesLabel>
+                のペアの中には、<InlinePrioritiesLabel>2</InlinePrioritiesLabel>
+                のペアが入っています。
+              </Strong>
+            </P>
+            <R.Pqfs />
+            <P>
+              <Strong>
+                この場合、<InlinePrioritiesLabel>2</InlinePrioritiesLabel>
+                のペアの部分が
+                <BottomRightBadge bottomRightBadgeType="callArg" inline />
+                になります。
+              </Strong>
+            </P>
+            <R.Hwtu />
+            <Hr />
+            <P>
+              残りは
+              <H args={{ name: 'fastForward' }} />
+              で見ていきましょう:
+            </P>
+            <R.Usta />
+            <P>
+              というわけで、最終的に
+              <EmojiWithText letter="c" />と<EmojiWithText letter="b" />
+              が残りました。
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            第3問: <InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+            のペアからはじめられない
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              これが最後の問題です！
+              <H args={{ name: 'lookAtThisBentoBox' }} />:
+            </P>
+            <R.Gtdu />
+            <P>
+              <H args={{ name: 'whatHappensAtTheEndQuestion' }} />
+            </P>
+            <R.Qpkm />
+            <YesNoButtons answer="yes" />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: true }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: true, sentence: true }} />
+              <H args={{ name: 'pressPlay' }} />
+            </P>
+            <R.Udvh />
+            <P>詳しく解説しますね！</P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            第3問の解説: <InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+            のペアのからはじめられない場合、
+            <InlinePrioritiesLabel>2</InlinePrioritiesLabel>のペアからはじめる
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              今回は
+              <Em>
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+                のペアからはじめようとしても、
+                <Strong>
+                  下段には
+                  <EmojiWithText letter="b" />
+                  しかありません。
+                </Strong>
+              </Em>
+            </P>
+            <R.Jmmp />
+            <P>
+              <Strong>
+                下段にふたつの料理 (
+                <BottomRightBadge bottomRightBadgeType="funcArg" inline />と
+                <BottomRightBadge bottomRightBadgeType="funcBound" inline />)
+                がないので、先に進められないのです
+              </Strong>
+              。
+            </P>
+            <P>
+              このように<InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+              のペアからはじめられない場合は、
+              <Strong>
+                <InlinePrioritiesLabel>2</InlinePrioritiesLabel>
+                のペアからはじめます。
+              </Strong>
+            </P>
+            <R.Dqey />
+            <Hr />
+            <P>
+              残りは
+              <H args={{ name: 'fastForward' }} />
+              で見ていきましょう:
+            </P>
+            <R.Diis />
+            <P>
+              というわけで、最終的に
+              <EmojiWithText letter="c" />と<EmojiWithText letter="b" />
+              が残りました。
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <InlineHeader>1.</InlineHeader>{' '}
+              <InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+              のペアがふたつ以上ある場合は、
+              <Strong>いちばん左のペアからはじめます。</Strong>
+            </P>
+            <R.Hykj />
+            <P>
+              <InlineHeader>2.</InlineHeader>{' '}
+              <InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+              のペアの間に<InlinePrioritiesLabel>2</InlinePrioritiesLabel>
+              のペアがある場合、
+              <Strong>
+                <InlinePrioritiesLabel>2</InlinePrioritiesLabel>
+                のペアの部分が
+                <BottomRightBadge bottomRightBadgeType="callArg" inline />
+                になります。
+              </Strong>
+            </P>
+            <R.Mpal />
+            <P>
+              <InlineHeader>3.</InlineHeader>{' '}
+              <InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+              のペアからはじめられない場合、(下段にひとつの料理しかない場合)
+              <Strong>
+                <InlinePrioritiesLabel>2</InlinePrioritiesLabel>
+                のペアの部分からはじめます。
+              </Strong>
+            </P>
+            <R.Dqey />
+          </>
+        )
+      },
+      {
+        title: <>暗記する必要はありません！</>,
+        content: (
+          <>
+            <EmojiSeparator emojis={['✨', '😉', '✨']} />
+            <P>
+              <InlineHeader>重要:</InlineHeader>{' '}
+              <Strong>これらの法則を暗記する必要はありません。</Strong>
+              なんとなく「<Em>こういう法則があるんだな</Em>
+              」と思ってくだされば大丈夫です。
+              中級以降、これらの法則を使う場面が出てきますが、覚えていなくても先に進めますのでご心配なく。
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>初級はここまで！</>,
+        content: (
+          <>
+            <P>
+              以上が初級編でした！基礎はほとんどカバーしたので、次の中級編からは応用に入っていきます。
+            </P>
+            <EmojiSeparator emojis={['🎉', '🤗', '🎉']} />
+            <P>
+              <Em>
+                「法則を覚えきれていない」という方でも、先に進むにあたって支障はありません。
+              </Em>
+              「なんとなく」の理解で十分です！
+            </P>
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/6.v2.jp.tsx b/src/contents/6.v2.jp.tsx
new file mode 100644
index 000000000..ef6775fec
--- /dev/null
+++ b/src/contents/6.v2.jp.tsx
@@ -0,0 +1,469 @@
+import React from 'react'
+import {
+  InlineHeader,
+  Em,
+  P,
+  Strong,
+  Hr,
+  Ul,
+  UlLi
+} from 'src/components/ContentTags'
+import Emoji from 'src/components/Emoji'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import NextLessonButton from 'src/components/NextLessonButton'
+import H from 'src/components/H'
+import EpisodeCardList from 'src/components/EpisodeCardList'
+import YesNoButtons from 'src/components/YesNoButtons'
+import { InlineEmojiBoxesForQuestion } from 'src/components/InlineEmojiBoxes'
+import EmojiWithText from 'src/components/EmojiWithText'
+import * as R from 'src/components/Runners'
+
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>弁当箱の暗号</>,
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'episodeWelcomeText' }} />
+              中級では、「<Strong>弁当箱の暗号</Strong>」を見ていきます。
+            </P>
+            <EmojiSeparator emojis={['❓', '🧐', '️❓']} />
+            <P>
+              このページにあるそれぞれの
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              には、
+              <Strong>あるパターンに基づいた暗号</Strong>
+              が隠されています。
+              <Em>暗号がどんな法則に基づいているか考えてみてください！</Em>
+            </P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            こちらに隠されている暗号は<Em>「0」</Em>です
+          </>
+        ),
+        content: (
+          <>
+            <R.Tiok />
+            <P>
+              これだけでは暗号の法則がわからないと思うので、
+              <InlineHeader>もう2個</InlineHeader>
+              見ていきましょう！
+            </P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            こちらに隠されている暗号は<Em>「1」</Em>です
+          </>
+        ),
+        content: (
+          <>
+            <R.Tfho />
+            <P>
+              そろそろ分かりましたか？<InlineHeader>あと1個</InlineHeader>
+              見ていきましょう！
+            </P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            こちらに隠されている暗号は<Em>「2」</Em>です
+          </>
+        ),
+        content: (
+          <>
+            <R.Idcf />
+            <P>
+              もうお分かりでしょうか？
+              <H args={{ name: 'yesNoQuiz' }} />
+              で確かめてみましょう！
+            </P>
+            <EmojiSeparator emojis={['⭕️', '🧐', '️❌']} />
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'lookAtThisBentoBox' }} />:
+            </P>
+            <R.Xemt />
+            <P>
+              <H args={{ name: 'question' }} />{' '}
+              <Em>
+                こちらに隠されている暗号は<Strong>「4」</Strong>でしょうか？
+              </Em>
+            </P>
+            <YesNoButtons answer="no" />
+          </>
+        )
+      },
+      {
+        title: <>正解は「3」</>,
+        content: (
+          <>
+            <R.Bpwl />
+            <P>では、どうやって暗号を解読するか説明しますね！</P>
+          </>
+        )
+      },
+      {
+        title: <>暗号の法則</>,
+        content: (
+          <>
+            <P>
+              まず、暗号が隠されている弁当箱には
+              <Strong>2種類の料理がある</Strong>
+              ことに注目します。
+              <Strong>
+                分かりやすいように、それぞれに、
+                <Emoji>🅰️</Emoji>と<Emoji>🅱️</Emoji>
+                の印をつけてみます。
+              </Strong>
+            </P>
+            <EmojiSeparator emojis={['🅰️', '🍱', '🅱️']} />
+            <P>
+              こちらには、
+              <EmojiWithText letter="a" />に<Emoji>🅰️</Emoji>、
+              <EmojiWithText letter="b" />に<Emoji>🅱️</Emoji>
+              の印をつけてみます。
+            </P>
+            <R.Blre />
+            <P>
+              こちらには、
+              <EmojiWithText letter="c" />に<Emoji>🅰️</Emoji>、
+              <EmojiWithText letter="d" />に<Emoji>🅱️</Emoji>
+              の印をつけてみます。
+            </P>
+            <R.Jmyv />
+            <P>
+              こちらには、
+              <EmojiWithText letter="e" />に<Emoji>🅰️</Emoji>、
+              <EmojiWithText letter="f" />に<Emoji>🅱️</Emoji>
+              の印をつけてみます。
+            </P>
+            <R.Ilnb />
+            <P>
+              こちらには、
+              <EmojiWithText letter="g" />に<Emoji>🅰️</Emoji>、
+              <EmojiWithText letter="h" />に<Emoji>🅱️</Emoji>
+              の印をつけてみます。
+            </P>
+            <R.Qsfp />
+            <P>
+              すると、暗号が隠されている弁当箱は、
+              <Strong>どれも次のようなパターンに従っている</Strong>
+              ことがわかります。
+            </P>
+            <Ul>
+              <UlLi>
+                <Em>
+                  一番左に<Emoji>🅰️</Emoji>の料理があり、
+                </Em>
+              </UlLi>
+              <UlLi>
+                <Em>
+                  真ん中に<Emoji>🅱️</Emoji>の料理があり、
+                </Em>
+              </UlLi>
+              <UlLi>
+                <Em>
+                  右上に<Emoji>🅱️</Emoji>の料理がひとつだけあり、
+                </Em>
+              </UlLi>
+              <UlLi>
+                <Em>
+                  右下に<Emoji>🅰️</Emoji>
+                  の料理がいくつか縦に並んでいます
+                </Em>
+                (ゼロ個の場合もあります)。
+              </UlLi>
+            </Ul>
+            <P>
+              <Strong>
+                もしこのようなパターンに沿っていない場合、暗号は存在しません。
+              </Strong>
+            </P>
+            <R.Eozk />
+            <P>それでは、暗号の解読方法を伝授しましょう！</P>
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            右下にある<Emoji>🅰️</Emoji>がついた料理の数が暗号
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <InlineHeader>暗号の解読方法:</InlineHeader>{' '}
+              もし弁当箱が先述のようなパターンに沿っている場合、
+              <Strong>
+                右下にある<Emoji>🅰️</Emoji>がついた料理の数が暗号
+              </Strong>
+              の数が暗号になります。
+            </P>
+            <R.Stio />
+            <P>
+              先ほどのクイズの例だと、右下に
+              <Emoji>🅰️</Emoji>である
+              <EmojiWithText letter="g" />
+              が縦に3個並んでいるので、暗号は<Strong>「3」</Strong>
+              になります。
+            </P>
+            <R.Sfop />
+            <P>
+              こちらの例だと、右下に
+              <Emoji>🅰️</Emoji>である
+              <EmojiWithText letter="e" />
+              が縦に2個並んでいるので、暗号は<Strong>「2」</Strong>
+              になります。
+            </P>
+            <R.Qvxe />
+            <P>
+              こちらの例だと、右下に<Emoji>🅰️</Emoji>である
+              <EmojiWithText letter="a" />
+              がひとつもないので、暗号は<Strong>「0」</Strong>
+              になります。
+            </P>
+            <R.Xpvh />
+            <P>
+              暗号はこれから何度も出現するので、仕組みをしっかり覚えていてください。「
+              <Strong>右下に同じ料理がいくつあるか</Strong>」がポイントです。
+            </P>
+            <R.Stio />
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: <>復習クイズ</>,
+        content: (
+          <>
+            <P>
+              ちゃんと覚えられたか、
+              <H args={{ name: 'yesNoQuiz' }} />
+              で確かめてみましょう！
+            </P>
+            <P>
+              <H args={{ name: 'lookAtThisBentoBox' }} />:
+            </P>
+            <R.Howy />
+            <P>
+              <H args={{ name: 'question' }} />{' '}
+              <Em>
+                こちらに隠されている暗号は<Strong>「4」</Strong>でしょうか？
+              </Em>
+            </P>
+            <YesNoButtons answer="no" />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: false }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: false, sentence: true }} />
+              右下に
+              <EmojiWithText letter="i" />
+              が縦に5個並んでいるので、暗号は<Strong>「4」ではなく「5」</Strong>
+              になります。
+            </P>
+            <R.Imqy />
+          </>
+        )
+      },
+      {
+        title: <>ここでちょっと難しい質問です</>,
+        content: (
+          <>
+            <P>それでは、ここでちょっと難しい質問をしてみましょう。</P>
+            <EmojiSeparator emojis={['❓', '🧐', '❓']} />
+            <P>
+              <H args={{ name: 'lookAtThisBentoBox' }} />:
+            </P>
+            <R.Qmof />
+            <P>
+              上の弁当箱の
+              <InlineEmojiBoxesForQuestion />
+              の部分には、
+              <Strong>何らかの暗号が隠された弁当箱が入ります。</Strong>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <Emoji>🍱</Emoji>,
+                <Emoji>➡️</Emoji>,
+                <InlineEmojiBoxesForQuestion />
+              ]}
+            />
+            <P>
+              ためしに、こちらに暗号が<Strong>「0」</Strong>
+              の弁当箱を用意しました。
+            </P>
+            <R.Nicg />
+            <P>
+              これを、先ほどの弁当箱の
+              <InlineEmojiBoxesForQuestion />
+              の部分に入れてみると、次のようになります。
+            </P>
+            <R.Mauj />
+            <P>
+              ここで質問です。
+              <Strong>
+                上の弁当箱を
+                <H args={{ name: 'play' }} />
+                すると、最終的にどうなるのでしょう？
+              </Strong>
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              難しいと思うので、
+              <H args={{ name: 'yesNoQuiz' }} />
+              で聞いてみます。
+            </P>
+            <R.Eavp />
+            <P>
+              <H args={{ name: 'whatsTheNumberQuestion', number: 1 }} />
+            </P>
+            <YesNoButtons answer="yes" tooHard />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: true }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: true, sentence: true }} />
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Wafy />
+            <Hr />
+            <P>
+              <Strong>つまり、最終的に暗号が「1」の弁当箱が残りました。</Strong>
+              右下に
+              <EmojiWithText letter="b" />
+              が1個あるので、暗号は<Strong>「1」</Strong>というわけです。
+            </P>
+            <R.Badn />
+            <P>
+              ここでポイントなのは、
+              <H args={{ name: 'play' }} />
+              する前と後で、
+              <Strong>料理ではなく、暗号の変化に注目してほしい</Strong>
+              ということです。暗号の変化だけに注目すると、
+            </P>
+            <Ul>
+              <UlLi>
+                <InlineEmojiBoxesForQuestion />
+                に入れた弁当箱の暗号は<Strong>「0」</Strong>だった。
+              </UlLi>
+              <UlLi>
+                最終的に、暗号が<Strong>「1」</Strong>の弁当箱が残った。
+              </UlLi>
+            </Ul>
+            <P>
+              つまり、もともと<Strong>「0」</Strong>だった暗号が
+              <Strong>「1」</Strong>になったということです。
+            </P>
+            <EmojiSeparator emojis={['0️⃣', '➡️', '1️⃣']} />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: <>まとめると</>,
+        content: (
+          <>
+            <P>
+              1. こちらの弁当箱の、
+              <InlineEmojiBoxesForQuestion />
+              の部分に…
+            </P>
+            <R.Qmof />
+            <P>
+              2. 暗号が<Strong>「0」</Strong>の弁当箱を…
+            </P>
+            <R.Nicg />
+            <P>
+              3. 入れて、最後まで
+              <H args={{ name: 'play' }} />
+              すると…
+            </P>
+            <R.Mauj />
+            <P>
+              4. 暗号が<Strong>「1」</Strong>の弁当箱が残ります:
+            </P>
+            <R.Badn />
+            <P>
+              5. つまり、もともと<Strong>「0」</Strong>だった暗号が
+              <Strong>「1」</Strong>になりました:
+            </P>
+            <EmojiSeparator emojis={['0️⃣', '➡️', '1️⃣']} />
+          </>
+        )
+      },
+      {
+        title: <>ということは…</>,
+        content: (
+          <>
+            <R.Qmof />
+            <P>
+              この弁当箱の
+              <InlineEmojiBoxesForQuestion />
+              に、暗号が隠された弁当箱を入れると、
+              <Strong>
+                <H args={{ name: 'play' }} />
+                した後に何の暗号が残るか
+              </Strong>
+              分かりましたか？
+            </P>
+            <EmojiSeparator emojis={['🍱', '🧐', '️🍱']} />
+            <P>答えは次のページに！</P>
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/7.v2.jp.tsx b/src/contents/7.v2.jp.tsx
new file mode 100644
index 000000000..922810525
--- /dev/null
+++ b/src/contents/7.v2.jp.tsx
@@ -0,0 +1,357 @@
+import React from 'react'
+import {
+  Hr,
+  Ul,
+  UlLi,
+  InlineHeader,
+  Em,
+  P,
+  Strong
+} from 'src/components/ContentTags'
+import EmojiNumber from 'src/components/EmojiNumber'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import H from 'src/components/H'
+import { InlineEmojiBoxesForQuestion } from 'src/components/InlineEmojiBoxes'
+import EpisodeCardList from 'src/components/EpisodeCardList'
+import YesNoButtons from 'src/components/YesNoButtons'
+import EmojiForLetter from 'src/components/EmojiForLetter'
+import Emoji from 'src/components/Emoji'
+import NextLessonButton from 'src/components/NextLessonButton'
+import * as R from 'src/components/Runners'
+
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>暗号が「1」の場合</>,
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'episodeWelcomeText' }} />
+              前回紹介したこちらの弁当箱ですが、
+            </P>
+            <R.Qmof />
+            <P>
+              今度は暗号が<Strong>「1」</Strong>
+              の弁当箱を
+              <InlineEmojiBoxesForQuestion />
+              に入れてみましょう。
+            </P>
+            <R.Slyk />
+            <P>
+              するとどうなるでしょうか？
+              <H args={{ name: 'pressFastForward', isFaster: true }} />
+            </P>
+            <R.Eemn />
+            <P>
+              最終的に暗号が<Strong>「2」</Strong>の弁当箱が残りました:
+            </P>
+            <R.Rceu />
+            <P>
+              つまり、暗号が<Strong>「1」</Strong>から<Strong>「2」</Strong>
+              に変化したというわけです。
+            </P>
+            <EmojiSeparator emojis={['1️⃣', '➡️', '2️⃣']} />
+          </>
+        )
+      },
+      {
+        title: <>暗号が「2」の場合</>,
+        content: (
+          <>
+            <P>暗号が「2」だったらどうでしょう？</P>
+            <R.Sisn />
+            <P>
+              <H args={{ name: 'pressFastForward', isFaster: true }} />
+            </P>
+            <R.Syhh />
+            <P>
+              最終的に暗号が<Strong>「3」</Strong>の弁当箱が残りました:
+            </P>
+            <R.Ablz />
+            <P>
+              つまり、暗号が<Strong>「2」</Strong>から<Strong>「3」</Strong>
+              に変化したというわけです。
+            </P>
+            <EmojiSeparator emojis={['2️⃣', '➡️', '3️⃣']} />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: <>1を足す弁当箱</>,
+        content: (
+          <>
+            <P>
+              <InlineHeader>すなわち:</InlineHeader> 下の弁当箱の
+              <InlineEmojiBoxesForQuestion />
+              に、暗号が隠された弁当箱を入れて
+              <H args={{ name: 'play' }} />
+              すると、
+              <Strong>その暗号に「1」を加えた弁当箱</Strong>
+              が最後に残ります。
+            </P>
+            <R.Xgei />
+            <P>
+              <InlineEmojiBoxesForQuestion />
+              の暗号が<Strong>「1」</Strong>だったら暗号が
+              <Strong>「2」</Strong>の弁当箱が残り、
+              <InlineEmojiBoxesForQuestion />
+              の暗号が<Strong>「2」</Strong>だったら暗号が
+              <Strong>「3」</Strong>の弁当箱が残るというわけです。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <InlineEmojiBoxesForQuestion size="md" />,
+                <Emoji>➕</Emoji>,
+                <EmojiNumber number={1} />
+              ]}
+            />
+            <P>
+              <H args={{ name: 'byTheWay' }} />{' '}
+              <Strong>上の弁当箱を暗記する必要はありません。</Strong>
+              そのまま読み進めて下さい！
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>つまり…</>,
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'bentoBoxPuzzle' }} />は
+              <Em>
+                ただのパズルかと思いきや、「<Strong>1を足す</Strong>
+                」という<Strong>簡単な計算</Strong>をすることもできる
+              </Em>
+              ようです。
+            </P>
+            <EmojiSeparator emojis={['🍱', '➕', '️1️⃣']} />
+            <P>
+              他にはどんな計算ができるのでしょう？たとえば、
+              <Strong>弁当箱同士の足し算はできるのでしょうか？</Strong>
+            </P>
+            <EmojiSeparator emojis={['🍱', '➕', '️🍱']} />
+            <P>さっそく検証してみましょう！</P>
+          </>
+        )
+      },
+      {
+        title: <>1 + 2 = 3?</>,
+        content: (
+          <>
+            <P>
+              こちらに暗号が<Strong>「1」</Strong>の弁当箱があります:
+            </P>
+            <R.Bpza />
+            <P>
+              そして、こちらには暗号が<Strong>「2」</Strong>の弁当箱があります:
+            </P>
+            <R.Vrvl />
+            <P>
+              このふたつの弁当箱の暗号を足して、<Strong>1 + 2 = 3</Strong>
+              を計算することはできるのでしょうか？
+            </P>
+            <EmojiSeparator emojis={['1️⃣', '➕', '️2️⃣']} />
+            <P>
+              <H args={{ name: 'yesNoQuiz' }} />
+              で試してみましょう！
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'lookAtThisBentoBox' }} />。
+            </P>
+            <R.Goif />
+            <P>先ほど紹介した「1を足す」弁当箱と微妙に異なる点があります。</P>
+            <Ul>
+              <UlLi>
+                <Em>
+                  上に
+                  <InlineEmojiBoxesForQuestion />
+                  がひとつではなく、ふたつあります。
+                </Em>
+              </UlLi>
+              <UlLi>
+                <Em>
+                  右下に5つの料理があります。「1を足す」弁当箱には4つしかありませんでした。
+                </Em>
+              </UlLi>
+            </Ul>
+            <Hr />
+            <P>
+              ここで、一番上の
+              <InlineEmojiBoxesForQuestion />
+              の部分に、先ほどの暗号が<Strong>「1」</Strong>
+              の弁当箱を入れてみます。
+            </P>
+            <R.Brrh />
+            <P>
+              そして、二番目の
+              <InlineEmojiBoxesForQuestion />
+              の部分に、先ほどの暗号が<Strong>「2」</Strong>
+              の弁当箱を入れてみます。
+            </P>
+            <R.Hdwy />
+            <P>では、ここで質問です。</P>
+            <R.Entr />
+            <P>
+              <H args={{ name: 'whatsTheNumberQuestion', number: 3 }} />
+            </P>
+            <YesNoButtons answer="yes" tooHard />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: true }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: true, sentence: true }} />
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Rome />
+            <P>
+              なんと、最終的に暗号が<Strong>「3」</Strong>の弁当箱が残りました！
+            </P>
+            <R.Dhdk />
+            <P>
+              最初に暗号が<Strong>「1」</Strong>と<Strong>「2」</Strong>
+              の弁当箱を
+              <InlineEmojiBoxesForQuestion />
+              に入れると、暗号が<Strong>「3」</Strong>
+              の弁当箱が残りました。ということは、<Strong>1 + 2 = 3</Strong>
+              が計算できた、ということでしょうか？
+            </P>
+            <EmojiSeparator emojis={['1️⃣', '➕', '️2️⃣']} />
+          </>
+        )
+      },
+      {
+        title: <>3 + 1 = 4は計算できる？</>,
+        content: (
+          <>
+            <P>
+              他の例で試してみましょう。たとえば、<Strong>3 + 1 = 4</Strong>
+              は計算できるでしょうか？
+            </P>
+            <EmojiSeparator emojis={['3️⃣', '➕', '️1️⃣']} />
+            <P>確かめてみましょう。もう一度、先ほどの弁当箱を用意します。</P>
+            <R.Goif />
+            <P>
+              そして、暗号が<Strong>「3」</Strong> (右下に
+              <Em>
+                <EmojiForLetter letter="g" />
+                が3個
+              </Em>
+              )の弁当箱を一番上の
+              <InlineEmojiBoxesForQuestion />
+              に入れます。
+            </P>
+            <R.Fatm />
+            <P>
+              その下の
+              <InlineEmojiBoxesForQuestion />
+              に、暗号が<Strong>「1」</Strong> (右下に
+              <Em>
+                <EmojiForLetter letter="f" />
+                が1個
+              </Em>
+              )の弁当箱を入れます。
+            </P>
+            <R.Dyov />
+            <P>
+              ここで、
+              <H args={{ name: 'pressPlay' }} />
+            </P>
+            <R.Unck />
+            <P>
+              こちらは、最終的に暗号が<Strong>「4」</Strong>
+              の弁当箱が残りました！
+            </P>
+            <R.Cpbj />
+            <P>
+              最初に暗号が<Strong>「3」</Strong>と<Strong>「1」</Strong>
+              の弁当箱を
+              <InlineEmojiBoxesForQuestion />
+              に入れると、暗号が<Strong>「4」</Strong>
+              の弁当箱が残りました。ということは、<Strong>3 + 1 = 4</Strong>
+              も計算できてしまいました。
+            </P>
+            <EmojiSeparator emojis={['3️⃣', '➕', '️1️⃣']} />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              すなわち、
+              <Em>
+                こちらの弁当箱にあるふたつの
+                <InlineEmojiBoxesForQuestion />
+                の部分に、それぞれ暗号が入った弁当箱を入れると、
+              </Em>
+            </P>
+            <R.Bxdf />
+            <P>
+              <Strong>
+                最終的に残る弁当箱の暗号は、ふたつの暗号を足し算したものになります。
+              </Strong>
+            </P>
+            <P>
+              言いかえると、上の弁当箱は
+              <Strong>暗号の足し算ができる弁当箱</Strong>なのです。
+            </P>
+            <EmojiSeparator emojis={['🍱', '➕', '🍱']} />
+            <P>
+              <H args={{ name: 'byTheWay' }} /> 今回も、
+              <Em>上の弁当箱を暗記する必要はありません。</Em>
+              そのまま読み進めて下さい！
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>足し算以外の計算はできるのか？</>,
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'bentoBoxPuzzle' }} />は
+              <Em>
+                ただのパズルかと思いきや、「<Strong>足し算</Strong>」
+              </Em>
+              ができてしまうんです。
+            </P>
+            <EmojiSeparator emojis={['🍱', '➕', '️🍱']} />
+            <P>
+              しかし、弁当箱ができるのは足し算だけではありません。次のページで、足し算以外の計算ができる弁当箱を見ていきましょう！
+            </P>
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/8.v2.jp.tsx b/src/contents/8.v2.jp.tsx
new file mode 100644
index 000000000..ed5d91b26
--- /dev/null
+++ b/src/contents/8.v2.jp.tsx
@@ -0,0 +1,236 @@
+import React from 'react'
+import { Em, Hr, P, Strong, Ul, UlLi } from 'src/components/ContentTags'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import EpisodeCardList from 'src/components/EpisodeCardList'
+import { InlineEmojiBoxesForQuestion } from 'src/components/InlineEmojiBoxes'
+import H from 'src/components/H'
+import YesNoButtons from 'src/components/YesNoButtons'
+import NextLessonButton from 'src/components/NextLessonButton'
+import * as R from 'src/components/Runners'
+
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>どんな計算ができる？</>,
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'episodeWelcomeText' }} />
+              こちらが、前回紹介した<Strong>「足し算」</Strong>
+              ができる弁当箱です:
+            </P>
+            <R.Bxdf />
+            <P>
+              そして下にあるのが、上のと微妙に違う弁当箱です。{' '}
+              <Strong>右下の部分が微妙に違う</Strong>
+              のがお分かりでしょうか。
+            </P>
+            <R.Ksya />
+            <P>
+              「足し算」の弁当箱では右下に<Strong>5個</Strong>
+              の料理がありましたが、こちらには
+              <Strong>4個</Strong>しかありません。
+            </P>
+            <P>
+              では、
+              <Em>こちらの弁当箱は、どんな計算ができるのでしょう？</Em>
+            </P>
+            <EmojiSeparator emojis={['🍱', '❓', '️🍱']} />
+            <P>
+              やっぱり前回と同じく、足し算ができるのでしょうか？
+              <H args={{ name: 'yesNoQuiz' }} />
+              で見ていきましょう！
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              ここに暗号が<Strong>「1」</Strong>の弁当箱がふたつあります:
+            </P>
+            <R.Dymt />
+            <R.Mhwq />
+            <P>
+              さきほどの、<Strong>足し算の弁当箱とは微妙に違う</Strong>弁当箱の
+              <InlineEmojiBoxesForQuestion />
+              の部分に入れてみます:
+            </P>
+            <R.Sojz />
+            <P>
+              <Em>
+                こちらも足し算(
+                <Strong>1 + 1 = 2</Strong>
+                )になるのでしょうか？
+              </Em>
+              それとも、別の計算結果が出るのでしょうか？というわけで、質問です。
+            </P>
+            <Hr />
+            <P>
+              <H args={{ name: 'whatsTheNumberQuestion', number: 2 }} />
+            </P>
+            <YesNoButtons answer="no" tooHard />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: false }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: false, sentence: true }} />
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Ktyt />
+            <P>
+              なんと、最終的に暗号が<Strong>「1」</Strong>の弁当箱が残りました！
+            </P>
+            <R.Aeyv />
+            <P>つまり、</P>
+            <Ul>
+              <UlLi>
+                暗号が<Strong>「1」</Strong>の弁当箱ふたつを入れて
+                <H args={{ name: 'play' }} />
+                すると、
+              </UlLi>
+              <UlLi>
+                最終的に暗号が<Strong>「1」</Strong>の弁当箱が残る。
+              </UlLi>
+            </Ul>
+            <P>どんな計算が起きているか、分かりましたか？</P>
+          </>
+        )
+      },
+      {
+        title: <>2と3を組み合わせると…</>,
+        content: (
+          <>
+            <P>
+              今度は暗号が<Strong>「2」</Strong>と<Strong>「3」</Strong>
+              の弁当箱を使ってみましょう:
+            </P>
+            <R.Bdlj />
+            <R.Ifwb />
+            <P>
+              それぞれを
+              <InlineEmojiBoxesForQuestion />
+              に入れるとこうなります。
+              <H args={{ name: 'pressFastForward', pleaseWait: true }} />
+            </P>
+            <R.Ngus />
+            <P>
+              こちらは、最終的に暗号が<Strong>「6」</Strong>
+              の弁当箱が残りました！
+            </P>
+            <R.Ujfj />
+            <P>つまり、</P>
+            <Ul>
+              <UlLi>
+                暗号が<Strong>「2」</Strong>と<Strong>「3」</Strong>
+                の弁当箱ふたつを入れて
+                <H args={{ name: 'play' }} />
+                すると、
+              </UlLi>
+              <UlLi>
+                最終的に暗号が<Strong>「6」</Strong>の弁当箱が残る。
+              </UlLi>
+            </Ul>
+            <P>そろそろどんな計算が起きたかお分かりでしょうか？</P>
+          </>
+        )
+      },
+      {
+        title: <>掛け算の弁当箱</>,
+        content: (
+          <>
+            <EmojiSeparator emojis={['🍱', '✖️', '️🍱']} />
+            <P>
+              そう、答えは<Strong>「掛け算」</Strong>です。
+              <Em>「1 ✕ 1 = 1」「2 ✕ 3 = 6」</Em>を計算していたんですね。
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              まとめると、この弁当箱は、
+              <Strong>
+                ふたつの
+                <InlineEmojiBoxesForQuestion />
+                に入っている弁当箱の暗号を掛け算してくれます。
+              </Strong>
+            </P>
+            <R.Drvu />
+            <P>
+              足し算の弁当箱は右下に料理が5個ありましたが、こちらは
+              <Strong>右下の料理が4個</Strong>
+              しかないのがポイントです。
+            </P>
+            <P>
+              <H args={{ name: 'byTheWay' }} /> 今回も、
+              <Strong>上の弁当箱を暗記する必要はありません。</Strong>
+              そのまま読み進めて下さい！
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>引き算や割り算もできます</>,
+        content: (
+          <>
+            <P>
+              時間の都合上ここでは紹介できませんが、掛け算以外にも、暗号の
+              <Strong>引き算や割り算</Strong>
+              ができる弁当箱もあります。
+            </P>
+            <EmojiSeparator emojis={['➖', '🍱️', '➗']} />
+            <P>
+              つまり、
+              <H args={{ name: 'bentoBoxPuzzle' }} />は<Strong>四則演算</Strong>{' '}
+              (足し算・掛け算・引き算・割り算)ができるのです。
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>他には何ができるのか？</>,
+        content: (
+          <>
+            <P>
+              弁当箱に四則演算ができることがわかりましたが、これだと
+              <Em>
+                <Strong>普通の電卓</Strong>とさほど変わりません
+              </Em>
+              よね。
+            </P>
+            <EmojiSeparator emojis={['🍱', '🤔', '🍱']} />
+            <P>
+              他に何か弁当箱にできることはあるのでしょうか？次のページで見ていきます！
+            </P>
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/9.v2.jp.tsx b/src/contents/9.v2.jp.tsx
new file mode 100644
index 000000000..595ec79f6
--- /dev/null
+++ b/src/contents/9.v2.jp.tsx
@@ -0,0 +1,498 @@
+import React from 'react'
+import {
+  Em,
+  P,
+  Strong,
+  InlineHeader,
+  Ul,
+  UlLi
+} from 'src/components/ContentTags'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import EpisodeCardList from 'src/components/EpisodeCardList'
+import EmojiWithText from 'src/components/EmojiWithText'
+import NextLessonButton from 'src/components/NextLessonButton'
+import EmojiForLetter from 'src/components/EmojiForLetter'
+import H from 'src/components/H'
+import Emoji from 'src/components/Emoji'
+import { InlineEmojiBoxesForQuestion } from 'src/components/InlineEmojiBoxes'
+import YesNoButtons from 'src/components/YesNoButtons'
+import * as R from 'src/components/Runners'
+
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>おやつ入りの弁当箱</>,
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'episodeWelcomeText' }} />
+              今回は、次の
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              を見ていきます:
+            </P>
+            <R.Bxfv />
+            <P>
+              この弁当箱、
+              <Em>
+                上のほうに
+                <EmojiWithText letter="z" />と<EmojiWithText letter="y" />
+                といった「おやつ」がある
+              </Em>
+              のに注目です。
+            </P>
+            <EmojiSeparator emojis={['🍬', '😍', '🍩']} />
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <EmojiForLetter letter="z" /> か <EmojiForLetter letter="y" />
+            、どっち？
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              次に、<Strong>暗号が「0」</Strong>の弁当箱を用意します。
+            </P>
+            <R.Fhlw />
+            <P>
+              こちらを、先ほどの弁当箱の
+              <InlineEmojiBoxesForQuestion />
+              の部分に入れてみます。
+            </P>
+            <R.Tkqr />
+            <P>
+              実は、これを最後まで
+              <H args={{ name: 'play' }} />
+              すると、
+              <Strong>
+                最終的に
+                <EmojiWithText letter="z" />か<EmojiWithText letter="y" />
+                のどちらかが残ります
+              </Strong>
+              。
+            </P>
+            <EmojiSeparator emojis={['🍬', '🤔', '🍩']} />
+            <P>というわけで、ここで質問です！</P>
+            <P>
+              <H args={{ name: 'question' }} /> 上の弁当箱を
+              <H args={{ name: 'play' }} />
+              したら最後に残るのは「
+              <Strong>
+                <EmojiWithText letter="z" />
+              </Strong>
+              」だ。
+              <H args={{ name: 'yesOrNo' }} />
+            </P>
+            <YesNoButtons answer="no" tooHard />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: false }} /> (残るのは
+            <EmojiWithText letter="y" />)
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: false, sentence: true }} />
+              残るのは
+              <EmojiWithText letter="y" />
+              です。
+            </P>
+            <P>
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Jliw />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              下の
+              <InlineEmojiBoxesForQuestion />
+              の部分に暗号が<Strong>「0」</Strong>の弁当箱を入れて
+              <H args={{ name: 'play' }} />
+              すると、
+              <Strong>
+                最終的に
+                <EmojiWithText letter="y" />
+                が残ります。
+              </Strong>
+            </P>
+            <R.Fqwj />
+            <P>
+              では、
+              <InlineEmojiBoxesForQuestion />
+              に他の暗号の弁当箱を入れたらどうなるのでしょう？確かめてみましょう。
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <EmojiForLetter letter="z" /> か <EmojiForLetter letter="y" />
+            、どっち？その2
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              今度は、<Strong>暗号が「1」</Strong>の弁当箱を用意し、
+            </P>
+            <R.Yehl />
+            <P>
+              先ほどの弁当箱の
+              <InlineEmojiBoxesForQuestion />
+              の部分に入れてみます。
+            </P>
+            <R.Mrky />
+            <P>というわけで、ここで質問です！</P>
+            <P>
+              <H args={{ name: 'question' }} /> 上の弁当箱を
+              <H args={{ name: 'play' }} />
+              したら最後に残るのは「
+              <Strong>
+                <EmojiWithText letter="z" />
+              </Strong>
+              」だ。
+              <H args={{ name: 'yesOrNo' }} />
+            </P>
+            <YesNoButtons answer="yes" tooHard />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: true }} /> (残るのは
+            <EmojiWithText letter="z" />)
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: true, sentence: true }} />
+              残るのは
+              <EmojiWithText letter="z" />
+              です。
+            </P>
+            <P>
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Ctyl />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <InlineHeader>ここまでをまとめると:</InlineHeader> 下の弁当箱の
+              <InlineEmojiBoxesForQuestion />
+              の部分に…
+            </P>
+            <Ul>
+              <UlLi>
+                暗号が<Strong>「0」</Strong>の弁当箱を入れると、
+                <Strong>
+                  <EmojiWithText letter="y" />
+                  が残る
+                </Strong>
+              </UlLi>
+              <UlLi>
+                暗号が<Strong>「1」</Strong>の弁当箱を入れると、
+                <Strong>
+                  <EmojiWithText letter="z" />
+                  が残る
+                </Strong>
+              </UlLi>
+            </Ul>
+            <R.Fqwj />
+            <EmojiSeparator emojis={['🍬', '🤔', '🍩']} />
+            <P>
+              面白いですね。では最後に、暗号が<Strong>「2」</Strong>
+              の場合を見てみましょう。
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <EmojiForLetter letter="z" /> か <EmojiForLetter letter="y" />
+            、どっち？その3
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              最後に、<Strong>暗号が「2」</Strong>の弁当箱を用意し、
+            </P>
+            <R.Kupy />
+            <P>
+              先ほどの弁当箱の
+              <InlineEmojiBoxesForQuestion />
+              の部分に入れてみます。
+            </P>
+            <R.Qdkf />
+            <P>というわけで、ここで質問です！</P>
+            <P>
+              <H args={{ name: 'question' }} /> 上の弁当箱を
+              <H args={{ name: 'play' }} />
+              したら最後に残るのは「
+              <Strong>
+                <EmojiWithText letter="z" />
+              </Strong>
+              」だ。
+              <H args={{ name: 'yesOrNo' }} />
+            </P>
+            <YesNoButtons answer="yes" tooHard />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: true }} /> (残るのは
+            <EmojiWithText letter="z" />)
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: true, sentence: true }} />
+              残るのは
+              <EmojiWithText letter="z" />
+              です。
+            </P>
+            <P>
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Gtwk />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <InlineHeader>ここまでをまとめると:</InlineHeader> 下の弁当箱の
+              <InlineEmojiBoxesForQuestion />
+              の部分に…
+            </P>
+            <Ul>
+              <UlLi>
+                暗号が<Strong>「0」</Strong>の弁当箱を入れると、
+                <Strong>
+                  <EmojiWithText letter="y" />
+                  が残る
+                </Strong>
+              </UlLi>
+              <UlLi>
+                暗号が<Strong>「1」</Strong>の弁当箱を入れると、
+                <Strong>
+                  <EmojiWithText letter="z" />
+                  が残る
+                </Strong>
+              </UlLi>
+              <UlLi>
+                暗号が<Strong>「2」</Strong>の弁当箱を入れると、
+                <Strong>
+                  <EmojiWithText letter="z" />
+                  が残る
+                </Strong>
+              </UlLi>
+            </Ul>
+            <R.Fqwj />
+            <P>
+              そろそろ法則が分かってきましたか？それでは、種明かしをしましょう！
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>暗号が「0」かどうか判別できる弁当箱</>,
+        content: (
+          <>
+            <P>
+              実は先ほどの弁当箱は、
+              <Strong>
+                <InlineEmojiBoxesForQuestion />
+                の暗号が「0」かどうかを判別できる
+              </Strong>
+              弁当箱なのです。
+            </P>
+            <H args={{ name: 'isZeroReview' }} />
+            <R.Nlxe />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <EmojiForLetter letter="z" />や<EmojiForLetter letter="y" />
+            の部分を変えてもいい
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              ちなみに、
+              <Strong>
+                <EmojiWithText letter="z" />や<EmojiWithText letter="y" />
+                の部分を別の料理に変えることもできます
+              </Strong>
+              。その場合も、結果は同じようになります。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetter letter="z" />,
+                <Emoji>➡️</Emoji>,
+                <Emoji>❓</Emoji>
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetter letter="y" />,
+                <Emoji>➡️</Emoji>,
+                <Emoji>❓</Emoji>
+              ]}
+            />
+            <P>
+              たとえば次の弁当箱だと、先ほど
+              <Strong>
+                <EmojiWithText letter="z" />
+              </Strong>
+              だった一番上の部分が
+              <Strong>
+                <EmojiWithText letter="w" />
+              </Strong>
+              と
+              <Strong>
+                <EmojiWithText letter="x" />
+              </Strong>
+              になっています。<Em>黄色</Em>で塗りつぶしてみました。
+            </P>
+            <R.Dvrw />
+            <P>
+              この場合、
+              <InlineEmojiBoxesForQuestion />が<Strong>「0」</Strong>なら最後は
+              <EmojiWithText letter="y" />、<Strong>「1」</Strong>なら
+              <EmojiWithText letter="w" />
+              と
+              <EmojiWithText letter="x" />
+              になります。
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>弁当箱は「条件分岐」もできる</>,
+        content: (
+          <>
+            <P>
+              今回紹介したのは、「<Em>暗号が0か、それ以外か</Em>
+              」を判別し、それぞれ違う結果を出す弁当箱でした。
+            </P>
+            <EmojiSeparator emojis={['0️⃣', '❓', '🔢']} />
+            <P>
+              こういった処理は専門用語で「<Strong>条件分岐</Strong>
+              」と言います。プログラミングをしたことがある方や、エクセルが得意な方には「
+              <Strong>IF文</Strong>
+              (または<Em>IF関数</Em>
+              )」と言ったほうが分かりやすいかもしれません。
+            </P>
+            <P>
+              ここでは時間の都合上紹介できませんでしたが、弁当箱を使えば、さまざまな条件分岐を表現することができます。たとえば「
+              <Em>Aの暗号はBの暗号より大きいか、小さいか、それとも等しいか</Em>
+              」を判別できる弁当箱もあります。
+            </P>
+            <EmojiSeparator emojis={['🅰️', '❓', '🅱️']} />
+            <P>
+              何が言いたいかというと、弁当箱は「
+              <Strong>四則演算だけでなく、条件分岐もできる</Strong>
+              」ということです。
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>条件分岐ができれば、複雑な計算ができる</>,
+        content: (
+          <>
+            <P>
+              条件分岐ができれば、
+              <Em>複雑な計算を行うことができます</Em>
+              。たとえば、<Strong>カラオケの利用料金の計算</Strong>。
+            </P>
+            <EmojiSeparator emojis={['🎤', '😄', '🎶']} />
+            <P>
+              「カラオケの部屋代が1時間あたりいくらか」「何時間利用したか」だけであれば四則演算で計算できます。しかし、実際は
+              <Em>
+                「平日か週末か」「昼か夜か」「学生か大人か」等によって料金体系が変わってくる
+              </Em>
+              ので、条件分岐をしなければ正しい料金は計算できません。
+            </P>
+            <P>
+              弁当箱は四則演算も条件分岐もできるので、カラオケの料金といった複雑な計算も(工夫すれば)できてしまうのです。
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>さらに複雑な処理</>,
+        content: (
+          <>
+            <P>
+              四則演算や条件分岐ができるだけでも十分すごいですが、
+              <Strong>弁当箱はもっと複雑な処理を行うことができます</Strong>。
+            </P>
+            <EmojiSeparator emojis={['✨', '🍱', '✨']} />
+            <P>
+              ただ、
+              <Em>
+                そんな複雑な処理の説明をする前に、もう少し弁当箱についての知識を深める必要があります。
+              </Em>
+            </P>
+            <P>
+              その一環として、中級最後となる次のページでは「
+              <Strong>結果が変わる弁当箱</Strong>」について説明していきます！
+            </P>
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/lib/contentVersion.ts b/src/lib/contentVersion.ts
new file mode 100644
index 000000000..3b79fe518
--- /dev/null
+++ b/src/lib/contentVersion.ts
@@ -0,0 +1,8 @@
+import getConfig from 'next/config'
+const { publicRuntimeConfig } = getConfig() || { publicRuntimeConfig: {} }
+export default (publicRuntimeConfig.devContentVersion ||
+  process.env.productionContentVersion ||
+  // Support for ts-node that doesn't go through next.config.js
+  process.env.DEV_CONTENT_VERSION ||
+  process.env.PRODUCTION_CONTENT_VERSION ||
+  'v1') as ('v1' | 'v2')
diff --git a/src/lib/contentsBundle.tsx b/src/lib/contentsBundle.tsx
index 9e22cca07..1e7a104bd 100644
--- a/src/lib/contentsBundle.tsx
+++ b/src/lib/contentsBundle.tsx
@@ -1,106 +1,123 @@
-// WARNING: Do not modify this file - it's generated automatically.
 import Jp0 from 'src/contents/0.jp'
+import Jp0V2 from 'src/contents/0.v2.jp'
 import En0 from 'src/contents/0.en'
 import Jp1 from 'src/contents/1.jp'
+import Jp1V2 from 'src/contents/1.v2.jp'
 import En1 from 'src/contents/1.en'
 import Jp10 from 'src/contents/10.jp'
+import Jp10V2 from 'src/contents/10.v2.jp'
 import En10 from 'src/contents/10.en'
 import Jp11 from 'src/contents/11.jp'
+import Jp11V2 from 'src/contents/11.v2.jp'
 import En11 from 'src/contents/11.en'
 import Jp12 from 'src/contents/12.jp'
+import Jp12V2 from 'src/contents/12.v2.jp'
 import En12 from 'src/contents/12.en'
 import Jp13 from 'src/contents/13.jp'
+import Jp13V2 from 'src/contents/13.v2.jp'
 import En13 from 'src/contents/13.en'
 import Jp14 from 'src/contents/14.jp'
+import Jp14V2 from 'src/contents/14.v2.jp'
 import En14 from 'src/contents/14.en'
 import Jp15 from 'src/contents/15.jp'
+import Jp15V2 from 'src/contents/15.v2.jp'
 import En15 from 'src/contents/15.en'
 import Jp16 from 'src/contents/16.jp'
+import Jp16V2 from 'src/contents/16.v2.jp'
 import En16 from 'src/contents/16.en'
 import Jp2 from 'src/contents/2.jp'
+import Jp2V2 from 'src/contents/2.v2.jp'
 import En2 from 'src/contents/2.en'
 import Jp3 from 'src/contents/3.jp'
+import Jp3V2 from 'src/contents/3.v2.jp'
 import En3 from 'src/contents/3.en'
 import Jp4 from 'src/contents/4.jp'
+import Jp4V2 from 'src/contents/4.v2.jp'
 import En4 from 'src/contents/4.en'
 import Jp5 from 'src/contents/5.jp'
+import Jp5V2 from 'src/contents/5.v2.jp'
 import En5 from 'src/contents/5.en'
 import Jp6 from 'src/contents/6.jp'
+import Jp6V2 from 'src/contents/6.v2.jp'
 import En6 from 'src/contents/6.en'
 import Jp7 from 'src/contents/7.jp'
+import Jp7V2 from 'src/contents/7.v2.jp'
 import En7 from 'src/contents/7.en'
 import Jp8 from 'src/contents/8.jp'
+import Jp8V2 from 'src/contents/8.v2.jp'
 import En8 from 'src/contents/8.en'
 import Jp9 from 'src/contents/9.jp'
+import Jp9V2 from 'src/contents/9.v2.jp'
 import En9 from 'src/contents/9.en'
+import contentVersion from 'src/lib/contentVersion'
 
 export default {
   '0': {
     en: En0,
-    jp: Jp0
+    jp: contentVersion === 'v2' ? Jp0V2 : Jp0
   },
   '1': {
     en: En1,
-    jp: Jp1
+    jp: contentVersion === 'v2' ? Jp1V2 : Jp1
   },
   '10': {
     en: En10,
-    jp: Jp10
+    jp: contentVersion === 'v2' ? Jp10V2 : Jp10
   },
   '11': {
     en: En11,
-    jp: Jp11
+    jp: contentVersion === 'v2' ? Jp11V2 : Jp11
   },
   '12': {
     en: En12,
-    jp: Jp12
+    jp: contentVersion === 'v2' ? Jp12V2 : Jp12
   },
   '13': {
     en: En13,
-    jp: Jp13
+    jp: contentVersion === 'v2' ? Jp13V2 : Jp13
   },
   '14': {
     en: En14,
-    jp: Jp14
+    jp: contentVersion === 'v2' ? Jp14V2 : Jp14
   },
   '15': {
     en: En15,
-    jp: Jp15
+    jp: contentVersion === 'v2' ? Jp15V2 : Jp15
   },
   '16': {
     en: En16,
-    jp: Jp16
+    jp: contentVersion === 'v2' ? Jp16V2 : Jp16
   },
   '2': {
     en: En2,
-    jp: Jp2
+    jp: contentVersion === 'v2' ? Jp2V2 : Jp2
   },
   '3': {
     en: En3,
-    jp: Jp3
+    jp: contentVersion === 'v2' ? Jp3V2 : Jp3
   },
   '4': {
     en: En4,
-    jp: Jp4
+    jp: contentVersion === 'v2' ? Jp4V2 : Jp4
   },
   '5': {
     en: En5,
-    jp: Jp5
+    jp: contentVersion === 'v2' ? Jp5V2 : Jp5
   },
   '6': {
     en: En6,
-    jp: Jp6
+    jp: contentVersion === 'v2' ? Jp6V2 : Jp6
   },
   '7': {
     en: En7,
-    jp: Jp7
+    jp: contentVersion === 'v2' ? Jp7V2 : Jp7
   },
   '8': {
     en: En8,
-    jp: Jp8
+    jp: contentVersion === 'v2' ? Jp8V2 : Jp8
   },
   '9': {
     en: En9,
-    jp: Jp9
+    jp: contentVersion === 'v2' ? Jp9V2 : Jp9
   }
 }

From 2c5e0c94e71d3a636074f95e3bc809a85360e924 Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Mon, 24 Jun 2019 14:48:54 -0700
Subject: [PATCH 2/3] Fix twemoji: use yarn --silent

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c50c07c9e..57c924a01 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "eslint:fix": "eslint --ext .js,.ts,.tsx --fix .",
     "build:en": "yarn tsc && yarn eslint && PRODUCTION_LOCALE=en yarn sitemap && PRODUCTION_LOCALE=en next build && PRODUCTION_LOCALE=en next export",
     "build:jp": "yarn tsc && yarn eslint && PRODUCTION_LOCALE=jp yarn sitemap && PRODUCTION_LOCALE=jp next build && PRODUCTION_LOCALE=jp next export",
-    "twemoji": "mkdir -p .twemoji && rm -f src/components/Twemoji/* && rm -f .twemoji/* && cp `yarn ts-node ./scripts/copyUsedEmojis.ts` .twemoji && svgr --ext tsx --no-svgo --filename-case kebab --no-dimensions -d src/components/Twemoji .twemoji && eslint --ext .tsx --fix src/components/Twemoji && yarn twemoji:bundle",
+    "twemoji": "mkdir -p .twemoji && rm -f src/components/Twemoji/* && rm -f .twemoji/* && cp `yarn --silent ts-node ./scripts/copyUsedEmojis.ts` .twemoji && svgr --ext tsx --no-svgo --filename-case kebab --no-dimensions -d src/components/Twemoji .twemoji && eslint --ext .tsx --fix src/components/Twemoji && yarn twemoji:bundle",
     "twemoji:bundle": "yarn ts-node ./scripts/generateEmojisBundle.ts",
     "twemoji:watch": "yarn ts-node ./scripts/generateEmojisBundle.ts watch",
     "type-check": "tsc -w",

From b44b8003fa71f6cf1b3a9a97669c6f9da97a2739 Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Mon, 24 Jun 2019 14:50:22 -0700
Subject: [PATCH 3/3] Start episode 1

---
 scripts/copyUsedEmojis.ts        |  3 +-
 src/components/Twemoji/1f381.tsx | 25 +++++++++++
 src/lib/emojisBundle.tsx         |  2 +
 src/lib/episodeEmojis.ts         | 72 ++++++++++++++++++++++----------
 src/lib/titles.ts                | 57 +++++++++++++++++--------
 5 files changed, 117 insertions(+), 42 deletions(-)
 create mode 100644 src/components/Twemoji/1f381.tsx

diff --git a/scripts/copyUsedEmojis.ts b/scripts/copyUsedEmojis.ts
index 943ada49e..1ab7d717b 100644
--- a/scripts/copyUsedEmojis.ts
+++ b/scripts/copyUsedEmojis.ts
@@ -104,7 +104,8 @@ const allUsedEmojis = uniq<string>([
   '📼',
   '🔠',
   '🐍',
-  '💡'
+  '💡',
+  '🎁'
 ])
 
 // Copied from Twemoji
diff --git a/src/components/Twemoji/1f381.tsx b/src/components/Twemoji/1f381.tsx
new file mode 100644
index 000000000..31cecfa8c
--- /dev/null
+++ b/src/components/Twemoji/1f381.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+
+const Svg1F381 = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 36 36" {...props}>
+    <path
+      fill="#FDD888"
+      d="M33 31c0 2.2-1.8 4-4 4H7c-2.2 0-4-1.8-4-4V14c0-2.2 1.8-4 4-4h22c2.2 0 4 1.8 4 4v17z"
+    />
+    <path
+      fill="#FDD888"
+      d="M36 11c0 2.2-1.8 4-4 4H4c-2.2 0-4-1.8-4-4s1.8-4 4-4h28c2.2 0 4 1.8 4 4z"
+    />
+    <path fill="#FCAB40" d="M3 15h30v2H3z" />
+    <path
+      fill="#DA2F47"
+      d="M19 3h-2c-1.657 0-3 1.343-3 3v29h8V6c0-1.656-1.343-3-3-3z"
+    />
+    <path
+      fill="#DA2F47"
+      d="M16 7c1.1 0 1.263-.516.361-1.147L9.639 1.147c-.902-.631-2.085-.366-2.631.589L4.992 5.264C4.446 6.219 4.9 7 6 7h10zm4 0c-1.1 0-1.263-.516-.361-1.147l6.723-4.706c.901-.631 2.085-.366 2.631.589l2.016 3.527C31.554 6.219 31.1 7 30 7H20z"
+    />
+  </svg>
+)
+
+export default Svg1F381
diff --git a/src/lib/emojisBundle.tsx b/src/lib/emojisBundle.tsx
index 7caefac05..b53759526 100644
--- a/src/lib/emojisBundle.tsx
+++ b/src/lib/emojisBundle.tsx
@@ -27,6 +27,7 @@ import Emoji1f36c from 'src/components/Twemoji/1f36c'
 import Emoji1f370 from 'src/components/Twemoji/1f370'
 import Emoji1f371 from 'src/components/Twemoji/1f371'
 import Emoji1f37f from 'src/components/Twemoji/1f37f'
+import Emoji1f381 from 'src/components/Twemoji/1f381'
 import Emoji1f389 from 'src/components/Twemoji/1f389'
 import Emoji1f3a4 from 'src/components/Twemoji/1f3a4'
 import Emoji1f3b6 from 'src/components/Twemoji/1f3b6'
@@ -158,6 +159,7 @@ export default {
   '1f370': Emoji1f370,
   '1f371': Emoji1f371,
   '1f37f': Emoji1f37f,
+  '1f381': Emoji1f381,
   '1f389': Emoji1f389,
   '1f3a4': Emoji1f3a4,
   '1f3b6': Emoji1f3b6,
diff --git a/src/lib/episodeEmojis.ts b/src/lib/episodeEmojis.ts
index 26e60f365..0927671d3 100644
--- a/src/lib/episodeEmojis.ts
+++ b/src/lib/episodeEmojis.ts
@@ -1,29 +1,55 @@
 import letterEmojiMapping from 'src/lib/letterEmojiMapping'
 import { episodeTitles } from 'src/lib/titles'
 import { cakeVariableName } from 'src/lib/specialVariableNames'
+import contentVersion from 'src/lib/contentVersion'
 
-const episodeEmojis: Record<keyof typeof episodeTitles | 0, string[]> = {
-  0: ['🤖', '🤔', '🧙‍♀️'],
-  1: ['🍱', '😍', '🍱'],
-  2: ['✅', '🤫', '💥'],
-  3: ['4️⃣', '😋', '🍱'],
-  4: ['🍱', '🤤', '3️⃣'],
-  5: ['🥇', '😬', '🥈'],
-  6: ['🅰️', '🧐', '️🅱️'],
-  7: ['➕', '🤨', '️🍱'],
-  8: ['🍱', '😵', '✖️'],
-  9: [letterEmojiMapping['z'], '😏', letterEmojiMapping['y']],
-  10: [
-    letterEmojiMapping[cakeVariableName],
-    '🥳',
-    letterEmojiMapping[cakeVariableName]
-  ],
-  11: [letterEmojiMapping['b'], '😎', letterEmojiMapping['e']],
-  12: ['➖', '🤯', '️1️⃣'],
-  13: ['✖️', '🥴', '↕️'],
-  14: ['🧙‍♀️', '😨', '🧙‍♀️'],
-  15: [letterEmojiMapping['a'], '🤩', letterEmojiMapping['b']],
-  16: ['️🤖', '🤗', '️🤖']
-}
+const episodeEmojis: Record<keyof typeof episodeTitles | 0, string[]> =
+  contentVersion === 'v2'
+    ? {
+        0: ['🤖', '🤔', '🧙‍♀️'],
+        1: ['🔢', '😍', '🎁'],
+        2: ['✅', '🤫', '💥'],
+        3: ['4️⃣', '😋', '🍱'],
+        4: ['🍱', '🤤', '3️⃣'],
+        5: ['🥇', '😬', '🥈'],
+        6: ['🅰️', '🧐', '️🅱️'],
+        7: ['➕', '🤨', '️🍱'],
+        8: ['🍱', '😵', '✖️'],
+        9: [letterEmojiMapping['z'], '😏', letterEmojiMapping['y']],
+        10: [
+          letterEmojiMapping[cakeVariableName],
+          '🥳',
+          letterEmojiMapping[cakeVariableName]
+        ],
+        11: [letterEmojiMapping['b'], '😎', letterEmojiMapping['e']],
+        12: ['➖', '🤯', '️1️⃣'],
+        13: ['✖️', '🥴', '↕️'],
+        14: ['🧙‍♀️', '😨', '🧙‍♀️'],
+        15: [letterEmojiMapping['a'], '🤩', letterEmojiMapping['b']],
+        16: ['️🤖', '🤗', '️🤖']
+      }
+    : {
+        0: ['🤖', '🤔', '🧙‍♀️'],
+        1: ['🍱', '😍', '🍱'],
+        2: ['✅', '🤫', '💥'],
+        3: ['4️⃣', '😋', '🍱'],
+        4: ['🍱', '🤤', '3️⃣'],
+        5: ['🥇', '😬', '🥈'],
+        6: ['🅰️', '🧐', '️🅱️'],
+        7: ['➕', '🤨', '️🍱'],
+        8: ['🍱', '😵', '✖️'],
+        9: [letterEmojiMapping['z'], '😏', letterEmojiMapping['y']],
+        10: [
+          letterEmojiMapping[cakeVariableName],
+          '🥳',
+          letterEmojiMapping[cakeVariableName]
+        ],
+        11: [letterEmojiMapping['b'], '😎', letterEmojiMapping['e']],
+        12: ['➖', '🤯', '️1️⃣'],
+        13: ['✖️', '🥴', '↕️'],
+        14: ['🧙‍♀️', '😨', '🧙‍♀️'],
+        15: [letterEmojiMapping['a'], '🤩', letterEmojiMapping['b']],
+        16: ['️🤖', '🤗', '️🤖']
+      }
 
 export default episodeEmojis
diff --git a/src/lib/titles.ts b/src/lib/titles.ts
index b19e040f7..376c6cd5e 100644
--- a/src/lib/titles.ts
+++ b/src/lib/titles.ts
@@ -3,6 +3,7 @@ import {
   episodeCategory,
   episodeNumberWithinCategory
 } from 'src/lib/episodeCategories'
+import contentVersion from 'src/lib/contentVersion'
 
 export const lessonTitle = {
   en: 'Y Combinator for Everyone',
@@ -33,24 +34,44 @@ export const episodeTitles = {
     15: '?',
     16: '?'
   },
-  jp: {
-    1: 'これっくらいの、お弁当箱に…',
-    2: '弁当箱の法則',
-    3: '4品の弁当箱',
-    4: '3段の弁当箱',
-    5: '順番はどうなる？',
-    6: '弁当箱の暗号',
-    7: '足し算',
-    8: '掛け算',
-    9: '条件分岐',
-    10: '結果が変わる弁当箱',
-    11: '結果が変わるのを防ぐ',
-    12: '引き算と省略表記',
-    13: '掛け算と条件分岐の省略表記',
-    14: '弁当箱の魔女',
-    15: '魔法のYコンビネータ',
-    16: 'コンピュータサイエンス'
-  }
+  jp:
+    contentVersion === 'v2'
+      ? {
+          1: '計算箱',
+          2: '弁当箱の法則',
+          3: '4品の弁当箱',
+          4: '3段の弁当箱',
+          5: '順番はどうなる？',
+          6: '弁当箱の暗号',
+          7: '足し算',
+          8: '掛け算',
+          9: '条件分岐',
+          10: '結果が変わる弁当箱',
+          11: '結果が変わるのを防ぐ',
+          12: '引き算と省略表記',
+          13: '掛け算と条件分岐の省略表記',
+          14: '弁当箱の魔女',
+          15: '魔法のYコンビネータ',
+          16: 'コンピュータサイエンス'
+        }
+      : {
+          1: 'これっくらいの、お弁当箱に…',
+          2: '弁当箱の法則',
+          3: '4品の弁当箱',
+          4: '3段の弁当箱',
+          5: '順番はどうなる？',
+          6: '弁当箱の暗号',
+          7: '足し算',
+          8: '掛け算',
+          9: '条件分岐',
+          10: '結果が変わる弁当箱',
+          11: '結果が変わるのを防ぐ',
+          12: '引き算と省略表記',
+          13: '掛け算と条件分岐の省略表記',
+          14: '弁当箱の魔女',
+          15: '魔法のYコンビネータ',
+          16: 'コンピュータサイエンス'
+        }
 }[locale]
 
 export const episodePrefixes = {