ふりがなプログラミング
>100 Views
October 14, 26
スライド概要
はじめまして、yukikoと申します。 IT教育支援や、DX推進が可能です。 ◆ スキル LPIC レベル2 AI / Python Splunk BI（データ可視化・分析） ◆ その他 新卒・未経験の学生向けに、エンジニア転職を応援する資料を趣味で作成しています。 もしよろしければご活用ください。
関連スライド
各ページのテキスト
ふりがなプログラミング｜文系エンジニア向け 設計と実装の解説 うさうさ研修工房 ふりがなプログラミング｜文系エンジニア向け －1－
作成日：2026-08-25（火） この教材について プログラムは「英語の暗号」に見えますが、実際には主語・述語のある日本語の文章に置き換えられます。こ の教材では、実際に動いているツール（うさうさイベント指揮所 PRO・5,300 行）のコードを題材に、記号ひ とつずつに「ふりがな」を振って、日本語の文に読み下していきます。 進め方は毎回同じ 3 ステップです。 1. コードを見る（読めなくて構いません） 2. ふりがなを振る（記号ひとつずつの読み方と意味） 3. 読み下す（日本語の文章にする） 最後に要点と、つまずきやすいところを置きます。 文系出身で IT 業界に入った方に向けています。数学の知識は使いません。「英単語の意味」と「語順」が分かれば 読めます。 ふりがなプログラミング｜文系エンジニア向け －2－
0. 読む前の約束ごと 記号の読み方（まずこれだけ） 記号 ふりがな 意味 = にいれる 右のものを左の箱に入れる。「等しい」 ではありません === とおなじ 左と右が同じかどうか調べる。こちらが 「等しい」 ; ここまで 1 つの文の終わり。日本語の「。」 () かっこ 関数を呼ぶときの合図。中身は渡すもの {} ここからここまで 処理のかたまり。日本語の「〜する。〜 する。」を束ねる [] ならび 順番のあるリスト // ひとりごと ここから右はコンピュータが読まない説 明書き = と === の違いは、最初の関門です。= は「入れる」、=== は「同じ？」。ここだけ先に覚えてください。 ふりがなプログラミング｜文系エンジニア向け －3－
第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－
第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－
計算することと、返すことは別です。係が答えを出しても、口に出さなければ相手には伝わりません。 ふりがなプログラミング｜文系エンジニア向け －6－
第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－
ふりがなプログラミング｜文系エンジニア向け －8－
第4課 「または」と「かつ」 コード javascript if(h > 23 || mi > 59) return null; if(frame !== null && tt.total > frame) { /* 警告を出す */ } ふりがな コード ふりがな 意味 || または どちらか一方でも当てはまれば && かつ 両方とも当てはまるときだけ !== とちがう 同じでない > よりおおきい 大小くらべ 読み下し もし「時が 23 より大きい」または「分が 59 より大きい」なら、空っぽを返す。 もし「枠が空っぽでない」かつ 「合計が枠より大きい」なら、警告を出す。 要点 ● ||（または）は、条件がゆるくなる。当てはまりやすい ● &&（かつ）は、条件がきつくなる。両方そろわないと通らない ● 2 つ目の例で && を使っているのは、「枠が決まっていないのに比べても意味がない」からです。順 番も大事で、先に「空っぽでない」を確認しています ふりがなプログラミング｜文系エンジニア向け －9－
第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 －
第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 －
第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 －
第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 －
第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 －
第 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 －
第 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 －
第 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 －
第 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 －
要点のまとめ（これだけは持ち帰る） # 要点 ひとこと 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 －
練習問題
問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 －
<details> <summary>答えを見る</summary> row.title は利用者が入力した値です。無害化していないので、HTML タグが入力されるとそのまま解釈され ます。 正しくは： javascript el.innerHTML = "<td>" + escapeHtml(row.title) + "</td>"; 「自分で書いた文字は安全、利用者が入れた文字は危険」と分けて考えます。 </details> ふりがなプログラミング｜文系エンジニア向け － 21 －
この先の進み方 1. 読めるようになる（この教材の範囲） 2. 写経する：この教材のコードを、見ないで書けるまで写す 3. 1 行だけ変える：警告の文言を変える、しきい値の 90 分を 60 分にする 4. 1 つ足す：新しい警告を 1 つ追加してみる いきなり作らないでください。読める → 変えられる → 足せる → 作れるの順です。3 番目までできれば、実務 では十分に戦力になります。 うさうさ研修工房 ふりがなプログラミング｜文系エンジニア向け － 22 －