12,673
回編集
差分
ナビゲーションに移動
検索に移動
====const宣言子====*以下の2つは意味的にはほぼ等価*ECMAScript6から導入<pre>*ブロックスコープの再代入できないローカル変数function fun(定数arg)を宣言する。{*初期化必須 return "x";}
===[[Tips]]=======ウィンドウ操作====
====画面要素====
====画像====
====スタイル====
====文字列操作====
====[[正規表現]]====
====配列====
====オブジェクト====
====トラブル====
====[[Ajax]]====
====[[その他]]====
----{{include_html [[banner_htmlcategory:プログラミング言語]], "!Javascript"}}
→定義済みモジュールへのアクセス
| [[Node.js]] | [[TypeScript]] | [[Angular]] | [[AngularJS]] | [[React]] | [[Dojo]] | [[DOM]] | [[jQuery]] | [[prototype.js]] | [[初めてのJavaScript|初めて]] |
{{amazon|477418411X}}
==[[JavaScript]]==
==[[言語]]==
==モダンJavaScript==
===変数宣言===
*const : 再代入不可
*let : 変数宣言、ブロックスコープ、同名変数監視
*var : 変数宣言
===リテラル表現=let宣言子======テンプレート文字列====*ECMAScript6から導入文字列をバッククォートでくくる*ブロックスコープのローカル変数を宣言途中の改行も可<pre> const name = 'Yagi'; const message = `Hello. ${name}`;</pre>
===アロー関数====
*関数リテラルをより簡単にあらわす
<pre>
(arg,・・・) => {statement}
</pre>
const fun = (arg) => {
return "x";
}
</pre>
*関数本体が１文ならブロックを省略できる
*式の値がそのまま戻り値となるのでreturnも省略できる
<pre>
const fun = (arg) => "x";
</pre>
*引数が1つの場合、カッコも省略できる
<pre>
const fun = arg = > "x";
</pre>
*引数がない場合、カッコは省略できない
<pre>
const fun = () => "x";
</pre>
===オブジェクトリテラルの簡易構文===
====変数と同名のプロパティ====
*プロパティと変数名が等しい場合は、値の指定を省略できる
<pre>
const name = 'yagi'
const age = 52;
const me = { name, age };
</pre>
====メソッドの簡易構文====
*メソッドも簡易に表せる。
*greet : function() {} -> greet() {}
<pre>
const person = {
name : 'yagi',
greet() {
"Hello";
}
}
</pre>
====プロパティ名の動的生成(算出プロパティ名)====
*プロパティ名をブラケットで括ることで値から生成できる
<pre>
let i = 0;
const hoge = {
[`no${i++}`] : '#1',
[`no${i++}`] : '#2',
[`no${i++}`] : '#3'
}
</pre>
====分割代入====
*配列
<pre>
const list = [1,2,3];
const [x,y,z] = list;
// 明示されない値を取得には...を使う
const [x, ...etc] = list;
</pre>
*オブジェクト
<pre>
const me = {
name = 'yagi';
addr = 'aichi';
age = 52;
};
const { name, addr, note = 'default value' } = me;
// 別名 name -> myname
const { name: myname } = me;
// 明示されない値を取得には...を使う
const { name, ...etc } = me;
</pre>
*入れ子オブジェクト
<pre>
const me = {
name : 'yagi';
addr : {
pref : 'aichi',
city: 'asahi'
}
};
const { addr : { city } } = me;
// city = 'asahi'
</pre>
====引数規定値、可変長引数====
*引数規定値
<pre>
function fun(a = 1, b = 1, c = 1) {}
// 以下も可
function fun (a = 1, b = a, c = a ) {}
</pre>
*可変長引数:引数の前に...を付与することで配列として取得できる
<pre>
function fun(...nums) {
console.log(nums.length);
}
fun(1,2,3); // print 3
</pre>
*スプレッド構文による引数の展開
<pre>
console.log(...[1,2.3]); // 1,2,3
</pre>
*分割代入によるオブジェクト引数の分解
<pre>
const me = { name: 'yagi', age: 52 };
const f = ({name, age}) => console.log(`${name}`);
f(me); // yagi
</pre>
====nullチェック====
*Optional Chaining演算子(?.)
<pre>
let str = null;
str?.substring(1); // undefined => 通常Error
</pre>
*null合体演算子
<pre>
let str = null;
str ?? 'default value'; // default value
</pre>
===モジュール===
*JavaScriptのモジュールは一つのファイルとしてまとめるのが基本
*モジュール配下のメンバーは規定でモジュール外部には非公開
*モジュール外部からアクセスするには、exportキーワードを付与する必要がある
====定義済みモジュールへのアクセス====
<pre>
<script type="module" src="mod.js"></script>
</pre>
*import { member, ... } from module
<pre>
import { func1, func2 } from './mod.js';
</pre>
*nodeコマンドから実行の場合、package.jsonで明示的にモジュール機能を有効化
<pre>
{
"type": "module"
}
</pre>
*その他
<pre>
import { func1 as f1 } form './mod.js'; // 別名付与
import * as md from './mod.js'; // as でモジュール別名を定義し全体をimport
import f1 from './mod.js'; // export default (モジュール1つにつき一つだけ設定できる規定のexport)をimport
import f1 {f2, f3} from './mod.js'; // 規定とその他をまとめてimport
</pre>
*動的import
指定されたモジュールを非同期にimportし出来次第thenコールバックを実行
<pre>
import('./mod.js').then)(md => {
md.f1();
});
</pre>
==[[リンク]]==
===Promiseベースのhttpクライアント（axios)===
*https://github.com/axios/axios
====リファレンス====
*[https://jsprimer.net/ JavaScript Primer]
*[https://developer.mozilla.org/ja/JavaScript Mozilla Developer Center JavaScript]
====[[jQuery]]====
*[[jQuery]]
*[[JavaScript ブラウザのタイトルを変更する|ブラウザのタイトルを変更する]]
*[[JavaScript showModalDialog で開いたダイアログの画面遷移|showModalDialog で開いたダイアログの画面遷移]]
*[[JavaSctipt 確認ダイアログなしでWindowを閉じる|確認ダイアログなしでWindowを閉じる]]
*[[JavaScript デスクトップ領域のサイズを取得|デスクトップ領域のサイズを取得]]
*[[JavaScript 行列を固定したテーブル|行列を固定したテーブル]]
*[[JavaScript 動的にコントロールを扱うとき|動的にコントロールを扱うとき]]
*[[JavaScript テキストエリアの内容をクリップボードにコピー|テキストエリアの内容をクリップボードにコピー]]
*[[JavaScript SELECT BOX の OnChange をキャンセルする|SELECT BOX の OnChange をキャンセルする]]
*[[JavaScript 画像の切替|画像の切替]]
*[[JavaScript 動的にスタイルクラスを変更する|動的にスタイルクラスを変更する]]
*[[JavaScript 動的にスタイルシートの情報を取得する|動的にスタイルシートの情報を取得する]]
*[[JavaScript インラインスタイルを無効にする|インラインスタイルを無効にする]]
*[[JavaScript シングルクォートのエスケープ|シングルクォートのエスケープ]]
*[[画面に入力された文字コードを調べる]]
*[[JavaScriptで全角半角変換|全角半角変換]]
*[http://typea.info/tips/wiki.cgi?page=JavaScript+%C1%C8%A4%DF%B9%FE%A4%DF%A5%AA%A5%D6%A5%B8%A5%A7%A5%AF%A5%C8%28Number%2CString%2CRegExp%2CDate%2CMath%29#p4 JavaScriptでの正規表現]
*[[JavaScript 組み込みオブジェクト(配列)|配列]]
*[[JavaScript 連想配列(Map)のキーを取り出す|連想配列(Map)のキーを取り出す]]
*[[JavaScript 配列の要素を削除|配列の要素を削除]]
*[[JavaScript Array|配列でなければ配列に、配列ならそのまま（もしくは追加)]]
*[[JavaScript オブジェクトが関数かどうか調べる|オブジェクトが関数かどうか調べる]]
*[[JavaScript オブジェクトのプロパティ確認|オブジェクトのプロパティ確認]]
*[[開放されたスクリプトからコードを実行できません]]
*[[IE6 のdocument.body.clientHeightの挙動がおかしい]]
*[[ブラウザ用デバッグツール]]
*[[prototype.js HTMLとスクリプトを分離|HTMLとスクリプトを分離]]
*[[prototype.js]]
*[[Dojo]]
*[[JavaScript Script実行順を制御|Script実行順を制御]]
*[[クロージャ]]
*[[Java]]script 再入門
© 2006 矢木浩人
