「JavaScript」の版間の差分

2024年9月27日 (金) 11:14時点における最新版

477418411X.09.MZZZZZZZ.jpg link

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)

https://github.com/axios/axios

リファレンス

DHTML

入門

Tips

ウィンドウ操作

画面要素

画像

画像の切替

スタイル

文字列操作

シングルクォートのエスケープ
画面に入力された文字コードを調べる
ゼロサプレス正規表現
16進数文字コードを取得
文字化けの対処(URLエンコード)
[JavaScript UTF-8文字列のバイト数を得る [UTF-8文字列のバイト数を得る]
全角半角変換

正規表現

JavaScriptでの正規表現

配列

オブジェクト

トラブル

Ajax

その他

@@ 5行目: / 5行目: @@
 ==[[言語]]==
+==モダンJavaScript==
+===変数宣言===
+*const : 再代入不可
+*let : 変数宣言、ブロックスコープ、同名変数監視
+*var :  変数宣言
-====let宣言子====
+===リテラル表現===
-*ECMAScript6から導入
+====テンプレート文字列====
-*ブロックスコープのローカル変数を宣言
+*文字列をバッククォートでくくる
+*途中の改行も可
+<pre>
+ const name = 'Yagi';
+ const message = `Hello. ${name}`;
+</pre>
+===アロー関数====
+*関数リテラルをより簡単にあらわす
+<pre>
+(arg,・・・) => {statement}
+</pre>
-====const宣言子====
+*以下の2つは意味的にはほぼ等価
-*ECMAScript6から導入
+<pre>
-*ブロックスコープの再代入できないローカル変数(定数)を宣言する。
+function fun(arg) {
-*初期化必須
+    return "x";
+}
+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>
+&lt;script type="module" src="mod.js"&gt;&lt;/script&gt;
+</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>
 ==[[リンク]]==
@@ 104行目: / 288行目: @@
 *[[ECMA Script]]
 *[[Java]]script 再入門
+[[category:プログラミング言語]]

MyMemoWiki

「JavaScript」の版間の差分

2024年9月27日 (金) 11:14時点における最新版

目次

モダンJavaScript

変数宣言

リテラル表現

テンプレート文字列

アロー関数=

オブジェクトリテラルの簡易構文

変数と同名のプロパティ

メソッドの簡易構文

プロパティ名の動的生成(算出プロパティ名)

分割代入

引数規定値、可変長引数

nullチェック

モジュール

定義済みモジュールへのアクセス

Promiseベースのhttpクライアント（axios)

リファレンス

DHTML

入門

ウィンドウ操作

画面要素

画像

スタイル

文字列操作

配列

オブジェクト

トラブル

案内メニュー

検索