Amazon：javascript
https://amzn.to/3BymN1q
プログラミングって難しいです。
部分、部分は理解していても、
何か難しい。
世代で感じ方とかは違うと思うけど。
生まれた時からパソコンが家にある家庭
成人を過ぎてからパソコンが家にある家庭
会社を定年退職して趣味でパソコンを買った家庭など
プログラミングって、何をしてるの？。
Udemy(ユーデミー)、おすすめ。
世界最大級のオンライン学習プラットフォーム
米国シリコンバレー発祥、世界最大級のオンライン学習
プログラミングからヨガ、写真に至るまで、あらゆるコースがあります。
Udemyでは、自分に合ったコースなど、検索で探せるので、おすすめです。
スラスラ読める JavaScriptふりがなプログラミング 増補改訂版 (ふりがなプログラミングシリーズ) 単行本（ソフトカバー） – 2022/8/23
リブロワークス (著), 及川卓也 (監修)
プログラムが「読めない」を解決する入門書
スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ) 単行本（ソフトカバー） – 2018/6/22
リブロワークス (著), 及川卓也 (監修)
ふりがなプログラミングシリーズ
この本は、
「プログラムの読み方をすべて載せる（ふりがなをふる）」という手法で究極のやさしさを目指した、まったく新しいJavaScriptの入門書。
プログラミングをしていて、わからないから挫折する。
また、途中でしなくなる。
登場するコードに「ふりがな」がふってあり、
さらに「読み下し文」が追加され、プログラムが理解できるかも。
JavaScriptの基本を身につけたい人
過去にプログラミングの入門書で挫折してしまった人
Web制作者やプログラマー、エンジニアを目指す人
仕事でJavaScriptを活用してみたい人
など
目次
スラスラ読める JavaScript ふりがなプログラミング 読んでみた。
Chapter 1 JavaScript最初の一歩
Chapter 2 条件によって分かれる文を学ぼう
Chapter 3 繰り返し文を学ぼう
Chapter 4 関数を作ろう
Chapter 5 Webページに組み込もう
スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ) 単行本（ソフトカバー） – 2018/6/22
リブロワークス (著), 及川卓也 (監修)
スラスラわかるJavaScript 新版 単行本 – 2022/7/13
桜庭 洋之 (著), 望月 幸太郎 (著)
プログラミングの基礎とJavaScriptの基本文法を
やさしく解説した入門書の定番が、装い新たに登場です。
スラスラ読める JavaScript ふりがなプログラミング 読んでみた。
スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ) 単行本（ソフトカバー） – 2018/6/22
リブロワークス (著), 及川卓也 (監修)
この本が発売されたのは
2018年の6月、未だに売れてます。
自分は発売日には読んでみたけど。
コードなども更新されてます。
読み下し文があるので、
プログラムの1行1行が何を意味していて、どう動くのかが理解できると思います。
（たぶん）
Chapterは1から5まであり
1日、1Chapterづつしていけば5日で読み終わるかも？。
もくじ
Chapter 1 JavaScript最初の一歩
Chapter 2 条件によって分かれる文を学ぼう
Chapter 3 繰り返し文を学ぼう
Chapter 4 関数を作ろう
Chapter 5 Webページに組み込もう
復習問題もあります。
カラー印刷なので、読みやすいです。
自分的には、本内に、半角スペースなども載っていれば、読みやすいかも？。
また、サンプルで使う教材（コードなど）はダウンロード出来ますが、
「ふりがな」や「読み下し文」は載ってないです。
コメントとかであれば、コードとかもかなり見やすいかも？。
本内のコードは行番号も載っているのでわかりやすいです。
本書のサンプルコードは2019/9/3更新されています。
サンプルコードには、コメントで、「ひらがな」ルビとか振られていないです。
本では、プログラムの行なども書いてあるので、わかりやすいと思います。
コードが読めればプログラミングが楽しくなる？。
最初、プログラムを「ふりがな」で解説するという話を聞いたときはには、少し奇異に感じたものでした。
確かな力が身につくJavaScript「超」入門 第2版 単行本 – 2019/9/21
狩野 祐東 (著)
JavaScriptをこれから始める人にも、前に挫折したことのある人にも。
手を動かしてサンプルをひとつずつ作っていくことで、知識だけでなく、
現場で活きる、応用・実践につながる基礎力が「この一冊で」身につきます
NO・01
JavaScriptって、どんなもの？
JavaScriptの解説あり
どこでも動くアプリを作りたいならJavaScript
JavaScript（ジャバスクリプト）とは、プログラミング言語のひとつである。Javaと名前が似ているが、全く異なるプログラミング言語。
https://ja.wikipedia.org/wiki/JavaScript
JavaScript – MDN – Mozilla
https://developer.mozilla.org/ja/docs/Web/JavaScript
JavaScriptは覚えやすい？
JavaScript自体も変化が早い傾向にあります。
JavaScriptの正式な規格名をECMAScript（エクマスクリプト）といい、
2009年に公開されたES5バージョン
ES2015（ES6）という新バージョンへの移行が進みつつあります。
現在支流になりつつあるJavaScriptのバージョンはES2015（ES6）
JavaScriptの世界を広げるNode.js
Node.js
https://nodejs.org/ja/
Node.js は、イベント化された入出力を扱うUnix系プラットフォーム上のサーバーサイドJavaScript環境である。
https://ja.wikipedia.org/wiki/Node.js
プログラムに「ふりがな」が振ってあると簡単そうに見えます。
本書では、プログラムの上に「意味」を表す日本語の「ふりがな」を入れてました。
例えば「=」の上には、必ず「入れろ」という「ふりがな」があります。
Chapter1
本書の読み方
Chapter2
数値が入力されたら計算する
例
変数answer
answer = 10;
「ふりがな」を振っただけでは意味が通じる文にはなりません。
そこで、足りない部分には読み下し文も追加
読み下し文
数値10を変数answerに入れろ。
プログラムを入力して、何が起きるのかを目にし、自分の体験としましょう。
スポーツでも、本を読むだけじゃ上達しないのと同じです。
実際にやってみないと。
NO・03
JavaScriptを書くための準備
WebブラウザはChrome
（Webブラウザごとに微妙な違いがあります。）
Chrome（無料）
Webでは「UTF-8」という文字コード（文字を表す数値）が標準とされています。
プログラムとソースコード
NO・04
最初のプログラムを入力する
Chromeのコンソールでプログラムを動くかす
「’」で囲まれた部分は、プログラミングでは「文字列」と呼びます。
本書では、「’」シングルクォートで統一します。
シングルクォート
' '
「’」の他に「”」ダブルクオートも使うことができます。
ダブルクオート
" "
コンソール 表示しろ 文字列「ハロー！」
console.log('ハロー！');
読み下し文
文字列「ハロー！」をコンソールに表示しろ。
プログラムは、コンピュータに対する命令の集まり
Chapter4までは、Atomでプログラムを書いてから
Chromeのデベロッパーツールを使い
コンソールに、プログラムをコピー＆ペーストして実行します。
プログラムは半角英数字で入力
NO・05
演算子を使って計算する
足し算と引き算
JavaScriptでは「式」を使って四則計算ができる
演算子とは「+」や「-」などの記号です
掛け算と割り算
掛け算は「*」アスタリスク、割り算は「/」スラッシュ
整数と実数
プログラムで扱う数値には、整数と実数の2種類があります。
整数は小数点以下のない「-900」「0」「4000」のような数字
実数は小数点を含む数値で、ピリオド「.」を入れて「0.5」など
NO・06
長い数式を入力する
演算子の優先順位
同じ優先順位の演算子を組み合わせた式
優先順位が異なる演算子を組み合わせた式
カッコを使って計算順を変える
カッコの中にカッコが入れ子になった式
内側のカッコほど優先すると覚えよう
負の数を表す「-」
NO・07
変数を使って計算をする
変数とは？
数値や文字列などのデータ類をまとめて「値」と呼びます。
同じ値を何度も使う場合、プログラムに値を直接入力していると値を修正しなければいけなくなったときに手間がかかります。
事前に繰り返し使うことがわかっている値は「変数」に入れておきます。
「変数」は何らかの値を記憶できる箱のようなものと思ってください。
JavaScriptの「let」
letは変数を新たに作れという意味です。
変数を作成して、その値を代入する
let text = 'ハロー！';
console.log(text);
なお、作成済みの変数に別の値を入れるときは「let」は不要です
変数を使うメリットは？
変数kakakuに100を入れて計算
変数kakakuに150を入れて計算
計算の結構が変わります。変数を使えば、プログラムを書き替えずに違う結果を出せます。
NO・08
変数の命令ルールとスペースの入れどころ
変数の命令ルールを覚えよう
①半角のアルファベット、アンダースコア、数字を組み合わせて付ける
②数字のみ、先頭が数字の名前は禁止
③予約語と同じ名前は禁止
インタープリタがプログラムを実行する
インタープリタ（interpreter）は通訳者という意味
JavaScriptのインタープリタはWebブラウザの中に入っています。
インタプリタ・解釈系（英: interpreter）とは、プログラミング言語で書かれたソースコードないし中間表現を逐次解釈しながら実行（英語版）するプログラムのこと。「インタープリタ 」「インタープリター」などと表記することもある。
https://ja.wikipedia.org/wiki/インタプリタ
スペースの入れどころ
JavaScriptのプログラムには半角スペースで絶対に区切らないといけない部分があります。
JavaScriptの変数の作り方は複数ある
予約語「なし」かなり古い方法
予約語「var」ES5で支流の書き方
予約語「let」ES2015で追加された
予約語「const」ES2015で追加されたもので、1度しか代入できません。値を書き替えてはいけないことを明示したいときに使います。
NO・09
データの入力を受け付ける
promptメソッドとは？
promptはユーザーに対してデータの「入力」を求めるメソッド
promptメソッドは、ユーザーがキーボードから何らかを入力したら、その結果の文字列を返してくる。
メソッドが返す値を「戻り値」といいます。
promptメソッドの「戻り値」はあとで使うときのために変数に入れておきます。
入力した内容を、そのまま表示するpromptメソッド
ユーザーが入力したデータに文字列を使追加する
実際のWebページでpromptメソッドは使わない
プログラムの動作確認のために、
promptメソッドや、console.logメソッドは使うことはあります。
NO・10
変数と文字列を変換する
データの「型」とは？
データの種類のことを「型」Typeと呼びます。
promptメソッド戻り値は、内容が数字であっても常にstring型
文字列のデータ型を数値のデータ型に変換する
parseInt関数
parseInt関数は、文字列を受け取ったら整数に変換して返します。
NO・11
メソッドとオブジェクト
これまで、console.logやpromptは、いずれも「メソッド」と呼ばれるもので、コンピュータに様々な仕事をさせます。
メソッド 引数
console.log(表示したいもの);
引数と戻り値
JavaScriptでは「いろいろ」なことができる
この「いろいろ」を受け持つのがメソッドです
複数の引数を渡す
カッコの中に「,」カンマで区切って書きます
メソッドの前にあるものは何？
NO・12
エラーメッセージを読み解こう①
タイプエラー（型Type）のエラー
リファレンスエラー
シンタックスエラー
など解説
diffツールでコードの間違いをチェックする
Diffchecker
https://www.diffchecker.com
NO・13
復習ドリル
プログラムを自分で読み下してみよう
問題1、計算のサンプル
（ヒントchap1-6-3js）
問題2、変数を利用した計算のサンプル
（ヒントchap1-7-2js）
NO・01
条件分岐ってどんなもの？
フローチャート（流れ図）
true（真）とfalse（偽）
NO・02
入力されたものが数値か、どうか調べる
文字列が数値に変換可能かチェックするisNaN関数
isNaN関数の書き方
isNaN（値）
isNaN関数で判定した結果を表示
NO・03
数値が入力されたら計算する
if文の書き方を覚えよう
if文で文字列が数字だったらメッセージを表示する
if文で文字列が数値のときは計算する
isNaNの前に「!」ビックリマークを付けます。
これはノット演算子といい、右にあるもののtrueとfalseを逆転します。
if(! isNaN)
!演算子を付けると、数値に変換不可「ではない」という意味に変わります。
ブロックとインデント
ブロックは複数の文をまとめて1つの文の一部にする働きがあります。
NO・04
数値が入力されていないときに警告する
else節の書き方
falseのときにも何かをしたいときは、if文のブロックのあとにelse節を追加します。
NO・05
比較演算子で大小を判定する
比較演算子の使い方
比較演算子を使った式をconsole.logメソッドの引数にして、式の結果trueを表示
比較演算子を使った式をconsole.logメソッドの引数にして、式の結果falseを表示
if文と比較する式を組み合わせる
promptメソッドでユーザーに年齢を入力してもらい
その結果をparselnt関数で整数に変換します。
その数値が20未満だったら「未成年」と表示します。
NO・06
3段階以上に分岐させる
else if節の書き方
「未成年」「成人」「高齢者」の3つで判定
NO・07
条件分岐の中に条件分岐を書く
2つのif文を組み合わせる
数値を入力したときの結果は変わりませんが、数値以外を入力したときはエラーを出さずにプログラムが終了します。
NO・08
複数の比較式を組み合わせる
論理演算子の書き方
論理演算子は真偽値（trueかfalse）を受けとって、結果を返す演算子で
&&（アンド）、||（オア）、！（ノット）の3種類があります。
6歳から15歳だけを判定するプログラム
6から15歳という範囲は「6以上」と「15以下」という2つの条件を組み合わせたものですから、
&&演算子を使えば1つのif文で判定できます。
幼児と高齢者だけを対象にする
||演算子を使う
演算子は左右のどちらか一方でもtrueのときにtrueを返し「または」と読み下します。
!演算子を使ってfalseのときだけ実行する
直後（右側）にあるtrueとfalseを逆転します。
真偽値を返す関数やメソッドの戻り値を逆転させる場合に使います。
NO・09
年齢層を分析するプログラムを作ってみよう
プログラムを書き始める前に、プログラムの仕様を整理する
①ユーザーに年齢を入力させる
②入力した文字列が数値に変換不可のときだけ年齢層の判定を行う
③年齢に応じて「未成年」「成人」「高齢者」の3つの結果を表示する
④未成年のうち、義務教育期間の場合は「未成年」「（義務教育）」と表示する
「数値判定」のブロック内に「3段階の判定」を書くプログラム
ユーザーに年齢を入力させるpromptメソッドを書き、次に数値に変換不可を判定するif文とisNaN関数を書きます。そして、if文のブロック内に年齢層を3段階で判定するif～else if～elseを書きます。
次に
義務教育期間の判定を追加するプログラムを書く
未成年だったときに義務教育期間かどうかを判定する部分を追加する
プログラムをよりシンプルにするための工夫
改良案
NO・10
エラーメッセージを読み解こう②
カッコが対応していないときのシンタックスエラー
else ifの半角空きを忘れた場合
NO・11
復習ドリル
問題1、6歳未満なら「幼児」と」表示するプログラム
（chap2-5-3js参考）
問題2、義務教育の対象かどうかをチェックするプログラム
（chap2-11-2js参考）
NO・01
繰り返し文って、どんなもの？
繰り返しと配列
NO・02
条件式を使って繰り返す
繰り返し文は、何種類かあるけど、シンプルなwhile文からやってみよう
while文の書き方
条件を満たす間繰り返しをする文
「50000円の資金から5080円ずつ引いていった経過」を残高がゼロになるまで繰り返すプログラム
プログラムを実行すると、10回目で繰り返しが終了します。
NO・03
計算を10回繰り返しす
for文を使って「10回繰り返す文」の書き方
for文は回数が決まった繰り返しに向いています。
同じメッセージを10回表示する
メッセージの中に回数を入れる
繰り返したい文の中でカウンター変数を使う
NO・04
10～1への逆順で繰り返す
繰り返しからの脱出とスキップ
break文とcontinue文
NO・05
繰り返し文を2つの組み合わせ九九の表を作る
九九の計算をしてみよう
for文のブロック内にfor文を書くと多重ループになります。
九九の計算の結果が表示される
九九らしく表示する
1×1=1
NO・06
配列に複数のデータを記憶する
配列の書き方
配列を作って利用する
配列を作って「月、火、水、木、金」の5つの文字列を記憶し、その中から1つ表示する
配列の要素を書き替える
配列はArray型のオブジェクトです。
NO・07
配列の内容を繰り返し文を使って表示する
配列とfor文の組み合わせた使い方
for～of文で配列を利用する
for～of文は配列から1要素ずつ順番に取り出して繰り返しできる文です
for文のカッコの中に「let変数of配列」と書きます。
for文を使ってインデックスを指定する
NO・08
総当たり戦の表を作ろうプログラム
内側のfor文のブロック内にif文を書き、チーム名が等しくないときだけ表示する
同じ対戦組み合わせを省くには？
NO・09
エラーメッセージを読み解こう③
繰り返す文の条件を間違えると終わらなくなる
無限ループ
無限ループを止める
Chromeで「その他のツール」から「タスクマネージャー」をクリック
閉じたいタブをクリック、「プロセス終了」をクリック
終了しない場合は、Chromeを強制終了
または、パソコンを強制終了
NO・10
復習ドリル
問題1、東西南北を表示するプログラムを書く
（ヒントchap3-7-1js）
問題2、曜日を逆順に表示するプログラムを書く
（ヒントchap3-7-2jsにchap3-4-1jsを組み合わせる）
NO・01
関数を作る目的は何？
関数は複数の文をまとめて名前を付けたもの
関数を作ることを「関数定義」といいます。
関数を自分で作るメリットは？
①プログラムの構造を理解しやすくなる
②関数は何度でも呼び出せる
NO・02
関数の書き方を覚えよう
関数を使って、メールの定型文を自動で出力するプログラムを書いてみよう
アロー関数式でオリジナルの関数を作る
定型メールの文面を作る関数を作る
メールの定型文を自動出力する関数を作る
あれ？実行しても何も起きませんよ。
まだ関数を作っただけだからね。呼び出さないと何も実行されないよ。
作成した関数を呼び出す
引数を受け取る関数を作る
function文とfunction式
NO・03
関数の中で変数を使う
定型文を表示するのに何行もconsole.logメソッドを書くのは面倒ですね。
「テンプレート文字列」を使うとconsol.logメソッドを多く書かなくて済むからプログラムがスッキリするよ。
テンプレート文字列で長文の文字列を作る
メール定型文の受信者に任意の文字列を差し込む
ローカル関数
ローカル関数は関数のブロック内でのみ有効
テンプレート文字列を使わない場合
NO・04
戻り値を返す関数を作る
経費の7%を手数料として乗せる場合があるんですが、その計算もできますか？
やってみよう。
関数の実行結果の値を返すreturn文
元の値に7%を上乗せする関数を定義する
NO・05
オブジェクトを使って複数のデータをまとめる
これまでに「宛先の名前」「請求額」「手数料」の3種類のデータが出てきたけど、これはセットにして記憶したほうがいいね。
データをまとめるのは配列を使えばいいんですか？
違う種類のデータをまとめるときは「オブジェクト」が便利だよ。
オブジェクトの書き方と使い方
JavaScriptでは、オブジェクトはいろいろな使い方ができます。
一人分のデータをオブジェクトに入れる
複数人のデータを配列にまとめる
NO・06
関数を組み合わせて使ってみよう
複数の関数やデータを組み合わせて使うには
コメント文について
//（スラッシュ2つ）
コメント文はプログラムの動作には影響しない文
データの数だけ関数を呼び出す
NO・07
エラーメッセージを読み解こう④
エラーが発生しているプログラム
関数名を間違えている
NO・08
復習ドリル
問題1、createMail関数の文面を変更する
問題2、請求額がマイナスのときは0を返す
return文は関数から脱出する
NO・01
JavaScriptでWebページを操作するには？
WebページとHTML
オブジェクトを利用してHTMLを操作する
NO・02
HTMLを書いてみよう
HTMLタグの書き方
HTMLファイルを作成する
HTMLの基本形を作成
NO・03
Webページの文字を変更する
HTMLの要素を選ぶ
innerTextで要素の中のテキストにアクセスする
Atomで新規ファイルを作成
フォルダ内に保存
JavaScriptファイルにプログラムを書く
エラーはコンソールに表示される
など解説
NO・04
入力ボックスからデータを受け取る
input要素とvalueプロパティ
ユーザーに何かを入力させるための部品を表示したいときは、input要素を配置します。
入力ボックスに入力した値を表示する
JavaScriptのプログラムはWebブラウザに読み込まれた瞬間に実行されます。
ユーザーの操作に反応するイベント
引数に指定する無名関数
イベントリスナーを設定する
NO・05
テキスト置換マシンを作る
テキストエリアに入力した文章（入力されている）の一部を検索置換できるプログラムです。
本では、テキスト置換マシンの写真が小さいので、見にくいです。
テキスト置換マシンで、入力する文字は
「。」と「〜♪」ですが。
自分は「。」が全然見えなかった。
説明で、「。」を入力するとかあると理解がしやすいかも？。
人によっては、写真内の文字が見えないです。
イメージかもしれないけど。
テキスト置換マシンの作成のプログラム
HTMLの作成し、コーディングする。
JavaScriptファイルの作成
フォルダの作成
JavaScriptにプログラムを書いていく
文字列を置換するプログラムを書く
テキスト置換マシンの完成
テキスト置換マシンが動くかなどの確認するなど
NO・06
エラーメッセージを読み解こう⑤
querySelectorメソッドが要素を見つけられなかった場合
エラーは起きないが問題のあるプログラム
NO・07
MDN web docsの読み方
MDN Web Docs – Mozilla
https://developer.mozilla.org/ja/
Web APIについて調べる
オブジェクトのプロパティとメソッドを調べる
探し方にについて解説
スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ) 単行本（ソフトカバー） – 2018/6/22
リブロワークス (著), 及川卓也 (監修)
