うぃろぅ.log

うぃろぅです。
概ね生きていました。仕事でアウトプットばかりしていたので久しぶりにインプットをしていきます。

今日の本
構成
1章 JavaScript最初の一歩
- 概要
- ES○○って何?
2章条件文
3章繰り返し文
4章関数を作る
5章 Webページに組み込む
おわりに

今日の本

スラスラ読める JavaScript ふりがなプログラミング

スラスラ読める JavaScriptふりがなプログラミング

作者:及川卓也,リブロワークス
インプレス

Amazon

そろそろフロントエンドも勉強するべきということで。
「ふりがなプログラミング」シリーズ。Pythonが充実している。Pythonはこの前まで業務で使っていたからしばらく間を開けてから勉強しようかなといった心持ち。

構成

JavaScriptとはなんぞやから始まり、実際にWebページに組み込むところまで。王道的な入門書といえる。

1章 JavaScript最初の一歩

概要

まずもってJavaScriptって何? といった内容から実際にブラウザ上のコンソールで動かすことと、変数や型、メソッドやオブジェクトといった基本的な用語を紹介するところまで。
オブジェクトについての詳細は5章までお預け。

試しに動かしてみるのは非常にお手軽で、ブラウザのコンソールを開いて(ChromeでF12等)スクリプトを入力するだけ。

console.log("Hello, world!");

かんたーん。

変数はlet (変数名)でOK。宣言には他にも種類があり、ざっくり以下の通り。

予約語	内容
なし	かなり古い。意図しない動作になることがあるため非推奨。
`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

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

ではまた。

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

2022/1/28に幕張メッセ国際展示場 9-11ホールにて開催された
プロジェクトセカイ COLORFUL LIVE 1st - Link -
1/28夜公演のセットリストです

Leo/need

1: needLe
2: フロムトーキョー

MORE MORE JUMP!

3: アイドル新鋭隊
4: 天使のクローバー

Vivid BAD SQUAD

5: Ready Steady
6: シネマ

ワンダーランズ×ショウタイム

7: セカイはまだ始まってすらいない
8: potatoになっていく

25時、ナイトコードで。

9: 悔やむと書いてミライ
10: アイディスマイル

MORE MORE JUMP!

11: メルティランドナイトメア
12: ビバハピ

25時、ナイトコードで。

13: カトラリー
14: ベノム

ワンダーランズ×ショウタイム

15: テレキャスタービーボーイ
16: ミラクルペイント

Vivid BAD SQUAD

17: Just Be Friends
18: フラジール

Leo/need

19: ヒバナ
20: ドラマツルギー

VIRTUAL SINGER

21: 千本桜

アンコール

初音ミク, 星乃一歌, 天馬司, 宵崎奏

22: セカイ

初音ミク, 花里みのり, 小豆沢こはね

23: ワーワーワールド

初音ミク, 星乃一歌, 天馬司, 宵崎奏, 花里みのり, 小豆沢こはね

24: 群青讃歌

f:id:vviilloovv:20220128212958j:plain

今日の本

構成

1章 JavaScript最初の一歩

概要

ES○○って何?

2章 条件文

概要

比較演算子

else if

論理演算子

3章 繰り返し文

概要

配列

無限ループに気を付ける

4章 関数を作る

アロー関数式

変数展開

functionでの関数定義

オブジェクト

5章 Webページに組み込む

概要

HTMLを用意する

HTMLの要素を取得する

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

MDN web docs

おわりに

day1 "memory_limit = -1"

day2 "ob_start"

Leo/need

MORE MORE JUMP!

Vivid BAD SQUAD

ワンダーランズ×ショウタイム

25時、ナイトコードで。

MORE MORE JUMP!

25時、ナイトコードで。

ワンダーランズ×ショウタイム

Vivid BAD SQUAD

Leo/need

VIRTUAL SINGER

アンコール

初音ミク, 星乃一歌, 天馬司, 宵崎奏

初音ミク, 花里みのり, 小豆沢こはね

初音ミク, 星乃一歌, 天馬司, 宵崎奏, 花里みのり, 小豆沢こはね

2章条件文

3章繰り返し文

4章関数を作る

`function`での関数定義