---
title: ふりがなプログラミング
tags:  #初心者  
author: [Yukiko](https://image.docswell.com/user/yukiko_it)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/2JVVGMNGJQ.jpg?width=480
description: ふりがなプログラミング by Yukiko
published: October 14, 26
canonical: https://image.docswell.com/s/yukiko_it/K4N7YG-2026-10-14-212623
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/2JVVGMNGJQ.jpg)

ふりがなプログラミング｜文系エンジニア向け
設計と実装の解説
うさうさ研修工房
ふりがなプログラミング｜文系エンジニア向け
－1－


# Page. 2

![Page Image](https://bcdn.docswell.com/page/5EGL8G5DJL.jpg)

作成日：2026-08-25（火）
この教材について
プログラムは「英語の暗号」に見えますが、実際には主語・述語のある日本語の文章に置き換えられます。こ
の教材では、実際に動いているツール（うさうさイベント指揮所 PRO・5,300 行）のコードを題材に、記号ひ
とつずつに「ふりがな」を振って、日本語の文に読み下していきます。
進め方は毎回同じ 3 ステップです。
1. コードを見る（読めなくて構いません）
2. ふりがなを振る（記号ひとつずつの読み方と意味）
3. 読み下す（日本語の文章にする）
最後に要点と、つまずきやすいところを置きます。
文系出身で IT 業界に入った方に向けています。数学の知識は使いません。「英単語の意味」と「語順」が分かれば
読めます。
ふりがなプログラミング｜文系エンジニア向け
－2－


# Page. 3

![Page Image](https://bcdn.docswell.com/page/4JQY9XZX7P.jpg)

0. 読む前の約束ごと
記号の読み方（まずこれだけ）
記号
ふりがな
意味
=
にいれる
右のものを左の箱に入れる。「等しい」
ではありません
===
とおなじ
左と右が同じかどうか調べる。こちらが
「等しい」
;
ここまで
1 つの文の終わり。日本語の「。」
()
かっこ
関数を呼ぶときの合図。中身は渡すもの
{}
ここからここまで
処理のかたまり。日本語の「〜する。〜
する。」を束ねる
[]
ならび
順番のあるリスト
//
ひとりごと
ここから右はコンピュータが読まない説
明書き
= と === の違いは、最初の関門です。= は「入れる」、=== は「同じ？」。ここだけ先に覚えてください。
ふりがなプログラミング｜文系エンジニア向け
－3－


# Page. 4

![Page Image](https://bcdn.docswell.com/page/K74WX632E1.jpg)

第1課
箱を用意して、名前をつける
コード
javascript
const VERSION = "1.8";
let cur = s0;
ふりがな
コード
ふりがな
意味
const
かわらないはこ
あとで中身を入れ替えない箱
VERSION
バージョン
箱につけた名前
=
にいれる
右のものを左の箱に入れる
"1.8"
もじの いってんはち
文字として扱う「1.8」
;
ここまで
文の終わり
let
あとでかえるはこ
あとで中身を入れ替える箱
cur
いまのいち
current（現在）の略。今の位置
読み下し
変わらない箱「バージョン」を用意して、文字の「1.8」を入れる。ここまで。 あとで変える箱「今の位置」を用意
して、s0 の中身を入れる。ここまで。
要点
● 箱には 2 種類ある。const は入れ替えない箱、let は入れ替える箱
● 迷ったら まず const で書く。入れ替える必要が出てきたときだけ let に変える
● "..." で囲むと文字、囲まないと数。"1.8" と 1.8 は別物
つまずきポイント
= を「等しい」と読んでしまうと、次の行が理解できなくなります。
javascript
cur = cur + mins;
これを「今の位置 = 今の位置 + 所要時間」と読むと「そんなはずない」となります。正しくは：
「今の位置」に、「今の位置＋所要時間」を入れ直す。
右を計算してから、左に入れる。この順番です。
ふりがなプログラミング｜文系エンジニア向け
－4－


# Page. 5

![Page Image](https://bcdn.docswell.com/page/LJ1YNV1KEG.jpg)

第2課
関数＝「材料を渡すと、答えを返してくれる係」
コード
javascript
function pad2(n){
return String(n).padStart(2, "0");
}
ふりがな
コード
ふりがな
意味
function
かかりをつくる
これから「係」を作りますという宣言
pad2
にけたにそろえる
係につけた名前
(n)
すうじを うけとる
渡してもらう材料。ここでは数字 1 つ
{
ここから
係の仕事の始まり
return
こたえをかえす
呼んだ人に結果を返す
String(n)
もじにする
数字を文字に変える
.padStart(2,"0")
にけたになるまで まえに 0 をつめる
2 文字に足りない分だけ前に "0" を足す
}
ここまで
係の仕事の終わり
読み下し
「2 桁にそろえる」という係を作る。数字を 1 つ受け取る。 受け取った数字を文字に変えて、2 文字になるまで前に
0 を詰めて、その答えを返す。
使ってみる
javascript
pad2(3);
// "03"
pad2(12);
// "12"
要点
● 関数は係（かかり）です。材料を渡すと、答えを返してくれます
● return が返事。これがないと、呼んだ側は何も受け取れません
● 名前は「何をする係か」が分かるようにつけます。pad2 は「2 桁にそろえる係」
つまずきポイント
return を書き忘れると、答えが undefined（何もない）になります。
javascript
function pad2(n){
String(n).padStart(2, "0");
// 計算はしたが、返していない
}
pad2(3);
// undefined
ふりがなプログラミング｜文系エンジニア向け
－5－


# Page. 6

![Page Image](https://bcdn.docswell.com/page/GJWG4L8P72.jpg)

計算することと、返すことは別です。係が答えを出しても、口に出さなければ相手には伝わりません。
ふりがなプログラミング｜文系エンジニア向け
－6－


# Page. 7

![Page Image](https://bcdn.docswell.com/page/4EZL2M8673.jpg)

第3課
「もし〜なら」で門前払いする
コード
javascript
function parseTime(s){
const m = String(s).trim().match(/^(\d{1,2}):(\d{2})$/);
if(!m) return null;
const h = Number(m[1]), mi = Number(m[2]);
if(h > 23 || mi > 59) return null;
return h * 60 + mi;
}
ふりがな
コード
ふりがな
意味
String(s).trim()
もじにして まえうしろの くうはくをと
る
" 13:00 " → "13:00"
.match(...)
かたちが あっているか しらべる
「数字:数字」の形か調べる
if(!m)
もし あてはまらなければ
! は「〜でない」
return null
からっぽを かえす
「読み取れませんでした」という返事
Number(m[1])
すうじにする
取り出した文字を数に変える
||
または
どちらか一方でも当てはまれば
h * 60 + mi
じ かける 60 たす ふん
時を分に直して足す
読み下し
「時刻を読み取る」係を作る。文字を 1 つ受け取る。 前後の空白を取って、「数字:数字」の形か調べる。 もし当て
はまらなければ、空っぽを返して終わり。 当てはまったら、時と分をそれぞれ数に変える。 もし時が 23 より大き
い、または分が 59 より大きければ、空っぽを返して終わり。 問題なければ、時×60＋分 を返す。
要点
● if は「関所」です。条件に合わないものは、そこで通行止めにします
● 「おかしい入力を先に弾いてから、正しい処理を書く」形を早期リターンと呼びます
● こう書くと、後半の処理は「正しい入力しか来ない」前提で書けるので、読みやすくなります
つまずきポイント
関所を作らないと、こうなります。
javascript
parseTime("25:00");
// 関所がなければ 1500 を返してしまう
25 時は存在しません。でもコンピュータは計算できてしまいます。「計算できる」と「正しい」は違う。これ
はプログラムの世界でいちばん大事な感覚です。
ふりがなプログラミング｜文系エンジニア向け
－7－


# Page. 8

![Page Image](https://bcdn.docswell.com/page/Y76WVNPL7V.jpg)

ふりがなプログラミング｜文系エンジニア向け
－8－


# Page. 9

![Page Image](https://bcdn.docswell.com/page/G75MD5KM74.jpg)

第4課
「または」と「かつ」
コード
javascript
if(h > 23 || mi > 59) return null;
if(frame !== null && tt.total > frame) { /* 警告を出す */ }
ふりがな
コード
ふりがな
意味
||
または
どちらか一方でも当てはまれば
&&
かつ
両方とも当てはまるときだけ
!==
とちがう
同じでない
>
よりおおきい
大小くらべ
読み下し
もし「時が 23 より大きい」または「分が 59 より大きい」なら、空っぽを返す。 もし「枠が空っぽでない」かつ
「合計が枠より大きい」なら、警告を出す。
要点
● ||（または）は、条件がゆるくなる。当てはまりやすい
● &&（かつ）は、条件がきつくなる。両方そろわないと通らない
● 2 つ目の例で && を使っているのは、「枠が決まっていないのに比べても意味がない」からです。順
番も大事で、先に「空っぽでない」を確認しています
ふりがなプログラミング｜文系エンジニア向け
－9－


# Page. 10

![Page Image](https://bcdn.docswell.com/page/9J298NWRER.jpg)

第5課
「三項演算子」＝ 一行の「もし〜なら〜、でなければ〜」
コード
javascript
const s0 = base === null ? 0 : base;
ふりがな
コード
ふりがな
意味
base === null
ベースが からっぽ とおなじ？
質問の部分
?
ならば
質問の終わりの合図
0
ゼロ
当てはまるときの答え
:
でなければ
分かれ道
base
ベース
当てはまらないときの答え
読み下し
「ベースが空っぽと同じ？」ならば 0、でなければ ベースそのもの。それを s0 に入れる。
同じことを if で書くと、こうなります。
javascript
let s0;
if(base === null){ s0 = 0; } else { s0 = base; }
要点
● 三項演算子は「短く書くための道具」であって、必須ではありません
● 短い分岐だけに使います。入れ子にすると一気に読めなくなります
● 読むときは「? の前が質問、: の左が『はい』、右が『いいえ』」と分解します
ふりがなプログラミング｜文系エンジニア向け
－ 10 －


# Page. 11

![Page Image](https://bcdn.docswell.com/page/DEY46PL5JM.jpg)

第6課
リストを 1 つずつ加工する（map）
コード
javascript
const rows = program.map(it => {
const mins = Math.max(0, Number(it.mins) || 0);
return Object.assign({}, it, {mins, start: fmtTime(cur), end: fmtTime(cur + mins)});
});
ふりがな
コード
ふりがな
意味
program
しんこうひょう
元のリスト（進行表の行の並び）
.map(...)
ひとつずつ かこうして あたらしいなら
びをつくる
元のリストは変えない
it =>
それを うけとって
1 件を it という名前で受け取る
Math.max(0, x)
0 と x の おおきいほう
マイナスを 0 に丸める
Number(it.mins) || 0
すうじにする。だめなら 0
空欄や文字なら 0 にする
Object.assign({}, it, {...})
もとのなかみを うつして うわがきする
元を壊さずに新しいものを作る
読み下し
進行表を 1 件ずつ加工して、新しい並びを作る。 1 件を受け取ったら、所要時間を数字にする（読めなければ 0 に
する）。マイナスなら 0 にする。 元の中身を写した上で、所要時間・開始時刻・終了時刻を書き足したものを返す。
要点
● map は「1 つずつ加工して、新しいリストを作る」道具です
● 元のリストは変わりません。これが重要で、元データを壊さずに表示用のデータを作れます
● Number(x) || 0 は「数にできなければ 0」という定番の書き方です。空欄対策としてよく出てきます
つまずきポイント
map と forEach は似ていますが、返ってくるものが違います。
書き方
何をする
返ってくるもの
map
1 つずつ加工する
新しいリスト
forEach
1 つずつ何かする
なし（返り値はない）
「新しいリストが欲しいなら map、ただ順番に処理したいだけなら forEach」と覚えます。
ふりがなプログラミング｜文系エンジニア向け
－ 11 －


# Page. 12

![Page Image](https://bcdn.docswell.com/page/VJNYZ54478.jpg)

第7課
条件に合うものだけ取り出す（filter）
コード
javascript
const open = state.risks.filter(r => riskScore(r.l, r.i) >= 12 && !r.done);
ふりがな
コード
ふりがな
意味
.filter(...)
じょうけんに あうものだけ のこす
ふるいにかける
r =>
それを うけとって
リスクを 1 件受け取る
riskScore(r.l, r.i)
てんすうを けいさんする
発生度×影響度
>= 12
12 いじょう
12 を含んで、それより大きい
&& !r.done
かつ たいさくずみでない
! は「〜でない」
読み下し
リスクの並びから、「点数が 12 以上」かつ「対策済みでない」ものだけを取り出して、「未対策の高リスク」に入
れる。
要点
● filter は「ふるい」。条件に合うものだけが残ります
● 中の式が true（はい）なら残し、false（いいえ）なら捨てる
● map が「加工」、filter が「選別」。この 2 つを覚えると、リスト操作の大半が読めます
ふりがなプログラミング｜文系エンジニア向け
－ 12 －


# Page. 13

![Page Image](https://bcdn.docswell.com/page/YE9PZYQ4J3.jpg)

第8課
1 つずつ見て、問題があれば書き留める（forEach と push）
コード
javascript
const out = [];
program.forEach((it, i) => {
if(!(Number(it.mins) > 0)){
out.push({level:"error", msg:(i+1)+"行目の所要時間が 0 分です。"});
}
});
return out;
ふりがな
コード
ふりがな
意味
const out = []
からのならびを ようい
結果を貯めるカゴ
.forEach((it, i) => ...)
ひとつずつ みる
it は中身、i は何番目か（0 から数え
る）
!(... > 0)
0 よりおおきく ない
0 以下、または数でない
out.push({...})
カゴに いれる
末尾に追加する
(i+1)+"行目"
ばんごうに 1 をたして「ぎょうめ」をく
っつける
人間は 1 から数えるため
読み下し
空のカゴを用意する。進行表を 1 件ずつ見ていく。 もし所要時間が「0 より大きい」のでなければ、「◯行目の所
要時間が 0 分です」という警告をカゴに入れる。 最後に、カゴごと返す。
要点
● 「カゴを用意 → 1 つずつ見て入れる → 最後に返す」は、集計の基本形です
● i は 0 から数えます。画面に出すときは i+1 にします。ここは間違えやすいところ
● !(x > 0) は「0 以下」だけでなく、数でない場合も含みます。Number("あ") は NaN（数ではない）
になり、NaN > 0 は「いいえ」なので、ここで捕まります
ふりがなプログラミング｜文系エンジニア向け
－ 13 －


# Page. 14

![Page Image](https://bcdn.docswell.com/page/GE8D16GVED.jpg)

第9課
画面に出すときは、必ず「無害化」する
コード
javascript
function escapeHtml(s){
return String(s == null ? "" : s).replace(/[&<>"']/g, c => ({
"&":"&", "<":"<", ">":">", '"':""", "'":"'"
}[c]));
}
ふりがな
コード
ふりがな
意味
s == null ? "" : s
からっぽなら くうもじ、でなければ そ
のまま
空対策
.replace(A, B)
A を B に おきかえる
置換する
/[&<>"']/g
この 5 つのきごう ぜんぶ
g は「全部」の合図
c => ({...}[c])
みつけた 1 もじを ひょうで ひきかえる
対応表から変換後の文字を取る
読み下し
「無害化する」係を作る。 受け取ったものが空っぽなら空文字に、そうでなければそのまま文字にする。 その中の
& < > " ' を全部見つけて、対応表にしたがって安全な書き方に置き換えて返す。
なぜ必要か
参加者の名前に、こう入力されたとします。
<img src=x onerror="alert('やられた')">
無害化しないまま画面に出すと、入力された命令がそのまま実行されます。これが XSS（クロスサイトスクリ
プティング）です。
無害化すると <img src=x ...> というただの文字になり、画面には「<img src=x ...>」と文字通り
表示されます。
要点
● 利用者が入力したものを画面に出すときは、必ず無害化する
● このツールでは 143 箇所で呼んでいます。「毎回書く」のが正解です
● 「うちの社内ツールだから大丈夫」は通用しません。誤って貼り付けた文字列でも画面が壊れます
ふりがなプログラミング｜文系エンジニア向け
－ 14 －


# Page. 15

![Page Image](https://bcdn.docswell.com/page/LELMQ9GR7R.jpg)

第 10 課
ボタンが押されたら動く（イベント）
コード
javascript
$("#btnAddRow").addEventListener("click", () => {
state.program.push({mins:15, title:"", owner:"", type:"本編"});
renderProgram();
});
ふりがな
コード
ふりがな
意味
$("#btnAddRow")
「ぎょうをついか」ボタンを さがす
# は名札（id）で探す合図
.addEventListener("click", ...)
クリックされたときの しごとを とうろ
くする
予約しておく
() => { ... }
よばれたら これをする
中身が実際の仕事
state.program.push({...})
じょうたいの しんこうひょうに 1 ぎょう
ついかする
データを足す
renderProgram()
がめんを かきなおす
描き直しの係を呼ぶ
読み下し
「行を追加」ボタンを探して、クリックされたときの仕事を登録する。 仕事の中身は、進行表のデータに 1 行足し
て、画面を描き直すこと。
要点
● 登録した時点では、まだ何も起きません。「押されたら、これをしてね」と予約するだけです
● 順番が大事です。先にデータを変え、あとで画面を描き直す
● 逆にすると、画面とデータがずれます。データが正、画面はその写し
つまずきポイント
「画面の値を書き換えたのに、保存すると元に戻る」という不具合は、たいてい画面だけ変えてデータを変え
ていないときに起きます。
javascript
// これは画面だけが変わる（データは変わっていない）
input.value = "13:00";
// 正しくは、データを変えてから描き直す
state.req.start = "13:00";
renderProgram();
ふりがなプログラミング｜文系エンジニア向け
－ 15 －


# Page. 16

![Page Image](https://bcdn.docswell.com/page/4JMY1ZQPJW.jpg)

第 11 課
24 時をまたぐ計算（余りの折り返し）
コード
javascript
const v = ((Math.round(min) % 1440) + 1440) % 1440;
ふりがな
コード
ふりがな
意味
Math.round(min)
しょうすうを しせいごにゅうする
端数を丸める
% 1440
1440 で わったあまり
1 日＝1440 分
+ 1440
1440 をたす
マイナス対策
% 1440
もういちど あまりをとる
0〜1439 に収める
読み下し
分を四捨五入して、1440 で割った余りを出す。それに 1440 を足して、もう一度 1440 で割った余りを取る。
なぜ 2 回割るのか
%（余り）は、マイナスに対してマイナスを返します。
javascript
-10 % 1440;
// -10（マイナスのまま）
(-10 % 1440) + 1440;
// 1430
((-10 % 1440) + 1440) % 1440;
// 1430 ← 23:50
1 回目でマイナスのまま返ってくるので、1440 を足して正の数に直し、足しすぎた分をもう一度余りで落と
すわけです。
要点
● これは時計・角度・曜日でそのまま使える型です。丸暗記して構いません
● 1500（25 時）は 60（1 時）に、-10 は 1430（23:50）に折り返されます
● 「日をまたぐ」処理は、必ずどこかでバグります。先に折り返しの仕組みを 1 箇所に作っておくのが
安全です
ふりがなプログラミング｜文系エンジニア向け
－ 16 －


# Page. 17

![Page Image](https://bcdn.docswell.com/page/PJR9L68Y79.jpg)

第 12 課
まとめて返す（オブジェクト）
コード
javascript
return {rows, total, startMin: s0, endMin: s0 + total, endTime: fmtTime(s0 + total)};
ふりがな
コード
ふりがな
意味
{ }
なふだつきの ひとまとめ
名札をつけて束ねる
rows
ぎょうのならび
rows: rows の省略形
total
ごうけい
同じく省略形
startMin: s0
かいしを s0 とする
名札と中身を書く
読み下し
「行の並び」「合計」「開始」「終了」「終了時刻」に名札をつけて、ひとまとめにして返す。
受け取る側は、名札で取り出します。
javascript
const tt = calcTimetable(program, "13:00");
tt.total;
// 合計の分数
tt.endTime;
// "16:00"
要点
● 関数が返せるのは 1 つだけです。複数返したいときは、名札をつけて束ねます
● {rows, total} は {rows: rows, total: total} の省略形。名前が同じときだけ使えます
● 受け取る側が tt.total と書けるので、順番を覚えなくてよいのが利点です
ふりがなプログラミング｜文系エンジニア向け
－ 17 －


# Page. 18

![Page Image](https://bcdn.docswell.com/page/PEXQWM84JX.jpg)

第 13 課
総復習：この 1 つの関数を読む
ここまでの内容だけで、実際に動いている関数が読めます。
javascript
function calcTimetable(program, startStr){
const base = parseTime(startStr);
const s0 = base === null ? 0 : base;
let cur = s0, total = 0;
const rows = (program || []).map(it => {
const mins = Math.max(0, Number(it.mins) || 0);
const row = Object.assign({}, it, {mins, start: fmtTime(cur), end: fmtTime(cur + mins)});
cur += mins;
total += mins;
return row;
});
return {rows, total, endTime: fmtTime(s0 + total)};
}
読み下し
「進行表の時刻を計算する」係を作る。進行表と、開始時刻の文字を受け取る。 まず開始時刻の文字を分に直して
「ベース」に入れる。 ベースが空っぽ（読み取れなかった）なら 0 を、そうでなければベースを「開始位置」に入
れる。 「今の位置」を開始位置から始め、「合計」を 0 から始める。 進行表を 1 件ずつ加工していく。
を数にして、読めなければ 0、マイナスなら 0 にする。
のを作る。
所要時間
元の中身を写して、開始時刻と終了時刻を書き足したも
今の位置に所要時間を足す。合計にも足す。
作ったものを返す。 最後に、行の並び・合計・終了時
刻をひとまとめにして返す。
動きを追う
[{mins:30},{mins:15}] を "13:00" で計算すると：
回
今の位置（前）
所要
開始
終了
今の位置（後）
合計
1 件目
780
30
13:00
13:30
810
30
2 件目
810
15
13:30
13:45
825
45
返るのは {rows:[...], total:45, endTime:"13:45"} です。
ふりがなプログラミング｜文系エンジニア向け
－ 18 －


# Page. 19

![Page Image](https://bcdn.docswell.com/page/3EK9VGKPED.jpg)

要点のまとめ（これだけは持ち帰る）
#
要点
ひとこと
1
= は「入れる」、=== は「同じ？」
ここを混ぜると全部読めなくなる
2
const を既定にし、必要なときだけ let
変わらない箱のほうが安全
3
関数は「係」。return が返事
計算しても返さなければ伝わらない
4
if は関所。おかしい入力を先に弾く
早期リターンで後半が読みやすくなる
5
map は加工、filter は選別、forEach
返ってくるものが違う
は巡回
6
「カゴを用意 → 入れる → 返す」が集計
の基本形
push で貯める
7
番号は 0 から。人に見せるときは +1
「◯行目」でずれる原因
8
画面に出す前に必ず無害化する
社内ツールでも例外なし
9
データを変えてから画面を描き直す
逆にするとずれる
10
日をまたぐ計算は折り返しの型を使う
((x % 1440) + 1440) % 1440
11
複数の値は名札をつけて束ねて返す
受け取る側が順番を覚えなくてよい
12
「計算できる」と「正しい」は違う
25:00 は計算できるが存在しない
ふりがなプログラミング｜文系エンジニア向け
－ 19 －


# Page. 20

![Page Image](https://bcdn.docswell.com/page/L73WMNZ475.jpg)

練習問題
問1
次のコードを読み下してください。
javascript
const noOwner = list.filter(x => !String(x.owner || "").trim()).length;
<details>
<summary>答えを見る</summary>
リストから、「担当」が空っぽのものだけを取り出して、その件数を「担当なし」に入れる。
分解すると：
● x.owner || "" … 担当が空っぽなら空文字にする
● String(...) … 文字にする
● .trim() … 前後の空白を取る（空白だけの入力を空とみなすため）
● ! … それが空っぽ（＝偽）なら「はい」にひっくり返す
● .length … 残った件数
空白だけ入力された場合も「担当なし」として数えるのがポイントです。.trim() がないと、スペース 1 個で
「担当あり」になってしまいます。
</details>
問2
次のコードは何を防いでいますか。
javascript
const mins = Math.max(0, Number(it.mins) || 0);
<details>
<summary>答えを見る</summary>
3 つ防いでいます。
1. Number(it.mins) … 文字で入っていても数に直す（"30" → 30）
2. || 0 … 数にできないとき（空欄、"あ" など）は 0 にする
3. Math.max(0, ...) … マイナスが入っていたら 0 にする
利用者の入力欄は、空欄・全角・マイナス・貼り付けミスが必ず来ます。1 行で 3 つとも潰しています。
</details>
問3
なぜ次の書き方は避けるべきでしょうか。
javascript
el.innerHTML = "<td>" + row.title + "</td>";
ふりがなプログラミング｜文系エンジニア向け
－ 20 －


# Page. 21

![Page Image](https://bcdn.docswell.com/page/87DK6WR5JG.jpg)

<details>
<summary>答えを見る</summary>
row.title は利用者が入力した値です。無害化していないので、HTML タグが入力されるとそのまま解釈され
ます。
正しくは：
javascript
el.innerHTML = "<td>" + escapeHtml(row.title) + "</td>";
「自分で書いた文字は安全、利用者が入れた文字は危険」と分けて考えます。
</details>
ふりがなプログラミング｜文系エンジニア向け
－ 21 －


# Page. 22

![Page Image](https://bcdn.docswell.com/page/VJPKY9WDE8.jpg)

この先の進み方
1. 読めるようになる（この教材の範囲）
2. 写経する：この教材のコードを、見ないで書けるまで写す
3. 1 行だけ変える：警告の文言を変える、しきい値の 90 分を 60 分にする
4. 1 つ足す：新しい警告を 1 つ追加してみる
いきなり作らないでください。読める → 変えられる → 足せる → 作れるの順です。3 番目までできれば、実務
では十分に戦力になります。
うさうさ研修工房
ふりがなプログラミング｜文系エンジニア向け
－ 22 －