「JavaScript/ライブラリ」の版間の差分

削除された内容 追加された内容
Ef3 (トーク | 投稿記録)
→‎脚注: Ajax (アジャックス)というツールが jQuery によく対応していました。」のような怪文をコメント化
Ef3 (トーク | 投稿記録)
リファクタリング
1 行
{{Nav}}
== ライブラリの作り方 ==
'''ライブラリ'''は、汎用的なクラスや関数を外部ファイルとして提供し再利用性を高める仕組みです。
関数をまとめてファイルにまとめます。その時のファイルの[[w:拡張子|拡張子]]はjsにします。
ファイルの[[w:拡張子|拡張子]]は .js とするのが一般的です。
 
また、ライブラリを呼び出すには、<code><script src = "ファイルのパスと名前.js"></script></code>のように記述します。なお「ファイルのパスと名前」には、ライブラリを呼び出すファイルからみたファイルのパスと名前を書きます。
下の例の場合、wiki.js と main.htmlのあるディレクトリのhoge が同じディレクトリ内にwiki.jsがる場合はれば<code><script src = "hoge./wiki.js"></script></code>と書きます。
 
つまり、wiki.jsとmain.htmlが同じ のあるディレクトリの script ディレクトリ内に wiki.js がればる場合は<code><script src = "script/wiki.js"></script></code>と書きます。
 
main.htmlのあるディレクトリのhogeディレクトリ内にwiki.jsがある場合は<code><script src = "hoge/wiki.js"></script></code>と書きます。
 
以下に例を示します。
 
'''main.html'''
15 ⟶ 11行目:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>寸からセンチメートルへの単位変換</title>
<body>
<script src="./wiki.js"></script>
</head>
<script>
<body>
const x = prompt("何寸をセンチメートルに変換しますか?");
<script>
print(`${x}寸は${sun_to_cm(x)}cmです。`);
const x = prompt("何寸をセンチメートルに変換しますか?");
</script>
Wiki.print(`${x}寸は${Wiki.sun_to_cm(x).toFixed(2)}cmです。`);
</body>
</script>
</body>
</html>
</syntaxhighlight> 
'''wiki.js'''
<syntaxhighlight lang="javascript">
const Wiki = {
function print(text) {
let const i = document.createElement("DIV");
i.innerHTML = text;
document.body.appendChild(i);
return i;
},
 
function sun_to_cm(a) {
return Math.round(a * 3.0303);
}
}
};
</syntaxhighlight>
'''解説'''
 
入力された寸の長さをセンチメートルの長さに変換するプログラムです。一寸は約3.0303cmです<ref>このプログラムは、概念を伝えるためのもので実用的な用途には「グローベル空間に普通名詞を使ったメソッドを定義している」「引数の受入検査を行っていない」などの欠陥がありそのまま使うことは出来ません。ライブラリには前記のような欠陥のないことが期待されています。</ref>。
 
<!-- JS では普遍的な使われる技術Callbak関数について不平を述べるなど、誤認に基づく編集なので一旦コメント化。
フレームワーク史を語るなら prototype.js への言及があるべき
 
== フレームワーク ==
ライブラリを提供している企業・コミュニティがいくつかあります。
 
そのような企業・コミュニティなど提供のJavaScript用のライブラリが、俗にJavaScript用の'''フレームワーク'''と言われます。
 
こういう派生フレームワークは、JavaScriptの公式コミュニティの開発'''ではない'''ので、JavaScript公式によるサポートはありません。代わりに、それぞれのフレームワークの開発コミュニティなどがサポートしています。
 
HTML4時代の2005~2010年の古くは[[w:JQuery|jQuery]](ジェイクエリ) というフレームワークが有名でした。また [[w:Ajax|Ajax]] (アジャックス)というツールが jQuery によく対応していました。
 
HTML5時代になり、jQueryはHTML4を前提とした構成のため、競争相手としてTML5対応を謳った新たなフレームワークも登場しました。その中でも、下記の3つが有名です。
 
: [[w:Angular|Angular]] (アンギュラー)
: [[w:React|React]] (リアクト)
: [[w:Vue.js|vue.js]] (ビュー・ジェイエス)
 
なお、Angularは、正確にはJavaScript ではなく、[[w:TypeScript|TypeScript]] です。また、[[w:Node.js|Node.js]] はフレームワークではなく、実行環境です。
 
2020年の現状では依然としてjQueryが業界で大普及しているのが実情です。jQuery自身も更新により、HTML5対応のブラウザやサーバーでも問題なく動作します。
 
jQueryの問題点はHTML5以前を引きずっているかどうかだけでなく、<code> $(document).ready(function(){</code>のような構造の分かりづらい、jQuery命令群の命名規則もあります。$云々の命令のとき、 <code>(</code>が3個だが、<code>)</code>は2個です。こういったコードを書いたあと、jQueryの命令文を書き、最後に<code>});</code> で終了するため、結果的に丸カッコの左右の個数が一致するという仕組みです。また、jQueryの「$」記号は単なる関数名「$」です。JavaScriptでは関数名に「$」記号を使うことは禁止されていません。
 
このほか、jQueryにはオブジェクトとメソッドのあとに、さらにメソッドがつくという、'''メソッドチェーン'''という記法も良く使われます。ただし、jQueryを導入していない一般のJavaScriptでもメソッドチェーン自体は存在しています。
 
入力された寸の長さをセンチメートルの長さに変換するプログラムです。一寸は約3.0303cmです<ref>このプログラムは、概念関数伝えオブジェクトWikiのメソッドとして意義すためのものこと実用的な用途には「グローベル空間に普通名詞辞書に載っている単語を使ったメソッド関数を定義してい」「引数の受入検査を行っていない」などの欠陥がありそのまま使うことは出来ません。ライブラリには前記のような欠陥のないことが期待されを避けています。</ref>。
記法の意味の把握の難しさはjQueryだけでなく、 Angular / React / vue.js といった他のフレームワークでもあります。なかなかややこしいのが実情です。
--><!-- 派生フレームワークという語は初見。フレームワーク=ライブラリという認識はモダンなフレームワークではトランスパイラなど支援環境も含むので明確に誤り。
 
派生フレームワークはプログラミング言語ではなく、あくまでJavaScriptのライブラリです。上述のどのフレームワークも、設計思想としてのプログラミング言語的な記法を目指している方針のようです。どのフレームワークでも、JavaScript側の文法と、フレームワーク側の記法との接触する箇所で、記法がまぎらわしくなっています。
-->
== 脚注 ==
<references />