Help us understand the problem. What is going on with this article?

4歳娘「パパ、実行時エラーの出ないフロントエンド言語ってなーんだ?」

とある休日の朝

娘(4歳)「パパ、最近はお仕事でどんなWebサイトを作ってるの?」

ワイ「ん?詳しくは言えへんけど、技術記事投稿サイトや」

娘「Qiitaのパクリみたいなやつ?」

ワイ「ハッキリ言うなや」

娘ちゃんはなぞなぞがしたい

娘「それよりパパ、なぞなぞしよ」

ワイ「ええで」

娘「じゃあ行くよー」
娘「実行時エラーの出ないフロントエンド言語ってなーんだ?」

ワイ「いやどんななぞなぞやねん
ワイ「っていうか、どんな言語でも実行時エラーは出るやろ」
ワイ「例えばさっきの技術投稿サイトで」
ワイ「最新記事を1件表示しようとした場合...」

const newestArticle = articles[0];

ワイ「↑こんな感じで最新の1件を取得して」

<div>
    <h2>最新記事</h2>
    <span>{ newestArticle.title }</span>
</div>

ワイ「↑こんな感じで画面に表示しようとするやろ?」
ワイ「でも、まだ記事が1件もなかった場合には...」

TypeError: Cannot read property 'title' of undefined
undefinedからtitleを読み取れません)

ワイ「↑こんな実行時エラーが発生してしまうんや」
ワイ「0番目の記事がundefinedになってしまうからな」

ワイ「せやから」

0番目の記事が存在する場合だけ、それを表示する

ワイ「みたいな」
ワイ「条件式を書くように気をつけなあかんのや」

ワイ「実行時エラーが出ないように気をつけてコーディングする」
ワイ「そして、実際にエラーが出てないかどうか」
ワイ「しっかりブラウザ上で確認するんや」
ワイ「それがプログラミングや」

ワイ「つまり、さっきのなぞなぞの答えは...」
ワイ『実行時エラーの出ない言語などない!』
ワイ「これが答えや」

娘「ブッブー」
娘「答えは Elm です」

ワイ「いや、そんなわけないやろ...」

娘ちゃんのライブコーディング開始

娘「Elmの場合、0番目の記事を取得するには」

newestArticle =
    Array.get 0 articles

娘「↑こう書くんだけど」

div []
    [ h2 [] [ text "最新記事" ]
    , span [] [ text newestArticle.title ]
    ]

娘「それを↑こんな感じで画面に表示しようとすると...」
娘「そもそもコンパイルが通りません!」

Type Mismatch
This newestArticle value is a: Maybe Article

娘「↑こんなコンパイルエラーが出ます」
娘「つまり...」

型の不一致
newestArticleの値はMaybe Articleです

娘「↑こう言う意味だね」

ワイ「何やMaybe Articleって」
ワイ「何で多分記事やねん」

娘「だって、パパもさっき言ってたけど」
娘「記事は必ず存在するとは限らないでしょ?」
娘「サービス開始当初は0件かもしれないじゃん?」
娘「Elmでは、0番目の記事が存在しなかった場合のことも想定していないと
娘「そもそもコンパイルが通らないの」

娘「つまり、存在するかしないか分からないような値を」
娘「そのまま画面に表示させようとしても駄目なの」

ワイ「ほな、どうすえりゃええの...」

娘「case式を使って、記事が存在しなかったケースのコードも書いてあげると」
娘「ちゃんとコンパイルが通るの」

case newestArticle of
    Just article ->
        div []
            [ h2 [] [ text "最新記事" ]
            , span [] [ text article.title ]
            ]

    Nothing ->
        text ""

娘「↑こんな感じだね」
娘「newestArticle、つまり最新の記事がNothingだった場合は」
娘「空文字を表示、つまり何も表示しないってことだね」

ワイ「おお、ちゃんと全て想定してコードを書かないと」
ワイ「そもそも先へ進めへんのか」

娘「そう」
娘「記事の情報ってAPIとかから取得してくるから、」
娘「実際にシステムが動いてみないと、何件あるかなんて分からないでしょ?」
娘「コードを書いてる段階では何件なのか分からない」
娘「0番目の記事は存在するかもしれないし、存在しないかもしれない」
娘「そんなシュレーディンガーの猫ちゃんみたいな不確定な値も」
娘「Elmが事前に検査してくれるから」
娘「プログラマーは忘れずに想定・対応できて」
娘「結果的に実行時エラーを見ることはまず無いの」

ワイ「ドジっ子なワイにはピッタリかもな」

娘「そうだね」
娘「気をつけてコーディングして、気をつけてブラウザテストするより」
娘「想定できるようなエラーはコンパイラにブロックしてもらう方いいじゃん?」

ワイ「さすが娘ちゃん、相変わらず才気走ってんな...」
ワイ「ハスケル子ちゃんもElm良いって言うてたし」
ワイ「ワイも勉強してみよかな...」

そんなこんなでお昼ごはん

ワイ「はぁ...実行時エラーが出ない言語なんてあったんやな...」
ワイ「今までブラウザでぽちぽちテストして」
ワイ「undefinedエラーが出て、そんなことばっかり繰り返しとったわ...」
ワイ「しかもワイ、ミスが多い方やし...」
ワイ「もっと早くコンパイル言語を勉強しておけばよかったわ...」
ワイ「はぁ...ワイの人生、後悔ばっかりや...」

娘「パパ、後悔したっていいんだよ」

ワイ「え...」

娘「後悔して後悔して、なりたい自分が見えてくるんだよ」
娘「転んで転んで、やっと自分に合った歩き方が分かるんだよ」
娘「またやっちゃった...今度こそは...っていう」
娘「その痛みを忘れない事こそが、明日のパパを変えて行くんだよ」

ワイ「娘ちゃん...!!!」
ワイ「人生何周目やねん...!!!」

娘「...パパの記事って、いつも最後このパターンだよね...」

ワイ「まぁな...」

〜おしまい〜

Elmが気になった人はこちら

Elm について (はじめに)

さらに続編

テストしやすい「純粋」な関数とは?

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away