Go to Qiita Advent Calendar 2024 Top
LoginSignup
56
91

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@ponsuke0531

JavaScriptの実装に役立つリンク集

Last updated at Posted at 2017-03-06
実行順序 処理
1 DOMが読込まれる
2 $(function(){}
jQuery(function(){}
jQuery(document).ready(function(){
3 画像などのコンテンツが読み込まれる
4 $(window).load(function(){}
window.onload = function() {}

Node.js

# Node.jsのバージョンを見たい
$ node -v
v10.23.1

# yarnのバージョンを見たい
$ yarn -v
1.22.10

# 【npm】-----------------------------------------
# npmのバージョンを見たい
$ npm -v
# インストールしたものの一覧を見たい
$ npm ls
# 特定のパッケージに関わるものだけ、インストールしたものの一覧を見たい
$ npm ls {パッケージ名}
# 階層を指定して、インストールしたものの一覧を見たい
$ npm ls --depth=0

〇〇を変換したい

/** 日付を文字列に変換したい(AngularJS) */
let date = new Date();
let stringDate = $filter('date')(date, 'yyyy-MM-dd');

/** 文字列を日付に変換したい : 「-」のままだとiOSのSafariで失敗するそうな */
let string = '2021-02-17'
let date = new Date(string.replace(/-/g, '/'));

文字列を〇〇したい

Google Apps Script : GAS

いろいろ取得とか設定とか表示非表示活性非活性したい

ライブラリを使いたい

よくやることを忘れてしまった

javaSctipt
// 要素作成:普通
document.createElement('タグ')
// 要素作成:jQuery
$('<タグ>');

// 要素の値設定:普通
要素オブジェクト.setAttribute('value', 値);
// 要素の値設定:jQuery
要素オブジェクト.val(値);

// 要素のHTML文字設定:普通
要素オブジェクト.innerHTML = 'HTML文字';
// 要素のHTML文字設定:jQuery
要素オブジェクト.html('HTML文字');

// 要素に子要素を追加:普通
要素オブジェクト.appendChild(子要素オブジェクト);
// 要素に子要素を追加:jQuery
要素オブジェクト.append(子要素オブジェクト);

計算したい

インクリメントとデクリメント
// これ使えます。
let a = 1;
a++;
++a;
a--;
--a;
日付計算
let date = new Date();
// 1日足す
date.setDate(date.getDate() + 1);

変数と定数

オブジェクトのキーに変数の値を設定したい
let customField = 'hoge'
// だめな書き方
let payload = {
    'summary' : '件名',
    'description' : '本文',
    customField : 'ぽんすけ'
};
// 大丈夫な書き方
let payload = {
    'summary' : '件名',
    'description' : '本文'
};
payload[customField] = 'ぽんすけ'

これって予約語だっけ？

定数定義：const

Internet Explorer 11 標準ドキュメント モードでサポートされています。ストア アプリ (Windows 8.1 および Windows Phone 8.1) でもサポートされます。「バージョン情報」を参照してください。
Quirks、Internet Explorer 6 標準、Internet Explorer 7 標準、Internet Explorer 8 標準、Internet Explorer 9 標準、Internet Explorer 10 標準の各ドキュメント モードではサポートされません。Windows 8 ではサポートされません。
const ステートメント (JavaScript)

ブロックスコープ定義：let

Supported in the Internet Explorer 11 standards document mode. Also supported in Store apps (Windows 8.1 and Windows Phone 8.1). See Version Information.
Not supported in the following document modes: Quirks, Internet Explorer 6 standards, Internet Explorer 7 standards, Internet Explorer 8 standards, Internet Explorer 9 standards, Internet Explorer 10 standards. Not supported in Windows 8.
let Statement (JavaScript) | Microsoft Docs

配列を使いたい

// 配列定義：new Array より [] のほうが望ましい。とSublimeLinterに言われた。
var arr = [];
var arr = [1, 2, 3];

// 要素数を数える：Javaと並走して実装していると()をつけたくなりますが不要です。
var count = arr.length;
配列の空判定
if (配列.length) {
// 空([])ではない場合の処理
}
配列に値が含まれるか
if (配列.indexOf(確認するもの) != -1) {
// 含まれている場合の処理
}
ぐるぐるまわしたい
jQuery.each(配列かオブジェクト, function(Integer インデックスかハッシュkey, Object それぞれの値とかオブジェクト) {
  やりたい処理;
  return ぐるぐる回す条件(falseになれば止まる);
});

<select>ボックス製造隊

リロードしても値を保持したい

単純にリロードしたくない場合

WebStorageを使ってみる

ファイルを〜したい

要素の操作

要素の幅を動的に変えたい

要素を動的に追加したい

タブ表示にしたいとき

テーブル

jQuery Templates << jQueryでテンプレートを使う

JSDocを書きたい

JavaScriptの読み込み

<script ..... /> ではなく <script....></script> にしましょう。ついつい /> で閉じたくなります。
じゃ、外部CSSの読み込みに使う <link> は・・・・・

</link>は問題外
HTML5 : 「/>」は基本なしで「/>」があってもOK
HTML4以前 : 「/>」は基本なしで「/>」をつけるのは非推奨
XHTML : 「/>」が必須

CDNが書いてあるところを忘れた

CDN
// Vue.js
<script src="https://unpkg.com/vue"></script>

// jQuery(jQuery CDN)
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
// jQuery(Google Hosted Libraries)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

// jQuery-UI(jQuery CDN)
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

// bootstrap(MaxCDN)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

// bootstrap-select(CDNJS)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

判定

値を判定したいとき

let a = 何か;
if(a) {
    // [](配列), {}(オブジェクト), -1(数値)
} else {
    // "00"(文字：はまった・・・)
    // ""(文字), 0(数値), false(真偽), undefined, null
}

NaNを判定したい

要素の状態を判定したいとき

型を判定したいとき

switch文

式と値が一致するかどうかは「==」演算子ではなく「===」演算子によって比較されます。
switch文 - 条件分岐 - JavaScript入門

入力チェックしたい

イベント

HTMLでの属性

IDEくさいものを使いたい

困った

XMLHttpRequest cannot load xxxxx.***

:construction_worker_tone3:Chrome:construction_worker_tone1:では$.getJSONでローカルにあるJSONファイルが読めないらしいです。

    $.getJSON('ローカルのJSONファイル', function(data) {
        処理
    });

こう書いてChromeで実行したら:sob:怒られました。

XMLHttpRequest cannot load ローカルのJSONファイル. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

英語がわからないのでGoogle翻訳してみました。

XMLHttpRequestはローカルのJSONファイルを読み込めません。Cross origin要求は、http、data、chrome、chrome-extension、https、chrome-extension-resourceのプロトコルスキームでのみサポートされています。

SyntaxError: Unexpected token ] in JSON at position xxx

JSON.pase(jsonObj); したら怒られた。jsonObjはこんな感じで書いた。

[
    {"companyId":"a","companyName":"えー"},
    {"companyId":"b","companyName":"びー"},
]

２個めの「,」が余計だった・・・JSONをノリで書くのはいけません。

56
91
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
56
91

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?