4日目 JavaScriptを学ぼう！
最初のJavaScriptはスキップ可。必要になった時に覚えるのがいいかと。
「今日はJavaScriptについて勉強しよう。これに関しては別になくても作れるけど、ないと全然応用が利かないことになるので必ず覚えよう」
「そろそろ、パンクしそう。これだけ勉強したのは学生時代以来だよ……」
「まだまだ基本的な部分だけで、色々と覚えないといけないことはあるよ」
「先は長いなぁ……」
* * *
「じゃあ、今回も学んでいこう。
JavaScriptとはウェブページにて複雑な機能をできるようにするプログラミング言語。これを使うことでHTMLやCSSを操作したりできる。ウェブページに動きを付けることができるよ。
1995年に誕生してから多くのバージョンアップを経てフロントエンドには欠かせない存在となった。少なくとも初期はお遊び程度、一時期は厄介者として扱われていたね。
2015年に大きく仕様が変わり書き方が変わったり、JavascriptのフレームワークであるReact.js, Vue.jsが広まったり、Node.js、サーバーレスアプリの流行などしてその存在感を高めてきたんだ。もうJSなしではいられないWeb開発環境になりつつある。
特に2015年以前のJavaScriptであるES5とそれ以降のES6で変更点が多く、なるべくES6に沿った書き方が推奨されている。
なお、もともとはLiveScriptだったが、その当時はやっていたJavaの名声にあやかろうとJavaScriptと名付けられたという経緯がある」
「へぇ」
「JavaScriptでできることはいくつもあって、
・変数を宣言してユーザーの動きに応じて中身を変えることができる。
・ウェブページでユーザーが行った動作を検知して、それに応じたイベントを設定することができる。
・ようするにユーザーの動きに応じた画面構築ができる。
変化しないページを作るならJavaScriptは不要だけど、ユーザーの入力に応じた動作を反映させるためには必須。特にエディターを作るならJavaScriptの知識は必要。
特に小説投稿サイトを作るのだったら、閲覧画面の文字の大きさを変えたり、背景を変えたり、縦書きにしたりする必要があるから必須だね」
「そういえば、閲覧設定変更できるところ多いよね」
* * *
「基本的な使い方としては、HTMLファイルの<Script>タグを使って直に書く方法と、外部ファイルを読み込む方法があるよ。
HTMLに直接書くやり方は、
<script>
//ここにJavascriptを記述
</script>
こんな感じにscriptタグを挟み込む。
外部から読み込む場合もscriptタグを使う。srcを指定して外部のファイルから呼び出す。
<script src="script.js" defer></script>
deferはHTMLパース完了後に実行されるようにするためのもの、他にasyncと指定することもでき、非同期にダウンロード、実行される。 デフォルトでは到達時点で実行されるので、なるべくどちらか指定するほうがよいね。
HTMLは構造を、CSSで装飾を、JavaScriptで動きを付けるという役割分担となっているね。なるべくそれぞれが干渉しないように分けて作るのが、後々運営するためには楽だね
じゃぁ、簡単に書き方を説明しておこうか。
■変数/定数
let x = 1; 変数を定義 変更可能
const a =1; 定数を定義 変更不可
ES5ではvarだったがES6では変数と定数に分けられたよ。変数スコープもできたのでvarは使用しない方がいいね。今はできる限りconstで宣言するのがいいかな。
■関数
functionで関数を作ることができる。
function myFunction() {
処理;
}
myFunction();
function myFunction2(x) {
処理;
return x*2;
}
console.log(myFunction2(1));
function() {
alert('hello');
}
const myButton = document.querySelector('button');
myButton.onclick = function() {
alert('hello');
}
■演算子
+
-
*
/
+=
-=
*=
/=
■比較演算
===
!==
<
>
<=
>=
（===に注意。==ではない。これは厳密ではない比較でいまは非推奨）
■文字操作
'' #シングルコーテーション
"" #ダブルクォーテーション
`` #バッククォート テンプレート文字が使えるので変数が入る場合はオススメ
\ #エスケープ
+ 連結
value.toString(); #数値なんかの文字列への変換
string.length; #tring.length; #文字列の長さ
string[0]; #特定の文字の切り出し
string.indexOf('find'); #文字検索 ない場合は-1
string.slice(0,3); #切り出し
string.toLowerCase(); #小文字化
string.toUpperCase(); #大文字化
string.replace('moz','van'); #置換（１回だけ） 全部適用させる場合は正規表現
■配列操作
let arry = ['パン', '牛乳', 'チーズ', 'ハム', '麺'];
[]でくくると配列に。文字列、数値、オブジェクト、その他の変数、さらには別の配列ですら格納することができる。
arry[0]; #配列へのアクセス
random[2][2]; #多次元配列へのアクセス
arry.length; #配列長
#配列の簡単作成
let myData = '札幌,仙台,東京,名古屋,大阪,博多';
let myArray = myData.split(',');
let myNewString = myArray.join(','); #もとに戻す
#配列の追加
myArray.push('横浜');
#配列の削除
myArray.pop();#最後が削除
■条件分岐
if (条件式1) {
条件式1が true の場合;
} else if (条件式2) {
条件式1が false 条件式2が true の場合;
} else {
それ以外の場合;
} #elseif, elseはなくてもいい
#論理演算子
&& #and
|| # or
#3項演算子 if elseを簡単化したもの
( 条件式 ) ? こちらのコードを実行する : 代わりにこちらのコードを実行する
■ループ処理
#forループ
for (let i = 1 ; i < 10 ; i++) {
処理;
}
#whileループ
while (終了条件) {
実行するコード;
}
do {
実行するコード;
} while (終了条件)
#ループを抜ける
break;
#次のループに行く
continue;
などなど、色々なコマンドがあるね」
「頭が爆発しそう」
「作りたいもので検索すると大体出てくるから使い方だけ覚えておけば、作りながら勉強できるよ。今日はこれを使って、勉強のために閲覧設定を変えたりするために、タブやモーダルウィンドウをやったりしようか」
「が、がんばる……」
この後、JavaScriptを使って、別ウインドウを開いたり、画面の色をボタンを推したら変わるようにした。おぉ、なんかすごい開発している気分がする！
JavaScriptはユーザー側で凝った動作をさせたいときによく使います。今のWebサイトはほとんど使われているのではないでしょうか。
昔はjQueryが流行ってましたが、ES6になって、似たようなことができるようになったので、徐々に使われなくなってきています。bootstrapもVer.5になって脱却予定。徐々に過去のものになりつつあります。
昔々に勉強した時と変わってきているのでよかったら勉強してみるのもいいでしょうね。
ちなみにですが、CSSフレームワークにはJavaScriptも含まれたものがあります。それを利用すると、格納ナビゲーションとか、モーダルウィンドウやアニメーションが簡単に実装できます。
自分で実装してもいいですが、時間短縮のため使えるものは使ってしまうのがいいと思います。その場合はほとんど勉強しなくても、サンプルに載ってある使い方だけで問題ないかと。
ただ、後々出てくるWebフレームワークでJavaScript系を選ぶのであれば初手node.jsから始めるのもいいかと。レガシーなJavaScriptを学ぶ必要はないのでさっさとそっちの方の書き方を覚えるのが楽かも。
