JavaScript俺用逆引きリファレンス - BNBのプログラミング勉強記録

基本
文字列
配列
イベント
リンク、URL
- 普通のリンク
- 新規タブで開く
DOMの読み取り・書き換え

基本

再代入可能

let

再代入不可

const
リファレンス本にも「基本はconstを使い、再代入が必要な場合のみletにすると分かりやすくなる」的な事が書かれていた。

if

if(foo){
    bar
}else{
    baz
};

変数展開

`${foo}`

文字列

両端の空白を削除

foo.trim()

文字列が最初に現れる位置を返す

indexOf(foo)
0始まりで返す

文字列が最初に現れる位置を返す（正規表現）

foo.search(正規表現)
同上

含まれてるかを真偽値で返す

foo.includes(bar)

切り出し

foo.slice(bar)

置換

foo.replace('foo1','bar1')

置換（全部）

foo.replace(/bar/g,'baz')

文字列がパターンにマッチするか

/正規表現/.test(foo)
真偽値で返す

配列

配列化

foo.split('区切る文字')
''にしたら1文字ずつ区切る

複数キーのある配列

const foo=[
    {bar:1,baz:'a'},
    {bar:2,baz:'b'}
];

配列の各要素を書き出す

上記の配列を元に。

foo.forEach( (data)=>{
    console.log(data.bar);
    console.log(data.baz);
}

配列の各要素を書き出すその2

for(const data of foo){
    console.log(data.bar);
    console.log(data.baz);
}

イベント

クリックしたら関数呼び出し

const foo=document.querySelector('.foo');

foo.addEventListener('click',bar)

function bar(){
    baz
};

クリックしたら関数呼び出し（アロー関数）

もちろん、アロー部分をfunction()と書いてもOK

const foo=document.querySelector('.foo');

foo.addEventListener('click',()=>{
    bar
});

要素を全て取得し、各要素をクリックしたときの処理

document.querySelectorAll('.foo').forEach( (foo)=>{
    foo.addEventListener('click',()=>{
        bar
    });
});

スワイプ関係まとめて(touchstart,touchmove,touchend)

これが最低限の左右スワイプです。今作った(2023/08/21)。Googleで上位に出てくるやつ、変な挙動が多い。ほんとに使ってるのかと問い詰めたい。

const imageTouch=document.querySelector('.image_touch');
let startX = 0;
let endX = 0;

imageTouch.addEventListener('touchstart', (e) =>  {
  startX = e.touches[0].pageX;
});

imageTouch.addEventListener('touchmove', (e) =>  {
  endX = e.changedTouches[0].pageX;
});

imageTouch.addEventListener('touchend', (e) =>  {
  if(endX == 0){
    console.log('何も起こらない1');
  }else if(startX - endX <= -30){
    console.log('左へ');
  }else if(startX - endX >= 30){
    console.log('右へ');
  }else{
    console.log('何も起こらない2');
  };

  startX = 0;
  endX = 0; 

});

リンク、URL

普通のリンク

// onclick="foo()"
function foo() {
  window.location.href = https://www.example.com
}

新規タブで開く

// onclick="foo()"
function foo() {
  window.open(https://www.example.com/)
}

DOMの読み取り・書き換え

【超重要】Railsで自作JavaScriptを読み込む、動かす

以下Rails7.0.5での導入です。

1.app/javascriptにfoo.js(使いたいjsファイル)を置く
2.config/importmap.rbに「pin "foo"」を追加
3.application.html.erbのヘッダの一番下に以下を書く。Railsがデフォルトで読み込むjsの順番があるので、一番下に書く。そうしないと動かない。注意。

<%= yield(:head) %>

4.自作JavaScriptを使うerbに以下を書く（これによりこのページだけヘッダに2つの要素が挿入される）。特に、reloadのやつは、turboがonになってる時（デフォルトでonなんですけどね）に書かないといけないっぽい。

<% content_for :head do %>
  <meta name="turbo-visit-control" content="reload">
  <%= javascript_import_module_tag "foo" %>
<% end %>

5.ちなみに自作JavaScriptでforEachする時はこれの中に書かないと動かない（検証した）。マジで、罠が多すぎるって！

window.onload=function(){
    bar
};

DOMにアクセスできるタイミングで処理を実行

リファレンス本に書いてて、便利そう！ってメモしていた。forEachが動かないのでこれを入れてみたが動かず。上記のonloadでようやく動いた。

window.addEventLintener('DOMContentLoaded',()=>{
    foo
});

IDを読み取る

const foo=document.getElementById('bar');

読み取ったIDのvalue

上の続き。
foo.value

特定のタグを読み取る（1つ）

const foo=document.querySelector('img');

特定のクラスを読み取る（1つ）

const foo=document.querySelector('.foo');

特定のクラスを読み取る（全て）

const foo=document.querySelectorAll('.foo');

HTML解析後にJavaScript実行

<script src="foo.js" defer></script>

クラスを付けたり外したり（toggle）

foo.classList.toggle('bar');
ちなみに足す引くはadd,remove

要素を作成

この場合、bodyの末尾に追加。

const foo=document.createElement('div');
foo.innerHTML='bar';
document.body.appendChild(foo);

ノード内を引っ張る（テキストのみ。タグは含まない。）

foo.textContent

ノード内を引っ張る（タグも含める）

foo.innerHTML

要素を引っ張る

foo.getAttribute('href')

要素を書き換え

foo.setAttribute('src','bar.png')

特定のクラスを持っていたら

if( foo.classList.contains('bar') == true ){
  baz; 
};

次の要素を引っ張る

これすごいよ。imgタグの下にinputタグ置くとするやん？img視点で見ると、お隣さんを引っ張っこれるので、例えば「クリックした画像にだけ、タグを付ける」みたいな事が可能になる。これを駆使したやつをテストページに置いてみたのでご参考に。思った通りに動作して、脳汁出まくった。（苦労した分余計に。）
https://blue-night-blue.github.io/js_playground/

foo.nextElementSibling

2023/08/28追記
あまりいい方法ではなかったので、結局下記のやり方に落ち着きました。念のため。
https://github.com/blue-night-blue/tagfoto/blob/main/app/javascript/tagToMultipleImage.js

あるクラスの任意の要素を読み取る

document.querySelector(".foo [bar='buz']");

あるクラスの任意のタグを読み取る

document.querySelector(".foo bar");

基本