JavaScript奮闘記始めました|最初に覚える基本的ルール覚書ページ

ポク太郎です。

HTMLCSSと組み合わせホームページを動的に変化させるプログラム言語JavaScript。閲覧者にクイズ出したり、ページ内のHTMLタグ検出し目次を作ったり、何かのツールを作ったり。

HTMLと組み合わせて使うのでデバッグが大変ですが、ご自身のページに色々な要素を簡単に追加できます。

JavaScriptデビューした管理人が、“JavaScript奮闘記”と題し何かを作り上げる作業をどハマりしながら、勘違いの失敗しながら綴っていきます。

JavaScriptはブラウザさえあれば一切アプリを必要としないのでプログラムの勉強を試すのにも多少向いています。※実際向いてるか?というとデバッグの観点で難しい面があります。

本ページはそのJavaScriptの事始め、最初に知るべき基本的な知識をまとめます。


JavaScriptの基本知識と概念&デバッグ環境

JavaScriptの基本知識と概念

JavaScriptとはホームページの正体であるHTML内に埋め込まれたプログラム。

ページ閲覧者がブラウザでHTMLを開くと、そこには必要なJavaScriptのソース、もしくはその.jsファイルのURLが書かれており、ブラウザがそのプログラムを実行。

もちろんWindowsOSもJavaScriptを実行できるが、ホームページ作者が閲覧者に提供するのはもっぱら上記。

JavaScriptの挙動とデバッグ環境

JavaScriptはインタープリタ言語で、ブラウザ、つまりは閲覧者側のデバイス上で翻訳され実行。

文法上のスペルミス一つでもあるとそこで停止。うんともすんとも言わなくなります。つまり、作る側からすると何が不満なのか分からないので非常に困ります。

それを解決するのが各所から提供されるデバッグ環境で、筆者が好んで使うのは以下。

こーいうのはたくさんあり、好みのものをGoogleで探して確保しておく必要があります。

デバッグ時にはキャッシュクリア忘れるな

ホームページに求められるのはページの表示速度。そのため容量の大きなJavaScriptには長期間のキャッシュ保持期間を設定することが多いです。

ソースを改変しアップロード→いつものブラウザでデバッグ→直した筈なのに意味不明な動き。

つまり、JavaScriptをアップロードし直したつもりなのに、ブラウザにキャッシュされたものが動いてしまうケース。

なので、

アップロードし直した後は必ずブラウザのリロード動作。

HTML内へのJavaScriptの書き方と実行される順番

HTML内にJavaScriptを記述するにはこう書きます。直接書かれた前者の書き方を“インラインスクリプト”、別ファイル参照する後者の書き方を“src属性を持った<script>タグ”と呼びます。

<script>var s;
s = menseki(20,30);
function menseki(teihen,takasa) {
		var teihen;
		var takasa;
		return teihen * takasa;
}</script>

または、上記から最初と最後の<script>、</script>タグを取り除いたものをhoge.jsと別ファイルに保存し、<script>タグ内にsrc属性でパスを指定。

<script async src="/hoge.js">
</script>

例ではasync=非同期属性も追加しています。

実行される順番HTMLの上から順に<script>タグが出現した順。非同期属性が付いてる場合はその読み込みが完了した時点で実行。詳しくはこちら。

つまり、ページ内の全HTMLタグ読込完状態を前提に作られたJavaScriptは、<body>の最後、</body>タグ直前に書けばOK←全タグ読込済後に実行されるのでエラーで止まることが無い。

デバイスごとに挙動が異なりトラブルに陥りやすいonload関数を使用しなくてよいことに。

onload関数…DOM構築完了時を検出してそのタイミングで実行させる方法。

変数、配列、関数宣言の書き方

ローカル変数とグローバル変数の宣言書き方

下の例ではsがグローバル変数宣言、teihentakasaがローカル変数宣言。

var s;
s = menseki(20,30);
function menseki(teihen,takasa) {
		var teihen;
		var takasa;
		return teihen * takasa;
}

配列の宣言と挙動

配列の宣言はvar aan = [];と記述。これが先述のデバッグ環境で推奨される書き方。最大要素数の設定は不要の模様。ローカル、グローバルの定義は上の通常変数と同じ。

以下は配列に設定されたキーワードがURL内に含まれる場合に1を返す関数です。

var aan = [];
aan[0] = 'oikawanao';
aan[1] = 'tsutsumisayaka';
aan[2] = 'nagaseai';
aan[3] = 'ootsukasaki';
var = judge;
judge = search(url);
function search(url) {
			var find = 0;
	for (var i=0;i<aan.length;i++){
		if( url.indexOf(aan[i]) != -1 ){
			find = 1;
		}
	}
			return find;
}

シングルクォート’とダブルクォーテーション”の使い分け

HTMLタグを操作することを目的とした言語なので、例えば内部リンクタグを変数に代入することも。
<a href=”/code/js/javascript-1st.html”>JavaScript奮闘記始めました</a>

なので、文字列の指定にはシングルクォーテーションとダブルクォーテンション“”両方が使用可能。

一般的にHTMLタグ内はダブルクォーテンション””を使うので「JavaScript内はシングル”を使う」と自分でルールを決めておいた方が無難。

var aan = [];
aan[0] = 'oikawanao';
aan[1] = 'tsutsumisayaka';
aan[2] = 'nagaseai';
aan[3] = 'ootsukasaki';
var = link[];
	for (var i=0;i<aan.length;i++){
link[i] = '<a href="/favarite/'+aan[0]+'.html">色褪せぬ伝説のスター名鑑 No.'+i+'</a>';</script>
	}

混乱必至のJavaScriptの演算子

中途半端な便利を目指した結果か、演算子が混乱を招く仕様となってるのがJavaScriptの特徴。

勘違いを起こしやすいインクリメント演算子i++や代入演算子+=も使用可能。

中でも、混乱の原因となるのが等価演算子==。文字列の数値リテラルとNumber型の数値を等価判定できるもの。それを除外するのが厳密等価演算子===。変換なしで等価な場合のみ成立。

JavaScriptでよく使用する演算子
1&&AND&一つだけのはビット論理積。
2||OR|一つだけのはビット論理和。
3**^。べき乗計算。
4<=小なりイコール
5>=大なりイコール

インタープリタ故の文末記号必須

文末記号は;

;があることで空白、改行、タブが無視できます。WordPressのプラグインなどで圧縮機能がありますが、文末が明示されてるため無駄な空白文字を削除してロードさせられます。CSSも同じ。

ただし、それにまつわるコメントアウト記号//は要注意。コメントアウトの位置が悪く、ブラウザのバージョンアップによりJavaScriptが動かなくなってたなどのトラブルも。if文の途中など。

なのでコメントアウト//は必ず文末記号;の後。

実際にページ内に表示させる

表示枠はid指定であらかじめHTML内に準備しておく

HTML内に<div id=”debug”></div>を置き、

	//id="debug"タグのCSSのdisplay属性を消す。非表示にさせたい場合は'none'を代入。
	document.getElementById("debug").style.display = '';
	//id="debug"タグにテキストを記述する。
	document.getElementById("debug").innerHTML = 'ほげほげ';

要注意は実行タイミングによるCLS悪化

ホームページ制作で重要視するのはGoogle等検索エンジンからの評価。

CLSとはその評価指標コアウェブバイタルの一つ、Cumulative Layout Shift=レイアウト変更の累積値。閲覧者がページ開いてからのレイアウトのずれを数値化したもの。

ガックンとずれて閲覧者の操作を不安定にし誤クリックを誘発するので、ページの評価指標としてGoogleが採用しています。CLS値大=低品質。

JavaScriptとはプログラムとページデータ読み込み後実行されるもの←JavaScriptで表示させたものは必ず時間差発生。つまり実行タイミングでレイアウトがガックン。

なので、JavaScriptでの演算結果をページ内に表示する場合は、表示部位の大きさをあらかじめCSSで確保しておく必要があります。

<div class="waku" id="debug"></div>

HTMLclass=”waku”を付けておき、

.waku{
  min-height: 300px;
}@media screen and (min-width: 768px){
.waku{
  height: 400px;
} }

そのclass=”waku”に対する大きさをCSSで指定。

前項の「ジャイアンが歌うボタン」もレイアウト変更が起きるのでCLS悪化の要因。ただし、これは人間がボタンを押した結果のガックンなのでペナルティは与えられてない様子。経験からの判断。

JavaScriptの基礎知識まとめ

JavaScriptの基礎知識まとめ
1概念と挙動HTML内に埋め込まれたスクリプト言語。エラーがあると止まってしまうのでJavaScriptデバッグ環境を確保。実行の順番は<script>タグの出現順。
2ローカルとグローバル変数の宣言方法ロカール宣言:関数内でvar a;
グローバル宣言:関数外でvar a;
3配列の宣言var arry = [];が最も推奨される書き方。ローカル、グローバルの定義は上の通常変数と同じ。
4文字列の値指定方法HTMLタグ内と被らないようシングルクォーテーションが基本。
5勘違い多発する演算子似て非なる演算子、見落としてハマる演算子が多いので使い方のルールを自分の中でしっかり。
6文末記号とコメントアウト文末記号;のエラーはデバッガでチェック。コメントアウト記号//は必ず;の後に使用するように。
7表示枠の設定とCLS確認JavaScriptで何かを表示させる場合はあらかじめその表示領域をCSSで確保し、CLS悪化とならないことを確認要。

自分がいざ作ろうとする際に「あれ?正しい記述ってどうだっけ?」といつも分からなくなるものを列挙しました。

結局は自分の忘備録ですが、プログラムは徹底的に同一の正しい表現、同一の正しい書き方に統一するのが基本。そこアヤフヤにするとすべて自分に跳ね返ってきます。

笑えたら座布団下さい。【自作座布団システム導入!単なるイイネ機能】

コメント

タイトルとURLをコピーしました