つくる - データの型付け
第2章の道具を 1 本にまとめる
この回で新しい知識は出てきません。第2章で覚えたことだけを使って、プロフィールのデータ一式に型を通します。
使う道具は 4 つです。1 つ目はプリミティブ型、2 つ目は string[] のような配列の型、3 つ目はオブジェクトの形の書き方、4 つ目は type による型エイリアスです。string | null の扱いも合わせて使います。
型を通す相手
プロフィール画面に出す要約を作る関数です。JavaScript として書かれていて、実行しても止まりませんが、表示がおかしくなる場合があります。
function profileSummary(profile) {
const label = profile.nickname;
const shown = [];
for (let i = 0; i < profile.titles.length; i++) {
if (profile.published[i]) {
shown.push(profile.titles[i]);
}
}
return label + " / 公開作品" + shown.length + "件 / " + shown.join("、");
}渡ってくるデータはこの形です。
{
name: "ゆめさく",
nickname: null,
titles: ["プロフィールサイト", "自己紹介カード", "スキル一覧の表"],
published: [true, false, true],
}先に型を書く
いきなり中身を直さないでください。まずデータの形を type で書き起こします。
type Nickname = string | null;
type Profile = {
name: string;
nickname: Nickname;
titles: string[];
published: boolean[];
};書き終えて profile: Profile と付けた瞬間に、隠れていた問題が表に出ます。
Type 'string | null' is not assignable to type 'string'.nickname が null のとき、label に null が入ったまま連結され、画面に null / 公開作品2件 と出ていました。型を書くまで誰も気づけなかった不具合です。
もう 1 つ、公開作品が 0 件のときに shown.join("、") が空文字になり、行の末尾が尻切れになります。これは型では検出できないので、仕様として自分で決めて書きます。
手を動かす
型を書き、注釈を付け、出てきたエラーを読んで直す、という順番でやってください。この順番は、第7章で既存のコードを丸ごと移していくときにも、そのまま使います。
要件
- プロフィールの形を
typeで定義し、profileに付ける - ニックネームが
nullのときは名前を表示名に使う - 公開中のタイトルを、もとの順番のまま
、でつなぐ - 公開作品が 0 件のときは、タイトルの部分を
なしにする
入出力例
profileSummary({"name":"ゆめさく","nickname":null,"published":[true,false,true],"titles":["プロフィールサイト","自己紹介カード","スキル一覧の表"]}) → "ゆめさく / 公開作品2件 / プロフィールサイト、スキル一覧の表"
profileSummary({"name":"ゆめさく","nickname":"ゆめ","published":[true,true],"titles":["プロフィールサイト","自己紹介カード"]}) → "ゆめ / 公開作品2件 / プロフィールサイト、自己紹介カード"
profileSummary({"name":"たなか","nickname":null,"published":[false,false],"titles":["下書きメモ","試作ページ"]}) → "たなか / 公開作品0件 / なし"
profileSummary({"name":"さとう","nickname":"さとやん","published":[],"titles":[]}) → "さとやん / 公開作品0件 / なし"
profileSummary({"name":"すずき","nickname":null,"published":[false,true],"titles":["試作ページ","スキル一覧の表"]}) → "すずき / 公開作品1件 / スキル一覧の表"ヒント
編集 LuaGate編集部