JavaScript関連のことを調べてみた2020年08月11日

JavaScriptで全角のひらがなカタカナ小文字を対応する大文字に変換する

例えば「ぁ」は「あ」、「っ」は「つ」、「ァ」なら「ア」みたいに、小文字を大文字に変換する。
Unicode上でぁはU+3041であはU+3042、他の文字も同様に小文字が来て、次に大文字が来るといったように並んでいるので、小文字のUnicode(16進数値)に1足した値が大文字になる。

“`javascript

unescape(“%u” + (parseInt(escape(“ァ”).substr(2,4), 16) + 1).toString(16))
“`

無理やりやればこれでできたけど釈然としない。。。

【一番速い】jsでHTML要素を追加する方法はこれを見てくれ。

# 欲しいのはこれだろう？？

jqueryは使わない。
insertAdjacentHTMLしか載せない。
けどそれでいいだろ？

“`html

①

②

ぺぽー

③

④
“`

### ①　ここには「beforebegin」

“`javascript
var BASE = document.getElementById(‘BASE’);
BASE.insertAdjacentHTML(‘beforebegin’,’

①に入るよん

‘);
“`

### ②　ここには「afterbegin」

“`javascript
var BASE = document.getElementById(‘BASE’);
BASE.insertAdjacentHTML(‘afterbegin’,’

②に入るよん

‘);
“`

### ③　ここには「beforeend」

“`javascript
var BASE = document.getElementById(‘BASE’);
BASE.in

二度と忘れるな。swiperで見切れさせる方法はこれだって言ってんだろ！！

# 俺は、バカなのか…

swiperでのカルーセル案件、今までに何度もやってきただろ…
なんで見切れさせるのに毎回苦戦しているんだよ…！

二度とこいつに時間をかけなくてもいいように、ここに私の奮闘記を残します。

やりたいのはこういうカルーセル。
端っこのコンテンツがちょっと見切れちゃってるようなのを実装したい時のお話です。

## slidesPerViewは小数が使えるんだ！！
つまりこう。

“`javascript

var myswiper = new Swiper (‘.swiper-container’, {
centeredSlides: true,
slidesPerView: 2.2,
spaceBetween: 16,
pagination: {

swiperの雛形にはこれを使え！！

**※公式のフォーマットとは異なります！**
**※使えなくなるオプションがあるかもしれません！**

完全に個人用です。
よくあれこれどうやったっけと忘れて、その度時間けかちゃってるのでメモ残しておきます。

## これを、使え！！
“`html

1

2

3

4

5

Webの表示速度を意識する1（idle速度の改善）

#今読んでいる本。
[Webフロントエンド ハイパフォーマンス チューニング](https://www.amazon.co.jp/dp/B0728K5JZV/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)

気になったところをまとめていきたいと思い書きます。その１。

ーーーーーーーーーーーーーーーーーーー

いくつかのポートフォリオサイトを検証ツールでみてみたところ、あるサイトだけ数値上「idle」のところが非常に時間がかかっておりました。

**idleとは**
*responseやanimation、Loadが終わった後に、ユーザーのアクションを待っている状態*
のことらしい。

では、「ユーザーのリアクションを待つ」状態がなぜ特定のサイトだけ長くなるのか？というと

>最近のブラウザのレンダリングエンジンは、jsの処理とユーザーからのアクションを同じメインスレッドで実行しているため、
webページが何も処理を行っていないように見えても、裏側でjsが実行されているとユーザーからの入力が遅延される。。。

とのこと。（前述の本より）

$(‘input[value=”aaa”]’) は「”aaa”と入力されたinput要素」ではない

かなり驚いたので初めて記事を書きます。

# だめな例
“aaa”と入力されたinput要素のvalue属性を表示するプログラムのつもり。(つまり”aaa”が返ってくるはず)

“`html:HTML

“`

“`javascript:JavaScript
const check = () =>{
const target = $(‘input[value=”aaa”]’);
console.log(target.val());
}
“`
“aaa”と入力して、consoleで`check();`を呼び出すと当然”aaa”…ではなく`undefined`

# 原因
どうやら[こちら](https://stackoverflow.com/questions

Vue.js学習メモ

#Vue.jsについて学習中メモ（*適宜更新）

#１.template

###（１）v-text
文字列をテンプレートに埋め込む

“`.html:test.thml

““

“`.js:test.js
let app = new Vue({
el:”app”,
data:{
message=”おはよう！”
}
})
“`
上記は以下でも同様

“`.html:test.thml

{{message}}

““

###（２）v-bind
属性値を埋め込む

“`.html:test.thml

クリック