【備忘録】「スラスラ読める JavaScript ふりがなプログラミング」を読む

予約語	内容
なし	かなり古い。意図しない動作になることがあるため非推奨。
`var`	ES5で主流。多く使われている。
`let`	ES2015で追加。`var`と比較すると制限がある代わりに副作用が少ない。
`const`	ES2015で追加。定数。

ES○○って何?

www.tohoho-web.com

JavaScriptは自由度の高い言語のため、標準化がされた。標準化バージョンがES○○と称されている。
基本ルールは設定したからあとはご自由に、といった感じ。

2章条件文

概要

プログラミング界隈ではおなじみifまわり。
例として挙げられている数値判定メソッドがisNaNなのだが、標準でよく使うのがNot a Numberで否定形なのがちょっともやもやする。
Number.isInteger()はあるみたいだけれども。

比較演算子

JavaScriptにそこまで詳しくない私でも少し知っている===等の比較演算子の話。
JavaScriptは比較時に型を自動変換するため、厳密な同値比較として===と!==が存在する。

式	結果
`123 == 123`	`true`
`123 == '123'`	`true`
`123 === 123`	`true`
`123 === '123'`	`false`

慣れないうちは普通にミスしそうで怖い。

else if

言語によってelse if/elsif/elif等地味に書き方が変わって気を付けなければいけない構文。 JavaScriptではelse ifと書く。

論理演算子

かつ/またはは &&/||で表す。よくあるやつ。

3章繰り返し文

概要

おなじみループ文。それと一緒に配列の解説もされている。 JavaScriptでも代入演算子で計算ができる。hoge += 1みたいな。

JavaScriptでのループはwhileやfor、do...whileといった割とよく見る予約語で表す。書き方もざっくり同じだが、for..inだけ注意が必要。こちらはキーを回すのだが、多分使わなくてよい。
Javaでいう拡張for文を書きたい場合はfor...ofで書ける。

調べてみたらStreams APIも使えそう。さてはJavaScriptってすごいな?

配列

配列は大かっこ[]で表す。インデックスが0から始まるのも大抵の言語と同じ。
あると便利なpop()やshift()もバッチリ完備。便利だ…。

総当たり戦の順列組み合わせがshift()を活用していて勉強になる。Rubyではcombinationなので楽を覚えるとこういうところの実装力が落ちる。あえて車輪の再発明をするのも大事。

無限ループに気を付ける

ターミナルで動かす言語であれば無限ループが発生してもCtrl + c等でプロセスを強制終了できるが、ブラウザ上でうっかり無限ループを発生させた場合はブラウザの強制終了が必要になるので要注意。場合によってはPCがかたまる。

4章関数を作る

条件判定とループでプログラミング自体は可能だが、やはり関数は必要。

アロー関数式

ES2015から可能になった関数定義方法。よく見かけるけれどあまり理解できていなかったのでここでしっかり覚えておく。
例を見る限り関数はキャメルケースっぽい。

let hello = () => {
    cosole.log('hello');
    console.log('world');
}

変数の定義が関数とか、そんな感じ。hello()‘で呼び出すとhelloとworld`が2行に分けて表示される。

let greet = (name) => {
    console.log('Hi, ' + name + '!!');
}

引数がある場合はかっこの中に変数名を入れる。

変数展開

IEではサポートされていないが、バッククオート(`)¹で文字列を囲むことで変数展開が可能。ダブルクオートやシングルクオートでは展開されない。

バッククオートで囲む文字列はテンプレート文字列と呼ばれていて、複数行の起債が可能。ヒアドキュメントと理解した。

let name = 'Alice';

'Hi, ' + name; // Hi, Alice
`Hi, ${name}`; // Hi, Alice;
'Hi, ${name}'; // Hi, ${name}

JavaScriptで文字列結合の速度ってどんなもんなのだろうか、ということでググる。

qiita.com

そこまで大きな差異はなさそうなのであんまり気にしなくてよさそうではある。

IEはサポート終了してるしもうバッククオートを使っていっても問題ないんじゃないかな…。

`function`での関数定義

ES5以前はアロー関数定義が存在しないため、functionを使って関数を定義する。

function greet(name) {
    console.log('Hi, ' + name + '!!');
}

今後は使わなくなっていくと思われる。

オブジェクト

DirectoryやHash、あるいはクラス変数的な…?
let data = { name: 'hoge', bill: 100, isFuga: true};のように定義する。キーはプロパティと呼ばれ、data['name']でもdata.nameでも参照できる。

オブジェクトは配列の中に入れ込むことも可能。引数に渡すことももちろん可能。

5章 Webページに組み込む

概要

ここまではJavaScript自体の仕様についての解説。ここからは実際にWebベージを動かすにはどうするのよ、という解説となる。

Webページに表示されているHTMLの各要素はElementオブジェクトと呼ばれ、これをJavaScriptで操作することになる。
オブジェクトを使ってHTMLを操作する仕組みはDOM(Document Object Model)と呼ばれている。
DOMを利用してクリックやドラッグアンドドロップなどでWebページの見た目を変えられるようになる、といったところ。

HTMLを用意する

VSCodeでhtmlと入力してhtml: 5を選択するとひな型を作ってくれる。すごい。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>さんぷる</h1>
  <input type="text">
  <button>実行</button>
  <p>結果表示</p>
  <script src="js/sample.js"></script>
</body>
</html>

langをjaに変更しつつbodyを編集した。

シンプルなサンプル(大爆笑ギャグ)

HTMLの要素を取得する

document.querySelector('取得したい要素名')で最初に見つかった要素を取得できる。 getElement(s)By○○の○○を要素名の書き方で区別する版、みたいな感じだろうか。

programmer-life.work

この記事が詳しい。

sample.jsを編集する。

let input = document.querySelector('input');
let text = document.querySelector('p');
let button = document.querySelector('button');

button.addEventListener('click', () => {
  text.innerText = input.value;
});

ボタンにクリック時イベントを追加
無名関数でテキストをインプット内容に書き換え

を行っている。

やってみた結果。

テキスト置換マシンをつくる

HTMLに置換元と置換先を入力してボタンを押すと元の文字列を置換した文章が表示されるページを作る。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <textarea cols="60" rows="5">全地球100億人のロリカッケーみなさんコンバトラー!どんなピンチも「まあ良い」の一言ですかさず解決!規制法律ドンとこい、あなたの心に住まいを構える永遠の小学5年生。そうです、私が八九寺真宵ちゃんでーす!!</textarea>
  <input type="text" id="findtxt">
  <input type="text" id="reptxt">
  <button>置換</button>
  <p>結果表示</p>
  <script src="js/transrate.js"></script>
</body>
</html>

textareaは好きな文言でいいよとのことだったのでうろ覚えの長台詞を入れておいた。

JavaScript

let textarea = document.querySelector('textarea');
let findinput = document.querySelector('#findtxt');
let repinput = document.querySelector('#reptxt');
let btn = document.querySelector('button');
let elem = document.querySelector('p');

btn.addEventListener('click', () => {
  let pattern = new RegExp(findinput.value, 'g');
  let target = textarea.value;
  elem.innerText = target.replace(pattern, repinput.value);
})

replaceは文字列を渡すと最初にヒットしたもののみ置換するため、正規表現RegExpオブジェクトをg(該当全部)で宣言して置換する。

聞かれても困る。

これで一通りの入門は完了となる。

MDN web docs

developer.mozilla.org

フロントエンジニア御用達の開発者向け情報サイト。信頼性が高い。

qiita.com

目次を作ってくれている方がいる。多分神様なのだろう。

おわりに

JavaScriptの入門から、実際にHTMLの表示を変えるところまでが簡潔かつ丁寧に記載された良書であった。

www.jschallenger.com

ざっくりとした入り口には立てた気がしているのでちょっとやってみることに。なんもわからん…。

ではまた。

余談だがバッククオートをソースコードで表すときはそれより多い数のバッククオートで囲むらしい。`` ` `` みたいな。↩

うぃろぅ.log

140字で綴りきれない日々の徒然備忘録

【備忘録】「スラスラ読める JavaScript ふりがなプログラミング」を読む

今日の本

構成

1章 JavaScript最初の一歩

概要

ES○○って何?

2章条件文

概要

比較演算子

else if

論理演算子

3章繰り返し文

概要

配列

無限ループに気を付ける

4章関数を作る

アロー関数式

変数展開

`function`での関数定義

オブジェクト

5章 Webページに組み込む

概要

HTMLを用意する

HTMLの要素を取得する

テキスト置換マシンをつくる

MDN web docs

おわりに

今日の本

構成

1章 JavaScript最初の一歩

概要

ES○○って何?

2章 条件文

概要

比較演算子

else if

論理演算子

3章 繰り返し文

概要

配列

無限ループに気を付ける

4章 関数を作る

アロー関数式

変数展開

functionでの関数定義

オブジェクト

5章 Webページに組み込む

概要

HTMLを用意する

HTMLの要素を取得する

テキスト置換マシンをつくる

MDN web docs

おわりに

2章条件文

3章繰り返し文

4章関数を作る

`function`での関数定義