JavaScript
ナビゲーションに移動
検索に移動
| Node.js | TypeScript | Angular | AngularJS | React | Dojo | DOM | jQuery | prototype.js | 初めて |
JavaScript
言語
モダンJavaScript
変数宣言
- const : 再代入不可
- let : 変数宣言、ブロックスコープ、同名変数監視
- var : 変数宣言
リテラル表現
テンプレート文字列
- 文字列をバッククォートでくくる
- 途中の改行も可
const name = 'Yagi';
const message = `Hello. ${name}`;
アロー関数=
- 関数リテラルをより簡単にあらわす
(arg,・・・) => {statement}
- 以下の2つは意味的にはほぼ等価
function fun(arg) {
return "x";
}
const fun = (arg) => {
return "x";
}
- 関数本体が１文ならブロックを省略できる
- 式の値がそのまま戻り値となるのでreturnも省略できる
const fun = (arg) => "x";
- 引数が1つの場合、カッコも省略できる
const fun = arg = > "x";
- 引数がない場合、カッコは省略できない
const fun = () => "x";
オブジェクトリテラルの簡易構文
変数と同名のプロパティ
- プロパティと変数名が等しい場合は、値の指定を省略できる
const name = 'yagi'
const age = 52;
const me = { name, age };
メソッドの簡易構文
- メソッドも簡易に表せる。
- greet : function() {} -> greet() {}
const person = {
name : 'yagi',
greet() {
"Hello";
}
}
プロパティ名の動的生成(算出プロパティ名)
- プロパティ名をブラケットで括ることで値から生成できる
let i = 0;
const hoge = {
[`no${i++}`] : '#1',
[`no${i++}`] : '#2',
[`no${i++}`] : '#3'
}
分割代入
- 配列
const list = [1,2,3]; const [x,y,z] = list; // 明示されない値を取得には...を使う const [x, ...etc] = list;
- オブジェクト
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;
- 入れ子オブジェクト
const me = {
name : 'yagi';
addr : {
pref : 'aichi',
city: 'asahi'
}
};
const { addr : { city } } = me;
// city = 'asahi'
引数規定値、可変長引数
- 引数規定値
function fun(a = 1, b = 1, c = 1) {}
// 以下も可
function fun (a = 1, b = a, c = a ) {}
- 可変長引数:引数の前に...を付与することで配列として取得できる
function fun(...nums) {
console.log(nums.length);
}
fun(1,2,3); // print 3
- スプレッド構文による引数の展開
console.log(...[1,2.3]); // 1,2,3
- 分割代入によるオブジェクト引数の分解
const me = { name: 'yagi', age: 52 };
const f = ({name, age}) => console.log(`${name}`);
f(me); // yagi
nullチェック
- Optional Chaining演算子(?.)
let str = null; str?.substring(1); // undefined => 通常Error
- null合体演算子
let str = null; str ?? 'default value'; // default value
モジュール
- JavaScriptのモジュールは一つのファイルとしてまとめるのが基本
- モジュール配下のメンバーは規定でモジュール外部には非公開
- モジュール外部からアクセスするには、exportキーワードを付与する必要がある
定義済みモジュールへのアクセス
<script type="module" src="mod.js"></script>
- import { member, ... } from module
import { func1, func2 } from './mod.js';
- nodeコマンドから実行の場合、package.jsonで明示的にモジュール機能を有効化
{
"type": "module"
}
- その他
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
- 動的import
指定されたモジュールを非同期にimportし出来次第thenコールバックを実行
import('./mod.js').then)(md => {
md.f1();
});
リンク
Promiseベースのhttpクライアント（axios)
リファレンス
DHTML
入門
初めてのJavaScript
JavaScript メモ
DOM
jQuery
Tips
ウィンドウ操作
- ブラウザのタイトルを変更する
- showModalDialog で開いたダイアログの画面遷移
- 画面が閉じられる時にメッセージを表示する
- 自動的にリダイレクトする
- Windowのクライアント領域のサイズを取得
- Windowが未だ開いているか
- 確認ダイアログなしでWindowを閉じる
- デスクトップ領域のサイズを取得
画面要素
- 行列を固定したテーブル
- 動的にコントロールを扱うとき
- オブジェクトのメンバーを列挙
- F5 キー押下を無効にする
- イベントハンドラのアタッチ
- TABLEに行を追加
- テキストエリアの内容をクリップボードにコピー
- SELECT BOX の OnChange をキャンセルする
画像
スタイル
文字列操作
- シングルクォートのエスケープ
- 画面に入力された文字コードを調べる
- ゼロサプレス 正規表現
- 16進数文字コードを取得
- 文字化けの対処(URLエンコード)
- [JavaScript UTF-8文字列のバイト数を得る [UTF-8文字列のバイト数を得る]
- 全角半角変換
正規表現
配列
オブジェクト
トラブル
- 開放されたスクリプトからコードを実行できません
- IE6 のdocument.body.clientHeightの挙動がおかしい
- IE Input type=file でsubmitできない
- ブラウザ用デバッグツール
Ajax
その他
© 2006 矢木浩人
