From 0f216fda42e2bb9c60977d684062c62ba3548da1 Mon Sep 17 00:00:00 2001 From: Shu Uesugi Date: Fri, 13 Sep 2019 01:11:33 -0400 Subject: [PATCH 1/2] Copy over JP contents --- src/components/Card.tsx | 22 +- src/components/ContentTags/List.tsx | 19 +- src/components/ContentTags/P.tsx | 27 +- src/components/EmojiSeparator.tsx | 26 +- .../ExpressionRunnerCaptionOnly.tsx | 25 +- .../ExpressionRunnerCaptionWrapper.tsx | 27 +- src/components/H.tsx | 8 +- src/contents/1.en.tsx | 605 ++++- src/contents/10.en.tsx | 1394 +++++++++++- src/contents/11.en.tsx | 982 ++++++++- src/contents/12.en.tsx | 1007 ++++++++- src/contents/13.en.tsx | 1284 ++++++++++- src/contents/14.en.tsx | 1446 +++++++++++- src/contents/15.en.tsx | 1273 ++++++++++- src/contents/16.en.tsx | 1209 +++++++++- src/contents/2.en.tsx | 628 +++++- src/contents/3.en.tsx | 782 ++++++- src/contents/4.en.tsx | 1144 +++++++++- src/contents/5.en.tsx | 1948 ++++++++++++++++- src/contents/6.en.tsx | 1383 +++++++++++- src/contents/7.en.tsx | 1461 ++++++++++++- src/contents/8.en.tsx | 1350 +++++++++++- src/contents/9.en.tsx | 1296 ++++++++++- 23 files changed, 19288 insertions(+), 58 deletions(-) diff --git a/src/components/Card.tsx b/src/components/Card.tsx index 79177e938..8a89252fc 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -6,6 +6,7 @@ import { colors, fontSizes, ns, radii, spaces } from 'src/lib/theme' import { H3 } from 'src/components/ContentTags' import { CardAction } from 'src/components/CardWrapper' import CardContent, { CardContentProps } from 'src/components/CardContent' +import locale from 'src/lib/locale' interface CardColorContextProps { color: CardProps['color'] @@ -42,6 +43,7 @@ export interface CardProps { content: React.ReactNode color?: CardProps['color'] } + t?: boolean } export interface CardState { @@ -86,7 +88,8 @@ const Card = ({ slideCount, isLast, footer, - header + header, + t }: CardProps) => (
{title && (

{title}

diff --git a/src/components/ContentTags/List.tsx b/src/components/ContentTags/List.tsx index f24708f5a..92f74bf0d 100644 --- a/src/components/ContentTags/List.tsx +++ b/src/components/ContentTags/List.tsx @@ -1,6 +1,7 @@ /** @jsx jsx */ import { css, jsx } from '@emotion/core' import { spaces } from 'src/lib/theme' +import locale from 'src/lib/locale' const commonListCss = css` padding: 0; @@ -26,9 +27,10 @@ const commonListItemCss = css` type DefaultUlProps = JSX.IntrinsicElements['ul'] interface UlProps extends DefaultUlProps { size?: 'md' | 'lg' + t?: boolean } -export const Ul = ({ size = 'md', ...props }: UlProps) => ( +export const Ul = ({ t, size = 'md', ...props }: UlProps) => (
    ( size === 'lg' && css` margin: ${spaces(1.75)} 0; + `, + !t && + locale === 'en' && + css` + opacity: 0.1; ` ]} /> @@ -44,9 +51,10 @@ export const Ul = ({ size = 'md', ...props }: UlProps) => ( type DefaultOlProps = JSX.IntrinsicElements['ol'] interface OlProps extends DefaultOlProps { size?: 'md' | 'lg' + t?: boolean } -export const Ol = ({ size, ...props }: OlProps) => ( +export const Ol = ({ t, size, ...props }: OlProps) => (
      ( `, css` counter-reset: text; - ` + `, + !t && + locale === 'en' && + css` + opacity: 0.1; + ` ]} /> ) diff --git a/src/components/ContentTags/P.tsx b/src/components/ContentTags/P.tsx index aafa2480f..124be4c36 100644 --- a/src/components/ContentTags/P.tsx +++ b/src/components/ContentTags/P.tsx @@ -1,6 +1,25 @@ -import styled from '@emotion/styled' +/** @jsx jsx */ +import { css, jsx } from '@emotion/core' import { spaces } from 'src/lib/theme' +import locale from 'src/lib/locale' -export const P = styled.p` - margin: 0 0 ${spaces(1)}; -` +type DefaultPProps = JSX.IntrinsicElements['p'] +interface PProps extends DefaultPProps { + t?: boolean +} + +export const P = ({ t, ...props }: PProps) => ( +

      +) diff --git a/src/components/EmojiSeparator.tsx b/src/components/EmojiSeparator.tsx index 286ded358..df640073c 100644 --- a/src/components/EmojiSeparator.tsx +++ b/src/components/EmojiSeparator.tsx @@ -5,6 +5,7 @@ import Emoji from 'src/components/Emoji' import { colors, fontSizes, ns, spaces, maxWidths } from 'src/lib/theme' import { VariableNames } from 'src/types/VariableNames' import letterEmojiMapping from 'src/lib/letterEmojiMapping' +import locale from 'src/lib/locale' interface EmojiSeparatorProps { emojis: string[] @@ -17,6 +18,7 @@ interface EmojiSeparatorProps { description?: React.ReactNode noBottomMargin: boolean noTopMargin: boolean + t?: boolean } const fontSize = (size: EmojiSeparatorProps['size']) => @@ -56,7 +58,8 @@ const EmojiSeparator = ({ cssOverrides, description, noBottomMargin, - noTopMargin + noTopMargin, + t }: EmojiSeparatorProps) => ( {description && (

      {description}
      diff --git a/src/components/ExpressionRunnerCaptionOnly.tsx b/src/components/ExpressionRunnerCaptionOnly.tsx index fa61d605d..1851fa295 100644 --- a/src/components/ExpressionRunnerCaptionOnly.tsx +++ b/src/components/ExpressionRunnerCaptionOnly.tsx @@ -1,14 +1,27 @@ /** @jsx jsx */ import { css, jsx } from '@emotion/core' import { colors, spaces } from 'src/lib/theme' +import locale from 'src/lib/locale' -const ExpressionRunnerCaptionOnly = (props: JSX.IntrinsicElements['div']) => ( +const ExpressionRunnerCaptionOnly = ({ + t, + ...props +}: JSX.IntrinsicElements['div'] & { + t?: boolean +}) => (
      ) diff --git a/src/components/ExpressionRunnerCaptionWrapper.tsx b/src/components/ExpressionRunnerCaptionWrapper.tsx index d5b2753d2..3c90f0c71 100644 --- a/src/components/ExpressionRunnerCaptionWrapper.tsx +++ b/src/components/ExpressionRunnerCaptionWrapper.tsx @@ -1,17 +1,26 @@ /** @jsx jsx */ import { css, jsx } from '@emotion/core' import { colors, fontSizes, spaces } from 'src/lib/theme' +import locale from 'src/lib/locale' -const ExpressionRunnerCaptionWrapper = ( - props: JSX.IntrinsicElements['div'] -) => ( +const ExpressionRunnerCaptionWrapper = ({ + t, + ...props +}: JSX.IntrinsicElements['div'] & { t?: boolean }) => (
      ) diff --git a/src/components/H.tsx b/src/components/H.tsx index d2974f0ee..20895fe4c 100644 --- a/src/components/H.tsx +++ b/src/components/H.tsx @@ -215,7 +215,7 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => { if (args.name === 'newUser') { if (locale === 'en') { return ( -

      +

      Hello! This is{' '} page {episodeNumber + 1} of the online course called “ {lessonTitle} @@ -393,7 +393,7 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => { return ( <> - Play ▶️ + Run ▶️ ) @@ -412,7 +412,7 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => { return ( <> - Fast Forward ⏩ + Play ⏩ ) @@ -431,7 +431,7 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => { return ( <> - Fast Forwarding… ⏩ + Playing… ⏩ ) diff --git a/src/contents/1.en.tsx b/src/contents/1.en.tsx index 5f4ca258b..e5f809d4f 100644 --- a/src/contents/1.en.tsx +++ b/src/contents/1.en.tsx @@ -1,4 +1,607 @@ import React from 'react' import EpisodeCardList from 'src/components/EpisodeCardList' +import { + P, + Strong, + Em, + InlineHeader, + Ul, + UlLi, + Hr +} from 'src/components/ContentTags' +import H from 'src/components/H' +import Emoji from 'src/components/Emoji' +import CustomEmoji from 'src/components/CustomEmoji' +import EmojiSeparator from 'src/components/EmojiSeparator' +import EmojiNumber from 'src/components/EmojiNumber' +import NextLessonButton from 'src/components/NextLessonButton' +import * as R from 'src/components/Runners' -export default () => +export default () => ( + この話はフィクションです, + content: ( + <> +

      + 本稿はゆるい物語調 + で話を進めていきます。ちなみに、この話はフィクションです。 + 😉 +

      +

      + まずは、この物語に登場する「 + 計算箱」の話をしましょう。 +

      + , + , + + ]} + description={<>これが計算箱のアイコンです！} + /> + + ) + }, + { + title: <>ラムダ村の計算箱, + content: ( + <> +

      + むかしむかし、「ラムダ村 + 」という小さな山奥の村があり、村人が仲良く暮らしていました。 +

      + ラムダ村の村人たち} + /> +

      + ラムダ村には、代々伝わる「計算箱 + 」という道具がありました。計算箱 + は、その名の通り算数の計算をしてくれる + 魔法の道具です。現代の電卓のようなもの + だと思ってください。 +

      + ✨, + , + ✨ + ]} + description={ + <> + 計算ができる魔法の道具「計算箱」 + + } + /> +

      この計算箱がどんなものか、説明しましょう！

      + + ), + footer: { + content: ( + <> +

      + ちなみに: 「ラムダ村」は、 + 上から読んでも下から読んでも「ラムダ村」です。 + なぜ「ラムダ」と名付けたかは最後に説明します！ +

      + + ) + } + }, + { + title: <>計算箱の例, + content: ( + <> +

      + こちらをご覧ください。これが、ラムダ村の村人が使っていた「 + 計算箱」のひとつです。 +

      + + 計算箱 + +
        + + 上には、数字の が入っています。 + + + 下には、1を足す印 {' '} + が入っています。 + +
      + , + 1️⃣, + + ]} + /> +

      では次に、この計算箱はどのように使うかを説明しましょう！

      + + ) + }, + { + title: ( + <> + ボタン + + ), + content: ( + <> +

      + それぞれの計算箱には + + ボタン + + がついており、それを押すと計算が実行されます。試しに、下の計算箱で + + + +

      + +

      + + 結果は になりました + + 。つまり、 + ➕{' '} + が計算できたということです。 +

      +
      +

      + 他の計算箱も見てみましょう！たとえばこちらをご覧になり、 + + + +

      + +

      + こちらは になり、すなわち{' '} + ➕{' '} + が計算できました！🙂 +

      + + ) + }, + { + title: <>1を足す機能, + content: ( + <> +

      ここまでをまとめると、下の計算箱のように、

      + +
        + + + 上に何らかの数字 {' '} + が入っていて、 + + + + + 下に が入っている場合、 + + + + + すると結果は{' '} + ➕{' '} + になる + + +
      +

      ということです。

      + , + ➕, + + ]} + /> +

      + これが、計算箱に備わっている機能のひとつ、「 + 1を足す機能 + 」です。この機能を使えば、 + + 何らかの数字に {' '} + を足す計算を行うことができる + + のです。 +

      + ✨, + , + ✨ + ]} + description={ + <> + 計算箱の1を足す機能: +
      + 何らかの数字に を足す + + } + /> + + ) + }, + { + title: <>1を引く機能, + content: ( + <> +

      + 計算箱は「1を足す」だけではなく、「1を引く + 」計算をすることもできます。こちらの計算箱を + + してみてください: +

      + +

      + 結果は になりました。すなわち{' '} + ➖{' '} + が計算できたということです！ + 🙂 +

      +
      +

      + このように、 + + 何らかの数字 の下に{' '} + が入っていると、 + ➖{' '} + を計算することができる + + のです。 +

      + + ➖{' '} + を計算できる + +

      + これが、計算箱に備わっているふたつめの機能、「 + 1を引く機能 + 」です。この機能を使えば、何らかの数字から{' '} + を引く計算を行うことができるのです。 +

      + ✨, + , + ✨ + ]} + description={ + <> + 計算箱の1を引く機能: +
      + 何らかの数字から を引く + + } + /> + + ) + }, + { + title: ( + <> + 使えるのは と{' '} + だけ + + ), + content: ( + <> +

      + ここが重要なポイントなのですが、計算に使うことができるのは{' '} + + と{' '} + だけです + + 。 +

      + , + , + + ]} + description={ + <> + と{' '} + しか使えない + + } + /> +

      + それでは質問です。 と{' '} + しか使えないのであれば、たとえば{' '} + ➕{' '} + {' '} + といった計算はどのように行えばいいのでしょうか？🤔 +

      + , + ➕, + + ]} + description={<>これを計算したいときはどうすればいい？} + /> + + ) + }, + { + title: ( + <> + を2回使う + + ), + content: ( + <> +

      + 正解を教えましょう。 + ➕{' '} + を計算したい場合、{' '} + + を2回 + + 使えばいいのです。 +

      + , + , + + ]} + description={ + <> + を2回使う + + } + /> +

      + こちらに {' '} + を2回使った計算箱を用意したので、実際に試してみましょう。 + +

      + +

      + 結果は になり、すなわち{' '} + ➕{' '} + + が計算できました！🙂 +

      + + ) + }, + { + title: ( + <> + も {' '} + も何回でも使える + + ), + content: ( + <> +

      + ちなみに、 + + も{' '} + {' '} + も、どちらも何回でも使うことができます + + 。😉 +

      + , + , + + ]} + /> + , + , + + ]} + description={ + <> + も{' '} + も何回でも使える + + } + /> +

      + たとえば、下の計算箱は、 + + を3回 + + 使うことで、 + ➕{' '} + を計算してくれます。 +

      + + ➕{' '} + を計算 + +

      + 一方、下の計算箱は、 + + を4回 + + 使うことで、 + ➖{' '} + を計算してくれます。 +

      + + ➖{' '} + を計算 + + + ) + }, + { + title: <>どんな大きな数字の足し算でも引き算でも可能, + content: ( + <> +

      + つまり、 + や {' '} + を何度も使うことで、 + どんな大きな数字の足し算でも引き算でも可能なのです。 +

      + , + , + + ]} + noBottomMargin + /> + , + , + + ]} + description={ + <> + も{' '} + も何度も使えば、 +
      + どんな大きな数字でも足し算・引き算できる + + } + /> +

      + たとえば、 + ➕{' '} + {' '} + を計算したかったら、どうすればいいでしょうか？ +

      + , + ➕, + + ]} + /> +

      + 答えを言うと、 + + の下に{' '} + {' '} + を10回配置した計算箱を実行すればいい + + のです。 +

      + + を10回配置 + +

      + このようにすれば、 + 計算箱はどんな大きな数字の足し算でも引き算でもできます。 +

      + + ) + }, + { + title: <>ラムダ村の村人は計算がとても苦手, + content: ( + <> +

      + まとめると、 + 計算箱は足し算や引き算を行ってくれる魔法の道具 + というわけです。 +

      + ➕, + , + ➖ + ]} + description={<>計算箱は足し算や引き算ができる} + /> +

      + そして、ラムダ村の村人は計算がとても苦手でした。 + だから、たとえば「 + ➕{' '} + + 」のような単純な足し算をするのにも、村人たちは計算箱に頼りきっていました。 +

      + 🙂, + , + 🙂 + ]} + description={ + <> + 俺ら計算が苦手だから、 + ➕{' '} + といった +
      + 単純な足し算も、計算箱がないとできない！ + + } + /> + + ), + footer: { + content: ( + <> +

      + ちなみに:{' '} + + 残念ながら、計算箱は「掛け算{' '} + ✖️ + 」や「割り算 ➗ + 」を行うことはできませんでした。 + +

      + 掛け算や割り算は、計算箱ではできない} + /> +

      + しかし、計算が大の苦手だった村人たちにとって、足し算や引き算ができるだけでも大いにありがたいことでした。 +

      + + ) + } + }, + { + title: <>3つめの計算箱の機能, + content: ( + <> +

      + + 実は計算箱には、今回紹介した「 + 1を足す機能{' '} + + 」や「 + 1を引く機能{' '} + + 」以外にも、 + さらにもうひとつ + の機能があります。 + +

      + , + , + ❓ + ]} + description={<>3つめの機能がある} + /> +

      次のページでは、計算箱の3つめの機能について紹介していきます！

      + + + ) + } + ]} + /> +) diff --git a/src/contents/10.en.tsx b/src/contents/10.en.tsx index 5f4ca258b..f7119bdb7 100644 --- a/src/contents/10.en.tsx +++ b/src/contents/10.en.tsx @@ -1,4 +1,1396 @@ import React from 'react' import EpisodeCardList from 'src/components/EpisodeCardList' +import { P, Em, Strong, Ul, UlLi, Hr } from 'src/components/ContentTags' +import H from 'src/components/H' +import BubbleQuotes from 'src/components/BubbleQuotes' +import EmojiNumber from 'src/components/EmojiNumber' +import BottomRightBadge from 'src/components/BottomRightBadge' +import EmojiSeparator from 'src/components/EmojiSeparator' +import CustomEmoji from 'src/components/CustomEmoji' +import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator' +import EmojiWithText from 'src/components/EmojiWithText' +import Emoji from 'src/components/Emoji' +import ExpressionRunnerCaptionOnly from 'src/components/ExpressionRunnerCaptionOnly' +import TwoColGrid from 'src/components/TwoColGrid' +import * as R from 'src/components/Runners' +import NextLessonButton from 'src/components/NextLessonButton' -export default () => +export default () => ( + 返してもらった計算箱は…, + content: ( + <> + +

      では、計算箱を返してやろう！

      + + ) + } + ]} + /> + 返してもらった計算箱 + +

      あれ…これだけか？

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      + これは「1を足す機能{' '} + + 」がある計算箱だけど… +

      +

      + 「1を引く機能{' '} + + 」がある計算箱や、「繰り返しの機能{' '} + 🔁」がある計算箱はどこにいったんだ？ +

      + + ) + } + ]} + /> + + + 1を引く機能 + + + } + right={ + <> + + 繰り返しの機能 🔁 + + + + + } + /> + +

      + それらは、まだ返すわけにはいかないな。 +

      +

      + + いまお前たちに返せるのは、「 + 1を足す機能{' '} + + 」がある計算箱だけだ。 + +

      + + ) + }, + { + type: 'scared', + children: ( + <> +

      な、なんだってー！

      + + ) + }, + { + type: 'crying', + children: ( + <> +

      + 話が違うじゃないか！さっきの問題を解いたら、計算箱を返してくれると言っただろう？ +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + 計算箱を返すとは言ったが… + + 計算箱のすべての機能を返すとは言っていないからな！ + +

      + + ) + }, + { + type: 'sad', + children: ( + <> +

      そ、そんなー！嘘つきじゃないか！

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      まあ、わたしは悪魔だからな。

      + + ) + } + ]} + /> + + ) + }, + { + title: <>どうすればいい？, + content: ( + <> + +

      + じゃあ、どうしたらすべての機能を返してもらえるんだ？ +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + そうだな…先ほどの問題ではお前たちに、 + + 計算箱の「 + 1を足す機能{' '} + + 」を弁当箱で再現してもらった + + よな。 +

      + + ) + } + ]} + /> + + {' '} + の計算箱を… + + + 弁当箱で再現した + +

      + だから、 + + 「1を引く機能{' '} + + 」や「 + 繰り返しの機能 🔁 + 」を返してほしかったら、 + + それらを同じように弁当箱で再現してみることだな！ + + +

      + + ) + } + ]} + /> + + + 1を引く機能 + + + 弁当箱で再現} + /> + + } + right={ + <> + + 繰り返しの機能 🔁 + + + + + 弁当箱で再現} + /> + + } + /> + +

      えー！

      +

      + 「1を足す機能{' '} + + 」を再現するのにも苦戦したのに、「 + 1を引く機能{' '} + + 」や「 + 繰り返しの機能 🔁 + 」を再現するなんて、できっこないよ！ +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      だったら諦めることだな。

      + + ) + }, + { + type: 'sad', + children: ( + <> +

      + で、でも…「 + 1を引く機能{' '} + + 」や「 + 繰り返しの機能 🔁 + 」がないと、 + + 引き算や、大きな数の足し算・引き算 + ができないよ！ + +

      +

      俺らは計算箱がないと何もできないんだ！

      + + ) + }, + { + type: 'crying', + children: ( + <> +

      頑張って弁当箱で再現するしかないのか…

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + + がある弁当箱のヒント + + ), + content: ( + <> + +

      + もちろん、ヒント無しでやれとは言わん。前回同様、ヒントを出してやろうじゃないか。 +

      +

      ミニオン、ヒントを説明したまえ！

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      わかりました。こちらの弁当箱をご覧ください。

      +

      + 前回と同じく、 + + それぞれの {' '} + には何らかの料理が入ります。 + +

      + + ) + } + ]} + /> + + それぞれの には +
      + 何らかの料理が入る +       + +

      なんか、めちゃくちゃ複雑な弁当箱だな…

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + そして、 + + それぞれの {' '} + に、ある法則に基づいて料理を入れると、 + + がある弁当箱になります。 + +

      + + ) + } + ]} + /> + + それぞれの に、 +
      + ある法則に基づいて料理を入れると、 +
      + + がある弁当箱になる +       + +

      + なに、 + + だって？ +

      +

      + 前回の + + の真逆なのかな？ +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + その通りです。上の + + がある弁当箱を、 +

      +
        + + + ある数字 {' '} + に変換できる弁当箱と合体させ、 + + + + + + すると、 + + +
      +

      + + 結果は {' '} + ➖ になる + + のです。 +

      + + ) + } + ]} + /> + + に変換できる弁当箱と、 +
      + + がある弁当箱を合体させ… +       + + + +
      + すると、結果は {' '} + ➖ になる +       + +

      + つまりこれを使えば、計算箱の「 + 1を引く機能{' '} + + 」を再現できるというわけだな。 +

      + + ) + } + ]} + /> + + 計算箱の「1を引く機能{' '} + + 」は… + + + + + がある弁当箱を +
      + 使えば、再現できる +       + + ) + }, + { + title: <>サヤちゃんが考えた弁当箱, + content: ( + <> + +

      + しかし…こんな複雑な弁当箱の{' '} + {' '} + を正しい法則で埋めるなんて…何日かかってもできなさそうだ！ +

      + + ) + } + ]} + /> + + それぞれの には +
      + 何らかの料理が入る +       +

      + 村人たちが困っていると、またサヤちゃんが何かひらめいたようです。 +

      + +

      ねえねえ、サヤも試しにやってみたんだけど…

      + + ) + }, + { + type: 'roll', + children: ( + <> +

      え…サヤちゃん、まさか答えが分かったというのかい？

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      とりあえずこれを見てみて！

      + + ) + } + ]} + /> + + 👧🏻 サヤちゃんの弁当箱 + + +

      + ふむふむ…まさか今回も一発で正解なんてことはありえないと思うけど、とりあえず試してみるか。 +

      +

      + 前回もやったように、 + + {' '} + に変換できる弁当箱と合体させてみよう。 + +

      + + + +

      + 今回は + + があるかどうかを確かめたいわけだから、 + ➖{' '} + が計算できないといけない。 +

      + , + ➖, + + ]} + /> +

      + つまり、 + + した時に、 + + 結果が {' '} + になれば成功というわけだ。 + +

      + 🍱, + ▶️, + , + + ]} + description={ + <> + 結果が になればOK + + } + /> + + ) + } + ]} + /> + + に変換できる弁当箱と、 +
      + 👧🏻 サヤちゃんの弁当箱を合体させ… +       + + + +
      + して、結果が になれば + 成功 🎉 +
      + それ以外なら失敗 😭 +       + +

      + じゃあ、 + + してみよう！ +

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + してみると… + + ), + content: ( + <> +

      + それでは、👧🏻{' '} + サヤちゃんの弁当箱を実行してみましょう！ +

      +

      + 途中まで早送りしてみますね。 + +

      + + +

      複雑すぎて、目で追うのがしんどい…

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + すべてを目で追う必要はないですよ！ + なんとなく、「へー、こんなふうに進んでいくんだ」と思っていただければ大丈夫です。 +

      +

      + また、「 + + → + + 」を押して、飛ばしていただいても結構です。 +

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      + それより見てみて！ + + 途中で{' '} + {' '} + と{' '} + {' '} + が同じ になったよ！ + +

      +

      + 前回と同じように + + 特別ルールで、 + {' '} + が別の料理に変わる + + んだよね。 +

      + + ) + } + ]} + /> +

      + 特別ルールを実行するには、 + + を押してみてください！ + +

      + + +

      + そうですね！結果が狂わないように、 + {' '} + の を{' '} + に変えました。 +

      +

      + では、最後まで + + してみてください！ +

      + + ) + } + ]} + /> + + +

      + 最終的に残った以下の弁当箱は、 + に変換できる弁当箱です！ +

      + + ) + } + ]} + /> + + + + +

      ということは、サヤちゃんの弁当箱は…

      +

      + + {' '} + に変換できる弁当箱と合体させ、 + + すると、結果が になる + + ということですね。 +

      + + ) + } + ]} + /> + + に変換できる弁当箱と、 +
      + 👧🏻 サヤちゃんの弁当箱を合体させ… +       + + + +
      + すると、結果が になる +       + +

      + つまり、 + ➖{' '} + が計算できたので、 + 成功です！ 🎉 +

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      やったー！

      + + ) + }, + { + type: 'surprised', + children: ( + <> +

      す、すごい…！

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + ➖{' '} + はできる？ + + ), + content: ( + <> + +

      + ぐぬぬ…しかし、 + ➖{' '} + が計算できたからといって、 + + その弁当箱に + + があるとはまだ言い切れない + + ぞ。 +

      +

      + たとえば、 + + ➖{' '} + は計算できるのかな？ + +

      + + ) + } + ]} + /> + , + ➖, + + ]} + description={<>これも計算できる？} + /> + +

      + じゃあ、 + + {' '} + に変換できる弁当箱と合体させてみる + + ね！ +

      + + + +

      + 合体したものを + + して、 + + 結果が になればいい + + んだよね。 +

      + + ) + } + ]} + /> + + に変換できる弁当箱と、 +
      + 👧🏻 サヤちゃんの弁当箱を合体させ… +       + + + +
      + して、結果が になれば + 成功 🎉 +
      + それ以外なら失敗 😭 +       + +

      + まずは実行してみるね。 + +

      +
        + + 今回は、最後まで止まらずに早送りするね！ + + + 複雑なので、目で追わなくても大丈夫だよ！ + + + ちょっと時間がかかるので、待てない方は下の「 + + → + + 」を押してね！ + +
      + + ) + } + ]} + /> + + +

      + 最終的に残った以下の弁当箱は、 + に変換できる弁当箱です！ +

      + + ) + } + ]} + /> + + + + +

      + つまり、 + ➖{' '} + が計算できたので、 + またしても成功です！ 🎉 +

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      わーい、わーい！

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      ぐぬぬ…

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + + がある法則 + + ), + content: ( + <> + +

      まさか、こうも簡単に正解されるとは思わなかったが…

      +

      + + サヤちゃんが考えた弁当箱は、 + + がある弁当箱だ！ + {' '} + 🎉 +

      + + ) + } + ]} + /> + + 👧🏻 サヤちゃんが考えた弁当箱には +
      + + がある +       + +

      やった！ということは、正解だね！

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + ちなみに、サヤちゃんが考えた弁当箱以外にも、 + + 以下の法則に当てはまる弁当箱であれば、 どれでも + + があるぞ。 + +

      + + ) + } + ]} + /> + + この法則に当てはまる弁当箱であれば、 +
      + + がある +       + +

      + たしかにサヤちゃんの弁当箱は、上の法則に当てはまっている… +

      +

      + よくこんなの分かったなあ。サヤちゃんは天才なのかもしれない！ +

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      + そんなことないよ！でも、これで「 + 1を引く機能{' '} + + 」を再現できたね！ +

      + + ) + } + ]} + /> + + ) + }, + { + type: 'summary', + title: ( + <> + 「1を引く機能 + 」も再現できた！ + + ), + content: ( + <> +

      + 今回学んだことを一言でまとめると、 + + 計算箱の「1を引く機能 + 」も、弁当箱で「再現」できる + + 、ということです。 +

      + , + , + , + 🍱, + + ]} + description={ + <> + 計算箱の「1を引く機能{' '} + + 」は、 +
      + 弁当箱で「再現」することができる + + } + /> +

      + たとえば、以下のような {' '} + ➖ {' '} + を計算する計算箱をご覧ください。 +

      + + ➖{' '} + を計算できる + +

      + これを弁当箱で再現するには、 + + に変換できる弁当箱と、 + + がある弁当箱を合体すればいい + + のです。 +

      + + に変換できる弁当箱と +
      + + がある弁当箱を +
      + 合体すれば、 + {' '} + の計算箱を再現できる +       +

      + 上の + + ボタンを押すと、答えが {' '} + になるのを確認できます。 +

      +
      +

      + まとめると、 + + 計算箱の「1を引く機能{' '} + + 」も、弁当箱で再現することができる + + のです。このポイントさえ覚えていただければ、細かいことは分からなくても大丈夫です！ +

      + , + , + , + 🍱, + + ]} + description={ + <> + 計算箱の「1を引く機能{' '} + + 」も、 +
      + 弁当箱で「再現」することができる + + } + /> + +

      + 今回の「1を引く機能{' '} + + 」を再現する問題も、超難問です。だから、サヤちゃんのように答えを思いつけなくても大丈夫です。 +

      +

      + 前回話した通り、 + + 答えを思いつけなくても、答えを見て、「なるほど、そういうことだったのか」と理解できれば、コンピュータサイエンスを学ぶ素養は十分すぎるほどあります。 + +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>中級はここまで！, + content: ( + <> + + +

      + どうだ、「1を引く機能{' '} + + 」も、弁当箱で再現したぞ！(やったのは俺らじゃなくて{' '} + 👧🏻 サヤちゃんだけど…) +

      +

      + 約束通り、「1を引く機能{' '} + + 」がある計算箱も返してもらう！ +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      ぐぬぬ…では、返してやろう！

      + + ) + }, + { + type: 'celebrate', + children: ( + <> +

      + やったー！🎉 🎉{' '} + 🎉 +

      + + ) + } + ]} + /> + + 「1を引く機能 + 」も返してもらった！ + + +

      + しかし、 + + 「繰り返しの機能 🔁 + 」がある計算箱は、まだ返すわけにはいかないな。返してほしかったら、これらも弁当箱で再現してみるんだな！ + +

      + + ) + } + ]} + /> + + + を{' '} + 回
      + 繰り返す +       + + } + right={ + <> + + を{' '} + 回
      + 繰り返す +       + + } + /> + +

      + 難しそう…しかし、こっちには 👧🏻{' '} + サヤちゃんがいる！彼女ならなんとかしてくれるはずだ！ +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + ちなみに、中級編はここまでだ。 + 決着は、次からはじまる上級編でつけよう！ +

      + + ) + }, + { + type: 'brave', + children: ( + <> +

      よーし、望むところだ！上級編へ進もう！

      + + ) + } + ]} + /> + + + ) + } + ]} + /> +) diff --git a/src/contents/11.en.tsx b/src/contents/11.en.tsx index 5f4ca258b..a170ee8da 100644 --- a/src/contents/11.en.tsx +++ b/src/contents/11.en.tsx @@ -1,4 +1,984 @@ import React from 'react' import EpisodeCardList from 'src/components/EpisodeCardList' +import { + P, + Strong, + Hr, + Em, + Ul, + UlLi, + InlineHeader +} from 'src/components/ContentTags' +import H from 'src/components/H' +import BubbleQuotes from 'src/components/BubbleQuotes' +import EmojiNumber from 'src/components/EmojiNumber' +import EmojiSeparator from 'src/components/EmojiSeparator' +import CustomEmoji from 'src/components/CustomEmoji' +import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator' +import ExpressionRunnerCaptionOnly from 'src/components/ExpressionRunnerCaptionOnly' +import Emoji from 'src/components/Emoji' +import TwoColGrid from 'src/components/TwoColGrid' +import InlineBorder from 'src/components/InlineBorder' +import * as R from 'src/components/Runners' +import NextLessonButton from 'src/components/NextLessonButton' +import YesNoButtons from 'src/components/YesNoButtons' +import { TwoPlusFour, Conclusion } from 'src/contents/2.jp' -export default () => +export default () => ( + 上級編へようこそ！, + content: ( + <> + , + 🤗, + + ]} + /> +

      + 中級編では、😈 悪魔から計算箱の「 + 1を足す機能 + 」と「1を引く機能 + 」を返してもらいました。どちらも、弁当箱で再現することができたのです。 +

      + + 「1を足す機能 」 + + + 弁当箱で再現 +
      + + 1を引く機能 + + + 弁当箱で再現 + + ) + }, + { + title: ( + <> + 「繰り返しの機能 🔁 + 」の復習 + + ), + content: ( + <> +

      + 一方、「繰り返しの機能 🔁 + 」は、まだ返してもらっていません。これを弁当箱で再現できないと返してもらえないのです。 +

      + + + を{' '} + 回
      + 繰り返す +       + + } + right={ + <> + + を{' '} + 回
      + 繰り返す +       + + } + /> +

      + 「繰り返しの機能 🔁 + 」について忘れてしまった方も多いと思うので、ここで復習をしましょう。 +

      +

      + まず、こちらの計算箱をご覧になり、 + +

      + + + ) + }, + { + title: <>大きな数の足し算や引き算に役立つ, + content: ( + <> +

      + こちらも復習になりますが、ラムダ村の村人たちにとって、計算箱の「 + 繰り返しの機能 🔁 + 」は、 + + 大きな数の足し算や引き算をするときに欠かせない機能 + + でした。 +

      + ✨, 🔁, ✨]} + description={ + <> + 「繰り返しの機能 🔁 + 」は、大きな数の +
      + 足し算・引き算に欠かせない + + } + /> +

      + たとえば、 + ➕{' '} + {' '} + を計算したい場合、繰り返しの機能を使わないと、 + を10回配置する必要があります。 +

      + + を10回配置 + +

      + + しかし初級その2でもやった通り、 + の数が増えると、 + {' '} + の数を間違えてしまう可能性があります。 + + そうすると、正しい計算ができません。 +

      + ❌, + , + ❌ + ]} + description={ + <> + の数を間違えやすい + + } + /> +

      + 一方、繰り返しの機能を使えば、 + ➕{' '} + {' '} + といった計算も、以下のようにシンプルになります。 + の数を間違えることもありません。 +

      + + を {' '} + 回繰り返す + + + + ) + }, + { + title: <>どうやって再現する？, + content: ( + <> + , + 🔁, + , + 🍱, + ❓ + ]} + description={ + <> + 計算箱の「繰り返しの機能 🔁 + 」を、 +
      + 弁当箱でどう「再現」する？ + + } + /> +

      + ラムダ村の村人たちは、計算箱の「繰り返しの機能{' '} + 🔁」を 😈{' '} + 悪魔から返してもらうべく、弁当箱で繰り返しの機能を再現しようと頑張っていました。しかし… +

      + +

      + うーん、 + + どんなに考えても、計算箱の「 + 繰り返しの機能 🔁 + 」を弁当箱で再現することができない… + +

      +

      サヤちゃん、何か思いついた？

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      サヤも、さっぱり分からないなあ…

      + + ) + }, + { + type: 'crying', + children: ( + <> +

      サヤちゃんでも分からないなんて…もうお手上げだ！

      + + ) + } + ]} + /> +

      + すると、悩んでいる村人たちのもとに、悪魔の助手の 🐶{' '} + ミニオンがやってきました。 +

      + +

      + みなさん、なかなかお困りのようですね。よければ、 + ヒントを出しましょうか？ +

      + + ) + }, + { + type: 'crying', + children: ( + <> +

      おお、ミニオン！お願いだ、ヒントを教えてくれ！

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + 分かりました、ではまず、計算箱の「 + 条件分岐の機能 ↕️ + 」について教えましょう。 +

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      + 「条件分岐の機能 ↕️ + 」だって？何だそりゃ？ +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>条件分岐の機能, + content: ( + <> + +

      まず、こちらの計算箱をご覧ください。

      + + ) + } + ]} + /> + + 「条件分岐の機能 ↕️」がある計算箱 + + +

      なんだこれは？

      +
        + + 左側に {' '} + {' '} + {' '} + という3種類の印があり、 + + + それぞれ {' '} + {' '} + {' '} + が入っている。 + +
      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + + それぞれの {' '} + {' '} + {' '} + には数字を入れることができます。 + + 同じ数字を入れても構いませんし、違う数字を入れても構いません。 +

      +

      + 具体例で説明したほうが分かりやすいと思うので、 + + {' '} + {' '} + {' '} + に何か適当な数字を入れてみてください！ + +

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      + 分かった。とりあえず、{' '} + + 上から順に {' '} + {' '} + を入れてみたよ。 + +

      +

      + これで、 + + を押すとどうなるのかな？ +

      + + ) + } + ]} + /> + + {' '} + を入れてみた + + +

      + になった！ +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      では、どうしてこうなったか説明しますね！

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + 真ん中が かどうか + + ), + content: ( + <> + +

      + 「条件分岐の機能 ↕️ + 」はまず、 + + {' '} + に入っている数字が かどうか + + チェックします。 +

      + + ) + } + ]} + /> + + +

      + {' '} + に入っている数字は なので、{' '} + + ではないよ。 + +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + そうですね。このように真ん中が{' '} + ではない場合、 + + {' '} + に入っている数字が最終的に残るのです。 + +

      + + ) + } + ]} + /> + + + + に入っていた{' '} + が残る + + +

      + なるほど、だから が残るのか！ +

      + + ) + } + ]} + /> + + ) + }, + { + type: 'yesNoQuiz', + title: ( + <> + + + ), + content: ( + <> + +

      + では、もうひとつ例を紹介します。こちらは、 + {' '} + にしてみましょう。こちらの計算箱をご覧ください。 +

      + + ) + } + ]} + /> + + +

      + 質問: これを + {' '} + すると、最終的に以下のようになるでしょうか？ +

      + + ) + } + ]} + /> + + + + ) + }, + { + title: ( + <> + + + ), + content: ( + <> + +

      + + 残るのは ではなく、 + になります。 + +

      + + ) + } + ]} + /> + + +

      どうしてこうなったか説明しましょう。

      +

      + こちらも、真ん中の数字が {' '} + かどうかチェックします。 +

      + + ) + } + ]} + /> + + +

      + 今回は真ん中が {' '} + ですね。この場合は前回と逆で、 + + {' '} + に入っている数字が最終的に残ります。 + +

      + + ) + } + ]} + /> + + + + に入っていた{' '} + が残る + + +

      なるほど…

      + + ) + } + ]} + /> + + ) + }, + { + type: 'summary', + title: ( + <> + + + ), + content: ( + <> +

      + まとめると、この「 + 条件分岐の機能 ↕️ + 」の法則は以下の通りです。 +

      + + 「条件分岐の機能 ↕️」がある計算箱 + +

      + + まず、 + {' '} + の中にある が{' '} + かどうかチェックします。 + +

      +
        + + + もし なら、{' '} + {' '} + の中にある {' '} + が残ります。 + + + + + もし でなければ、 + {' '} + の中にある が残ります。 + + +
      + + +

      + なるほど、「 + + 真ん中が かどうか？ + + 」という「 + 条件」によって上下に「 + 分岐」するから、「 + 条件分岐の機能 ↕️ + 」なのか。 +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>繰り返しの機能と関連がある, + content: ( + <> + +

      + この「 + 条件分岐の機能 ↕️ + 」は、 + + 実は計算箱にもともと備わっていた隠れ機能 + + なんです。 +

      + + ) + } + ]} + /> + 計算箱に備わっていた隠れ機能} + /> + +

      + へー、そんなこと、ラムダ村の俺らは誰も知らなかったぞ！ +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + そうなんです。「 + 条件分岐の機能 ↕️ + 」は + + あまり役に立たないので、いつしか忘れ去られてしまった + + のです。 +

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      + たしかに、「 + + 真ん中が かどうか？ + + 」をチェックできても、何の役にも立たなさそうだけど… +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + しかし、この「 + 条件分岐の機能 ↕️ + 」は、 + + 実は「 + 繰り返しの機能 🔁 + 」と関連がある + + のです。 +

      + + ) + } + ]} + /> + ↕️, + , + 🔁 + ]} + description={ + <> + 「条件分岐の機能 ↕️ + 」は、 +
      「繰り返しの機能 🔁 + 」と関連がある + + } + /> + +

      え、そうなの？

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + はい。ここが重要なのですが…村人のみなさんは「 + 繰り返しの機能 🔁 + 」を弁当箱で再現できずに苦戦していましたよね。 +

      + + ) + }, + { + type: 'sad', + children: ( + <> +

      うん、どうしていいか全然分からない…

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + 実は、まず「 + 条件分岐の機能 ↕️ + 」を弁当箱で再現することができれば、「 + 繰り返しの機能 🔁 + 」を弁当箱で再現できてしまうんです！ +

      +

      その理由は、また後に説明しますが…

      + + ) + } + ]} + /> + , + ↕️, + , + 🍱, + ❓ + ]} + description={ + <> + 「条件分岐の機能 ↕️ + 」を +
      + 弁当箱で再現できれば… + + } + /> + + , + 🔁, + , + 🍱, + ❓ + ]} + description={ + <> + 「繰り返しの機能 🔁 + 」も +
      + 弁当箱で再現できる！ + + } + /> + +

      なんと！

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + だからまずは、「条件分岐の機能{' '} + ↕️ + 」を弁当箱で再現してみてください！ +

      +

      + これが解ければ、「繰り返しの機能{' '} + 🔁 + 」を弁当箱で再現するのに一歩近づきますよ。 +

      + + ) + } + ]} + /> + + 「条件分岐の機能 ↕️」を… + + + + 弁当箱で再現できたら… + + } + /> + + + 「繰り返しの機能 🔁 + 」を +
      + 再現するのに一歩近づく！ +       + +

      そうか。よーし、やってみよう！

      + + ) + } + ]} + /> +

      + というわけで、次のページでは、「条件分岐の機能{' '} + ↕️」を弁当箱で再現してみます。次に進みましょう！ +

      + + + ) + } + ]} + /> +) diff --git a/src/contents/12.en.tsx b/src/contents/12.en.tsx index 5f4ca258b..7d7a3cbbe 100644 --- a/src/contents/12.en.tsx +++ b/src/contents/12.en.tsx @@ -1,4 +1,1009 @@ import React from 'react' import EpisodeCardList from 'src/components/EpisodeCardList' +import { P, Strong, Em, Ul, UlLi } from 'src/components/ContentTags' +import H from 'src/components/H' +import BubbleQuotes from 'src/components/BubbleQuotes' +import EmojiNumber from 'src/components/EmojiNumber' +import EmojiSeparator from 'src/components/EmojiSeparator' +import CustomEmoji from 'src/components/CustomEmoji' +import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator' +import ExpressionRunnerCaptionOnly from 'src/components/ExpressionRunnerCaptionOnly' +import TwoColGrid from 'src/components/TwoColGrid' +import Emoji from 'src/components/Emoji' +import InlineBorder from 'src/components/InlineBorder' +import * as R from 'src/components/Runners' +import NextLessonButton from 'src/components/NextLessonButton' -export default () => +export default () => ( + 本格的に上級向けになります, + content: ( + <> +

      + このページから、本格的に上級向けになります。 + 前のページに比べて、読むのに時間がかかるかもしれません。 +

      + 本格的に上級向けになります！} + /> + + ) + }, + { + title: <>条件分岐の再現, + content: ( + <> +

      + 村人たちは与えられたアドバイスをもとに、「 + 条件分岐の機能 ↕️ + 」を弁当箱で再現しようとしていました。 +

      + + 「条件分岐の機能 ↕️」を… + + + + 弁当箱で再現できる？ + + } + /> + +

      + 復習すると、上の計算箱は、 + + もし に{' '} + を入れたら下の{' '} + が残り… + +

      + + ) + } + ]} + /> + + に {' '} + を入れた場合… + + + + に入っている{' '} + が残る + + +

      + そして、 + + もし に{' '} + 以外の数字を入れたら、上の{' '} + {' '} + が残るんだよな。 + +

      + + ) + } + ]} + /> + + に {' '} + 以外の数字を入れた場合… + + + + に入っている{' '} + が残る + + +

      + これを弁当箱で再現するには、どうすればいいんだろう…？ +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>サヤちゃんの案, + content: ( + <> +

      するといつものように、サヤちゃんが何かひらめいたようです。

      + +

      サヤもちょっと考えてみた！これを見てくれる？

      + + ) + } + ]} + /> + + 「条件分岐の機能 ↕️」を… + + + + 👧🏻 弁当箱で再現してみた！ + + +

      + なんと！じゃあ、これが本当に再現できてるか、確かめてみよう！ +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>再現できてるか確かめよう, + content: ( + <> + +

      + + まず、サヤの弁当箱の一番下の「 + + {' '} + に変換できる弁当箱 + + 」のところに… + +

      + + 一番下の{' '} + + {' '} + に変換できる弁当箱 + + に… + +

      + + + こちらの {' '} + に変換できる弁当箱 + + を入れてみるね。 + +

      + + + +

      + 入れてみると次のようになるよ。 + +

      + + ) + } + ]} + /> + + 「 + + に変換できる弁当箱 + + 」のところに、 +
      + + に変換できる弁当箱 + + を入れてみた +
      (一番下の黄色の部分) +       + +

      + {' '} + に変換できる弁当箱が残った！ +

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      + うん、これって「条件分岐の機能{' '} + ↕️」を使ったときと同じだよね？ +

      + + ) + } + ]} + /> +

      + 「条件分岐の機能 ↕️」を使った場合: +

      + + に {' '} + を入れた場合… + + + + に入っている{' '} + が残る + +

      + 👧🏻 サヤの弁当箱を使った場合: +

      + + 一番下に に変換できる +
      + 弁当箱を入れた場合… +       + + + が残る + + +

      + たしかに、 + + 両方とも を入れると{' '} + が残る + + ね！ +

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + 以外の数字を入れた場合 + + ), + content: ( + <> + +

      + じゃあ、次は{' '} + + に変換できる弁当箱を{' '} + に入れてみる + + ね！ +

      + + + +

      + 入れてみると次のようになるよ。 + +

      + + ) + } + ]} + /> + + 「 + + に変換できる弁当箱 + + 」のところに、 +
      + + に変換できる弁当箱 + + を入れてみた +
      (一番下の黄色の部分) +       + +

      + おお、今度は先ほどと逆に、{' '} + {' '} + に変換できる弁当箱が残った！ +

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      + これも、「条件分岐の機能{' '} + ↕️」を使ったときと同じだよね？ +

      + + ) + } + ]} + /> +

      + 「条件分岐の機能 ↕️」を使った場合: +

      + + に {' '} + を入れた場合… + + + + に入っている{' '} + が残る + +

      + 👧🏻 サヤの弁当箱を使った場合: +

      + + 一番下に に変換できる +
      + 弁当箱を入れた場合… +       + + + が残る + + +

      + たしかに、 + + 両方とも を入れると{' '} + が残る + + ね！ +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>やっぱりサヤちゃんが正解？, + content: ( + <> + +

      + とういうことは、やっぱりサヤちゃんの弁当箱が、「 + 条件分岐の機能 ↕️ + 」の再現としては正解なのかな？ +

      + + ) + } + ]} + /> + + 「条件分岐の機能 ↕️」を… + + + + 👧🏻 サヤちゃんが弁当箱で再現してみた！ +
      + 果たして、これが正解なのか？ +       + +

      念のため、最終チェックをしたほうがいいかも！

      + + ) + }, + { + type: 'surprised', + children: ( + <> +

      最終チェックだって？

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + {' '} + {' '} + 全てを埋める + + ), + content: ( + <> + +

      いちおう最終チェックとして、

      +
        + + + {' '} + {' '} + {' '} + の全てを埋めてみて、 + + + + + それをサヤの弁当箱でも再現できるかやってみるよ！ + + +
      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      ん？どういうこと？

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      たとえば、

      +
        + + + 条件分岐の機能がある計算箱の{' '} + {' '} + {' '} + に、 + + + + + それぞれ {' '} + {' '} + を入れた場合… + + + + 最終的に が残るよね。 + +
      + + ) + } + ]} + /> + + {' '} + {' '} + の部分に、 + + + + {' '} + を入れた場合、 +
      + が {' '} + ではないので… +       + + + に入っていた{' '} + が残る + + +

      + では、 + + サヤの弁当箱の {' '} + {' '} + にも{' '} + {' '} + を入れてみるよ。 + +

      +

      + これを + したとき、 + + 先ほど同じく結果が になれば + 成功 🎉{' '} + というわけだよね。 + +

      + + ) + } + ]} + /> + + 👧🏻 サヤの弁当箱の… + + + + (一番上)に{' '} + を、 +
      + (一番下)に{' '} + を、 +
      + (上から二番目)に{' '} + を入れてみた +       + + + + に変換できる弁当箱 +
      + になれば成功 🎉 +       +       + +

      + なるほど。これを実行して計算箱に変換したときに{' '} + になれば… +

      +

      + サヤちゃんの弁当箱が条件分岐の弁当箱を再現できていると見て間違いないな。 +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>では確かめてみよう！, + content: ( + <> + +

      + では、 + {' '} + {' '} + にそれぞれ変換できる弁当箱を入れてみたよ。(黄色の部分) +

      +

      + というわけで、 + +

      +
        + + 複雑なので、目で追わなくても大丈夫だよ！ + + + ちょっと時間がかかるので、待てない方は下の「 + + → + + 」を押してね！ + +
      + + ) + } + ]} + /> + + 黄色の部分は、上から順に +
      + に変換できる弁当箱、 +
      + に変換できる弁当箱、 +
      + に変換できる弁当箱。 +       + +

      + 最終的に残ったこちらの弁当箱は、 + に変換できる弁当箱だね。 +

      + + + +

      + だから、 + が残ったので、 + 成功 🎉 です！ +

      + + ) + }, + { + type: 'celebrate', + children: ( + <> +

      やったー、さすがサヤちゃん！

      + + ) + } + ]} + /> + + ) + }, + { + type: 'summary', + title: ( + <> + + + ), + content: ( + <> + +

      お見事！サヤちゃん、正解です！

      +

      + サヤちゃんの弁当箱は、「条件分岐の機能{' '} + ↕️」を再現しています！ +

      + + ) + } + ]} + /> + + 「条件分岐の機能 ↕️」は… + + + + 👧🏻 サヤちゃんの弁当箱で +
      + 再現できている！ +       + +

      やったー！

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + ちなみに、 + + 以下のような 🅰️ 🅱️{' '} + {' '} + {' '} + の法則に沿っていれば、それぞれに何の料理が入っていても、条件分岐の機能を再現することができます。 + +

      + + ) + } + ]} + /> + + 以下の法則に当てはまる弁当箱で +
      + あれば、条件分岐の機能を再現できる +       + +

      + まとめると、 + + 計算箱の「条件分岐の機能{' '} + ↕️ + 」も、弁当箱で再現することができる + + のです。このポイントさえ覚えていただければ、細かいことは分からなくても大丈夫です！ +

      + + ) + } + ]} + /> + , + ↕️, + , + 🍱, + ↕️ + ]} + description={ + <> + 計算箱の「条件分岐の機能 ↕️ + 」も、 +
      + 弁当箱で「再現」することができる + + } + /> + + ) + }, + { + title: <>繰り返しの機能は？, + content: ( + <> + +

      うーん、条件分岐の機能を再現できたのはいいとして…

      +

      + 俺らがやりたいのは、「 + 繰り返しの機能 🔁 + 」を弁当箱で再現することなんだけど… +

      + + ) + } + ]} + /> + + + を{' '} + 回
      + 繰り返す +       + + } + right={ + <> + + を{' '} + 回
      + 繰り返す +       + + } + /> + +

      + そうですね。しかし、上級その1でぼくが言ったことを思い出して下さい。 +

      +

      + 「繰り返しの機能 🔁 + 」は、「 + 条件分岐の機能 ↕️ + 」と関連があるのです。 +

      + + ) + } + ]} + /> + 🔁, + , + ↕️ + ]} + description={ + <> + 「繰り返しの機能 🔁 + 」は、 +
      「条件分岐の機能 ↕️ + 」と関連がある + + } + /> + +

      + だから、先ほど「 + 条件分岐の機能 ↕️ + 」を弁当箱で再現したことによって、 +

      +

      + みなさんは「繰り返しの機能{' '} + 🔁 + 」を弁当箱で再現するのに大きく近づいたのです。 +

      + + ) + } + ]} + /> + , + ↕️, + , + 🍱, + ↕️ + ]} + description={ + <> + 「条件分岐の機能 ↕️ + 」を +
      + 弁当箱で再現したことにより… + + } + /> + + , + 🔁, + , + 🍱, + ❓ + ]} + description={ + <> + 「繰り返しの機能 🔁 + 」を +
      + 弁当箱で再現するのに大きく近づいた！ + + } + /> + +

      うーん…そう言われても、どういうことやらさっぱり…

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + では、 + 次のページでまたヒントを出しましょう！ +

      +

      というわけで、先に進んでみてください。

      + + ) + } + ]} + /> + + + ) + } + ]} + /> +) diff --git a/src/contents/13.en.tsx b/src/contents/13.en.tsx index 5f4ca258b..0c9e4b62d 100644 --- a/src/contents/13.en.tsx +++ b/src/contents/13.en.tsx @@ -1,4 +1,1286 @@ import React from 'react' import EpisodeCardList from 'src/components/EpisodeCardList' +import { + P, + Strong, + Em, + Ul, + UlLi, + InlineHeader +} from 'src/components/ContentTags' +import H from 'src/components/H' +import BubbleQuotes from 'src/components/BubbleQuotes' +import Emoji from 'src/components/Emoji' +import EmojiNumber from 'src/components/EmojiNumber' +import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator' +import CustomEmoji from 'src/components/CustomEmoji' +import EmojiForLetter from 'src/components/EmojiForLetter' +import EmojiSeparator from 'src/components/EmojiSeparator' +import TwoColGrid from 'src/components/TwoColGrid' +import InlineBorder from 'src/components/InlineBorder' +import * as R from 'src/components/Runners' +import ExpressionRunnerCaptionOnly from 'src/components/ExpressionRunnerCaptionOnly' +import NextLessonButton from 'src/components/NextLessonButton' -export default () => +export default () => ( + 難易度が上がります, + content: ( + <> +

      + このページからまた難易度がアップします。 + ただ、 + + 内容を完全に理解する必要はありません。少しくらい分からなくても、雰囲気で読み進めていただいて大丈夫です。 + +

      + 完全に理解する必要はありません！} + /> + + ) + }, + { + title: <>とても複雑な弁当箱, + content: ( + <> + +

      + では、これから「繰り返しの機能{' '} + 🔁 + 」を弁当箱で再現するのに役立つヒントを出していきますね。 +

      + + ) + } + ]} + /> + + + を{' '} + 回
      + 繰り返す +       + + } + right={ + <> + + を{' '} + 回
      + 繰り返す +       + + } + /> + +

      まずは、こちらの弁当箱をご覧ください。

      + + ) + } + ]} + /> + + +
      + するとどうなる？ +       + +

      めちゃくちゃ複雑な弁当箱だなあ…

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + ここで質問です。 + + 上の弁当箱を、 + {' '} + すると、どんな結果になるでしょう？ + +

      + + ) + }, + { + type: 'sad', + children: ( + <> +

      + そんなの、すぐ答えられるわけないだろう！ + こんな複雑な弁当箱、 + するのもひと苦労だよ！ +

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      + サヤはすぐ分かったよ！ + すると、 + + 結果は になる + + んじゃない？ +

      + + 👧🏻 結果は {' '} + になると思う！ + + + ) + }, + { + type: 'dog', + children: ( + <> +

      + + まさにその通り！サヤちゃん、正解です！ + 🎉 + +

      + + ) + }, + { + type: 'surprised', + children: ( + <> +

      へ？なんでそんな早く正解が分かるの…？

      +

      + + サヤちゃん、まさか一瞬で頭の中で + したのかい？ + +

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      + ううん、そんなことはしていないよ。じゃあ、どうやって解いたかを教えてあげるね！ +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>計算箱に置き換える・その1, + content: ( + <> + +

      + まず、 + + 一番上の部分と、右の真ん中の部分に注目してみて！ + +

      + + ) + } + ]} + /> + + 一番上の部分と、 +
      + 右の真ん中の部分に注目 +       + +

      + あ、 + + 一番上の部分をよく見ると、これは{' '} + に変換できる弁当箱だ！ + +

      + + + +

      + さらに、 + + 右の真ん中の部分をよく見ると、これは{' '} + に変換できる弁当箱だ！ + +

      + + + + + ) + }, + { + type: 'saya', + children: ( + <> +

      + そう！だから、とりあえずこれらを + + と{' '} + に置き換えてみる + + ね。 +

      + + ) + } + ]} + /> + + それぞれ と {' '} + に置き換えてみる + + +

      なるほど…！

      + + ) + } + ]} + /> + + ) + }, + { + title: <>計算箱に置き換える・その2, + content: ( + <> + +

      次に、この右の黄色の部分に注目してみて！

      + + ) + } + ]} + /> + 右の部分に注目 + +

      + これはもしかして… + + 中級その3でやった、 + + がある弁当箱かな？ + +

      + + + がある弁当箱 + + + ) + }, + { + type: 'saya', + children: ( + <> +

      + その通り！だから、この部分をいったん{' '} + + に置き換える + + ね。 +

      + + ) + } + ]} + /> + + に置き換えてみる + + +

      なるほど、だいぶシンプルになってきたぞ…

      + + ) + } + ]} + /> + + ) + }, + { + title: <>計算箱に置き換える・その3, + content: ( + <> + +

      最後に、右下の全ての部分に注目してみて！

      + + ) + } + ]} + /> + 右下の全ての部分に注目 + +

      + そういればこれは、前回やった「 + 条件分岐の機能 ↕️ + 」に変換できる弁当箱と同じだ！ +

      + + 「条件分岐の機能 ↕️ + 」に +
      + 変換できる弁当箱 +       + + ) + }, + { + type: 'saya', + children: ( + <> +

      + そう！だから、右下の部分を「 + 条件分岐の機能 ↕️ + 」に置き換えるんだ。 +

      + + 「条件分岐の機能 ↕️ + 」に置き換える + +

      + 以下のように置き換えてみるよ。 + + 複雑なので、↓の置き換え方は読み飛ばしても大丈夫！ + +

      +
        + + 上にある {' '} + は{' '} + の部分へ + + + その下にある は{' '} + の部分へ + + + 一番下の は{' '} + の部分へ + +
      +

      置き換えるとこうなります！

      + + ) + } + ]} + /> + + 「条件分岐の機能 ↕️ + 」
      + の部分を置き換えた後 +       + +

      なんと、超シンプルになった！

      + + ) + } + ]} + /> + + ) + }, + { + title: <>あとは実行するだけ, + content: ( + <> + +

      + あとは、これを + {' '} + するだけだよ。というわけで、 + +

      + + ) + } + ]} + /> + + +

      + ここまできたら、後は簡単だよね。 + + が{' '} + だから、 + に入っている{' '} + {' '} + が残る + + んだ。 +

      +

      + +

      + + ) + } + ]} + /> + + +

      + ほらね、サヤがさっき言ったように、 + + 最後に が残った + + でしょう？ +

      + + 👧🏻 結果は {' '} + になった！ + + + ) + }, + { + type: 'thinking', + children: ( + <> +

      たしかに…！

      + + ) + } + ]} + /> + + ) + }, + { + title: <>そのまま実行していたら？, + content: ( + <> + +

      + しかし… + サヤちゃんがとった手法はズルなんじゃないか？ +

      +

      + サヤちゃんは、もともとの弁当箱を、それぞれの要素に対応する計算箱に置き換えてから実行したけど… +

      + + ) + } + ]} + /> + サヤちゃんは、もともとの弁当箱を… + + + それぞれの要素に対応する計算箱に +
      + 置き換えてから実行していた +       + +

      + + もともとの弁当箱を、そのまま + {' '} + しても、同じ結果になっていたのかな？ + +

      + + ) + } + ]} + /> + + 🍱 もともとの弁当箱を、 +
      + そのまま + しても、サヤちゃんの +
      + 手法と同じ結果になっていたか？ +       + +

      では、確かめてみましょう！

      + + ) + } + ]} + /> + + ) + }, + { + title: <>そのまま実行してみる, + content: ( + <> + +

      + では、もともとの弁当箱を + + してみましょう！ +

      +
        + + ステップが非常に多いので、 + 3倍速で早送りします！{' '} + ⏩ ⏩ ⏩ + + + + 早送り中は、目に優しくなるように弁当箱を半透明にしています。 + + + + 待てない方は、「 + + → + + 」を押して下さい！ + +
      + + ) + } + ]} + /> + + +

      + 最後に残った以下の弁当箱は、 + + に変換できる弁当箱 + + ですね。 +

      + + + +

      + つまり、 + {' '} + すると、結果は になるのです。 +

      + + + ) + }, + { + type: 'surprised', + children: ( + <> +

      + + サヤちゃんのやり方でやったときと、結果が同じになった！ + +

      +

      + ということは、サヤちゃんのやり方は間違ってなかったのか… +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      そういうことですね！

      + + ) + } + ]} + /> + + ) + }, + { + type: 'summary', + title: <>ここまでの振り返り, + content: ( + <> + +

      ここで一旦立ち止まって振り返ってみましょう。

      +

      + さきほどサヤちゃんがやったのは、「 + + 弁当箱の一部分を、同じ効果がある計算箱と置き換える + + 」という手法でした。図で説明すると、以下のような感じですね。 +

      + + ) + } + ]} + /> + + 🍱 弁当箱の一部分を… + + + + 同じ効果がある 計算箱と置き換える + + +

      + 重要なのは、 + + このように弁当箱の一部分を計算箱と置き換えても、 + 実行したら結果は同じになる + + ということです。 +

      + + ) + } + ]} + /> + 🍱, + , + + ]} + description={<>弁当箱の一部分を計算箱と置き換えても…} + /> + + + + 実行したら +
      + 結果は同じになる！ +       +       + +

      + たしかに先ほどの場合は、 + + サヤちゃんの手法を使っても、そのまま実行しても、どちらも結果は{' '} + になった + + な。 +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + はい。 + + 複雑な弁当箱は、それぞれの部分をシンプルな計算箱に置き換えると分かりやすくなります。 + +

      +

      + + 結果は変わらないのだから、積極的に置き換えていくべき + + ということですね。 +

      + + ) + } + ]} + /> + + 🍱 複雑な弁当箱は… + + + + それぞれの部分を +
      + シンプルな計算箱に置き換えると +
      + 分かりやすくなる +       + + + + ちなみに、どちらの場合も +
      + 実行結果は になる +       +       + + ) + }, + { + title: <>繰り返しの機能との関係, + content: ( + <> + +

      + でもさあ…質問なんだけど、 + + この話って、「 + 繰り返しの機能 🔁 + 」と何の関係があるの？ + +

      + + ) + } + ]} + /> + + + を{' '} + 回
      + 繰り返す +       + + } + right={ + <> + + を{' '} + 回
      + 繰り返す +       + + } + /> +

      すると、サヤちゃんが何かに気づいたようです。

      + +

      + + ねえねえ、もしかしたらサヤ、「 + 繰り返しの機能 🔁 + 」を弁当箱で再現できたかもしれない！ + +

      + + ) + } + ]} + /> + 繰り返しの機能を再現できたかも！} + /> + +

      え！サヤちゃん、本当かい？

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      うん、それでは説明するね！

      + + ) + } + ]} + /> + + ) + }, + { + title: <>先ほどの弁当箱にいろいろ追加してみる, + content: ( + <> + +

      こちらが、先ほどの弁当箱だけど…

      + + ) + } + ]} + /> + 先ほどの弁当箱 + +

      + この弁当箱に、以下のように + いろいろ追加してみたの。 + 黄色の部分が追加した部分だよ。 +

      + + ) + } + ]} + /> + + 黄色が追加した部分 + + +

      ふむふむ…何やら複雑になったなあ。

      +

      で、これがどうしたっていうの？

      + + ) + } + ]} + /> + + ) + }, + { + title: <>実行してみると, + content: ( + <> + +

      + では、この弁当箱を + してみて！ +

      +

      + ( + + 次のページで早送りして詳細に解説するけど、今回は早送りは省略します！ + + ) +

      + + ) + } + ]} + /> + + +

      + 結果は になったよ。 +

      +

      + 早送りしてないから、なぜ {' '} + になったかは分からないけど… +

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      + うん、早送りは次のページでやるから、今はとりあえず「 + + なるほど、結果は になるんだ + + 」と受け入れてほしい！ +

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      + そうか、次のページでまた詳しく説明してくれるんだね。了解だよ。 +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>足し算ができる？, + content: ( + <> + +

      + それよりも重要なのは、 + + この って、 + + 実行前の弁当箱に入っていた、 + と{' '} + を足した数 + + だよね？ + +

      + + ) + } + ]} + /> + + 実行前の弁当箱に入っていた、 +
      + と を足すと{' '} + になる +       + +

      確かにそうだな…

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      + ということは、この弁当箱は {' '} + ➕ {' '} + を計算しているんじゃないかな？ +

      + + ) + } + ]} + /> + + ➕{' '} + を計算している？ + + +

      + つまり…足し算ができるってこと？ +

      + + ) + } + ]} + /> + + ), + footer: { + content: ( + <> +

      + 補足: 「 + + この弁当箱、本当に実行すると {' '} + になるの？ + + 」と疑われているかもしれませんが、ご安心ください！ + + 次のページでなぜ実行すると {' '} + になるのかを詳細に説明します + + ので、とりあえず読み進めてみてください！ +

      + + ) + } + }, + { + title: <>繰り返しを再現できた？, + content: ( + <> + +

      待てよ、そういえば…

      +

      + 以下のように計算箱の「 + 繰り返しの機能 🔁 + 」を使っても、 + + ➕{' '} + を計算できる + + よね。 +

      + + ) + } + ]} + /> + + 計算箱の「繰り返しの機能 🔁 + 」を使うと +
      + ➕{' '} + を計算できる +       + + + + + +

      + ということは…サヤちゃんの弁当箱は、上の「 + 繰り返しの機能 🔁 + 」を再現できているのか…？ +

      + + ) + } + ]} + /> + + この「繰り返しの機能 🔁 + 」を使った計算箱は… + + + + 以下の弁当箱で再現できている？🤔 + + +

      + もしそうなら…「繰り返しの機能{' '} + 🔁 + 」を弁当箱で再現できた、ということになるぞ！ +

      + + ) + } + ]} + /> + , + 🔁, + , + 🍱, + 🔁 + ]} + description={ + <> + 「繰り返しの機能 🔁 + 」を +
      + 弁当箱で再現できたかも？ + + } + /> + +

      + では、本当に再現できたのかどうか、次のページで確かめてみるね！先に進むよ！ +

      + + ) + } + ]} + /> + + + ), + footer: { + content: ( + <> +

      + 補足:{' '} + もし上に書いてあることが腑に落ちなくてもご心配なく！ + 次のページで詳細に解説します。 +

      + + ) + } + } + ]} + /> +) diff --git a/src/contents/14.en.tsx b/src/contents/14.en.tsx index 5f4ca258b..3fed71da7 100644 --- a/src/contents/14.en.tsx +++ b/src/contents/14.en.tsx @@ -1,4 +1,1448 @@ import React from 'react' import EpisodeCardList from 'src/components/EpisodeCardList' +import { P, Strong, Em, Ul, UlLi } from 'src/components/ContentTags' +import H from 'src/components/H' +import BubbleQuotes from 'src/components/BubbleQuotes' +import Emoji from 'src/components/Emoji' +import EmojiNumber from 'src/components/EmojiNumber' +import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator' +import InlineBorder from 'src/components/InlineBorder' +import CustomEmoji from 'src/components/CustomEmoji' +import EmojiSeparator from 'src/components/EmojiSeparator' +import TwoColGrid from 'src/components/TwoColGrid' +import * as R from 'src/components/Runners' +import NextLessonButton from 'src/components/NextLessonButton' -export default () => +export default () => ( + 最も複雑な弁当箱が登場, + content: ( + <> +

      + 今回は、今までで最も複雑な弁当箱が登場します。 +

      + 最も複雑な弁当箱が登場します} + /> +

      + しかしいつも通り、 + + 内容を完全に理解する必要はありません。少しくらい分からなくても、雰囲気で読み進めていただいて大丈夫です。 + +

      + 完全に理解する必要はありません！} + /> + + ) + }, + { + title: ( + <> +

      前回では…

      + + ), + content: ( + <> +

      + 前回は、 + + 計算箱の「 + 繰り返しの機能 🔁 + 」を、サヤちゃんが考えた弁当箱で再現できるかも？ + + というところで終わりました。 +

      + + この「繰り返しの機能 🔁 + 」を使った計算箱は… + + + + 以下の弁当箱で再現できている？🤔 + +

      + サヤちゃんの弁当箱は、前回 + + してみると{' '} + になりました。 + +

      +

      + つまり、「繰り返しの機能 🔁 + 」を使った場合と同じように、 + ➕{' '} + を計算できているかのように見えます。 +

      + 実行すると… + + + になる。ということは +
      ➕{' '} + を計算できている？ +       +

      + 今回は、本当にこの弁当箱が「 + 繰り返しの機能 🔁 + 」を再現できたのか検証していきましょう！ +

      + + ) + }, + { + title: <>途中で何が起きているのか？, + content: ( + <> + +

      + 今回は、前回サヤが考えた弁当箱を + して、 + + 途中、弁当箱がどう変化するかを確認してみる + + よ。 +

      +

      + そうすることで、 + + どいうった経緯で最終的に {' '} + になるのか + + を知ることができるからね。 +

      + + ) + } + ]} + /> + + 前回の弁当箱は、 + すると… + + + + 途中、弁当箱がどう変化した後… + + } + /> + + + 最終的に になるのか？ + + +

      + なるほど、 + + 早送りをすることで、途中で何が起きているか確かめてみようってことだね。 + +

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      それじゃあ、早送りしてみよう！

      + + ) + } + ]} + /> + + ) + }, + { + title: <>早送りしてみる, + content: ( + <> + +

      + というわけで、 + +

      +
        + + + 弁当箱の中身がたくさんあるので、スペースの都合上、ひとつひとつの料理を小さく表示しているよ。 + + 見にくくてごめん！ + + + 説明のために、何度も止めながらやっていくよ。 + + + 複雑なので、目で追わなくても大丈夫だよ！ + + + ちょっと時間がかかるので、待てない方は下の「 + + → + + 」を押してね！ + +
      + + ) + } + ]} + /> + + +

      めちゃくちゃ複雑だなあ…

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      + でもちょっと立ち止まって考えてみて。まず、この + 真ん中の黄色で示した部分に注目してくれる？ +

      + + ) + } + ]} + /> + + 真ん中の黄色の部分に注目 + + +

      + 上の黄色の部分が複雑なので、 + + 分かりやすくするために、そこだけを{' '} + 🍱{' '} + のアイコンに置き換えて省略してみると、下のようになる + + よ。 +

      + + ) + } + ]} + /> + + 先ほどの弁当箱の黄色の部分を
      + 🍱 と置き換えて省略した +       + +

      この時点で、

      +
        + + + には{' '} + が入っている + + +
      +

      …ということを覚えておいてね。

      + + ) + } + ]} + /> + + + には{' '} + が入っている + + + +

      ん？なんでそれを覚えておく必要があるんだい？

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      後で大事になってくるからだよ。

      +

      + では続きを見てみよう。 + + には{' '} + が入っているので、 + のほうが残ります。 + +

      + + ) + } + ]} + /> + + + + + + + ) + }, + { + title: <>2周目は…, + content: ( + <> + +

      + じゃあ、🍱 を省略する前の状態( + 黄色の部分)に戻すね。 +

      + + ) + } + ]} + /> + + 🍱 の部分を… + + + 省略前の状態に戻す + +

      + では、続きを見てみよう！ + +

      + + ) + } + ]} + /> + + +

      + あれ…この黄色の部分は、前回省略したのとまったく同じだ！ +

      + + ) + } + ]} + /> + + + 黄色の部分は、前回省略したのと +
      + まったく同じ +       +       + +

      + そう、この部分が繰り返されるんだよね。 + 🔁 +

      +

      + では、また + + 黄色の部分を 🍱{' '} + のアイコンで省略してみた + + よ。前回と何が違うかな？ +

      + + ) + } + ]} + /> + + + 黄色の部分を 🍱 で省略してみた + + + +

      前回と比べてみると、下の黄色の部分が違うね！

      + + ) + } + ]} + /> + + + 前回と比べると… + + + } + right={ + <> + + 黄色の部分が違う + + + } + /> + +

      そう。特に注目すべきなのは以下の二点だよ。

      +
        + + 先ほど には{' '} + が入っていたが、 + + 今回は が入っている + + + + + 一番下に {' '} + が追加されている + + +
      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      + ふむふむ… + + に入っていた数字は、 + から{' '} + に「 + 1減った」というわけか。 + +

      + + ) + } + ]} + /> + , + , + + ]} + description={ + <> + が1減った + + } + /> + +

      + じゃあもしかしたら、 + + このまま続けたら、次は{' '} + の数字が{' '} + になる + + のかも…？ +

      +

      続けて確かめてみるか。

      + + ) + } + ]} + /> + + ) + }, + { + title: <>3周目は…, + content: ( + <> + +

      + 再度、🍱 を省略する前の状態に戻したよ。 + +

      + + ) + } + ]} + /> + + +

      + + また真ん中の部分が前回と同じなので、🍱{' '} + のアイコンで省略してみる + + ね。 +

      + + ) + } + ]} + /> + 黄色の部分は前回と同じなので… + + + また 🍱 で省略してみた + + +

      では、前回とまた比べてみよう！

      + + ) + } + ]} + /> + + + 前回と比べると… + + + } + right={ + <> + + 黄色の部分が違う + + + } + /> + +

      特に注目すべきなのは…

      +
        + + 先ほど には{' '} + が入っていたが、 + + 今回は が入っている + + + + + またしても、一番下に {' '} + が追加されている + + +
      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      なんとなく、パターンが見えてきたかも…

      +

      + 特に、 + + に入っていた数字は、 + から{' '} + に、 + から{' '} + にと、 + 1ずつ減っているよね。 + +

      + + ) + } + ]} + /> + , + , + , + , + + ]} + description={ + <> + が1ずつ減っている + + } + /> + +

      + ということは、次は{' '} + + が{' '} + になるのかな？ + +

      +

      + そして、 + + が{' '} + になると、 + ではなく{' '} + {' '} + が残るようになるから、繰り返しがストップされる + + のかも？ +

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      + では、確かめてみよう！次が最後だよ！ +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>4周目。これが最後！, + content: ( + <> + +

      + これが最後だよ！🍱{' '} + を省略する前の状態に戻したので、 + +

      + + ) + } + ]} + /> + + +

      + + 例によって、真ん中の部分が前回と同じなので、 + 🍱 のアイコンで省略してみる + + ね。 +

      + + ) + } + ]} + /> + 黄色の部分は前回と同じなので… + + + また 🍱 で省略してみた + + +

      では、前回とまた比べてみよう！

      + + ) + } + ]} + /> + + + 前回と比べると… + + + } + right={ + <> + + 黄色の部分が違う + + + } + /> + +

      + + が{' '} + になった！ + +

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      + そう！ + + だから、 + に入っている{' '} + が残ることになるね。 + +

      + + ) + } + ]} + /> + + + + に入っている{' '} + が残る + + + + +

      + あとは、単純に {' '} + {' '} + {' '} + を計算するだけなので… +

      +

      + + 結果は になります！ + +

      + + ) + } + ]} + /> + + + + 最終結果は + + +

      では、ここまでを振り返ってみよう！

      + + ) + } + ]} + /> + + ) + }, + { + type: 'summary', + title: <>ここまでの振り返り, + content: ( + <> + +

      + まず、 + + もともとの弁当箱には数字の {' '} + と が入っていた + + よね。 +

      + + ) + } + ]} + /> + + 数字の と {' '} + が入っていた + + +

      + そして + + {' '} + していくと、終了直前に以下のようになった + + よね。 +

      + + ) + } + ]} + /> + 終了直前に以下のようになった + +

      + これは… + を{' '} + {' '} + 回繰り返すから、以下のように「 + 繰り返しの機能 🔁 + 」を使った計算箱とまったく同じだ！ +

      + + ) + } + ]} + /> + これと全く同じ！ + +

      + そう。つまり上の「 + 繰り返しの機能 🔁 + 」を使った計算箱は、今回早送りした弁当箱で再現できるということなんだ。 +

      + + ) + } + ]} + /> + + この「 + 繰り返しの機能 🔁 + 」を使った +
      + 計算箱は… +       + + + この弁当箱で「再現」できる！ + + +

      なるほど！

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      + 他にもたとえば、以下のように、 + ➕{' '} + を計算できる計算箱でも… +

      + + ) + } + ]} + /> + + ➕{' '} + を計算できる計算箱も… + + +

      同じように弁当箱で再現することができるよ。

      + + ) + } + ]} + /> + この弁当箱で再現できる + +

      + 上の弁当箱も早送りすると、先ほどと同じように、終了直前に以下のようになる。だから、繰り返しの機能と同じことができるんだ。 +

      + + ) + } + ]} + /> + + 先ほどと同じように、 +
      + 早送りが終わる直前に +
      + 以下のようになり… +       + + + ➕{' '} + を計算できる + + +

      + まとめると、「 + 繰り返しの機能 🔁 + 」を使って、🅰️ ➕{' '} + 🅱️ を計算できる計算箱は… +

      + + ) + } + ]} + /> + + 「繰り返しの機能 🔁」を使って、 +
      + 🅰️ ➕ 🅱️{' '} + を計算できる計算箱は… +       + +

      次のように弁当箱で再現することができるんだ。

      + + ) + } + ]} + /> + + この弁当箱で「再現」できる！ + + + ) + }, + { + title: <>繰り返しの機能を再現できた！, + content: ( + <> + +

      + サヤちゃん、正解です！見事、「 + 繰り返しの機能 + 」を弁当箱で再現しましたね！🎉 +

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      やったー！

      + + ) + } + ]} + /> + , + 🔁, + , + 🍱, + 🔁 + ]} + description={ + <> + 「繰り返しの機能 🔁 + 」を +
      + 弁当箱で再現できた！🎉 + + } + /> + +

      + ちなみにですが…下のように、 + + {' '} + を繰り返す計算箱は、どうやって弁当箱で再現すればいいか + + 分かりますか？ +

      + + ) + } + ]} + /> + これはどうやって弁当箱で再現する？ + +

      + おそらく、先ほどの弁当箱で右上にあった{' '} + を{' '} + {' '} + に変えるだけでいいんじゃないかな？ +

      + + ) + } + ]} + /> + + + 先ほどの弁当箱で右上にあった +
      + を{' '} + に変えるだけ(黄色の部分) +       +       + +

      + サヤちゃん、その通りです！これで、 + {' '} + を繰り返す計算箱を再現できます。 +

      + + ) + }, + { + type: 'surprised', + children: ( + <> +

      へー、そんなに簡単なんだ！

      + + ) + } + ]} + /> + + ) + }, + { + type: 'summary', + title: <>魔法のYコンビネータ, + content: ( + <> + +

      + しかし…弁当箱を使って、計算箱の「 + 繰り返しの機能 🔁 + 」を再現できるのはすごいなあ。 +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      そうですね。ここでひとつ説明したいことがあります。

      +

      + さきほど登場した、 + + 🅰️ ➕ 🅱️{' '} + を計算できる弁当箱の、 + + 下半分に使われていた部分にご注目ください + + + 。 +

      + + ) + } + ]} + /> + + 🅰️ ➕ 🅱️{' '} + を計算できる弁当箱の +
      + 下半分(黄色)の部分に注目 +       + +

      この下半分の部分がどうかしたの？

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + この下半分の部分は、🅰️ ➕{' '} + 🅱️ を計算できる弁当箱だけでなく、 + 🅰️ ➖ 🅱️{' '} + を計算できる弁当箱にも使われていましたよね。 +

      + + ) + } + ]} + /> + + 🅰️ ➖ 🅱️{' '} + を計算できる弁当箱も +
      + 下半分は同じだった +       + +

      確かにそうだけど…

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + 実は、今回登場した弁当箱において、必ず下半分に使われていたこちらの弁当箱が、「 + 繰り返しの機能 🔁 + 」の再現を可能にしていたのです。 +

      + + ) + } + ]} + /> + + 今回登場した弁当箱において、 +
      + 下半分の部分に使われていた +
      + こちらの弁当箱が、 +
      「繰り返しの機能 🔁 + 」の再現を +
      + 可能にしていた +       + +

      なんと！これが、繰り返しを可能にしていたのかあ…

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + そうですね。ちなみに、この弁当箱には、 + 特殊な呼び名があるんですよ。 +

      + + ) + }, + { + type: 'surprised', + children: ( + <> +

      へー、そうなんだ。何ていう呼び名なの？

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + 「Yコンビネータ + 」です。 +

      + + ) + } + ]} + /> + + この弁当箱の名は「Yコンビネータ」 + + +

      + 「Yコンビネータ」かあ。変な名前だね。 +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + ちなみに、以下のような法則に当てはまる弁当箱は、どれも「 + Yコンビネータ」と呼べるんですよ。 +

      + + ) + } + ]} + /> + + この法則に当てはまる弁当箱は全部 +
      「Yコンビネータ」 +       + +

      + そうなんだ。でもすごいね。 + + こんなシンプルな、 + 🅰️ と 🅱️{' '} + の二種類の料理しかない弁当箱が、繰り返しを可能にするなんて… + +

      +

      + まるで、魔法みたい！ + 🧙‍♀️{' '} + ✨ +

      + + ) + }, + { + type: 'smile', + children: ( + <> +

      + 確かに…まさに、「魔法のYコンビネータ + 」だね！ +

      + + ) + } + ]} + /> + + 魔法のYコンビネータ + + } + /> + + ) + }, + { + title: <>繰り返しの機能を返してもらえる？, + content: ( + <> +

      + 「繰り返しの機能 🔁 + 」をみごと弁当箱で再現した村人たちは、悪魔のもとに行きました。 +

      + +

      + どうだ、「繰り返しの機能{' '} + 🔁」を弁当箱で再現したぞ！ +

      +

      + 約束通り、「 + 繰り返しの機能 🔁 + 」は返してもらう！これで、計算箱のすべての機能をお前から取り返せるぞ！ +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      うぐぐ…

      + + ) + } + ]} + /> +

      + 村人たちの命運やいかに？次の上級最後のページ + で確かめてみましょう！ +

      + + + ) + } + ]} + /> +) diff --git a/src/contents/15.en.tsx b/src/contents/15.en.tsx index 5f4ca258b..3b254f22e 100644 --- a/src/contents/15.en.tsx +++ b/src/contents/15.en.tsx @@ -1,4 +1,1275 @@ import React from 'react' import EpisodeCardList from 'src/components/EpisodeCardList' +import { + P, + InlineHeader, + Strong, + Em, + Ul, + UlLi +} from 'src/components/ContentTags' +import H from 'src/components/H' +import BubbleQuotes from 'src/components/BubbleQuotes' +import Emoji from 'src/components/Emoji' +import EmojiSeparator from 'src/components/EmojiSeparator' +import EmojiNumber from 'src/components/EmojiNumber' +import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator' +import CustomEmoji from 'src/components/CustomEmoji' +import TwoColGrid from 'src/components/TwoColGrid' +import * as R from 'src/components/Runners' +import NextLessonButton from 'src/components/NextLessonButton' +import ExpressionRunnerCaptionOnly from 'src/components/ExpressionRunnerCaptionOnly' -export default () => +export default () => ( + 勝利！, + content: ( + <> + +

      + では約束通り、「繰り返しの機能{' '} + 🔁」を返してやろう！ +

      + + ) + } + ]} + /> + 繰り返しの機能を返してもらった！} + /> + +

      + やった！これで、 + 計算箱のすべての機能を返してもらった + ぞ！悪魔に勝った！ + 🎉 +

      + + ) + } + ]} + /> + , + , + 🔁 + ]} + description={<>計算箱のすべての機能を返してもらった！} + /> + +

      + これで、以前と同じように、計算箱を使って日々の計算を行うことができる！ +

      +

      + 難しい足し算や引き算でも、計算箱があればへっちゃらだ！ +

      + + ) + } + ]} + /> + + + 🅰️ ➕ 🅱️ を計算 + + + } + right={ + <> + + 🅰️ ➖ 🅱️ を計算 + + + } + /> + +

      + それについてなんだが… + + ちょっと伝えたいことがある。聞いてもらえるか？ + +

      + + ) + }, + { + type: 'roll', + children: ( + <> +

      ん…なんだ？まだ何か言いたいことがあるのか？

      + + ) + } + ]} + /> + + ) + }, + { + title: <>この弁当箱は…？, + content: ( + <> + +

      まず、こちらの弁当箱を見てみな。

      + + ) + } + ]} + /> + + +

      なんだ、この弁当箱は？

      +

      + + 上のほうに、 + と{' '} + {' '} + を入れる部分があるけれど… + +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + とりあえず、 + と{' '} + {' '} + に適当な数字を当てはめてみな！ +

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      + 分かった。じゃあ、こちらの{' '} + + に変換できる弁当箱 + + と… +

      + + + +

      + こちらの{' '} + + に変換できる弁当箱 + + を… +

      + + + +

      + と{' '} + {' '} + の部分に入れてみよう。 +

      + + ) + } + ]} + /> + + と{' '} + の部分に… + + + + と {' '} + に変換できる +
      + 弁当箱を入れてみた +       + +

      + では、これを + {' '} + するとどうなるか確かめてみよう！ +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>早送りしてみると…, + content: ( + <> +

      + では、 + 。 +

      +
        + + 複雑なので、目で追わなくても大丈夫です！ + + + ちょっと時間がかかるので、待てない方は下の「 + + → + + 」を押してください！ + +
      + + +

      + 結果は… + + {' '} + に変換できる弁当箱になった！ + +

      + + + + + ) + } + ]} + /> + + ) + }, + { + title: <>足し算ができる, + content: ( + <> + +

      + では、 + + もともと と{' '} + {' '} + に入れた数字は何だった + + かな？ +

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      + + もともと入れたのは と{' '} + だった。そして、結果は{' '} + になった… + +

      + + ) + } + ]} + /> + + と {' '} + を入れると… + + + + に変換できる弁当箱に + + +

      + ということはもしかして…足し算を計算した + のか？ +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      その通りだ！先ほどの弁当箱は、

      +
        + + + と{' '} + {' '} + に数字を入れ、 + + + + {' '} + すると… + + + + 結果は {' '} + ➕{' '} + になるんだ。 + + +
      + + ) + } + ]} + /> + + と{' '} + に数字を入れ、 +
      + +
      + すると… +       + + , + ➕, + + ]} + description={ + <> + 結果は {' '} + ➕ {' '} + になる + + } + /> + +

      + つまり、足し算ができる弁当箱 + というわけだな。 +

      + + ) + }, + { + type: 'surprised', + children: ( + <> +

      なんてこった…

      +

      + 前回、俺らは 🅰️ ➕{' '} + 🅱️ を計算するのに、以下のように「 + 繰り返しの機能 🔁 + 」を再現できる弁当箱を使っていたが… +

      + + 🅰️ ➕ 🅱️{' '} + を計算 + +

      + こんな複雑なことをしなくても、弁当箱で足し算をすることができるというわけか。 +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      まさに、その通りだ！

      + + ) + } + ]} + /> + + ) + }, + { + title: <>もうひとつの弁当箱, + content: ( + <> + +

      + では、こちらの弁当箱は何ができる弁当箱か分かるかな？ +

      + + ) + } + ]} + /> + + +

      先ほどの弁当箱と似ているけど、微妙に違うなあ…

      +

      + 前回同様、 + + と{' '} + に変換できる弁当箱を{' '} + と{' '} + に入れて、 + してみよう。 + +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + ちなみに、今回はかなり時間がかかるので、待てない場合は「 + + → + + 」を押してもいいぞ。 +

      + + ) + } + ]} + /> + + と {' '} + に変換できる +
      + 弁当箱を入れてみた +       + +

      + 結果は… + + {' '} + に変換できる弁当箱になった！ + +

      + + + + + ) + } + ]} + /> + + ) + }, + { + title: <>掛け算ができる, + content: ( + <> + +

      + 今回は、もともと {' '} + と に入れたのは{' '} + と {' '} + だった。そして、結果は {' '} + になった… +

      + + ) + } + ]} + /> + + と {' '} + を入れると… + + + + に変換できる弁当箱に + + +

      + これはもしかして…掛け算を計算できる + のか？ +

      + 掛け算ができる？} + /> + + ) + }, + { + type: 'devil', + children: ( + <> +

      その通りだ！先ほどの弁当箱は、

      +
        + + + と{' '} + {' '} + に数字を入れ、 + + + + {' '} + すると… + + + + 結果は {' '} + ✖️{' '} + になるんだ。 + + +
      + + ) + } + ]} + /> + + と{' '} + に数字を入れ、 +
      + +
      + すると… +       + + , + ✖️, + + ]} + description={ + <> + 結果は {' '} + ✖️ {' '} + になる + + } + /> + +

      + つまり、掛け算ができる弁当箱 + というわけだな。 +

      + + ) + } + ]} + /> + 掛け算ができる弁当箱が存在した！} + /> + + ) + }, + { + title: <>四則演算ができる, + content: ( + <> + +

      + すごい…！ + + 計算箱では掛け算ができなかったけど、弁当箱を使えば掛け算ができるのか！ + +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + そうだ。ちなみに今回は紹介する時間がないが、 + ふたつの数字の引き算や割り算 + も弁当箱で行うことができるぞ。 +

      +

      + つまり、 + 弁当箱は四則演算の全てを行うことができる + んだ。 +

      + + ) + } + ]} + /> + 弁当箱は四則演算の全てができる} + /> + + ) + }, + { + type: 'summary', + title: <>ここからは、雰囲気で読み進めてみてください, + content: ( + <> +

      + ここから先は非常に複雑なので、雰囲気で読み進めてください！内容を完全に理解する必要はありません。 +

      + 完全に理解する必要はありません！} + /> + + ) + }, + { + title: <>Yコンビネータと組み合わせると, + content: ( + <> + +

      + また、前回「繰り返しの機能{' '} + 🔁」を再現するのに使った「 + Yコンビネータ + 」の弁当箱と組み合わせることで、さらに複雑な計算をすることもできる。 +

      + + 前回「繰り返しの機能 🔁 + 」を +
      + 再現するのに使った「Yコンビネータ」 +       + + ) + }, + { + type: 'thinking', + children: ( + <> +

      どういうこと？

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + たとえば、「階乗 + 」という計算がある。これは「 + + ある数からはじめて、1を引いていき、 + {' '} + になるまで繰り返し掛け算をする + + 」という計算だ。 +

      +

      + たとえば、「 + {' '} + の階乗」は、以下のようになる。実際に計算すると{' '} + になるぞ。 +

      + , + ✖️, + , + ✖️, + + ]} + description={ + <> + の階乗。 +
      + 実際に計算すると になる + + } + /> +

      + 同じように、「 + {' '} + の階乗」は、以下のようになる。実際に計算すると{' '} + になるぞ。 +

      + , + ✖️, + , + ✖️, + , + ✖️, + + ]} + description={ + <> + の階乗。 +
      + 実際に計算すると になる + + } + /> +

      + 階段 + みたいに1ずつ数字が減っていくから「階」乗、と覚えておけばいい。 +

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      ふむふむ…

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + この「階乗」は、先ほどの + 掛け算ができる弁当箱と、 + Yコンビネータ + の弁当箱を組み合わせて計算することができるんだ。 +

      + + ) + } + ]} + /> + + と{' '} + の
      + 掛け算を計算できる弁当箱と… +       + + 「Yコンビネータ」の +
      + 弁当箱を組み合わせることで… +       + + , + ✖️, + , + ✖️, + , + ✖️, + + ]} + description={<>階乗を計算することができる！} + /> + +

      へー、そうなの！

      + + ) + } + ]} + /> + + ) + }, + { + title: <>掛け算の省略表記, + content: ( + <> + +

      + まず、 + + 掛け算を計算できる弁当箱を、以下のように{' '} + ✖️印で省略してみる。 + + こうしたほうがひと目で見て分かりやすいからな。 +

      + + ) + } + ]} + /> + 掛け算を計算できる弁当箱を… + + + ✖️印で省略してみる + + +

      + ✖️ + 印を使うことで、見た目がシンプルになった！ +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>階乗の計算, + content: ( + <> + +

      それでは、階乗を計算する弁当箱をお見せしよう。

      +

      + こちらの弁当箱は、黄色の部分に、 + + 先ほど紹介した掛け算の弁当箱( + ✖️ + 印)と、Yコンビネータの弁当箱が入っている + + 。 +

      +

      + この弁当箱を実行すると、 + + の階乗、すなわち{' '} + ✖️{' '} + ✖️{' '} + を計算してくれる + + んだ。 +

      + + ) + } + ]} + /> + + 掛け算ができる弁当箱(✖️印)と +
      + Yコンビネータ + の弁当箱を使うことで… +       + + + の階乗、すなわち +
      + ✖️{' '} + ✖️{' '} + を計算できる！ +       + +

      へー、すごい！

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + + 前のページで登場した弁当箱と、右上の部分が微妙に違う + + のが分かるかな？ +

      + + ) + } + ]} + /> + + + + 前回の弁当箱 +
      (🅰️ + ➕ + 🅱️ を計算) +
      + の右上部分: +       +       + + } + right={ + <> + + + 今回の弁当箱 +
      + (階乗を計算) +
      + の右上部分: +       +       + + } + /> + +

      完全には理解できなくていいが…

      +

      + この + + 右上部分の違いが、前回のように足し算を計算するか、今回のように階乗を計算するかの違いを生んでいる + + んだな。 +

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      なるほど…

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + そして、先ほどの弁当箱の + + 一番上の {' '} + を他の数字に変えれば、その数字の階乗を計算できるというわけだ。 + +

      +

      + たとえば に変えると、 + の階乗を計算できる。 +

      + + ) + } + ]} + /> + + 上の数字を に変えると… + + + + の階乗、すなわち +
      + ✖️{' '} + ✖️{' '} + ✖️{' '} + を計算できる！ +       + +

      へー、すごいなあ。完璧には理解できていないけど…

      +
        + + 「階乗」は、「 + + になるまで掛け算を『 + 繰り返す』 + + 」ということだから、 + + + + 「繰り返す」のを可能にする「 + Yコンビネータ + 」の弁当箱が必要 + + というわけかな…？ + +
      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + その通りだ！上の弁当箱を完璧に理解するには、やはり早送りしてみないといけないが、今回は時間の都合上省略する。 +

      +

      それでもわたしが伝えたかったのは、

      +
        + + + Yコンビネータ + の弁当箱は、 + + + + + 掛け算を計算できる弁当箱と組み合わせることによって、 + + + + 階乗のように複雑な計算を行うこともできる + +
      +

      ということだ。

      + + ) + } + ]} + /> + + Yコンビネータの弁当箱は… + + + + 掛け算を計算できる弁当箱と +
      + 組み合わせることによって… + + } + /> + + , + ✖️, + , + ✖️, + , + ✖️, + + ]} + description={ + <> + 階乗のような複雑な計算もできる！ + + } + /> + + ) + }, + { + title: <>弁当箱にできない計算はあるの？, + content: ( + <> + +

      + 以上をまとめると… + + 弁当箱は、計算箱よりもっと複雑な計算ができるということだ + + 。 +

      + + ) + } + ]} + /> + , + 🍱, + + ]} + description={<>弁当箱は、計算箱以上にパワフル！} + /> + +

      + じゃあ逆に質問するけど… + 弁当箱にできない計算はあるのかい？ +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      いい質問だな。それは、次のページで説明しよう！

      +

      + 次が最後のページ、エピローグだ！ +

      + + ) + }, + { + type: 'crying', + children: ( + <> +

      長かった…やっと終わるのか！じゃあ、先に進もう！

      + + ) + } + ]} + /> + + + ) + } + ]} + /> +) diff --git a/src/contents/16.en.tsx b/src/contents/16.en.tsx index 5f4ca258b..42a3efe04 100644 --- a/src/contents/16.en.tsx +++ b/src/contents/16.en.tsx @@ -1,4 +1,1211 @@ import React from 'react' import EpisodeCardList from 'src/components/EpisodeCardList' +import { + P, + Strong, + InlineHeader, + Em, + ExternalLink, + Img, + CenteredCode, + Pre, + Code, + Ol, + OlLi, + Hr +} from 'src/components/ContentTags' +import EmojiSeparator from 'src/components/EmojiSeparator' +import EmojiNumber from 'src/components/EmojiNumber' +import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator' +import H from 'src/components/H' +import Emoji from 'src/components/Emoji' +import CustomEmoji from 'src/components/CustomEmoji' +import BubbleQuotes from 'src/components/BubbleQuotes' +import * as R from 'src/components/Runners' +import ExpressionRunnerCaptionOnly from 'src/components/ExpressionRunnerCaptionOnly' +import CardContent from 'src/components/CardContent' -export default () => +export default () => ( + これが最後のページです！, + content: ( + <> +

      + これが最後のページです。ここまで読んでくださり、ありがとうございました！ +

      + お疲れ様でした！} + /> +

      + さて、前回の最後に、ラムダ村の村人は次のような質問をしました。 +

      + +

      + 弁当箱にできない計算はあるのかな？ +

      + + ) + } + ]} + /> +

      + この質問に答えるためには、「 + そもそも弁当箱というアイデアはどこから来たのか + 」という質問にまず答える必要があります。 +

      + + そもそも、弁当箱というアイデアは +
      + どこから来たのか？ + + } + /> +

      + そのためには、 + ラムダ村の世界ではなく、現実世界の歴史 + を学ばないといけません。 +

      + 現実世界の歴史を学ばないといけない} + /> +

      + というわけで、これから現実世界の歴史の話をします。ラムダ村の話からはいったん離れますが、このページの最後で戻ってきます。 +

      + + ), + footer: { + content: ( + <> +

      + ちなみに:{' '} + これからコンピュータやコンピュータサイエンスの歴史について語りますが、 + + 簡潔さを優先するために、正確性をあえて犠牲にしたり、ほとんどの出来事を省いたりしています + + 。 +

      +

      + コンピュータ史に詳しい方のなかには、怒り心頭に発する方が出てくるかもしれません。雑な歴史の紹介であることをお許しください。 +

      + + ) + } + }, + { + title: <>そもそもコンピュータとは何か, + content: ( + <> +

      + この記事のタイトルは「 + + コンピュータサイエンスと魔法のYコンビネータ + + 」ですが、はじめに、「 + そもそもコンピュータとは何か + 」という質問について考えてみましょう。 +

      + そもそもコンピュータとは何か？} + /> +

      + 「コンピュータ」というとパソコンやタブレット、スマホ、ロボットを思い浮かべる方が多いかもしれません。 +

      + +

      + しかし、コンピュータは本質的には「計算機 + 」なのです。 +

      + + コンピュータは本質的には「計算機」 + + } + /> +

      + コンピュータを使えば情報を瞬時に検索できたり、美しいCGを描いたりすることができます。最近はAIを使って顔認証や会話ができるようになりました。 +

      +

      + + こういった便利な機能は、 + コンピュータが大量の計算を瞬時に行えるからこそ実現されているのです。 + +

      +

      + たとえば、検索エンジンは膨大な数のデータをランク付けするために計算を行います。AIが顔認証をするときは、センサーが取り込んだ顔のデータを数値化し、それをもとに複雑な計算を行って本人かどうかを確かめているのです。 +

      + コンピュータは、大量の計算を行える計算機} + /> +

      + だから、コンピュータは「計算機」なのですね。 +

      + + ) + }, + { + title: <>計算機の歴史, + content: ( + <> +

      + コンピュータは計算機であるからこそ、 + コンピュータの歴史はすなわち、計算機の歴史 + なのです。 +

      +

      + 歴史を振り返ると、たとえば昔の日本では、中国から伝わった + そろばん 🧮{' '} + が計算機の主役でしたね。 +

      + + 昔の日本で「計算機」といえば +
      + そろばんだった + + } + /> +

      + 一方、海の向こうのアメリカでは、1890年に「 + タビュレーティングマシン + 」という計算機が台頭しました。 +

      +

      + Hollerith_census_machine_at_the_Computer_History_Museum + シリコンバレーのコンピュータ歴史博物館に展示されているタビュレーティングマシン( + + 撮影: Anton Chiang, CC BY 2.0 + + ) + + } + /> +

      +

      + + タビュレーティングマシンは、アメリカの国勢調査、すなわち国全体のアンケート調査を集計するために使われた計算機でした。 + + マークシートのような紙に空いた穴を読み取って計算することで、大量のデータをすばやく集計できたのです。 + 現代のエクセルのようなものですね。 +

      + + アメリカでは「タビュレーティングマシン」 +
      + という計算機が国勢調査で使われた + + } + /> +

      + ちなみに、 + + この計算機の発明者であるホレリスは、IBMの前身となる会社を創業しました。 + + IBMはさらに強力な計算機を開発し続け、1960年代に世界一のコンピュータ企業になったのです。 +

      + + ) + }, + { + title: <>計算機「科学」のはじまり, + content: ( + <> +

      + 上記の「タビュレーティングマシン」を皮切りに、計算機は20世紀に入ってどんどん進化していきました。やがて計算機は電子化され、今の「コンピュータ」と呼ばれるような機械になっていきました。 +

      + 計算機は20世紀にどんどん進化した} + /> +

      + いっぽう同時期に、計算機について科学する学問 + である「 + コンピュータサイエンス＝計算機科学」 + も生まれ、進化していきました。 +

      +

      + そんなコンピュータサイエンスの研究者たちは、「 + + コンピュータ＝計算機の作り方や使い方をどう工夫すれば、より効率的に問題を解けるのか + + 」といった問いに取り組んだのです。 +

      + + コンピュータサイエンス: +
      + 計算機の作り方や使い方をどう工夫 +
      + すれば、より効率的に問題を解けるのか + + } + /> +

      + そして、コンピュータサイエンスの礎を築いた + と言われているのが、英国の数学者だった + アラン・チューリング{' '} + 🧑🏻 と、米国の数学者だった + + アロンゾ・チャーチ + 👨🏻‍🦳{' '} + です。ふたりの研究が、学問としてのコンピュータサイエンスの大本になっているのです。 +

      + + アラン・チューリングと
      + アロンゾ・チャーチによる +
      + 研究が、コンピュータサイエンスの礎となった + + } + /> + + ) + }, + { + title: <>空想上の計算機, + content: ( + <> +

      + + チューリングとチャーチは1930年代に、「 + ヒルベルトの決定問題 + 」という、とある難しい数学の問題に別々に取り組んでいました。 + + それがどんな問題かを説明するのは非常に難しいので省略しますが、ふたりが + その問題をどのようにして解いたか + が興味深かったのです。 +

      + + チューリングと + チャーチは、 +
      + とある数学の問題に別々に取り組んでいた + + } + /> +

      + その問題を解くために、ふたりはそれぞれ別々の「 + 空想上の計算機 + 」を考案する必要がありました。「 + 空想上の計算機 + 」とはすなわち、 + + 実際には(少なくとも1930年代の当時は)存在しないけど、もし存在したとしたら非常に複雑な計算ができる、 + 仮想上の計算機 + + のことです。 +

      + + 空想上の計算機とは、 +
      + 実際には存在しないが、もしも存在したら +
      + 非常に複雑な計算ができる +
      + 仮想上の計算機のこと。 + + } + /> +

      + 「もし仮にそんな計算機がこの世に存在したら… + 」と仮定したうえで理論を展開することで、ふたりはそれぞれ別々に、先述の問題を解くことができたのです。 +

      + + + 先述の問題を解くために、ふたりはそれぞれ +
      「空想上の計算機」を頭の中で設計した。 +
      「もしこういった計算機が存在したら…」と +
      + 仮定した上で理論を展開して問題を解いた + + } + /> +

      + 実は、この時にふたりが別々に考案した、当時の技術では作ることができない「 + 空想上の計算機 + 」が、 + + その後のコンピュータの開発や、プログラミング言語の開発、ひいてはコンピュータサイエンスそのものに大きな影響を与えました。 + +

      +

      + 言い換えると、このふたりは「ヒルベルトの決定問題」という数学の問題を解いていたのですが、 + + その問題を解くためにふたりが考えたアイデアが偶然にも、近代のコンピュータサイエンスの土台になった + + のです。 +

      +
      +

      + 1930年代半ばに、チューリング + は先述の問題を解くために「 + チューリングマシン + 」という空想上の計算機を考案しました。「このチューリングマシンが仮に存在したら…」と論を展開することで、彼は先述の数学の問題を解くことができたのです。 +

      +

      + そして、ここでは詳しく説明しませんが、 + + このチューリングマシンの仕組みはシンプルながら、現代のコンピュータの仕組みと非常に似ており、近代的なコンピュータの発展に大きな影響を与えたのです。 + +

      + + チューリングは、「 + チューリングマシン」 +
      + という、現代のコンピュータに似ている +
      + 空想上の計算機を頭の中で考え、 +
      + それを使って先述の問題を解いた + + } + /> +

      + 一方、ほぼ時を同じくして、チャーチ + は先述の問題を解くために「 + ラムダ計算 + 」という空想上の計算機を考案しました。では、この「 + ラムダ計算 + 」とはどんな仕組みだったのでしょうか。 +

      + + チャーチは、「 + ラムダ計算」という +
      + 空想上の計算機を頭の中で考えた + + } + /> +

      + + 実は、みなさんはすでに「 + ラムダ計算 + 」がどんな仕組みかを知っています。 + + そう、 + + 🍱 弁当箱のことです。 + +

      + + チャーチが考えた空想上の計算機 +
      「ラムダ計算 + 」は、弁当箱と仕組みが同じ + + } + /> + + ) + }, + { + title: <>ラムダ計算と弁当箱, + content: ( + <> +

      + チャーチが考えた空想上の計算機「ラムダ計算 + 」は、見た目は弁当箱とは違いますが、仕組みは同じでした。 +

      + ✨, + , + ✨ + ]} + description={<>ラムダ計算。弁当箱と仕組みは同じ} + /> +

      + たとえば、こちらが「ラムダ計算 + 」の記述式です。一番左にある「λ + 」の記号はギリシャ文字で「 + ラムダ + 」と呼ぶことから、「ラムダ計算」と呼ばれています。 +

      + λA.B C +

      + 上のラムダ計算の記述式は、以下の弁当箱とまったく同じことを表しています。 +

      + + 上のラムダ計算の記述式は、 +
      + この弁当箱とまったく同じ +       +

      + 上の弁当箱は、 + すると 🅱️{' '} + になります。 + +

      + +

      + + それと同じで、先ほどの「ラムダ計算」の記述式も、 + すると + Bが残るのです。 + +

      + λA.B C + + B +

      + もちろん、もっと複雑なラムダ計算の記述式もあります。たとえば、こちらをご覧ください。この記述式は、何を表しているか分かりますか？ +

      + λA.(λB.A(B B))(λB.A(B B)) +

      + 答えを言うと、上の記述式は + Yコンビネータを表している + のです。つまり、下の弁当箱とまったく同じです。 +

      + + 上のラムダ計算の記述式は、 +
      「Yコンビネータ」の弁当箱と同じ +       +

      + つまり本稿では、 + 実はみなさんにラムダ計算を教えていたのです。 + + ラムダ計算の記述式は見た目が複雑なので、 + + という形で教えることで、とっつきやすくしていた + + というわけですね。 +

      + , + , + 🍱 + ]} + description={ + <> + 本稿では、実はラムダ計算を教えていた。 +
      + ラムダ計算の記述式は見た目が複雑なので、 +
      + + という形で教える +
      + ことで、とっつきやすくしていた。 + + } + /> +

      + そして繰り返しますが、このラムダ計算は、1930年代に考えられた「 + 空想上の計算機」というわけです。 +

      + + ) + }, + { + title: <>村人の質問に戻ると…, + content: ( + <> +

      ここで、ラムダ村の村人の質問に戻りましょう。

      + +

      弁当箱にできない計算はあるのかな？

      + + ) + } + ]} + /> +

      + 先ほど、「弁当箱とラムダ計算は同じ + 」という話をしましたね。つまり、上の質問は以下のように言い換えることができます。 +

      + +

      + ラムダ計算にできない計算はあるのかな？ +

      + + ) + } + ]} + /> +

      では、ラムダ計算にできない計算はあるのでしょうか？

      +

      + 結論から言うと、 + + ラムダ計算は、現代のコンピュータが行うことができるすべての計算を行うことができます。 + + つまり、あなたのパソコンやスマホができる計算はすべて、ラムダ計算にもできるということです。 +

      + , + , + 💻 + ]} + description={ + <> + ラムダ計算は、現代のコンピュータが行える +
      + すべての計算を行うことができる + + } + /> +

      + ということはつまり、 + + 弁当箱も、現代のコンピュータが行えるすべての計算を行うことができる + + というわけですね。 +

      + 🍱, + , + 💻 + ]} + description={ + <> + 弁当箱も、現代のコンピュータが行える +
      + すべての計算を行うことができる + + } + /> +

      + このことは、1930年代に証明されました。「 + + これから先にどれほど強力な計算機が登場しても、その計算機ができる計算は、理論上はラムダ計算にもできる + + 」ということが数学的に証明されたのです。もちろん、この証明は難しすぎるので省略します。 +

      + , + 🆚, + 💻 + ]} + description={ + <> + 「どれほど強力な計算機が登場しても、 +
      + その計算機ができる計算は、 +
      + 理論上はラムダ計算にもできる」と +
      + 1930年代に証明された + + } + /> + + ), + footer: { + content: ( + <> +

      + ちなみに:{' '} + チャーチが考案したラムダ計算だけでなく、チューリングが考案した空想上の計算機「チューリングマシン」も、現代のコンピュータが行えるすべての計算を(理論上は)行うことができます。このことも、1930年代に証明されました。 +

      + + ) + } + }, + { + title: <>ラムダ計算の影響, + content: ( + <> +

      + 先ほど説明したように、ラムダ計算はもともと、とある数学の問題を解くためにチャーチが考案したものでした。しかし、ラムダ計算もまた、 + コンピュータサイエンスの発展に大きな影響を与えたのです。 +

      + ✨, + , + ✨ + ]} + description={ + <> + ラムダ計算は、コンピュータサイエンスの +
      + 発展に大きな影響を与えた + + } + /> +

      + 特に、ラムダ計算は + 数々のプログラミング言語 + に影響を与えました。現存するプログラミング言語の多くには、ラムダ計算の名残が残っています。 +

      +

      + たとえば、執筆時点で世界で最も人気のプログラミング言語のひとつである、 + Python (パイソン) + という言語があります。ちなみにパイソンとは大蛇のことで、Python言語のロゴにもヘビの絵が描かれています。 +

      + Python言語} + /> +

      + このPython言語にも、「lambda{' '} + (ラムダ)」という機能があります。たとえば、以下のPython言語のコードをご覧ください。 +

      + (lambda A: A)('B') +

      + 上のPython言語のコードは、以下のラムダ計算とほぼ同じ意味です。 +

      + λA.A B +

      + これは、弁当箱に例えると以下のようになり、実行結果は{' '} + 🅱️ になります。 +

      + 下が左右とも同じなので… + + + 上にあった 🅱️ が残る + +

      + だから同じように、今回紹介したPythonのコードも、実行すると結果は{' '} + B になります。 +

      + (lambda A: A)('B') + + 'B' +

      + まとめると、 + + Python言語のような人気のプログラミング言語も、1930年代に考えられたラムダ計算の影響を間接的に受けている + + のです。 +

      + , + , + 🐍 + ]} + description={ + <> + Python言語のような +
      + 人気のプログラミング言語も、 +
      + 1930年代に考えられた +
      + ラムダ計算の影響を間接的に受けている + + } + /> + + ) + }, + { + title: <>工夫すること, + content: ( + <> +

      + そろそろ終わりが近づいてきましたが、最後に「 + コンピュータサイエンス＝計算機科学 + 」についてもう一言だけお話をさせてください。 +

      +

      + それは、 + + 「計算機を工夫すること + 」が、コンピュータサイエンスではとても大事 + + というお話です。 +

      + + 重要: 計算機を工夫することが、 +
      + コンピュータサイエンスではとても大事 +       +

      + 今回紹介したラムダ計算、すなわち弁当箱は、 + 仕組みはとてもシンプルです + 。弁当箱の基本の法則は、初級その3〜5で紹介したように、非常にシンプルです。 +

      + 弁当箱の基本の法則は非常にシンプル + + + + + + + + +

      + しかし、こんなシンプルな弁当箱でも、現代のコンピュータが行えるすべての計算を行うことができるのです。 + + それができる理由は、弁当箱を工夫すれば、四則演算や、条件分岐や、繰り返しを行うことができるからです。 + +

      + + 弁当箱を工夫すれば、四則演算や、 +
      + 条件分岐や、繰り返しを行うことができる + + } + /> +

      + たとえば今回紹介した通り、Yコンビネータの弁当箱を使えば、繰り返しを行うことができますよね。他にも工夫次第で、さまざまな計算を行うことができます。 +

      + + 「Yコンビネータ」の弁当箱を使えば +
      + 繰り返しを行うことができる +       +

      + コンピュータサイエンスは、「 + + 計算機(コンピュータ)の作り方や使い方をどう工夫すれば、より効率的に問題を解けるのか + + 」について考える学問です。 +

      +

      + そして、今回学んだ弁当箱は、 + シンプルでも工夫次第で複雑な計算ができる計算機です。 + そんな弁当箱には、 + コンピュータサイエンスのエッセンスが詰まっている + と思うのです。 +

      + + 弁当箱は、シンプルでも工夫次第で +
      + 複雑な計算ができる計算機。だからこそ +
      + コンピュータサイエンスのエッセンスが +
      + 詰まっている + + } + /> + + ) + }, + { + title: <>コンピュータサイエンスの他の分野でも同じ, + content: ( + <> +

      + 今回は時間の都合で、たくさんあるコンピュータサイエンスの題材のうち、ラムダ計算(弁当箱)しか紹介できませんでした。 +

      +

      + とはいえ、コンピュータサイエンスの他の分野を学ぶときも、やることは弁当箱のときと同じです。なぜならどの分野でも、弁当箱のように「 + + 計算機(コンピュータ)を工夫して + 、問題を解く」ことが大事になってくるからです。 + +

      +

      + コンピュータサイエンスのどの分野でも、 + キーワードは「工夫」 + なのです。たとえば、「 + + コンピュータをどう工夫して + 使えば、美しいCGや、人工知能や、仮想通貨が作れるだろう？ + + 」といった感じですね。 +

      + + コンピュータをどう工夫して使えば、 +
      + 美しいCGや、人工知能や、 +
      + 仮想通貨が作れるだろう？ + + } + /> +

      + 長くなりましたが、本稿を読んで、「 + + コンピュータサイエンスの他の分野でも、コンピュータの工夫の仕方を学んでみたい + + 」と思ってくだされば嬉しいです。 +

      + + ) + }, + { + type: 'summary', + title: <>まとめ, + content: ( + <> +

      本稿で学んだことを短くまとめると、以下のようになります。

      +
        + + + 弁当箱は、工夫次第で四則演算や、条件分岐や、繰り返しといった複雑な計算ができる。また、繰り返しを行う弁当箱を + Yコンビネータと呼ぶ。 + + + + + 弁当箱は、1930年代に考案された空想上の計算機「ラムダ計算」が基になっている。ラムダ計算は、現代のコンピュータが行えるすべての計算を行うことができ、また多くのプログラミング言語に影響を与えた。 + + + + + コンピュータサイエンスは「 + + 計算機(コンピュータ)をどう工夫して問題を解くか + + 」を考える学問。工夫次第で複雑な計算ができる弁当箱には、そのエッセンスが詰まっている。 + + +
      + + + ) + }, + { + title: <>その後: チューリング, + content: ( + <> +

      最後に、「その後」の話をしましょう。

      +

      + まず、先述したイギリスの数学者で、空想上の計算機「 + チューリングマシン」を考案した + アラン・チューリング + 。彼はチューリングマシンを考案したのち、イギリスからアメリカに渡り、 + ラムダ計算(弁当箱)を考案したチャーチのもとで学びました。 +

      + + チューリングマシンを考案した +
      + アラン・チューリングは、 +
      + ラムダ計算(弁当箱)を考案した +
      + チャーチに弟子入りした + + } + /> +

      + その後チューリングはイギリスに戻り、第2次世界大戦でドイツ軍の暗号通信「エニグマ」を解読しました。その後、彼は人工知能の分野でも先駆的な役割を果たし、「人工知能の父」とも呼ばれるようになりました。 +

      + チューリングは「人工知能の父」に} + /> +

      + チューリングは同性愛者で、当時のイギリスでは同性愛行為が違法でした。ある日、若い男性との性的関係を持ったことが発覚し、チューリングは有罪になりました。彼は薬品投与による「化学的去勢」を受け続け、42歳になる直前に毒物を服用して亡くなってしまいました。 +

      +

      + チューリングが亡くなってから55年後の2009年、英政府はチューリングに対する迫害を謝罪し、2013年には亡きチューリングに恩赦が与えられました。 +

      +

      + + そしてこの記事の執筆中、2019年7月15日に、イギリスの新しい50ポンド紙幣の肖像にチューリングが採用されることになったのです。 + + その50ポンド紙幣には、彼が考えた空想上の計算機「チューリングマシン」のイラストが載っています。(参考:{' '} + + BBC + + ) +

      + + ) + }, + { + title: <>その後: ラムダ村, + content: ( + <> +

      ではその後、ラムダ村はどうなったかというと…

      + +

      + 村人たち + は、何でも計算できる弁当箱を村の外の人たちに売りさばき、大金持ちになろうと悪巧み中です。 +

      + + 弁当箱は何でも計算できるから、 +
      + 高く売れる！がっぽり稼ぐぞ！ + + } + /> +

      + 悪魔 + は暇になったので、日々ミニオン + に新しい芸を覚えさせようとしていますが、なかなかうまくいっていません。 +

      + + ミニオン、「おすわり」しなさい！ +
      + 何度言ったらわかるんだ！ + + } + /> +

      + そして、年頃になったサヤちゃん + は、好きなアーティストのコンサートにもっと参戦したいからと言って、ラムダ村を出ていきました。 +

      + 今日も自担が尊い〜} + /> +

      + 以上でおしまいです！ラムダ村の名前の由来も、今回お分かりになったかと思います。ここまでお付き合いくださり、本当にありがとうございました。 +

      + + ) + }, + { + type: 'sideNote', + title: <>プログラマの方へのメッセージ, + preview: { + text: <>続きを読む, + content: ( + <> +

      + 本稿をお読みになったプログラマの方の中には、「 + + これはプログラミング未経験者にとっては難しすぎるのではないか + + 」と思われた方もいるかもしれません。そんな方に伝えたいことがあります。 +

      + + ) + }, + content: ( + <> + プログラミングで試してみる, + content: ( + <> +
      +

      + 個人的な話で恐縮ですが、わたしは今まで「 + + この人はほんとうに頭がいいな、知的好奇心が旺盛だな + + 」と思った方に数多く出会いました。たとえば、わたしは20代のときに母を癌で亡くしているのですが、母がお世話になったお医者様の方々と話したときは、「こんなに賢い人に出会ったのは初めてだ」と思ったものです。 +

      + + 冒頭でコンピュータサイエンスを +
      + 医学に例えたのも、そんなお医者様に +
      + 出会ったことが理由です + + } + /> +

      + そして、今までわたしが「 + + この人はほんとうに頭がいいな、知的好奇心が旺盛だな + + 」と思った人々の内訳を見てみると、 + + プログラマの方よりも、プログラマでない方のほうが遥かに多い + + のです。もちろん、これは当たり前ですね。プログラマは世の中では圧倒的少数派ですから、母数のケタが違います。 +

      +

      + そういった、「 + + 世の中にたくさんいる、プログラマではない、とても知的好奇心が旺盛な人々向けにコンピュータサイエンスの入門書を書くとしたら、どういう教材がいいだろう？ + + 」と考えた結果、完成したのが本稿です。 +

      +

      + だから、そういう方々に「 + 知的に面白い + 」と思っていただくために、難易度はあえて高めに設定しました。本稿は + + 「プログラミング未経験者向けの入門書」とは謳っていますが、「誰にでも、何ならサルにでも分かる入門書」だとは謳っていない + + 理由は、そういうところにあります。 +

      +

      + しかし同時に、 + + せっかく時間をかけて書くのであれば、できるかぎり読者層の裾野を広げたい + + とも思いました。どうせなら、たくさんの人に読んでもらいたい。だから、難易度は妥協しないけれど、説明はできる限り平易にしようと心がけました。 +

      +

      + また、冒頭でも書いた通り、いきなり高度な内容を理解することができれば、「 + これが理解できたんだから、他の内容も学べるだろう + 」と自信がつきます。高度な内容を分かりやすく書くことができれば、こういったメリットもあります。 +

      +

      + 努力はしたものの、それでも本稿がまだまだ難しいのは承知しております。本稿はあくまで、「 + 邪道な + 」入門書なのです。ただ、その上でひとこと言わせていただくと、 + + 内容を完全には理解できなくても、雰囲気だけでも楽しんでくださった方や、「よくわからないけど、コンピュータサイエンスって面白そう」と感じてくださった方が、ひとりでも多くいればいいな + + と思っています。 +

      + +

      + 悪魔のわたしに言わせれば…「 + + 入門書を必要以上に難しくしたら、その分野に苦手意識を持つ人が増える + + 」というのは確かにそうだと思う。 +

      +

      + 一方、「 + + ある分野の入門書や入門コースが知的に面白かったから、その分野に興味を持つようになった + + 」という人も、一定数いると思う。大抵は、知的好奇心が旺盛な人たちだ。わたしはどうせ発信するなら、そういう人たちに好かれるものを作りたい。 +

      +

      + そして、 + + 「知的に面白い」と思ってもらえる入門書には、ある程度の難しさは欠かせない + + と思う。簡単すぎたら退屈だからだ。 +

      +

      + 「難しすぎて敬遠してしまう人」の数を抑えつつ、「難しくて面白いと思ってくれる人」の数を増やす、というのは + トレードオフ + だ。どこでバランスを取るかは教材作成者が自由に決めるべきで、 + 「これが正解」というのは無い + と思うんだ。 +

      + + ) + } + ]} + /> +

      + ちなみに:{' '} + プログラマの方で、「 + Yコンビネータを実際にプログラミングで試してみたい + 」と思った方は、↓の「プログラミングで試してみる」を押してみてください。 +

      + + ) + }} + > +
      +

      + 下のコードは、 + + JavaScriptでYコンビネータを使って「 + の階乗」、すなわち{' '} + ✖️{' '} + ✖️{' '} + ✖️{' '} + を計算するコード + + です。 +

      + 
      +                
+    (b => a(c => b(b)(c)))(b =>
+      a(c => b(b)(c))
+    ))(f => n =>
+    n === 0 ? 1 : n * f(n - 1)
+  )(4)
+)`}
+                >
+
      +

      + 上のコードをブラウザの開発者ツールにコピーして実行すると、「 + の階乗」である「 + 24 + 」が出力されます。また、下から2行目にある 4{' '} + をたとえば 5 に変えると、 + の階乗である「120 + 」が出力されます。 +

      +

      + ふつう、JavaScriptで階乗を計算するには for や{' '} + while といったループ機能、reduce{' '} + といった関数、または関数の再帰を使います。しかし、 + + Yコンビネータを使えば、それらを一切使わずに階乗を計算できる + + のです。 +

      +       + + ) + } + ]} + /> +) diff --git a/src/contents/2.en.tsx b/src/contents/2.en.tsx index 5f4ca258b..b7e0ebb63 100644 --- a/src/contents/2.en.tsx +++ b/src/contents/2.en.tsx @@ -1,4 +1,628 @@ -import React from 'react' +/** @jsx jsx */ +import { css, jsx } from '@emotion/core' import EpisodeCardList from 'src/components/EpisodeCardList' +import { + InlineHeader, + P, + Strong, + Em, + Ul, + UlLi +} from 'src/components/ContentTags' +import CustomEmoji from 'src/components/CustomEmoji' +import EmojiSeparator from 'src/components/EmojiSeparator' +import EmojiNumber from 'src/components/EmojiNumber' +import Emoji from 'src/components/Emoji' +import H from 'src/components/H' +import * as R from 'src/components/Runners' +import YesNoButtons from 'src/components/YesNoButtons' +import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator' +import NextLessonButton from 'src/components/NextLessonButton' +import InlineBorder from 'src/components/InlineBorder' -export default () => +export const TwoPlusFour = () => ( + <> + +

      + 結果は になりました。この計算箱は、 + + 下の の左側に{' '} + + + {' '} + があるので、 + が4回繰り返されるのです。 + +

      + + + + が4回繰り返される + + + + ➕ {' '} + を計算できました！ + + +) + +export const Conclusion = () => ( + <> +

      + このように繰り返しの機能を使えば、 + + や {' '} + を数え間違えることなく、確実に足し算や引き算を行うことができます。 + + だからこそ、繰り返しの機能はラムダ村で重宝されていたのです。 +

      + + 繰り返しの機能を使えば、 +
      + 確実に足し算や引き算を行える！ + + } + /> + +) + +export default () => ( + 繰り返しの機能, + content: ( + <> +

      + 前回は、ラムダ村に代々伝わる「計算箱 + 」の話をしました。 +

      + 🌲, + 🙂, + , + 🙂, + 🌲 + ]} + description={<>ラムダ村の村人と、計算箱} + /> +

      + そして、足し算を可能にする「 + 1を足す機能{' '} + + 」や、引き算を可能にする「 + 1を引く機能{' '} + 」 について紹介しました。 +

      + , + , + + ]} + description={<>1を足す機能と1を引く機能} + /> +

      + 今回は、計算箱の3つめの機能である「 + 繰り返しの機能 🔁 + 」について説明します。 +

      + ✨, 🔁, ✨]} + description={<>繰り返しの機能} + /> +

      + まずは + + からはじめましょう！ +

      + + ) + }, + { + type: 'yesNoQuiz', + title: ( + <> + + + ), + // CHANGE QUIZ: Suppose that they want to do 10 - 9 ... are they doing it right or not? The answer should be no, they made a mistake + content: ( + <> +

      + ラムダ村の村人は計算が苦手だったので、簡単な計算でも計算箱に頼っていました。というわけで、あるラムダ村の村人は、計算箱を使って{' '} + ➖{' '} + を計算しようとしていました。 +

      + , + ➖, + , + 🤔, + ❓ + ]} + description={ + <> + 計算箱で ➖{' '} + を計算したい + + } + /> +

      + そのためにラムダ村の村人は、以下のような計算箱を + しようとしました。 +

      + + 😉 これで {' '} + ➖ を計算しよう！ + +

      + ここで質問です。上の計算箱は、 + + ➖{' '} + を正しく計算できるでしょうか？ + +

      + + + ) + }, + { + title: ( + <> + + + ), + content: ( + <> +

      + + +

      + +

      + 答えは {' '} + になりました。つまり、もともと意図していた + + ➖{' '} + ではなく、 + ➖{' '} + を計算してしまった + + のです。 +

      + + ➖{' '} + を計算できなかった！ + + } + /> +

      どうしてこうなったか、お分かりでしょうか？

      + + ) + }, + { + title: ( + <> + や {' '} + の数を間違えないようにするには + + ), + content: ( + <> +

      + ➖{' '} + ではなく、 + ➖{' '} + を計算してしまった理由は、 + + の数が間違っていたから + + です。 +

      + ❌, + , + ❌ + ]} + description={ + <> + の数が間違っていた + + } + /> +

      + ➖{' '} + を計算したければ、 + を8個配置する + 必要がありますが、 + + 先ほどの計算箱には が + 7個しかありませんでした + + 。 +

      + , + , + , + , + , + , + , + + ]} + description={ + <> + {' '} + が8個必要だったが、7個しかなかった + + } + /> +

      + このように、 + や {' '} + の数をひとつでも間違えると、計算箱では正確な計算ができません。 + ではどうすれば、こういったミスを防げるのでしょうか？ +

      + , + 🤔, + + ]} + description={ + <> + どうすれば、 + や{' '} + の数を +
      + 間違えずにすむのか？ + + } + /> + + ) + }, + { + title: <>繰り返しの機能, + content: ( + <> +

      + 実は計算箱には、こういったミスを防ぐために役立つ「 + 繰り返しの機能 🔁 + 」が備わっています。 +

      + ✨, 🔁, ✨]} + description={<>繰り返しの機能} + /> +

      + どんな機能か紹介しましょう。 + : +

      + +

      + 注目ポイントは、 + + 下の の左側に{' '} + + + {' '} + の印があることです。 + +

      + + ) + }, + { + title: ( + <> + を繰り返す + + ), + content: ( + <> +

      + + 上の計算箱を + + すると、計算をする前に、下の部分が次のように変化します。 + + 変化後には、 + の下に {' '} + が8個あるのに注目です。 +

      + 計算をする前に… + + + の下に {' '} + が8個出現する + +

      + つまり、 + + 左側に{' '} + + + {' '} + の印があると、その部分にあった {' '} + が8回繰り返されるということ + + です。 +

      + + +       , + + ]} + /> + + , + , + , + , + , + , + , + + ]} + description={ + <> + が8回繰り返される + + } + /> +

      + ということは ➖{' '} + を計算してくれるので、結果は{' '} + になります。 + +

      + +

      + まとめると、 + + 繰り返しの機能を使うことで、 + {' '} + を指定した回数分繰り返すことができる + + ということです。 +

      + + ) + }, + { + title: ( + <> + も繰り返せる + + ), + content: ( + <> +

      + もちろん、 + + を繰り返すこともできます。 + + こちらの計算箱をご覧になり、 + +

      + +

      + こうすれば、 + ➕{' '} + を計算できるのです。 +

      + + ) + }, + { + title: <>繰り返しの機能, + content: ( + <> +

      つまり、下の計算箱のように、

      + +
        + + + の左側に何らかの数字{' '} + + + {' '} + が入っている場合、 + + + + + すると、 + が{' '} + 回分繰り返される。 + + +
      +

      + これが、計算箱の「 + 繰り返しの機能 🔁 + 」です。 +

      + ✨, 🔁, ✨]} + description={<>繰り返しの機能} + /> +

      + もちろん、 + + の代わりに{' '} + を使った場合も同じ + + ように繰り返されます。 +

      + + を{' '} + 回分繰り返す + + + ) + }, + { + title: ( + <> + 🅰️ ➕ 🅱️ を計算するには + + ), + content: ( + <> +

      + ということは、もし例えば 🅰️ ➕{' '} + 🅱️{' '} + を計算したかったら、以下のような計算箱を用意すればいいのです。 +

      + + 🅰️ ➕ 🅱️ を計算 + +

      + たとえば、 + ➕{' '} + を計算するには、🅰️ に{' '} + を、🅱️ に{' '} + を入れます。 +

      + + 🅰️ に を、 + 🅱️ に を入れる + +

      + 後は + するだけで、 + ➕{' '} + を計算してくれます。 +

      + + を3回繰り返します + + + + ➕{' '} + を計算できました！ + +

      + このようにすれば、 + の数を間違えることはありませんね！ +

      + + ) + }, + { + title: <>引き算も同じ, + content: ( + <> +

      + 引き算でも同じです。🅰️ ➖{' '} + 🅱️{' '} + を計算するには、以下のような計算箱を使えばできます。 +

      + + 🅰️ ➖ 🅱️ を計算 + + + ) + }, + { + title: <>確実に足し算や引き算を行う, + content: ( + <> + + + ) + }, + { + title: <>ラムダ村にとって、計算箱は必要不可欠, + content: ( + <> +

      + 前回も話したように、 + ラムダ村の村人は計算がとても苦手でした + 。だから彼らは、足し算や引き算を行うときは、計算箱に頼り切っていました。 +

      + 🌲, + 😍, + , + 😍, + 🌲 + ]} + description={ + <> + 俺ら計算が苦手だから、 +
      + 計算箱が無いとやってけない！ + + } + /> +

      + 村人たちは、計算箱の + + 「1を足す機能{' '} + + 」、「 + 1を引く機能{' '} + + 」、そして今回紹介した「 + 繰り返しの機能 🔁 + 」を組み合わせる + + ことで、足し算や引き算を正確に行っていたのです。 +

      + , + , + 🔁 + ]} + description={ + <> + 計算箱の3つの機能を組み合わせることで、 +
      + 足し算や引き算を正確に行うことができる + + } + /> +

      + そんなある日、ラムダ村である異変が起きました。 +

      + ある日、ラムダ村で異変が！} + /> +

      詳しくは次のページでお話します！

      + + + ) + } + ]} + /> +) diff --git a/src/contents/3.en.tsx b/src/contents/3.en.tsx index 5f4ca258b..8045b614c 100644 --- a/src/contents/3.en.tsx +++ b/src/contents/3.en.tsx @@ -1,4 +1,784 @@ import React from 'react' import EpisodeCardList from 'src/components/EpisodeCardList' +import { P, Strong, Em, Hr, InlineHeader } from 'src/components/ContentTags' +import EmojiSeparator from 'src/components/EmojiSeparator' +import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator' +import YesNoButtons from 'src/components/YesNoButtons' +import CustomEmoji from 'src/components/CustomEmoji' +import Emoji from 'src/components/Emoji' +import EmojiWithText from 'src/components/EmojiWithText' +import H from 'src/components/H' +import BubbleQuotes from 'src/components/BubbleQuotes' +import * as R from 'src/components/Runners' +import NextLessonButton from 'src/components/NextLessonButton' -export default () => +export default () => ( + 悪魔、現る, + content: ( + <> +

      + ある日のこと。平和だったラムダ村に突然、 + + とてもとても恐ろしい悪魔 😈 + + が現れました。 +

      + 悪魔がやってきた！} + /> +

      村人たちは、悪魔を見て震え上がりました。

      + + ひぇぇ、何も悪いことしていないのに、悪魔がやってきた！ +

      + ) + }, + { + type: 'crying', + children:

      怖いよー！もうおしまいだ！

      + } + ]} + /> +

      悪魔はこうささやきました。

      + +

      安心しろ、お前たちの命だけは助けてやる。

      +

      + + だが、お前たちが大事にしている + + 計算箱 + + は、すべて没収させてもらうぞ！ + +

      + + ) + }, + { + type: 'scared', + children:

      えー！計算箱を没収だって？そんな無慈悲な！

      + } + ]} + /> + + ) + }, + { + title: <>なぜ計算箱を没収？, + content: ( + <> +

      + こうして悪魔は、 + ラムダ村から計算箱を取り上げてしまったのです。 +

      + 🌲, + 😈, + , + 🌲 + ]} + description={<>計算箱は没収だ！} + /> +

      ラムダ村からは、すべての計算箱が無くなってしまいました。

      + + 😈 計算箱は没収だ！ + +

      + 足し算や引き算をするのに計算箱に頼り切っていた村人たちは嘆きました。 +

      + 悪魔め、どうして俺らから計算箱を取り上げるんだ！

      + ) + }, + { + type: 'sad', + children: ( + <> +

      + 俺らは計算が大の苦手なんだ。 +

      +

      + 計算箱がないと、足し算や引き算ができなくなって、村の経済が成り立たなくなるんだぞ！ +

      + + ) + } + ]} + /> +

      悪魔は答えます。

      + +

      + + 計算箱を取り上げたのは、お前たちが計算が苦手だからだよ。 + +

      +

      + お前たちは簡単な計算をするのにでも計算箱に頼り切っているだろう。そんなことだから、いつまでたっても計算が上達しないんだ。 +

      + + ) + }, + { + type: 'roll', + children: ( + <> +

      それは図星かも…

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + + だから計算箱を取り上げることで、お前たちが計算を勉強するきっかけを作ってやったのさ。 + + 感謝するんだな！ +

      + + ) + }, + { + type: 'sad', + children:

      そんな…勉強なんてしたくないよ！

      + } + ]} + /> + + ) + }, + { + title: <>悪魔からの挑戦状, + content: ( + <> +

      + なんとか計算箱を返してもらえないか、村人たちは悪魔にお願いしました。 +

      + お願いだ、何でもするから計算箱を返してくれないか？

      + ) + }, + { + type: 'crying', + children:

      頼む、この通りだ！

      + }, + { + type: 'devil', + children: ( +

      + ふむ…そこまで言うなら仕方ない。では、 + お前たちにチャンスをやろう！ +

      + ) + } + ]} + /> +

      悪魔が言うチャンスとは、どういうことなのでしょうか？

      + +

      + + これから、 + 頭を使わないと解けないパズル + をたくさん出題する。 + + すべて解けたら、計算箱を返してやってもいいぞ！ + + +

      +

      + 日頃から頭を使ってこなかったお前たちには、おそらくムリだろうがな！わはは！ +

      + + ) + }, + { + type: 'sad', + children:

      パ、パズルだって…？俺らに解けるかなあ？

      + }, + { + type: 'brave', + children: ( + <> +

      + 難しそう…しかし、やるしかない！計算箱を取り返すんだ！ +

      +

      + その挑戦、受けて立つぞ！ +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      ほほう…いい度胸だ。では、はじめよう！

      + + ) + } + ]} + /> +

      + こうして、村人たちは計算箱を返してもらうべく、悪魔が出題するパズルに挑戦することになりました。 +

      + パズルを解いて、計算箱を取り返す！} + /> + + ) + }, + { + title: ( + <> + + + ), + content: ( + <> + +

      + お前たちに解いてもらうパズルは、{' '} + + + + というものだ。 +

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      + 弁当箱 + だって？なんか美味しそうな名前だなあ… +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + そして、これがその + + だ。 +

      + + ) + } + ]} + /> + + の一例 + +

      + 解説: 上のように、 + + には、実際の弁当箱のように、 + + 四角の中にいくつかマスがあり、それぞれのマスの中に料理が入っています + + 。 +

      +

      + この例だと、上段には + + が入っており、 +

      + + 上段には + + +

      + 下段には + + がふたつ入っています。 +

      + + 下段には + + + +

      + なんとなく、 + 見た目が計算箱に似ている + 気がするなあ。数字の代わりに、料理が入っているけど。 +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + 実はこの + + は、計算箱と密接な関係がある + んだが、これについては後に説明する。 +

      +

      + とりあえず今は、 + + の + について見ていこう。 + +

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + 弁当箱を + + する + + ), + content: ( + <> +

      + + + は、計算箱と同じように + することができます。 + + 試しに、 + + + +

      + + +

      + すると、 + + 下のふたつの が消えて、 + だけが残った！ + +

      + + ) + } + ]} + /> + + すると… + + + + だけが残る + + +

      + 実は、これはある法則に則っているんだ。 +

      +

      + 今回は、お前たちに + その法則が何か解き明かしてもらうぞ。 +

      + + ) + } + ]} + /> + + 弁当箱は、どんな法則に則って +
      + されるでしょう？ + + } + /> + +

      + これだけだと法則が何か、まだハッキリと言えないなあ… + もう少し他の例を試してみないと！ +

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + 他の + + + ), + content: ( + <> +

      + では、他の + + も見てみましょう。 +

      +
      +

      + こちらは、上段には + + 、下段には + と + + が入っています。 + +

      + +

      + 今回は + が残りました。 +

      + +

      うーん、さっきと微妙に違うなあ…

      + + ) + } + ]} + /> +
      +

      + 続いて、上段にふたつの料理が入っている場合 + を紹介します。 +

      +

      + こちらは、上段には + と + が、下段には + + がふたつ入っています。 + +

      + +

      + 今回は + と {' '} + が残りました。 +

      +
      +

      + こちらは、上段には + と + 、下段には + と + + が入っています。 + +

      + +

      + 今回は + が残りました。 +

      +
      +

      + どれもある法則 + に則っているのですが、その法則がお分かりでしょうか？ +

      + 法則が分かりますか？} + /> + + ) + }, + { + title: <>法則が分かった？, + content: ( + <> + +

      + では、 + + 弁当箱のパズルは、 + + する際にどんな法則に則っているか + + 、そろそろ分かったかな？ +

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      う、うーん…

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + 参考までに、今回紹介した4つの例をもう一度載せておこう。 +

      + + ) + } + ]} + /> +

      + 例その1: +

      + + + +

      + 例その2: +

      + + + +

      + 例その3: +

      + + + +

      + 例その4: +

      + + + + +

      ふーむ、なんとなく法則が見えてきたような…？

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + ほう。ではここで、 + + + + の時間だ。法則が分かったかどうか、チェックしてやるぞ！ +

      + + ) + }, + { + type: 'crying', + children: ( + <> +

      自信ないけど…やるしかない！

      + + ) + } + ]} + /> + + ) + }, + { + type: 'yesNoQuiz', + title: ( + <> + + 、その1 + + ), + content: ( + <> +

      + これまでに4種類の + + を紹介しましたが、どれも + {' '} + する際にある法則に従っています。それが分かったかどうか、 + + でチェックしてみましょう！ +

      + 法則が分かったかどうかチェック！} + /> +

      + {' '} + : +

      + +

      + これを + すると、 + 最終的に下のようになるでしょうか？ + これまでの法則から予想してみてください。 +

      + + + + ) + }, + { + type: 'yesNoQuiz', + title: ( + <> + + 、その2 + + ), + content: ( + <> +

      + こちらの + を{' '} + + すると、 +

      + +

      + 最終的に下のようになるでしょうか？ + これまでの法則から予想してみてください。 +

      + + + + ) + }, + { + title: <>答え合わせ, + content: ( + <> +

      それぞれ実行すると、次のようになります。

      +

      + 1問目: +

      + +

      + つまり + + 1問目の + + {' '} + でした。 +

      +

      + 2問目: +

      + +

      + つまり + + 2問目の + + {' '} + でした。 +

      + + ) + }, + { + title: <>法則は次のページに, + content: ( + <> +

      + 次のページで、 + + の法則を説明します！ +

      + 法則は次のページで説明！} + /> +

      + 法則が分かった方も、よく分からなかった方も、ぜひ次に進んでみてください。 +

      + + + ) + } + ]} + /> +) diff --git a/src/contents/4.en.tsx b/src/contents/4.en.tsx index 5f4ca258b..e363ea2fa 100644 --- a/src/contents/4.en.tsx +++ b/src/contents/4.en.tsx @@ -1,4 +1,1146 @@ import React from 'react' import EpisodeCardList from 'src/components/EpisodeCardList' +import { P, Strong, Em, Hr, InlineHeader } from 'src/components/ContentTags' +import BottomRightBadge from 'src/components/BottomRightBadge' +import BubbleQuotes from 'src/components/BubbleQuotes' +import EmojiSeparator from 'src/components/EmojiSeparator' +import Emoji from 'src/components/Emoji' +import EmojiWithText from 'src/components/EmojiWithText' +import EmojiForLetter from 'src/components/EmojiForLetter' +import * as R from 'src/components/Runners' +import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator' +import H from 'src/components/H' +import NextLessonButton from 'src/components/NextLessonButton' -export default () => +export const BasicRules = ({ + includeFuncUnbound +}: { + includeFuncUnbound?: boolean +}) => ( + <> +

      + 1. 印をつける:{' '} + {' '} + {' '} + {includeFuncUnbound && ( + <> + {' '} + + )} + +

      + + 印をつける:{' '} + {' '} + {' '} + {includeFuncUnbound && ( + <> + {' '} + + )} + + +

      + 2. 一致チェック:{' '} + {' '} + {' '} + ✅ +

      + + 一致チェック:{' '} + {' '} + {' '} + ✅ + +

      + 3. コピーする:{' '} + {' '} + ↘️{' '} + +

      + + コピーする:{' '} + {' '} + ↘️{' '} + + +

      + 4. 消す: 💥{' '} + {' '} + +

      + + 消す: 💥{' '} + {' '} + + + + + +) + +export default () => ( + 法則が分かった！, + content: ( + <> + 分かったぞ！} + /> +

      + どうやら、ラムダ村の村人たちは + + の法則を見抜いたようです！ +

      + +

      + やった、法則が分かったぞ！ +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + なんと…本当に分かったというなら、説明してみることだな！ +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>下のふたつの料理が同じの場合, + content: ( + <> + +

      + じゃあ説明しよう。まず、 + 下のふたつの料理を比べてみる。 +

      +

      + + もし下のふたつの料理が同じなら、 + + したときに上にある料理が残る + + んだ。 +

      + + ) + } + ]} + /> + + 下の料理が同じ (両方とも ) + + + + 上にあった + が残る + +
      + + 下の料理が同じ (両方とも ) + + + + 上にあった + と + が残る + + +

      + そして、以下が + の1問目の答えだ。 +

      + + ) + } + ]} + /> + + 下の料理が同じ (両方とも + ) + + + + 上にあった が残る + + + ) + }, + { + title: <>下のふたつの料理が異なる場合, + content: ( + <> + +

      + 次に、 + 下のふたつの料理が異なる場合。 +

      +

      + + この場合は、 + + したときに右下にある料理が残る + + んだ。 +

      + + ) + } + ]} + /> + + 下の料理が異なる ( と{' '} + ) + + + + 右下にあった が残る + +
      + + 下の料理が異なる ( と{' '} + ) + + + + 右下にあった が残る + + +

      + そして、以下が + の2問目の答えだ。 +

      + + ) + } + ]} + /> + + 下の料理が異なる ( と{' '} + ) + + + + 右下にあった が残る + + +

      どうだ、これが正解だろう！

      + + ) + } + ]} + /> + + ) + }, + { + title: <>正解！, + content: ( + <> + その通り！} + /> + +

      + 正解、まさにその通りだ！{' '} + 🎉 🎉 🎉 +

      +

      + 今まで勉強を怠けてきたわりには、なかなかやるじゃないか。 +

      + + ) + }, + { + type: 'celebrate', + children: ( + <> +

      やった！やった！

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + だが、喜ぶのはまだ早い。 +

      + + ) + }, + { + type: 'scared', + children: ( + <> +

      えー、なんで？

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + 次のページから、さらに難しい + + を解いてもらう。そのためには、 + + + の法則を明確にする必要がある。 + +

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      法則を明確にする？どういうこと？

      + + ) + } + ]} + /> + + ) + }, + { + title: <>法則を明確にする, + content: ( + <> + +

      + 先ほどお前が言った、 + + 「下のふたつの料理を比べて、同じなら上が残る。違うなら右下が残る」というのは + 明確さに欠ける。 + さらに複雑なパズルを解くには、法則としては不十分なんだ。 + +

      + + ) + }, + { + type: 'surprised', + children: ( + <> +

      えー、そうなのか…

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + さらに複雑なパズルを解くには、もっと法則をハッキリさせる、すなわち明確化する必要があるんだ。 +

      + + ) + } + ]} + /> + + もっと法則を明確にしないと +
      + 複雑なパズルを解けない + + } + /> + +

      + + というわけで、これから + の + 明確な法則を紹介する。 + + それを理解した上で、さらに複雑なパズルを解いてもらおう。 +

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      + うーん、よくわからないけど、とりあえずその明確な法則とやらを聞いてみよう。 +

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + + の明確な法則 + + ), + type: 'summary', + content: ( + <> + +

      + では、 + + の明確な法則をまとめてみよう。 +

      + + ) + } + ]} + /> + + +

      では、それぞれのステップについて解説していくぞ。

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + 1. 印をつける{' '} + {' '} + {' '} + + + ), + content: ( + <> +

      + それぞれのステップについて、 こちらの + + を使って説明していきます。 +

      + +

      + まず、 + + 上の料理には{' '} + + 、左の料理には{' '} + + 、右の料理には{' '} + {' '} + の印をつけます。 + +

      + , + , + + ]} + description={ + <> + {' '} + {' '} + {' '} + の印をつける + + } + /> +

      + +

      + + +

      + に{' '} + {' '} + の印が、下の + + ふたつにそれぞれ{' '} + {' '} + と{' '} + {' '} + の印がついた！ +

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + 2. 一致チェック{' '} + {' '} + {' '} + ✅ + + ), + content: ( + <> +

      + 続いて、 + + と{' '} + {' '} + が一致するかチェックし、一致した料理には、 + ✅ を付けます。 + +

      + , + , + ✅ + ]} + description={ + <> + {' '} + {' '} + が一致したら ✅ をつける + + } + /> +

      + +

      + + +

      + {' '} + と{' '} + {' '} + の に ✅{' '} + がついた！ +

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + 3. コピーする:{' '} + {' '} + ↘️{' '} + + + ), + content: ( + <> +

      + 続いて、 + + {' '} + の料理を、一致した{' '} + {' '} + の部分にコピーします。 + +

      + , + ↘️, + + ]} + description={ + <> + {' '} + を一致した{' '} + {' '} + にコピー + + } + /> +

      + +

      + + +

      + + の + が + + の部分にコピーされた！ +

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + 4. 消す: 💥{' '} + {' '} + + + ), + content: ( + <> +

      + 最後に、 + + と{' '} + {' '} + が消えます。 + +

      + 💥, + , + + ]} + description={ + <> + と{' '} + {' '} + が消える + + } + /> +

      + +

      + + +

      + {' '} + と{' '} + {' '} + が 💥 になった！ +

      + + ) + } + ]} + /> +

      + そして、最終的に + だけになります。 + +

      + +

      以上です！

      + + ) + }, + { + title: <>上にふたつの料理がある場合, + content: ( + <> + +

      + では、たとえば下の例のように、 + 上にふたつの料理がある場合 + はどうなるんだろう？ +

      + + ) + } + ]} + /> + + 上にふたつの料理がある +
      ( と + ) +       +

      + この場合、上にある + と + には + + 両方とも{' '} + {' '} + の印がつきます。 + +

      + + 両方とも{' '} + {' '} + の印がつく + +

      + そして、 + が一致したあとに… +

      + +

      + と + が + 両方ともコピーされます。 +

      + +

      + 最後に、 + と{' '} + が消え… +

      + +

      + と {' '} + が残るのです。 +

      + + + ) + }, + { + title: ( + <> + で見てみましょう + + ), + content: ( + <> +

      + では、最初から最後まで + で見てみましょう。 + 機能を使うと、 + 各ステップを自動で見ていくことができます。 +

      + 早送りすると、各ステップが自動で見れる} + /> +

      + こちらは、上にひとつの料理がある例です。 + +

      + +

      + こちらは、上にふたつの料理がある例です。 + +

      + + + ) + }, + { + type: 'summary', + title: ( + <> + + + ), + content: ( + <> +

      というわけで、ここまでをまとめてみましょう。

      + + +

      なるほど、そういう仕組みになっていたのか！

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + うむ。そして、 + + こうやってルールを明確にすれば、パズルが複雑になっても応用が効く + + んだ。 +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>一致しなかったら？, + content: ( + <> + , + , + ❌ + ]} + description={ + <> + と{' '} + {' '} + が一致しなかったら？ + + } + /> + +

      + では、 + + もし{' '} + {' '} + と{' '} + {' '} + が一致しなかったらどうするの？ + +

      +

      + たとえば下の弁当箱の場合は、 + {' '} + と{' '} + {' '} + が一致しないよね。 +

      + + ) + } + ]} + /> +

      + +

      + + + ) + }, + { + title: ( + <> + コピーはせず、 + と{' '} + {' '} + を消すだけ + + ), + content: ( + <> +

      + と{' '} + {' '} + が一致しない場合は、 + + コピーはせずに、ただ{' '} + と{' '} + {' '} + を消すだけです。 + + +

      + +

      + そして、最終的に + + だけになります。 + +

      + + + ) + }, + { + title: ( + <> + + で見てみましょう + + ), + content: ( + <> +

      + 復習のために、 + と{' '} + + が一致しなかった場合も、最初から最後まで + で見てみましょう。 +

      + 早送りで復習しよう！} + /> +

      + こちらは、上にひとつの料理がある例です。 + +

      + +

      + こちらは、上にふたつの料理がある例です。 + +

      + + + ) + }, + { + title: ( + <> + : 一致しなかった場合 + + ), + type: 'summary', + content: ( + <> +

      + と{' '} + {' '} + が一致しなかった場合、 + + コピーはせずに、ただ{' '} + と{' '} + {' '} + を消す + + 。 +

      + + と{' '} + {' '} + が一致しなかった場合… + + + + コピーはせずに、ただ{' '} + と + を消す + + + ) + }, + { + title: <>以上です！, + content: ( + <> + +

      + 以上が、 + + の明確な法則だ。理解できたかな？ +

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      な、なんとか…でも、まだ覚えきれてないなあ。

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + + 法則を覚えきれていなくても、次回また復習するので大丈夫だ。 + +

      + + ) + }, + { + type: 'relieved', + children: ( + <> +

      + ホッ、よかった… (悪魔って意外と優しいんじゃ？ + 🤔) +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + 次回では、もっと複雑なパズルを出題する。 + 計算箱を返してほしかったら、解いてみせるんだな！ +

      + + ) + }, + { + type: 'brave', + children: ( + <> +

      望むところだ！

      + + ) + } + ]} + /> + + + ) + } + ]} + /> +) diff --git a/src/contents/5.en.tsx b/src/contents/5.en.tsx index 5f4ca258b..5b1123c11 100644 --- a/src/contents/5.en.tsx +++ b/src/contents/5.en.tsx @@ -1,4 +1,1950 @@ import React from 'react' import EpisodeCardList from 'src/components/EpisodeCardList' +import { + P, + Em, + Strong, + Ul, + UlLi, + Ol, + OlLi, + InlineHeader, + Hr +} from 'src/components/ContentTags' +import BubbleQuotes from 'src/components/BubbleQuotes' +import H from 'src/components/H' +import EmojiWithText from 'src/components/EmojiWithText' +import EmojiForLetter from 'src/components/EmojiForLetter' +import EmojiSeparator from 'src/components/EmojiSeparator' +import CustomEmoji from 'src/components/CustomEmoji' +import Emoji from 'src/components/Emoji' +import InlinePrioritiesLabel from 'src/components/InlinePrioritiesLabel' +import InlineBackground from 'src/components/InlineBackground' +import BottomRightBadge from 'src/components/BottomRightBadge' +import YesNoButtons from 'src/components/YesNoButtons' +import * as R from 'src/components/Runners' +import NextLessonButton from 'src/components/NextLessonButton' -export default () => +const WillReturn = () => ( + <> + + 次の中級編で難しい問題を出題する。 +
      + このページで学んだ内容で解けるはず！ + + } + /> + ✨, + , + ✨ + ]} + description={<>解けたら計算箱を返してやろう！} + /> + +) + +export default () => ( + 3段の弁当箱, + content: ( + <> + +

      + ここからは、より複雑な + + を解いてもらおう。たとえば、こういうパズルだ。 +

      + + ) + } + ]} + /> + + 3段の + + + +

      + これは… + + 今までの弁当箱は縦に2段しかなかったけれど、 + この弁当箱には縦に3段あるぞ。 + +

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      + そして、 + + 一番下には + 、 + 、 + + と横に3つの料理が並んでいる。 + +

      +

      + 今までの弁当箱では、 + 横に3つの料理が並んだことはなかった。 +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + そうだな。そしてさらに、 + + 1 や{' '} + 2 + という数字が左端に表示されている + + のに気づいたかな？ +

      + + ) + } + ]} + /> + + 1 や{' '} + 2 + という数字が +
      + 左端に表示されているのにも注目 +       + +

      たしかに。

      +

      こういうパズルは、どうやって解けばいいんだろう？

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + ではまず、こういった3段の + + の解き方を説明しよう。 +

      +

      + そして + + 解き方を説明した後に、 + + を出題し、お前たちに自力で解いてもらう + + ぞ。 +

      + + ) + }, + { + type: 'brave', + children: ( + <> +

      よし、やってやる！

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + 先に 1 のペアに注目 + + ), + content: ( + <> +

      + 3段の + + を解く際には、まず + + 左上と左下に 1{' '} + の印がある部分に注目します。 + +

      + 1, + 🍱, + 1 + ]} + description={ + <> + 先に 1{' '} + のペアに注目 + + } + /> +

      + +

      + + +

      + 1{' '} + のペアがピンク色の{' '} + 1{' '} + になり、一番上の背景が暗い色{' '} + になった！ +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + そう。これは、 + + 暗い色 {' '} + の部分は無視して、 + + 1 + {' '} + のペアの部分に注目する + + ということだ。 +

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + {' '} + {' '} + + 、そして + + + ), + content: ( + <> +

      + 次に、1{' '} + のペアの部分に{' '} + {' '} + {' '} + {' '} + などの印をつけます。 + +

      + + +

      + + 下段真ん中の には、 + {' '} + の印がついた！ + +

      + + ) + } + ]} + /> + , + , + + ]} + description={ + <> + 下段の真ん中には{' '} + {' '} + をつける + + } + /> + +

      + そう、前回では登場しなかったが、 + + {' '} + {' '} + {' '} + のどれにも該当しない、 + 下段の真ん中にある料理には{' '} + {' '} + をつけるんだ。 + +

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      + なるほど。じゃあ、 + {' '} + がついた料理はどうなるんだ？ +

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + {' '} + は無視していい + + ), + content: ( + <> +

      + {' '} + の印がついた料理は、いったん無視してください。 +

      + , + 🙄, + + ]} + description={ + <> + {' '} + はいったん無視する + + } + /> +

      前回も話した通り、続いて以下のステップを行いますが、

      +
        + + 一致チェック:{' '} + {' '} + {' '} + ✅ + + + コピーする:{' '} + {' '} + ↘️{' '} + + + + 消す: 💥{' '} + {' '} + + +
      +

      + + どれも{' '} + {' '} + は関係ありませんよね。だから、 + + 次のいくつかのステップの間は{' '} + {' '} + を無視していい + + のです。 + +

      + + の + は、 +
      + 次のいくつかのステップの間は無視していい +       + +

      なるほど。じゃあ、続きを見ていこう！

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + 1 + のペア部分を終わらせる + + ), + content: ( + <> +

      + では、1 + のペア部分を終わらせましょう。やり方は前回と同じです。 +

      + 1, + 🍱, + 1 + ]} + description={ + <> + 1{' '} + のペア部分を終わらせる + + } + /> +

      + まず、 + + と{' '} + {' '} + が一致するかチェックし、一致した料理には ✅{' '} + を付けます。 + + +

      + +

      + 続いて、 + + {' '} + の料理を、一致した{' '} + {' '} + の部分にコピーします。 + +

      + +

      + 最後に、 + + と{' '} + {' '} + が消えます。 + +

      + + +

      + + 上記のどのステップにおいても、 + {' '} + は関係なかった + + だろう？ +

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      + なるほど、だから、 + {' '} + はいったん無視していいのか。 +

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + 1 が消え、 + 2 が{' '} + 1 に + + ), + content: ( + <> +

      + さらに続きを見ていきましょう。 + +

      + +
        + + と{' '} + {' '} + が消えると同時に、 + + + 1 が消え、 + 2 が{' '} + 1 になりました。 + +
      + 2, + , + 1 + ]} + /> + + ) + }, + { + title: ( + <> + 残った1 + のペアを終わらせる + + ), + content: ( + <> + +

      + 残った弁当箱は、前のページで見たのと同じようなやつだ！ +

      + + ) + } + ]} + /> + 残った弁当箱はシンプルな2段 + +

      + そうだ。そして、先ほど{' '} + {' '} + だった + に、 + {' '} + の印がついているのに注目だ。 +

      + + ) + } + ]} + /> + + が{' '} + に + + +

      + あとは前回とやり方は変わらない。 + {' '} + で最後まで見てみよう。 +

      + + ) + } + ]} + /> +

      + +

      + + +

      + 最後に が残った！ +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      これで終了だ！どうだ、理解できたかな？

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      うーん、なんとなく…

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + では復習のために、最初から最後まで + で見てみよう。 +

      + + ) + } + ]} + /> +

      + +

      + + +

      まとめると、

      +
        + + + まず先に{' '} + 1{' '} + のペアからはじめる。 + + + + + 下段の真ん中にある料理には{' '} + {' '} + をつける。 + {' '} + は、いったん無視して構わない。 + + + + + 1{' '} + のペアが終わると、 + + 2 + が{' '} + 1{' '} + になるので、また繰り返す。 + + +
      +

      こんなところかな？

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + その通り。では、 + + そろそろ + の時間だ！ + +

      + + ) + }, + { + type: 'crying', + children: ( + <> +

      えー、ちゃんと解けるか、不安だなあ…

      + + ) + } + ]} + /> + + ) + }, + { + type: 'yesNoQuiz', + title: ( + <> + + + ), + content: ( + <> +

      + : +

      + +

      + +

      + + + + ) + }, + { + title: ( + <> + + + ), + content: ( + <> + +

      + + {' '} + だと思う！ + + 最後には + + が残るはずだ。 +

      +

      + で見てみよう！ +

      + + ) + } + ]} + /> +

      + では、 + +

      + + +

      + やった！最後に + + が残ったので、⭕️ が正解だ！ +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      ぐぬぬ…やるじゃないか！

      + + ) + } + ]} + /> + + ) + }, + { + title: <>ふたつの細かい法則, + content: ( + <> + +

      どうだ、そろそろ計算箱を返す気になったか？

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + まだドヤ顔をするような時間じゃないぞ。弁当箱の「 + 細かい法則 + 」に関する問題を出していないからな。 +

      + + ) + } + ]} + /> + + 弁当箱の「 + 細かい法則 + 」？ + + } + /> + +

      + 弁当箱の「 + 細かい法則 + 」だって？何のことだ？ +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + まず、こちらの + + を見てみな。 +

      + + ) + } + ]} + /> + + 1{' '} + のペアがふたつある + + +

      + 今まで見たことない形のパズルだ。 + + 1{' '} + のペアがふたつある + + なあ… +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + 続いて、こちらの + + を見てみな。 +

      + + ) + } + ]} + /> + + 一番下の料理が + + ひとつだけ + + +

      + これも見たことない形だなあ… + + 一番下に入っている料理が + + ひとつだけだ。 + +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>細かい法則を知らないと解けない, + content: ( + <> + +

      + 上で紹介したようなパズルを解くには、これから紹介する弁当箱の「 + 細かい法則 + 」を知っておかないといけない。 +

      + + ) + } + ]} + /> + + 弁当箱の「 + 細かい法則 + 」を +
      + 知らないと解けない + + } + /> + +

      + その法則はふたつある。 + 順番に紹介していこう！もちろん、 + + もやるからな！ +

      + + ) + }, + { + type: 'crying', + children: ( + <> +

      + えー、また + か！いつになったら計算箱を返してくれるんだ！ +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + まあそう焦るな。 + + + 次からはじまる中級編で、とても難しい問題を出題する。 + + このページで紹介した法則を応用すれば解ける問題だ。それに答えることができたら、計算箱を返してやろう！ + +

      + + ) + } + ]} + /> + + +

      + え、ということはもうすぐ計算箱を返してもらえるのか！じゃあ、あと少し頑張ろう！ +

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + 細かい法則その1: 一番左の{' '} + 1 のペアからはじめる + + ), + content: ( + <> +

      + まずは、こちらの + + から見ていきましょう。 +

      + + 1{' '} + のペアがふたつある + +

      + 細かい法則その1:{' '} + + 1{' '} + のペアがふたつ以上ある場合は、左側にある{' '} + 1{' '} + のペアからはじめます。 + +

      + + 左側にある{' '} + 1{' '} + のペアからはじめる + +

      + では、 + {' '} + {' '} + {' '} + + はどうなるのか見ていきましょう。 +

      + , + , + , + + ]} + /> +

      + まず、上の には{' '} + {' '} + の印がつきます。 +

      + +

      + 次に、左の + + には {' '} + の印がつきます。 +

      + +

      + そして、右の + と には{' '} + {' '} + の印がつきます。 +

      + + +

      + ここでは、 + にも{' '} + {' '} + がついたのに注目だ。 +

      +

      + + 弁当箱の右端に接している料理にはすべて{' '} + {' '} + の印がつく + + んだ。 +

      + + ) + } + ]} + /> +

      + 最後に、残った + には{' '} + {' '} + の印がつきます。 +

      + + +

      + + {' '} + {' '} + {' '} + のどれにも該当しない場合には{' '} + {' '} + の印がつく + + んだな。 +

      + + ) + } + ]} + /> +

      + そして、 + と{' '} + {' '} + にある + が一致するので… +

      + +

      + にある + が、 + の + のところにコピーされます。 +

      + + +

      なるほど、けっこう難しいなあ。

      + + ) + } + ]} + /> +

      + では、ここからは + で見ていきましょう！ +

      + + +

      + 最後は + だけが残った！ +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + そうだ。理解できたかな？では、ここで{' '} + + の時間だ！ +

      + + ) + } + ]} + /> + + ) + }, + { + type: 'yesNoQuiz', + title: ( + <> + + + ), + content: ( + <> +

      + : +

      + +

      + +

      + + + + ) + }, + { + title: ( + <> + + + ), + content: ( + <> + +

      + + {' '} + だと思う！ + + 最後には + ではなく、 + が残るはずだ。 +

      +

      + で見てみよう！ +

      + + ) + } + ]} + /> +

      + では、 + +

      + + +

      + やった！最後に + + ではなく + + が残ったので、❌ が正解だ！ +

      + + ) + } + ]} + /> + + ) + }, + { + type: 'sideNote', + title: ( + <> + 補足: 左端に 1{' '} + のペアがない場合 + + ), + content: ( + <> +

      + ここで補足です。まず、下の弁当箱をご覧ください。先ほどの{' '} + + で登場した弁当箱とほとんど同じですが、 + + 1{' '} + のペアが弁当箱の左端になく、内側だけにあります。 + +

      + + 1{' '} + のペアが弁当箱の左端になく、 +
      + 内側だけにある +       +

      + このような場合、 + + 内側の 1{' '} + のペアの部分からはじめます。 + +

      + + 内側の 1{' '} + のペアからはじめる + +

      + 残りは + で見てみましょう。 + +

      + +

      + まとめると、 + + 1{' '} + のペアが弁当箱の左端にない場合は、内側の{' '} + 1{' '} + のペアからはじめればいい + + のです。 +

      + + ) + }, + { + title: ( + <> + 細かい法則その2: 1{' '} + のペアのからはじめられない場合、 + 2 のペアからはじめる + + ), + content: ( + <> +

      + 続いて、こちらの + + をご覧ください。 +

      + + 一番下の料理が + ひとつだけ + + +

      + この弁当箱は、 + + 一番下の段の料理が + だけ + + なのに注目だ。 +

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      + たしかに…仮に{' '} + 1{' '} + のペアからはじめるとしたら、 +

      +

      + この + + には、 + + {' '} + {' '} + {' '} + のうち、どの印をつければいいのだろう？ + +

      + + ) + } + ]} + /> + + には、 +
      + {' '} + {' '} + {' '} + のうちどの印をつければいい？ +       +

      + 答えは、「どの印もつけることができない + 」です。 + + 一番下の段にひとつしか料理がない場合、どの印をつけることもできないのです + + 。 +

      + ❌, + , + ❌ + ]} + description={ + <> + には、 +
      + {' '} + {' '} + {' '} + のどれもつけられない + + } + /> +

      + ということはつまり、 + + 1{' '} + のペアからはじめることができない + + 、ということになります。 +

      + ❌, + 1, + ❌ + ]} + description={ + <> + 1{' '} + のペアからはじめられない + + } + /> + +

      じゃあ、どうすればいいんだ？

      + + ) + } + ]} + /> +

      + 答え: 上記のように{' '} + 1{' '} + のペアからはじめられない場合は、 + + 2{' '} + のペアからはじめます。 + +

      + + 2{' '} + のペアからはじめる + + +

      + なるほど、 + 2{' '} + のペアからはじめれば、 + + 下の段に + + がふたつあるから、 + {' '} + と{' '} + {' '} + の印をつけられるね。 + +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + その通り。 + {' '} + {' '} + + は以下の通りになるぞ。 +

      + + ) + } + ]} + /> + + {' '} + {' '} + {' '} + はこうなる + +

      + 残りは + で見ていきましょう: +

      + + +

      + 最終的に + と + + が残った！ +

      +

      + + このふたつが残った時点で、もうこれ以上進められないから、そこで終了する + + というわけか。 +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + その通りだ。では、ここで{' '} + + の時間だ。 +

      +

      + + これが初級最後の + になるぞ！ + +

      + + ) + } + ]} + /> + + ) + }, + { + type: 'yesNoQuiz', + title: ( + <> + + + ), + content: ( + <> +

      + : +

      + +

      + +

      + + + + ) + }, + { + title: ( + <> + + + ), + content: ( + <> + +

      + + {' '} + だと思う！ + + 最後には + と + + が残るはずだ。 +

      +

      + で見てみよう！ +

      + + ) + } + ]} + /> +

      + では、 + +

      + + +

      + やった！最後に + と + + が残ったので、⭕️ が正解だ！ +

      + + ) + } + ]} + /> + + ) + }, + { + type: 'summary', + title: ( + <> + + + ), + content: ( + <> +

      + 3段の弁当箱は、以下のように解きます。 +

      +
        + + + まず先に 1{' '} + のペアからはじめる。 + + + + + 下段の真ん中にある料理には{' '} + {' '} + をつける。 + {' '} + は、いったん無視して構わない。 + + + + + 1{' '} + のペアが終わると、 + 2 が{' '} + 1{' '} + になるので、また繰り返す。 + + +
      + 3段の弁当箱 +
      +

      + 細かい法則1:{' '} + 1{' '} + のペアがふたつ以上ある場合は、 + 一番左のペアからはじめます。 +

      + + + +

      + 補足:{' '} + + 1{' '} + のペアが弁当箱の左端にない場合は、内側の{' '} + 1{' '} + のペアからはじめる。 + +

      + + 1{' '} + のペアが弁当箱の左端にない場合は、 +
      + 内側の 1{' '} + のペアからはじめる +       +
      +

      + 細かい法則2:{' '} + 下段にひとつの料理しかなく、 + 1{' '} + のペアからはじめられない場合、 + + 2{' '} + のペアからはじめます。 + +

      + + + + +

      これらの法則を覚えきれるか、不安だなあ…

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + + 安心しろ、これらの法則を暗記する必要はない。 + + なんとなく「 + こういう法則があるんだな + 」と頭に入れておけば大丈夫だ。 +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>初級はここまで！, + content: ( + <> + + +

      + どうだ、 + + をすべて解いたぞ！ +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + やるじゃないか。 + + というわけで、初級編はここで終わりだ。次からは中級編に入る。 + +

      +

      + さきほど約束した通り、 + + + 次からはじまる中級編で、とても難しい問題を出題する。 + + このページで紹介した法則を応用すれば解ける問題だ。それに答えることができたら、計算箱を返してやろう！ + +

      + + ) + } + ]} + /> + + +

      + その難しい問題とやらを解けば、本当に計算箱を返してもらえるのか？ +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      ああ、悪魔に二言はないからな。

      + + ) + }, + { + type: 'brave', + children: ( + <> +

      よーし、やってやるぞ！中級編に進もう！

      + + ) + } + ]} + /> + + + ) + } + ]} + /> +) diff --git a/src/contents/6.en.tsx b/src/contents/6.en.tsx index 5f4ca258b..d43d9f3bd 100644 --- a/src/contents/6.en.tsx +++ b/src/contents/6.en.tsx @@ -1,4 +1,1383 @@ -import React from 'react' +/** @jsx jsx */ +import { css, jsx } from '@emotion/core' +import { colors, spaces } from 'src/lib/theme' import EpisodeCardList from 'src/components/EpisodeCardList' +import { + P, + Em, + Strong, + Ol, + OlLi, + InlineHeader +} from 'src/components/ContentTags' +import BubbleQuotes from 'src/components/BubbleQuotes' +import EmojiSeparator from 'src/components/EmojiSeparator' +import CustomEmoji from 'src/components/CustomEmoji' +import EmojiNumber from 'src/components/EmojiNumber' +import Emoji from 'src/components/Emoji' +import H from 'src/components/H' +import YesNoButtons from 'src/components/YesNoButtons' +import ExpressionRunnerButton from 'src/components/ExpressionRunnerButton' +import * as R from 'src/components/Runners' +import EmojiWithText from 'src/components/EmojiWithText' +import EmojiForLetter from 'src/components/EmojiForLetter' +import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator' +import NextLessonButton from 'src/components/NextLessonButton' -export default () => +export default () => ( + 中級編へようこそ！, + content: ( + <> + +

      + ここからは中級編だ。 + + 約束した通り、この中級編で出題する難しい問題に答えることができたら、計算箱を返してやろう！ + +

      + + ) + } + ]} + /> + , + 😈, + + ]} + noBottomMargin + description={ + <> + この中級編で出す難しい問題に +
      + 答えられたら計算箱を返してやろう！ + + } + /> + +

      よーし、やってやる！

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + 問題を出す前に、わたしの助手 + をここに呼ばせてもらおう。 +

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      なに、お前の助手だって？

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      いま呼ぶから、ちょっと待つんだな。

      +

      + …いでよ、「ミニオン」！ +

      + + ) + } + ]} + /> + 悪魔の助手・ミニオン、ここに参上！} + /> + +

      + どうも、ミニオン + です。お呼びですか、ご主人さま？ +

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + よく来てくれた！こいつがわたしの助手、 + ミニオンだ。 +

      + + ) + }, + { + type: 'roll', + children: ( + <> +

      なんだ、ただのわんこじゃないか。

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + ミニオンはそんじょそこらの犬とは違う。 + とっておきの芸 + を持っているからな。 +

      +

      ミニオン、こいつらにお前の芸を見せてやるんだ！

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      おまかせください、ご主人さま！

      + + ) + } + ]} + /> + + ) + }, + { + title: <>ミニオンの芸, + content: ( + <> + 🍱, + 🐶, + + ]} + description={<>ぼくの芸をお見せします！} + /> + +

      + こちらの + + をご覧ください！ +

      + + ) + } + ]} + /> + + +

      一見、普通の弁当箱に見えるけれど…

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + ぼくは、 + この弁当箱を計算箱に変える + ことができるんです！ +

      +

      + 下の + + 「 + 」ボタン + + を押してみてください！ +

      + + ) + } + ]} + /> + + +

      + すごい、計算箱の になった！ +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + そうなんです。ぼくは、 + ある法則に基づいて + 、弁当箱を計算箱に変える芸を持っているんです。 +

      +

      + その法則がどんなものか、当ててみてください！ +

      + + ) + } + ]} + /> + 🐶, + 🍱, + , + + ]} + description={ + <> + ある法則に基づいて、 +
      + 弁当箱を計算箱に変える芸 + + } + /> + +

      + ふーむ、どんな法則なんだろう？ほかの例も見ないと分からないなあ。 +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>どんな法則？, + content: ( + <> + +

      + では、こちらに3つの弁当箱を用意しました。それぞれ{' '} + {' '} + を押してみてください！ +

      + + ) + } + ]} + /> + + + + +

      + どれも、ある法則に基づいて計算箱に変えているんですが、分かりましたか？ +

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      うーん、なんとなく分かったかもしれない…

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + では、 + + で確かめてみましょう！ +

      + + ) + } + ]} + /> + + ) + }, + { + type: 'yesNoQuiz', + title: ( + <> + + + ), + content: ( + <> + +

      それでは、こちらの弁当箱を…

      + + ) + } + ]} + /> + + +

      + ぼくが計算箱に変換すると、次のようになるでしょうか？ +

      + + ) + } + ]} + /> + + + + ) + }, + { + title: ( + <> + + + ), + content: ( + <> + +

      + + {' '} + だと思う！ + + 変換すると になるはずだ。 +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + では、 + {' '} + を押してみてくだださい！ +

      + + ) + } + ]} + /> + + +

      + やった！ になったので、 + ⭕️ が正解だ！ +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      では、法則を説明しましょう！

      + + ) + } + ]} + /> + + ) + }, + { + type: 'summary', + title: <>法則の説明, + content: ( + <> + 🐶, + 🍱, + , + + ]} + description={ + <> + どんな法則に基づいて、弁当箱を +
      + 計算箱に変えているのか説明します！ + + } + /> + +

      + ぼくが計算箱に変換できるのは、以下のような形の弁当箱なんです。 +

      + + ) + } + ]} + /> + + + + +

      + たとえば、先ほど例に出したこちらの弁当箱をご覧ください。 +

      + + ) + } + ]} + /> + + +

      こちらの法則に従って印をつけてみます。

      + +

      + まず、 + {' '} + が一番左にあるので、すべての + に 🅰️{' '} + の印をつけてみます。 +

      + + ) + } + ]} + /> + + が一番左にあるので、 +
      + すべての + に 🅰️ の印をつける +       + +

      + 次に、 + {' '} + が真ん中にあるので、すべての + に 🅱️{' '} + の印をつけてみます。 +

      + + ) + } + ]} + /> + + が真ん中にあるので、 +
      + すべての + に 🅱️ の印をつける +       + +

      上の弁当箱は、こちらの法則と一致していますね。

      + + + +

      つまり、ぼくが計算箱に変換できるということです。

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      なるほど。

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + + では、計算箱に変換した場合、何の数字になるのでしょうか？ + +

      +

      + 答えを言うと、 + + 右下にある 🅰️ がついた料理の数 + + が、変換後の計算箱の数字になります。 +

      + + ) + } + ]} + /> + + 右下にある 🅰️ がついた料理の数が、 +
      + 変換後の計算箱の数字 +       + +

      + 先ほどの弁当箱の場合、 + + 右下には 🅰️ がついた + が「2個 + 」あります。 + +

      +

      + だから、これをぼくが計算箱に変換すると{' '} + になります。 +

      + + ) + } + ]} + /> + + + + + + +

      なるほど。

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + + 他の料理でも、同じ法則に沿っていれば、計算箱に変換したときに同じ数字になります。 + +

      +

      + たとえば、 と{' '} + を以下のように配置した場合… +

      + + ) + } + ]} + /> + + +

      + 🅰️ と 🅱️{' '} + は以下のようになるので… +

      + + ) + } + ]} + /> + + は一番左にあるので 🅰️{' '} + を、 +
      + は真ん中にあるので 🅱️{' '} + をつける +       + +

      + 計算箱に変換したときに先ほどと同じく{' '} + になります。 +

      + + ) + } + ]} + /> + + + + + + +

      + つまり、 + + 弁当箱に入っているのがどんな料理だろうと、 + 🅰️ や 🅱️{' '} + の印をつけた際に、同じ法則に沿っていれば同じ数字に変換される + + というわけです。 +

      + + ) + } + ]} + /> + + 右下にある 🅰️ がついた料理の数が、 +
      + 変換後の計算箱の数字 +       + + ) + }, + { + title: <>他の弁当箱の例, + content: ( + <> + +

      + + で出した弁当箱にも、🅰️ と{' '} + 🅱️ の印をつけてみましょう。まずは + 。 +

      + + ) + } + ]} + /> + + +

      + 上の弁当箱に、先ほどの法則にしたがって 🅰️{' '} + と 🅱️ の印をつけると、 + + 右下には 🅰️ がついた + + が「4個」あります。 + +

      +

      + だから、これをぼくが計算箱に変換すると{' '} + になります。 +

      + + ) + } + ]} + /> + + + + + + + ) + }, + { + title: ( + <> + になる場合 + + ), + content: ( + <> + +

      + 続いて + + 。このページの冒頭で紹介した弁当箱です。 +

      + + ) + } + ]} + /> + + +

      + 上の弁当箱に、先ほどの法則にしたがって 🅰️{' '} + と 🅱️ の印をつけると、 + + 右下には 🅰️ がついた + が + ひとつもありません。 + +

      +

      + つまり、 + + 🅰️ の数は「ゼロ個」 + + というわけです。 +

      +

      + だから、これをぼくが計算箱に変換すると{' '} + になります。 +

      + + ) + } + ]} + /> + + + + + + +

      + なるほど、 + + 右下の 🅰️{' '} + の数がゼロになる場合もあるんだね。 + +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + はい。先ほど紹介した法則の「🅰️ が + いくつか」というのは、「 + 🅰️ がゼロ個 + 」である場合も含まれているわけです。 +

      + + 右下にある 🅰️ の数が +
      + ゼロになる場合もある +       + + ) + } + ]} + /> + + ) + }, + { + title: <>実行してから変換, + content: ( + <> + +

      + さらにぼくは、 + + 弁当箱を + してから計算箱に変換する + + こともできます。 +

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      + {' '} + してから計算箱に変換？どういうこと？ +

      + + ) + } + ]} + /> + 🐶, + 🍱, + ▶️, + + ]} + description={ + <> + してから +
      + 計算箱に変換する + + } + /> + +

      + ためしに、 + + 次の弁当箱の下にある、「 + + 」ボタンを押してみてください。 + +

      + + ) + } + ]} + /> + + +

      + になった！ +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + では、理由を説明しますね。まず、もともとの弁当箱を実行するとどうなるか、 + で見てみましょう。 + +

      + + ) + } + ]} + /> + + +

      + つまり、もともとの弁当箱を + {' '} + すると、次のような弁当箱になります。 +

      + + ) + } + ]} + /> + + した結果はこうなる + + +

      + + これは先ほど説明した通り、計算箱に変換すると{' '} + になります。 + +

      + + ) + } + ]} + /> + + + + + + +

      このような、

      +
        + + + まず弁当箱を + + し、 + + + + + 実行し終えたら、続いて{' '} + する + + +
      +

      というふたつのステップを、

      +

      + + + +

      +

      …を押すことで、一度に行うことができるのです。

      + + ) + } + ]} + /> + + + + + + + + +

      + なるほど、「実行」と「 + 計算箱に変換」を + 一括で行う + こともできる、ということだな。 +

      + + ) + } + ]} + /> + + まず弁当箱を + し… + + } + /> + 🍱, + , + + ]} + noTopMargin + description={<>計算箱に変換するのを一括で行える} + /> + + ) + }, + { + type: 'yesNoQuiz', + title: ( + <> + + + ), + content: ( + <> + +

      + では、ここで最後に + をやってみましょう。 +

      +

      こちらの弁当箱を…

      + + ) + } + ]} + /> + + +

      + 「 + + 」すると、下のようになるでしょうか？ +

      + + ) + } + ]} + /> + + + + ) + }, + { + title: ( + <> + + + ), + content: ( + <> + +

      + + {' '} + だと思う！ + + 変換すると ではなく、 + になるはずだ。 +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + では、 + + を押してみてくだださい！ +

      + + ) + } + ]} + /> + + +

      + やった！ になったので、 + ❌ が正解だ！ +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      その通りです！

      +

      + 確認のために、もともとの弁当箱を + + してみましょう。 + +

      + + ) + } + ]} + /> + + +

      + つまり、もともとの弁当箱を + + すると、次のような弁当箱になります。 +

      + + ) + } + ]} + /> + + した結果はこうなる + + +

      + + これは、計算箱に変換すると {' '} + になります。 + +

      + + ) + } + ]} + /> + + + + + + +

      + というわけで、もともとの弁当箱を + すると ではなく{' '} + になるので、クイズの正解は{' '} + ❌ でした！ +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>次のページで、難しい問題を出します, + content: ( + <> + +

      ミニオン、説明ご苦労だった！

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      お安い御用です、ご主人さま！

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      + それでは以前約束した通り、 + + 次のページで難しい問題を出題する + 。それに答えることができたら、計算箱を返してやろう！ + +

      + + ) + } + ]} + /> + , + 😈, + + ]} + noBottomMargin + description={ + <> + 次のページで出す難しい問題に +
      + 答えられたら計算箱を返してやろう！ + + } + /> + +

      + やっと計算箱を賭けた問題にチャレンジできるということだな。よーし、次のページに進むぞ！ +

      + + ) + } + ]} + /> + + + ) + } + ]} + /> +) diff --git a/src/contents/7.en.tsx b/src/contents/7.en.tsx index 5f4ca258b..7ad496bba 100644 --- a/src/contents/7.en.tsx +++ b/src/contents/7.en.tsx @@ -1,4 +1,1463 @@ import React from 'react' import EpisodeCardList from 'src/components/EpisodeCardList' +import { P, Em, Strong, Ul, UlLi } from 'src/components/ContentTags' +import CustomEmoji from 'src/components/CustomEmoji' +import BubbleQuotes from 'src/components/BubbleQuotes' +import EmojiNumber from 'src/components/EmojiNumber' +import Emoji from 'src/components/Emoji' +import EmojiForLetter from 'src/components/EmojiForLetter' +import H from 'src/components/H' +import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator' +import ExpressionRunnerCaptionOnly from 'src/components/ExpressionRunnerCaptionOnly' +import EmojiSeparator from 'src/components/EmojiSeparator' +import * as R from 'src/components/Runners' +import EmojiWithText from 'src/components/EmojiWithText' +import InlinePrioritiesLabel from 'src/components/InlinePrioritiesLabel' +import NextLessonButton from 'src/components/NextLessonButton' -export default () => +export default () => ( + 難易度が急激に上がります, + content: ( + <> +

      + このページから難易度が急激に上がります。 + 弁当箱も、以前に比べて複雑になります。 +

      + 難易度が上がり、弁当箱も複雑に} + /> +

      + ただ、 + + 内容を完全に理解する必要はありません。少しくらい分からなくても、雰囲気で読み進めていただいて大丈夫です。 + + また、先に進んでから読み返すことで理解できる場合もあるので、分からなくてもとりあえず先に進んでみてください。 +

      + 完全に理解する必要はありません！} + /> + + ) + }, + { + title: <>問題の説明, + content: ( + <> + +

      + では約束通り、 + + これから出す問題に答えることができたら、計算箱を返してやろう！ + +

      + + ) + } + ]} + /> + , + 😈, + + ]} + noBottomMargin + description={ + <> + これから出す難しい問題に +
      + 答えられたら計算箱を返してやろう！ + + } + /> + +

      + この問題は非常に難しい + から覚悟するんだな。ミニオン、問題を説明するんだ！ +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + わかりました。まず、 + 。 +

      +

      + {' '} + がたくさんありますが、それぞれの{' '} + + {' '} + には何らかの料理が入ります。 + +

      + + ) + } + ]} + /> + + それぞれの には +
      + 何らかの料理が入る +       + +

      何だか複雑そうな弁当箱だなあ…

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + そして、 + + それぞれの {' '} + に、ある法則に基づいて料理を入れると、 + + がある弁当箱になります。 + +

      + + ) + } + ]} + /> + + それぞれの に、 +
      + ある法則に基づいて料理を入れると、 +
      + + がある弁当箱になる +       + +

      + 背景に {' '} + の模様がついた！ +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + そうですね。背景にある{' '} + {' '} + の模様は単に、 + + があるということを表しているだけです。 +

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      + その + + ってどういう効果なの？ +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      これから説明しますね！

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + が になる + + ), + content: ( + <> + +

      + : +

      + + ) + } + ]} + /> + + +

      + 前回の復習ですが、この弁当箱は、ぼくが計算箱に変換すると{' '} + になります。 +

      + + ) + } + ]} + /> + + + + + + +

      + では上の弁当箱を、先ほどの + + がある弁当箱と合体させてみます。 +

      + + ) + } + ]} + /> + + + がある弁当箱と合体 + + +

      + では、この弁当箱を「 + + + + 」するとどうなるか見てみましょう。 +

      + + ) + } + ]} + /> + + +

      + になった！ +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      そうなんです！つまり、

      +
        + + + に変換できる弁当箱と、 + + + + + 先ほどの + + がある弁当箱を合体させて、 + + + + + 「 + 」すると、 + + + + + 結果は になる + + +
      +

      ということです。

      + + ) + } + ]} + /> + + に変換できる弁当箱と、 +
      + + がある弁当箱を合体させ… +       + + + +
      + すると、結果は になる +       + +

      + つまりざっくり言うと、 + + が{' '} + になった + + というわけです。 +

      + + ) + } + ]} + /> + , + , + + ]} + description={ + <> + ざっくり言うと、 + が {' '} + になった + + } + /> + + ) + }, + { + title: ( + <> + が になる + + ), + content: ( + <> + +

      + 続いて、 + 。 +

      + + ) + } + ]} + /> + + +

      + この弁当箱は、ぼくが計算箱に変換すると{' '} + になります。 +

      + + ) + } + ]} + /> + + + + + + +

      + この弁当箱も、 + + 先ほどの + + がある弁当箱と合体させてみました。 + +

      + + ) + } + ]} + /> + + + がある弁当箱と合体 + + +

      + こちらを「 + + + + 」するとどうなるか確かめてみてください！ +

      + + ) + } + ]} + /> + + +

      + になった！ +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      そうなんです！まとめると、以下のようになります。

      + + ) + } + ]} + /> + + + に変換できる弁当箱と、 +
      + + がある弁当箱を合体させ… +       + + + +
      + すると、結果は になる +       + +

      + ざっくり言うと、今度は{' '} + + が{' '} + になった + + のです。 +

      + + ) + } + ]} + /> + , + , + + ]} + description={ + <> + ざっくり言うと、 + が {' '} + になった + + } + /> + + ) + }, + { + type: 'summary', + title: <>まとめ, + content: ( + <> + +

      まとめると、

      +
        + + + ある数字 {' '} + に変換できる弁当箱と、 + + + + + + がある弁当箱を合体させ、 + + + + + + すると、 + + +
      +

      + + 結果は {' '} + ➕ になる + + のです。 +

      + + ) + } + ]} + /> + + に変換できる弁当箱と、 +
      + + がある弁当箱を合体させ… +       + + + +
      + すると、結果は {' '} + ➕ になる +       + + ) + }, + { + title: ( + <> + 計算箱の と同じようなもの + + ), + content: ( + <> + +

      + ここで思い出してほしいのですが、 + + 計算箱では、 + {' '} + を使えば、「1を足す」計算を行うことができましたよね + + 。 +

      + + ) + } + ]} + /> + + 計算箱の場合、 + を使えば +
      + 「1を足す」計算ができる +       + + + +

      + すなわち、この + がある弁当箱は… +

      + + ) + } + ]} + /> + + この + がある弁当箱は… + + +

      + + 計算箱における {' '} + と同じようなもの + + 、と言えるでしょう。 +

      + + ) + } + ]} + /> + + + 計算箱における、 + と同じようなもの + + + + ) + }, + { + title: <>計算箱を賭けた問題, + content: ( + <> + +

      + では、ここで問題です。 + + この弁当箱に、どのような法則に基づいて{' '} + {' '} + に料理を入れると… + +

      + + ) + } + ]} + /> + + + どのような法則に基づいて +
      + に料理を入れると… +       +       + +

      + 先ほどのような、 + + + がある弁当箱になるでしょう？ + +

      + + ) + } + ]} + /> + + + + がある弁当箱になる？ + + + +

      + つまり、 + + それぞれの {' '} + に何を入れたら、 + + があるか当てろってこと？ + +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + はい、その通りです！ + + ある法則に基づいて{' '} + {' '} + に料理を入れた時に限り + + 、 + がある弁当箱になります。 +

      +

      + それがどんな法則が、当ててみよう！ + という問題です。 +

      + + ) + } + ]} + /> + , + 🐶, + + ]} + description={ + <> + それぞれの {' '} + に何を入れたら +
      + + がある弁当箱になる？ + + } + /> + +

      + この問題こそが、以前から話していた「難しい問題」だ。 + これを解けたら、約束通り計算箱を返してやろう！ +

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + 試しに適当な料理を入れてみる + + ), + content: ( + <> + +

      + うーん… + + 問題を完全に理解できた自信がないし、どうやって解けばいいかさっぱり分からない！ + +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      大丈夫、安心してください！

      +

      + + 試しに、 + {' '} + に適当な料理を入れてみると、問題を理解できると思います。 + +

      + + ) + } + ]} + /> + + {' '} + に適当な料理を入れてみて下さい！🐶 + + +

      + わかった。じゃあとりあえず、 + {' '} + に適当な料理を入れてみよう。 +

      +

      + + 、 + 、 + + を適当な組み合わせで{' '} + {' '} + に入れてみたよ。 + +

      + + ) + } + ]} + /> + + {' '} + を適当に{' '} + に入れてみた + + +

      + この弁当箱に、 + + があれば + 成功 🎉 + 、なければ失敗 😭{' '} + ということかな？ +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + そうですね。そして、 + + があるかどうかを確かめるには、まず{' '} + ➕{' '} + {' '} + が計算できるかを確かめてみます。 +

      + + ) + } + ]} + /> + , + ➕, + + ]} + description={ + <> + ➕{' '} + が計算できるか確かめる + + } + /> + +

      + つまり、以下のように {' '} + に変換できる弁当箱と合体させたときに… +

      +

      + 結果が になれば + + があるので + 成功 🎉、 それ以外なら + 失敗 😭 というわけです。 +

      + + ) + } + ]} + /> + + に変換できる弁当箱と、 +
      + 先ほどの弁当箱を合体させ… +       + + + +
      + して、結果が になれば +
      + + があるので + 成功 🎉 +
      + それ以外なら失敗 😭 +       + + ) + }, + { + title: ( + <> + + があるかチェック + + ), + content: ( + <> + +

      + では、 + ➕{' '} + {' '} + が計算できるか確かめるために、冒頭にも登場した、 + {' '} + に変換できる弁当箱を使って試してみましょう。 +

      + + ) + } + ]} + /> + + に変換できる弁当箱 + + +

      + これを先ほどの弁当箱と組み合わせて、 + + し、 + + ➕{' '} + を計算できればいい + + んだな。 +

      +

      + すなわち、 + + 結果が になれば + 成功 🎉、それ以外なら + 失敗 😭{' '} + + というわけか。 +

      + + ) + } + ]} + /> + + に変換できる弁当箱と、 +
      + 先ほどの弁当箱を合体させ… +       + + + +
      + して、結果が になれば + 成功 🎉 +
      + それ以外なら失敗 😭 +       + +

      では、上の弁当箱を実行したらどうなるか見ていこう！

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + それでは、 + +

      +

      + 初級その5で説明した通り、 + + 1{' '} + のペアがふたつ以上ある場合は、一番左の{' '} + 1{' '} + のペアからはじめます。 + +

      + + ) + } + ]} + /> + + + + +

      + 続いて、また{' '} + + 1{' '} + のペアからはじめたいのですが、 + 1{' '} + のペアの一番下の段にひとつの料理( + + )しかないので不可能です。 + +

      +

      + というわけで、初級その5で説明した通り、 + + 次は 2{' '} + のペアから + + はじめます。 + +

      + + ) + } + ]} + /> + + + + +

      + 次も前回と同じく、 + + 2{' '} + のペアからはじめます。 + + +

      + + ) + } + ]} + /> + + + + +

      つまり、最終的に以下のようになりました！

      + + ) + } + ]} + /> + 実行結果 + + ) + }, + { + title: <>計算箱に変換できない, + content: ( + <> + +

      + 実行を終えたので、 + {' '} + したいところですが… +

      +

      + 残念ながら、 + + この弁当箱はぼくが計算箱に変換することができません。 + +

      + + ) + } + ]} + /> + + ❌ 計算箱に変換できない ❌ + + +

      + 理由は、 + 以下の法則に沿っていないからです。 +

      + + + +

      + + 右上には 🅱️{' '} + の料理がひとつないといけませんが、ここでは{' '} + 🅰️ になっている + + ので、計算箱に変換できないのです。 +

      + + ) + } + ]} + /> + + 右上が 🅱️ の ではなく、 +
      + 🅰️ の なので +
      + 計算箱に変換できない +       + +

      + ダメか… + + もし仮に右上が + + ではなくて + + だったら、 + に変換できていたのになあ。 + +

      + + ) + } + ]} + /> + + も仮にし右上が + +
      + だったら、 + に変換できていた +       + + + + ) + }, + { + title: ( + <> + + は無い + + ), + content: ( + <> + +

      + つまり、実行しても{' '} + {' '} + に変換できる弁当箱になりませんでした。 +

      + + ) + } + ]} + /> + + に変換できる弁当箱と合体させ… + + + + 実行したところ、 +
      + + {' '} + に変換できる弁当箱にならなかった + +       + +

      + だから、 + + 先ほどの弁当箱に、 + + は無い + + のです。つまり、不正解でした！ +

      + + ) + } + ]} + /> + + + は無い + + +

      + 残念…やっぱり、適当に{' '} + {' '} + に料理を埋めても正解にはならないかあ… +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>問題をもう一度, + content: ( + <> + +

      + 問題の意味が分かったでしょうか？では、もう一度聞きますね。 +

      +

      + + この弁当箱に、どのような法則に基づいて{' '} + {' '} + に料理を入れると… + +

      + + ) + } + ]} + /> + + + どのような法則に基づいて {' '} + に料理を入れると… + + + +

      + + + がある弁当箱になるでしょう？ + +

      + + ) + } + ]} + /> + + + + がある弁当箱になる？ + + + +

      + 繰り返しますが、先ほど適当に料理を入れた以下の弁当箱は、不正解でした！ +

      + + ) + } + ]} + /> + こちらは不正解だった + +

      + うーん…問題の意味は分かったけど、答え方が分からない！ +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>答えは次のページに, + content: ( + <> +

      + せっかく計算箱を返してもらえるチャンスなのに、問題が難しくて村人は苦戦しているようですね。 +

      + 難しすぎて見当もつかない！} + /> +

      + しかし、次のページで答えが判明します。 + ぜひ先に進んでみてください！ +

      + + + ) + } + ]} + /> +) diff --git a/src/contents/8.en.tsx b/src/contents/8.en.tsx index 5f4ca258b..d532d4f63 100644 --- a/src/contents/8.en.tsx +++ b/src/contents/8.en.tsx @@ -1,4 +1,1352 @@ import React from 'react' import EpisodeCardList from 'src/components/EpisodeCardList' +import { + P, + Strong, + Em, + Ul, + UlLi, + InlineHeader, + Hr +} from 'src/components/ContentTags' +import CustomEmoji from 'src/components/CustomEmoji' +import BubbleQuotes from 'src/components/BubbleQuotes' +import EmojiNumber from 'src/components/EmojiNumber' +import Emoji from 'src/components/Emoji' +import H from 'src/components/H' +import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator' +import ExpressionRunnerCaptionOnly from 'src/components/ExpressionRunnerCaptionOnly' +import EmojiSeparator from 'src/components/EmojiSeparator' +import * as R from 'src/components/Runners' +import InlinePrioritiesLabel from 'src/components/InlinePrioritiesLabel' +import EmojiWithText from 'src/components/EmojiWithText' +import NextLessonButton from 'src/components/NextLessonButton' -export default () => +export default () => ( + サヤちゃん現る, + content: ( + <> + 😭, + , + 😭 + ]} + /> +

      ラムダ村の村人たちは、前回の問題に四苦八苦していました。

      + + + どのような法則に基づいて {' '} + に料理を入れると… + + + + + + がある弁当箱になる？ + + + +

      だめだ…全然分からない！

      + + ) + }, + { + type: 'sad', + children: ( + <> +

      + これを解かないと計算箱を返してもらえないのに…どうしよう… +

      + + ) + } + ]} + /> +

      + その時です。ラムダ村に暮らす少女のサヤちゃん{' '} + 👧🏻{' '} + が、問題に苦戦している村人たちに話しかけてきました。 +

      + + ラムダ村に暮らす少女のサヤちゃん + + } + /> + +

      ねえねえ、みんな何してるの？

      + + ) + }, + { + type: 'sad', + children: ( + <> +

      + おお、サヤちゃんか。実は、にっくき悪魔 😈{' '} + に計算箱を奪われてしまったんだ。 +

      +

      + 奴が出題した問題を解かないと計算箱を返してもらえないんだけど、俺らには難しくて解けないんだよ。 +

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      ふーん、どんな問題なの？

      + + ) + }, + { + type: 'sad', + children: ( + <> +

      じゃあ、手短に説明するね。

      +

      + + 以下の弁当箱の{' '} + {' '} + に、どのような法則に基づいて料理を入れると… + +

      + + ) + } + ]} + /> + + 以下の弁当箱の {' '} + に、 +
      + どのような法則に基づいて料理を入れると… +       + +

      + 「1を足す効果{' '} + + 」がある弁当箱になるか、という問題なんだ。 +

      +

      + すなわち、 + + ➕{' '} + {' '} + を計算できるようにしないといけない + + んだ。 +

      + + ) + } + ]} + /> + + {' '} + に変換できる弁当箱と合体させて +
      + + した時、 +       + + + 結果が {' '} + ➕{' '} + になる？ +
      + (すなわち「1を足す効果{' '} + + 」がある？) +       + +

      ふーん、じゃあサヤも解くのを手伝うよ！

      + + ) + }, + { + type: 'roll', + children: ( + <> +

      + 手伝ってくれるのはありがたいけど、この問題はママゴトじゃないんだよ。俺らがどれだけ頑張っても分からなかったんだ。 +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>サヤちゃんの弁当箱, + content: ( + <> +

      + サヤちゃんは少し考えた後、 + に料理を入れてみました。 +

      + +

      + ねえねえ、サヤも {' '} + に料理を入れてみたんだけど、見てくれる？ +

      + + ) + } + ]} + /> + + 👧🏻 サヤちゃんの弁当箱 + + +

      + ふむふむ…どうせ上手くいかないと思うけど、試してみるか。 +

      +

      + 前回もやったように、 + + {' '} + に変換できる弁当箱と合体させて、 + +

      + + + +

      + + して、 + + 結果が になるか + + 確かめてみよう。どうせムリだろうけど！ +

      + + ) + } + ]} + /> + + に変換できる弁当箱と、 +
      + 👧🏻 サヤちゃんの弁当箱を合体させ… +       + + + +
      + して、結果が になれば + 成功 🎉 +
      + それ以外なら失敗 😭 +       + +

      + じゃあ、 + + してみよう！ +

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + してみると… + + ), + content: ( + <> +

      + それでは、👧🏻{' '} + サヤちゃんの弁当箱を実行してみましょう！ +

      +

      + まず、 + + 1{' '} + のペアがふたつ以上あるので、一番左の{' '} + 1{' '} + のペアからはじめます。 + + +

      + + + +

      + 続いて、また{' '} + + 1{' '} + のペアからはじめたいのですが、 + 1{' '} + のペアの一番下の段にひとつの料理( + + )しかないので不可能です。 + +

      +

      + というわけで、 + + 次は 2 のペアから + + はじめます。 +

      + + + +

      + 次も前回と同じく、 + + 2{' '} + のペアからはじめます。 + +

      + + + +

      つまり、最終的に以下のようになりました！

      + + した結果 + + +

      こ、これはもしや…？

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + に変換できる + + ), + content: ( + <> + +

      + この弁当箱は、 + に変換できます！ +

      + + ) + } + ]} + /> + + + + + + +

      ということは、サヤちゃんの弁当箱は…

      +

      + + {' '} + に変換できる弁当箱と合体させ、 + + すると、結果が になる + + ということですね。 +

      + + ) + } + ]} + /> + + に変換できる弁当箱と、 +
      + 👧🏻 サヤちゃんの弁当箱を合体させ… +       + + + +
      + すると、結果が になる +       + +

      + つまり、 + ➕{' '} + が計算できたので、 + 成功です！ 🎉 +

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      やったー！

      + + ) + }, + { + type: 'surprised', + children: ( + <> +

      + そんなバカな…！俺らがどれだけ頭をひねっても分からなかったのに、サヤちゃんにいとも簡単に解かれるなんて！ +

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + ➕{' '} + はできる？ + + ), + content: ( + <> + +

      + いや、まだ分からんぞ。 + ➕{' '} + ができるからといって、 + + 他の数字に対しても + + があるとは限らない。 + +

      +

      + たとえば、 + + ➕{' '} + も計算できるのかどうか + + 確かめてみないと。 +

      + + ) + } + ]} + /> + , + ➕, + + ]} + description={<>これも計算できる？} + /> + +

      + じゃあ、 + + に変換できる弁当箱と、 + +

      + + + +

      サヤが考えた弁当箱を合体させてみるね！

      + + 👧🏻 サヤちゃんの弁当箱 + +

      + 合体したものを + + して、 + + 結果が になればいい + + んだよね。 +

      + + ) + } + ]} + /> + + に変換できる弁当箱と、 +
      + 👧🏻 サヤちゃんの弁当箱を合体させ… +       + + + +
      + して、結果が になれば + 成功 🎉 +
      + それ以外なら失敗 😭 +       + +

      + まずは実行してみるね。 + +

      +

      今回は、最後まで止まらずに早送りします！

      + + ) + } + ]} + /> + + +

      結果はこうなったよ！

      + + ) + } + ]} + /> + + した結果 + + +

      + この弁当箱は、 + に変換できます！ +

      + + ) + } + ]} + /> + + + + + + +

      + つまり、 + ➕{' '} + が計算できたので、 + またしても成功です！ 🎉 +

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      わーい、わーい！

      + + ) + }, + { + type: 'surprised', + children: ( + <> +

      す、すごい…！

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + + がある法則 + + ), + content: ( + <> + +

      + ではここで正解を言いましょう。 + + サヤちゃんが考えた弁当箱は、 + + がある弁当箱です。 + +

      +

      + だから、サヤちゃんの答えが正解です！ + おめでとうございます！🎉 +

      + + ) + } + ]} + /> + + 👧🏻 サヤちゃんが考えた弁当箱には +
      + + がある +       + +

      わーい、ミニオンさんありがとう！

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + さらに言うと、サヤちゃんが考えた弁当箱以外にも、 + + 以下の法則に当てはまる弁当箱であれば、 どれでも + + があります。 + +

      + + ) + } + ]} + /> + + この法則に当てはまる弁当箱であれば、 +
      + + がある +       + +

      サヤが考えた弁当箱の場合、

      +
        + + 🅰️ は + + + 🅱️ は + + + は{' '} + + +
      +

      ということかな？

      + + ) + } + ]} + /> + + 🅰️ は 、
      + 🅱️ は 、
      + は +       + +

      + その通りです。サヤちゃんが考えた弁当箱は、ちゃんとこの法則に当てはまっているのです。 +

      + + この法則に当てはまる弁当箱であれば、 +
      + + がある +       + + ) + } + ]} + /> + + ) + }, + { + title: <>同じ法則の、他の弁当箱も試してみる, + content: ( + <> + +

      + じゃあ、たとえばこの弁当箱でも、同じ法則に沿っているから、 + + があるってこと？ +

      + + 同じ法則で料理を入れてみた。 +
      + + はあるか？ +       +

      + 🅰️ には 、 + 🅱️ には 、 + には{' '} + + を当てはめてみたよ。 +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + はい、 + + はありますよ。 +

      +

      + + 試しに、 + {' '} + に変換できるこちらの弁当箱と合体させて + してみましょう。 + +

      + + + +

      + 実行したとき、 + + 結果が {' '} + に変換できる弁当箱になれば、 + ➕{' '} + を計算できたので成功 + + になります。 +

      + + ) + } + ]} + /> +

      + +

      + + +

      + 結果、 + {' '} + に変換できる弁当箱が残りました！ +

      + + + +

      + つまり、 + ➕{' '} + を計算できたというわけです。 +

      + + ) + }, + { + type: 'thinking', + children: ( + <> +

      + なるほど、やっぱりこちらの弁当箱にも + + があるということか。 +

      + + サヤちゃんの弁当箱と同じく、こちらの +
      + 弁当箱にも + + がある +       + + ) + } + ]} + /> + + ) + }, + { + type: 'summary', + title: <>立ち止まって振り返ろう, + content: ( + <> + +

      + 俺らふだん頭を使っていないから、情報量が多すぎて疲れてしまった… +

      +

      ちょっとひと休みしてもらえないか？

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      いいですよ！

      +

      + ちなみに現時点で、中級編も半分を終えました + 。つまり、本稿の折り返し地点を越えたということです。 + 残るは中級編の残り半分と、上級編のみです。 +

      +

      + いい機会なので、少し立ち止まって振り返ってみましょう。 +

      + + ) + } + ]} + /> +

      + まずこちらをご覧ください。これは、 + ➕{' '} + を計算できる計算箱ですね。 +

      + + ➕{' '} + を計算できる計算箱。 +
      + 実行すると になる +       +

      + これまで学んだことを一言でまとめると、上の計算箱にあるような「 + 1を足す機能 + 」は、 + 弁当箱で「再現」できる + 、ということです。 +

      + , + , + , + 🍱, + + ]} + description={ + <> + 計算箱の「1を足す機能{' '} + + 」は、 +
      + 弁当箱で「再現」することができる + + } + /> +

      + 「再現 + 」できる、とはどういうことでしょうか？先ほどの計算箱の例で説明しますね。 +

      + これを弁当箱で再現します +

      + ステップ1: まず、 + + 計算箱の の代わりに、 + + に変換できる + + 弁当箱 + + を用意します。 +

      + これの代わりに… + + + に変換できる弁当箱を用意 + +

      + ステップ2: 次に、 + + 計算箱の の代わりに、 + + + がある弁当箱を用意します。 +

      + これの代わりに… + + + + がある弁当箱を用意 +
      (👧🏻 サヤちゃんが考えた弁当箱です) +       +

      + ステップ3:{' '} + このふたつを合体させた弁当箱は、先ほども説明した通り、 + + すると{' '} + になります + + ね。 +

      + + に変換できる弁当箱と +
      + + がある弁当箱を合体 +       +

      + つまり、先ほど登場した {' '} + ➕ {' '} + を計算できる計算箱は、 +

      + +

      + こちらの弁当箱で「再現」できるということです。 +

      + + {' '} + の計算箱を、弁当箱で再現 + +

      + これが、「計算箱を弁当箱で再現する + 」ということなんですね。 +

      + + ) + }, + { + type: 'summary', + title: <>もっと複雑な計算箱も再現できる, + content: ( + <> +

      もちろん、もっと複雑な計算箱も弁当箱で再現できます。

      +

      + たとえば、初級その1に登場したこちらの計算箱をご覧ください。 + すると、結果は{' '} + になります。 +

      + +

      + これを弁当箱で再現するには、 + + に変換できる弁当箱と、 + + がある弁当箱を「2個」合体させればいい + + のです。 +

      + + に変換できる弁当箱と +
      + + がある弁当箱を「2個」
      + 合体すれば、 + {' '} + の計算箱を再現できる +       +

      + 上の弁当箱は実行に時間がかかるので、ここでは早送りはしませんが、 + + {' '} + ボタンを押すと、答えが {' '} + になるのを確認できます。 + +

      +
      +

      + まとめると、 + + 計算箱の「1を足す機能{' '} + + 」は、弁当箱で再現することができる + + のです。このポイントさえ覚えていただければ、細かいことは分からなくても大丈夫です！ +

      + , + , + , + 🍱, + + ]} + description={ + <> + 計算箱の「1を足す機能{' '} + + 」は、 +
      + 弁当箱で「再現」することができる + + } + /> + + ) + }, + { + type: 'summary', + title: <>他の機能も再現できる？, + content: ( + <> +

      + ここで疑問なのですが、初級で説明した通り、計算箱には「 + 1を足す機能 + 」以外にも、「1を引く機能{' '} + + 」や、「繰り返しの機能 🔁 + 」がありましたよね。 +

      + + 「1を引く機能 + 」の例 + + + 「繰り返しの機能 🔁 + 」の例 +
      + ( を {' '} + 回繰り返す) +       +

      + + これらの機能も、弁当箱で再現することができるのでしょうか？ + +

      + , + 🍱, + 🔁 + ]} + description={ + <> + 「1を引く機能 + 」や +
      「繰り返しの機能 🔁 + 」も、 +
      + 弁当箱で「再現」できる？ + + } + /> +

      + この疑問については、後に答えが明らかになります。 + 楽しみにしていてください。 +

      + + ) + }, + { + type: 'sideNote', + title: <>考えつかなくても大丈夫！, + content: ( + <> + +

      ミニオン、ひとつ愚痴を聞いてもらえるかい？

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      はい、どうしました？

      + + ) + }, + { + type: 'sad', + children: ( + <> +

      + さっきの問題、難しすぎやしないかい？普通は、サヤちゃんみたいに答えをとっさに思いつかないよ！ +

      +

      + + こういうのがパッと思いつけないと、コンピュータサイエンスを学ぶ資格はないのかな？ + +

      + + ) + } + ]} + /> + + さっきの答えの弁当箱。普通はこんなの、 +
      + とっさに思いつかないよ！😢 +       + +

      + いえ、そんなことは全くありませんよ。 + むしろ、こういう答えを思いつけるのはひと握りの天才だけです。 +

      + + ) + }, + { + type: 'sad', + children: ( + <> +

      え、そうなの？

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      はい。先ほどの問題は超難問でしたから。

      +

      + + 答えを思いつけなくても、答えを見て、「なるほど、そういうことだったのか」と理解できれば、コンピュータサイエンスを学ぶ素養は十分すぎるほどあります。 + +

      + + ) + }, + { + type: 'smile', + children: ( + <> +

      そっか…気が楽になったよ。ありがとう！

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      いえいえ。それでは、そろそろ話を戻しましょう！

      + + ) + } + ]} + /> + 話を戻しましょう！} + /> + + ) + }, + { + title: <>話を戻すと…, + content: ( + <> +

      + 悪魔による難しい問題に見事答えられたことで、村人たちは大喜びでした。 +

      + +

      + やった！サヤちゃんのおかげで問題に答えられたぞ！これで計算箱を返してもらえる！ +

      + + ) + } + ]} + /> +

      しかし、当のサヤちゃんには何か腑に落ちない点があるようです。

      + +

      + ミニオンさん、 + おかしなことに気づいちゃったんだけど… +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      はい、「おかしなこと」とは何ですか？

      + + ) + } + ]} + /> +

      + サヤちゃんが気づいた、「おかしなこと + 」とは何なのでしょうか？次のページで説明していきます！ +

      + + + + ) + } + ]} + /> +) diff --git a/src/contents/9.en.tsx b/src/contents/9.en.tsx index 5f4ca258b..71ff7c347 100644 --- a/src/contents/9.en.tsx +++ b/src/contents/9.en.tsx @@ -1,4 +1,1298 @@ import React from 'react' import EpisodeCardList from 'src/components/EpisodeCardList' +import { P, Em, Strong, Ul, UlLi } from 'src/components/ContentTags' +import H from 'src/components/H' +import BubbleQuotes from 'src/components/BubbleQuotes' +import EmojiNumber from 'src/components/EmojiNumber' +import EmojiWithText from 'src/components/EmojiWithText' +import EmojiSeparator from 'src/components/EmojiSeparator' +import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator' +import CustomEmoji from 'src/components/CustomEmoji' +import EmojiForLetterWithBottomRightBadgeWrapper from 'src/components/EmojiForLetterWithBottomRightBadgeWrapper' +import EmojiForLetter from 'src/components/EmojiForLetter' +import Emoji from 'src/components/Emoji' +import BottomRightBadge from 'src/components/BottomRightBadge' +import TwoColGrid from 'src/components/TwoColGrid' +import * as R from 'src/components/Runners' +import NextLessonButton from 'src/components/NextLessonButton' -export default () => +export default () => ( + サヤちゃんの疑問, + content: ( + <> +

      + サヤちゃんは、 + + がある弁当箱について、あることに気が付きました。 +

      + +

      ねえねえ、見てほしいものがあるんだけど。

      +

      + まず、 + + これは に変換できる弁当箱 + + だよね。 +

      + + ) + } + ]} + /> + + + + +

      うん、そうだけど、それがどうしたの？

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      + これを、前回サヤが考えた + + がある弁当箱と合体させて、 + {' '} + すると、どうなると思う？ +

      + + ) + } + ]} + /> + + + と合体させて、 +
      + +
      + するとどうなる？ +       + +

      + そりゃあ、 + + ➕{' '} + を計算できるんだから、 + になるに決まっている + + だろう？ +

      + + ) + } + ]} + /> + , + ➕, + + ]} + description={ + <> + 結果は になるはず…？ + + } + /> + +

      + じゃあ、 + + してみてよ！ +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>実行してみると…, + content: ( + <> +

      + それでは、 + +

      + + +

      + 実行を終えたので、 + {' '} + したいところですが… +

      +

      + 残念ながら、 + + この弁当箱はぼくが計算箱に変換することができません。 + +

      + + ) + } + ]} + /> + 計算箱に変換できない + +

      + 理由は、 + 以下の法則に沿っていないからです。 +

      + + + +

      + + 右上には 🅱️ の料理が「 + ひとつだけ + 」ある必要があります。しかし、 + + ここでは 🅱️ の料理が + ふたつもある + + ので、計算箱に変換できないのです。 + +

      + + ) + } + ]} + /> + + 右上に 🅱️ がふたつあるので、 +
      + 計算箱に変換できない +       + +

      + お、おかしい…なんで {' '} + に変換できる弁当箱にならないんだ？前回はちゃんとできていたのに… +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>前回と比較してみよう, + content: ( + <> + +

      + では、前回と比較してみましょう。前回実行したのは、こちらの弁当箱でした。 +

      +

      + + 先ほどと唯一違うのは、上の部分に{' '} + のかわりに{' '} + が入っている + + ところです。(黄色で示しています) +

      + + ) + } + ]} + /> +

      + +

      + + 前回実行した弁当箱: +
      + 上の部分は に変換できる。 +
      + + 先ほどと違うのは、上の の部分。 + +
      + それ以外はすべて先ほどと同じ。 +       + +

      + こちらは、最終的に {' '} + に変換できる弁当箱になりますね。 +

      + + ) + } + ]} + /> + + + + +

      うーん、どうして結果に違いが出るんだろう？

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + と{' '} + {' '} + に同じ料理があると、結果が狂う + + ), + content: ( + <> + +

      では、ここでネタばらしをしましょう。

      +

      + こちらに、先ほど + 失敗した例をもう一度表示しています。 +

      + + ) + } + ]} + /> + + 先ほど{' '} + + ➕{' '} + を計算できなかった + + 例 + + +

      + 次に、 + {' '} + {' '} + {' '} + {' '} + の印をつけてみます。 +

      + + ) + } + ]} + /> + + +

      + ここで、 + + {' '} + と{' '} + {' '} + の両方に、 + がある + + のに注目してみてください。 +

      + + ) + } + ]} + /> + + と{' '} + {' '} + の両方に + がある + + +

      + 実は、このように{' '} + + {' '} + と{' '} + {' '} + に同じ料理があると、実行結果が狂ってしまう + + のです。 +

      +

      + 実行結果が狂ってしまうから、 + ➕{' '} + {' '} + を計算できない、ということになります。 +

      + + ) + } + ]} + /> + , + , + + ]} + description={ + <> + + {' '} + と{' '} + {' '} + に同じ料理があると、 +
      + 実行結果が狂う +       +
      + (先ほどの場合は + が
      + と{' '} + {' '} + 両方にある) + + } + /> + +

      へー、そうなんだ！どうして結果が狂うの？

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + この例だと複雑すぎて説明が難しいので、 + 簡単な例を使って説明しますね！ +

      + + ) + } + ]} + /> + + ) + }, + { + title: ( + <> + と{' '} + {' '} + に同じ料理がない場合とある場合 + + ), + content: ( + <> + +

      + では、簡単な例で説明します。次のふたつの例をご覧ください。 +

      +
        + + 左側は、 + {' '} + と{' '} + {' '} + が違います。 + + + 右側は、 + {' '} + と{' '} + {' '} + が同じ + + です。 + +
      +

      それぞれを進めてみますね。

      + + ) + } + ]} + /> + + + {' '} + と{' '} + {' '} + が違う + + + + + + + + + 下の料理が違う + + } + right={ + <> + + {' '} + と{' '} + {' '} + が同じ + + + + + + + + + 下の料理が同じ + + } + /> + +

      + + 左側は、下のふたつの料理が違うけど、右側は下のふたつの料理が同じになった！ + +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      そうなんです。このまま最後まで実行すると、

      +
        + + 左側は{' '} + {' '} + の が残るのに対し、 + + + 右側は{' '} + {' '} + の が残ります。 + +
      + + ) + } + ]} + /> + + + + + + + + } + right={ + <> + + + + + + + + + } + /> + +

      + 最初と最後だけをピックアップすると、以下のようになります。 +

      + + ) + } + ]} + /> + + + {' '} + と{' '} + {' '} + が違う + + + + + } + right={ + <> + + {' '} + と{' '} + {' '} + が同じ + + + + + } + /> + +

      + というわけで、 + {' '} + と{' '} + {' '} + に同じ料理がない場合とある場合で、最終的な結果が狂ってくることがお分かりいただけたでしょうか。 +

      + + ) + } + ]} + /> + , + , + + ]} + description={ + <> + + {' '} + と{' '} + {' '} + に同じ料理があると、 +
      + 実行結果が狂う +       + + } + /> + + ) + }, + { + title: <>話を戻すと…, + content: ( + <> + +

      + では、先ほど {' '} + ➕ {' '} + を計算できなかった弁当箱に話を戻しましょう。 +

      +

      + {' '} + と{' '} + {' '} + の両方に + {' '} + があるので、結果が狂うのですね。 +

      + + ) + } + ]} + /> + + + ➕{' '} + を計算できなかった + + 理由: +
      + と{' '} + {' '} + の両方に + が
      + あるせいで、結果が狂ったから +       + +

      じゃあ、どうすればいいんだろう？

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      + + {' '} + と{' '} + {' '} + のどちらかの + {' '} + を別の料理に変えれば、上手くいく + + というわけだよね。 +

      +

      + じゃあ… + + ミニオンさんお願い！特別ルール + を設けてくれないかな？ + +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      どういうことですか？

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      + + に、「 + + {' '} + と{' '} + {' '} + に同じ料理が登場したら、どちらかを別な料理に変える + + 」という特別ルールを設けてほしいんだ。 +

      + + ) + } + ]} + /> + , + 🙇🏻‍♀️, + + ]} + description={ + <> + + {' '} + と{' '} + {' '} + に同じ料理が登場したら、 +
      + どちらかを別な料理に変える +       +
      + という特別ルールを設けてほしい + + } + /> + +

      + 分かりました、いいですよ！ +

      + + ) + }, + { + type: 'saya', + children: ( + <> +

      やったー、ありがとう！

      + + ) + }, + { + type: 'roll', + children: ( + <> +

      え、そんなに簡単にルールを改変してくれるの…？

      + + ) + } + ]} + /> + + ) + }, + { + title: <>特別ルール, + content: ( + <> + +

      それでは、

      +
        + + + {' '} + と{' '} + {' '} + に同じ料理が登場したら、 + + + + + 自動的に{' '} + {' '} + を、まだ使われてない料理にランダムに変える。 + + +
      +

      という特別ルールを設けましょう。

      + + ) + } + ]} + /> + , + , + ❓ + ]} + description={ + <> + と{' '} + {' '} + に同じ料理が登場したら、 +
      + + 自動的に{' '} + {' '} + がまだ使われてない料理に +
      + ランダムに変わる +       + + } + /> + +

      + つまり、先ほどのように{' '} + {' '} + と{' '} + {' '} + に同じ料理が登場した場合… +

      + + ) + } + ]} + /> + + +

      + + {' '} + の + が自動的に別の料理に変わります。 + +

      +

      + + 何に変わるかについてですが、 + + まだ使われていない料理にランダムに変わります + + 。ここでは、 + になりました。 + +

      + + ) + } + ]} + /> + + + + , + , + + + + ]} + description={ + <> + の + が、まだ +
      + 使われていない + に変わる + + } + /> + +

      + これで、 + {' '} + と{' '} + {' '} + が被らなくなった！ +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + では、最後まで進めてみましょう。 + +

      + + ) + } + ]} + /> + + +

      + やった！無事、 + に変換できる弁当箱になった！ +

      + + ) + } + ]} + /> + + + + +

      + ということは、 + ➕{' '} + を計算できたということだね！ +

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + その通りです。では、そろそろ今回のまとめに入りましょう！ +

      + + ) + } + ]} + /> + + ) + }, + { + type: 'summary', + title: ( + <> + + + ), + content: ( + <> +

      + 前回サヤちゃんが考えた + + がある弁当箱は、 +

      + + + がある弁当箱 + +

      + 次の + + に変換できる弁当箱 + + と組み合わせた場合、 +

      + + + +

      + と{' '} + {' '} + に同じ料理があり、そのままだと結果が狂ってしまいます。 +

      + + と{' '} + {' '} + の両方に + がある + +

      しかし、今回から新たに以下の特別ルールが適用されます:

      +
        + + + と{' '} + {' '} + に同じ料理が登場したら、 + + + + + 自動的に{' '} + {' '} + を、まだ使われてない料理にランダムに変える。 + + +
      + +

      + これにより、正しく ➕{' '} + を計算できるようになります。 +

      + +

      うーん、この特別ルールは忘れてしまいそうだなあ…

      + + ) + }, + { + type: 'dog', + children: ( + <> +

      + ご心配なく！ + + この特別ルールは次のページ以降で登場する弁当箱でも使われますが、 + + 暗記する必要はありません。 + 早送り中に自動で行われますから。 +

      +

      + なんとなく「 + こういう法則があるんだな + 」と思ってくだされば大丈夫です！ +

      + + ) + } + ]} + /> + + ) + }, + { + title: <>これで完璧！, + content: ( + <> + +

      + いろいろあったけど、これで、 + + がある弁当箱は完璧にマスターしたぞ！ +

      +

      悪魔よ、約束通り計算箱は返してもらう！

      + + ) + }, + { + type: 'devil', + children: ( + <> +

      うぐぐ…

      + + ) + } + ]} + /> +

      + 果たして、村人たちは計算箱を取り戻せたのでしょうか？次のページで確かめてみましょう！ +

      + + + ) + } + ]} + /> +) From 5c8717a61a460ae63f040a13cc6061cb89c4dc1b Mon Sep 17 00:00:00 2001 From: Shu Uesugi Date: Fri, 13 Sep 2019 01:17:33 -0400 Subject: [PATCH 2/2] Update .nvmrc --- .nvmrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.nvmrc b/.nvmrc index f10fc7d8f..dc49ba9bb 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v12.3.1 +v10.16.3 \ No newline at end of file