| ページ一覧 | ブログ | twitter |　 書式 | 書式(表) |

MyMemoWiki

「JavaScript」の版間の差分

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
175行目: 175行目:
 
</pre>
 
</pre>
  
 +
*import { member, ... } from module
 
<pre>
 
<pre>
 
import { func1, func2 } from './mod.js';
 
import { func1, func2 } from './mod.js';
 +
</pre>
 +
 +
*nodeコマンドから実行の場合、package.jsonで明示的にモジュール機能を有効化
 +
<pre>
 +
{
 +
    "type": "module"
 +
}
 
</pre>
 
</pre>
  

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

| Node.js | TypeScript | Angular | AngularJS | React | Dojo | DOM | jQuery | prototype.js | 初めて |

477418411X.09.MZZZZZZZ.jpg link

JavaScript

言語

モダンJavaScript

変数宣言

  • const : 再代入不可
  • let : 変数宣言、ブロックスコープ、同名変数監視
  • var : 変数宣言

リテラル表現

テンプレート文字列

  • 文字列をバッククォートでくくる
  • 途中の改行も可
  1.  const name = 'Yagi';
  2.  const message = `Hello. ${name}`;

アロー関数=

  • 関数リテラルをより簡単にあらわす
  1. (arg,・・・) => {statement}
  • 以下の2つは意味的にはほぼ等価
  1. function fun(arg) {
  2.     return "x";
  3. }
  4.  
  5. const fun = (arg) => {
  6.     return "x"; 
  7. }
  • 関数本体が１文ならブロックを省略できる
  • 式の値がそのまま戻り値となるのでreturnも省略できる
  1. const fun = (arg) => "x";
  • 引数が1つの場合、カッコも省略できる
  1. const fun = arg = > "x";
  • 引数がない場合、カッコは省略できない
  1. const fun = () => "x";

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

変数と同名のプロパティ

  • プロパティと変数名が等しい場合は、値の指定を省略できる
  1. const name = 'yagi'
  2. const age = 52;
  3.  
  4. const me = { name, age };

メソッドの簡易構文

  • メソッドも簡易に表せる。
  • greet : function() {} -> greet() {}
  1. const person = {
  2.     name : 'yagi',
  3.     greet() {
  4.         "Hello";
  5.     }
  6. }

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

  • プロパティ名をブラケットで括ることで値から生成できる
  1. let i = 0;
  2. const hoge = {
  3.     [`no${i++}`] : '#1',
  4.     [`no${i++}`] : '#2',
  5.     [`no${i++}`] : '#3'
  6. }

分割代入

  • 配列
  1. const list = [1,2,3];
  2. const [x,y,z] = list;
  3.  
  4. // 明示されない値を取得には...を使う
  5. const [x, ...etc] = list;
  • オブジェクト
  1. const me = {
  2.     name = 'yagi';
  3.     addr = 'aichi';
  4.     age = 52;
  5. };
  6.  
  7. const { name, addr, note = 'default value' } = me; 
  8. // 別名 name -> myname
  9. const { name: myname } = me;
  10. // 明示されない値を取得には...を使う
  11. const { name, ...etc } = me;
  • 入れ子オブジェクト
  1. const me = {
  2.     name : 'yagi';
  3.     addr : {
  4.         pref : 'aichi',
  5.         city: 'asahi'
  6.     }
  7. };
  8.  
  9. const { addr : { city } } = me;
  10. // city = 'asahi'

引数規定値、可変長引数

  • 引数規定値
  1. function fun(a = 1, b = 1, c = 1) {}
  2.  
  3. // 以下も可
  4. function fun (a = 1, b = a, c = a ) {}
  • 可変長引数:引数の前に...を付与することで配列として取得できる
  1. function fun(...nums) {
  2.      console.log(nums.length);   
  3. }
  4.  
  5. fun(1,2,3); // print 3
  • スプレッド構文による引数の展開
  1. console.log(...[1,2.3]);  // 1,2,3
  • 分割代入によるオブジェクト引数の分解
  1. const me = { name: 'yagi', age: 52 };
  2. const f = ({name, age}) => console.log(`${name}`);
  3. f(me); // yagi

nullチェック

  • Optional Chaining演算子(?.)
  1. let str = null;
  2. str?.substring(1); // undefined => 通常Error
  • null合体演算子
  1. let str = null;
  2. str ?? 'default value';  // default value

モジュール

  • JavaScriptのモジュールは一つのファイルとしてまとめるのが基本
  • モジュール配下のメンバーは規定でモジュール外部には非公開
  • モジュール外部からアクセスするには、exportキーワードを付与する必要がある

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

  1. <script type="module" src="mod.js"></script>
  • import { member, ... } from module
  1. import { func1, func2 } from './mod.js';
  • nodeコマンドから実行の場合、package.jsonで明示的にモジュール機能を有効化
  1. {
  2.     "type": "module"
  3. }

リンク

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

リファレンス

DHTML

入門

初めてのJavaScript

JavaScript メモ

DOM

jQuery

Tips

ウィンドウ操作

画面要素

画像

スタイル

文字列操作

正規表現

配列

オブジェクト

トラブル

Ajax

その他

「https://www.typea.info/tips_/index.php?title=JavaScript&oldid=35266」から取得

© 2006 矢木浩人