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

Vue.jsでinputタグを用いた入力文字の字数カウント

# Vue.jsでinputタグを用いた入力文字の字数カウント

## ① v-onディレクティブの利用

v-onディレクティブを用いることで、イベント発火時の JavaScript の実行が可能になります。
例えば
“`
//v-on:イベント=”関数”
ハローボタン
“`
と記述すると、ボタンクリック時にhello関数が実行される。

## ②イベントにkeyupイベントを記述する
keyupイベントは**keyが離されたタイミングで発火するイベント**です。
→テキストに文字が打たれてキーが離れたタイミングでイベントを発火させるのに利用します。
“`

“`
※@は「v-on:」の代わりに使えるものです
　keyupイベントによく似たものにkeydownイベントがあります。そのイベントはkeyが押されたタイミングで
　イベントが発火します。

## ③文字数をカウントし、表示する関数を作成する
実際に文字数をカウントし、表示する

JavaScript + Immer: データ構造をイミュータブルに保つ ー 使うのはイマでしょ！

[Immer](https://immerjs.github.io/immer/)はデータ構造をイミュータブル(不変)に保つためのライプラリです。React公式ドキュメントでもおすすめされています(「[Write concise update logic with Immer](https://beta.reactjs.org/learn/updating-objects-in-state#write-concise-update-logic-with-immer)」参照)。また、2019年にはつぎのような賞を獲得しました。

* [Breakthrough of the year](https://osawards.com/react/2019) ー React open source award
* [The Most Impactful Contribution to the community](https://osawards.com/javascript/2019) ー JavaScript open source award

“[immer](https://kotob

‘foo@example.com’.match(/\x{email}/)

https://twitter.com/kazuho/status/1558592627234447361

文字クラス拡張すると車輪の再発明防げるかなと思い拡張してみました。

https://github.com/GitHub30/cc-regex

[](https://badge.fury.io/js/cc-regex)

## 使い方

### メールアドレス

“`javascript
‘foo@example.com’.match(/\x{email}/g)
// [‘foo@example.com’]
“`

### URL

“`javascript
‘https://example.com/foo/bar’.match(/\x{url}/g)
// [‘https://example.com/foo/bar’]
“`

### 都道府県

“`javascript
‘島根県にパソコンなんてあるわけないじゃん’.match(/\x{都道府県}/g)
//

【Javascript】イベントが突然発火しなくなった？documentでくくってみよう。

## はじめに
この記事にたどり着いた方はなんかボタンクリックしてもJSでイベントが発火しないというエラーを解決したくて訪れる人が多いかと思います。

自分も実務でこの通常時はイベント発火するのになぜかイベントが発火しない時があるというエラーに2回も遭遇しました。結構よくある事象なのかと思いここに備忘録として残しておきたいと思います。

## 実際にあった事例
1.非同期で切り替えた時（期間指定やチェックボックス選択時）に、JSで実装していたCSVダウンロードボタンが機能しなくなっていた。
2.投稿フォームの投稿ボタンに対しクリックイベントを追加していたが、投稿ボタンクリック時に他のエラーが非同期で発動した後、クリックイベントが発火しなくなった。

## 結論
“(document).on(“click”, element“にして動的に追加したDOMに対してもJS発火するよう修正すればイベント発火が問題なくされる。

“`sample.js
//Before
$(“.open-csv-modal”).on(“click”,() => {
//イベント内処理//
});

//

JavaScriptのPromiseについて part1

# 初めに
プロミスでは約束した書き方など、統一されたやり方で従う点がたくさんあるので、構造上の話ではなく、使い方や動きから思ったことをまとめていきたいと思います。

今回主な参考文章はこちらです。
[Promises chaining – javascript.info](https://javascript.info/promise-chaining)
[Error handling with promises – javascript.info](https://javascript.info/promise-error-handling)

[Promises, async/await](https://javascript.info/async)では各章の基礎概念と使い方にはすごく分かりやすい例を出しているので、ぜひご参考ください。（日本語訳もあります。）

もっと詳しい理論や説明は、こちらをおすすめします。
[JavaScript Promiseの本](https://azu.github.io/promises-book/#chapter1-what-is-promise

Babylon.jsで360パノラマ画像ツアー

# はじめに

Babylon.jsで360度パノラマ画像を表示させて、画像間を移動できるようにしました。

パノラマ画像を扱うライブラリとして、[Pannellum](https://pannellum.org/)とか[krpano](https://krpano.com/home/)とか[Panolens.js](https://pchen66.github.io/Panolens/)とかもあるので、Babylon.jsでやる意味があるかというとなんとも言えませんが、せっかく作ったのでまとめます。

作ったものは[こちら](https://playground.babylonjs.com/#IIES35#1)

# 処理

処理全体としては以下のようになっています。
ちなみにカメラの初期方向設定をカメラ作成時（`new BABYLON.ArcRotateCamera`）にやろうとすると、なぜか画像が思った方向に向きません（第二引数を「Math.PI/2」にしても「-Math.PI/2」にしても結果が変わらず、0にすると変わるけど想定とは違う結果に…）。
そのため、初期表示時に特

jQuery.each(=$.each)は何でreturn falseでループを抜けるんだ？

## はじめに
jQueryの$.eachは、一般的なforeachと異なり以下の特徴があります。

①break・continueは使えない
②return falseをすることでbreak相当を、returnもしくはreturn trueをすることでcontinue相当をすることができる

コード例としては公式のドキュメントを参照のこと。ドキュメントにはcontinue相当の例はないですが、false以外にしてif以降に処理を書くとcontinue相当の動きをすることがわかります。

https://api.jquery.com/each/

この記事では、①・②が何故なのかを確認します。自分はreturn trueとreturn falseのどっちがbreakでどっちがcontinueなんだ？といつも迷ってググっているので、特に②についてどっちがどっちなのかを理解できることを目指します。

## jQueryのソースコードを確認
というわけでjQueryのeachのソースコードを探したら以下にありました。

https://github.com/jquery/jquery/blo

【React Native】React Navigatorをインストール後、シミュレーターが起動しない

# 環境

– Macbook Air 2020
– react 18.0.0
– react-native 0.69.4
– expo 46.0.6
– React Native Debugger 0.13.0

# １．状況

React Navigatorをインストール後、下記ファイルを編集し `expo start -c` を実行したが、シミュレーターが起動せずエラーが発生。

“`jsx:App.js
import React from “react”;
import { NavigationContainer } from “@react-navigation/native”;
import { createStackNavigator } from “@react-navigation/stack”;
import HomeScreen from “./screens/HomeScreen”;

const Stack = createStackNavigator();

export default function App() {
return (

Javascriptでのreplaceメソッドの第二引数の関数が理解できた件について

## なぜ記事を書こうと思ったか
開発の際にJavascriptのreplaceメソッドで第一引数に正規表現、第二引数に関数を使用する際の関数の引数に何の情報が入っているか分からず開発が進まない事があった為、今回replaceメソッドの引数に入る情報をまとめたいと思います。

## replaceメソッドはどのような処理？
　replaceメソッドは簡単に言うと、パターンに一致した部分文字列の一部またはすべてを置換文字列で置き換えた新しい文字列を返します。
簡単な例だと以下のような形です。
“`
const greeting = “初めまして、私は田中太郎です。このクラスの田中健太君と友達です。よろしくお願いします。”;

// 第一引数が文字列の場合
console.log(greeting.replace(“田中”, “佐藤”));
// コンソール結果(“初めまして、私は佐藤太郎です。このクラスの田中健太君と友達です。よろしくお願いします。”)

// 第一引数が正規表現の場合
console.log(greeting.replace(/田中/i, “佐藤”));
// コ

javaScript_正規表現,search,replaceメソッドなど

“`js
参考:
https://qiita.com/iLLviA/items/b6bf680cd2408edd050f

i 大文字小文字区別しない
g すべてのものを検索
m 複数行検索
[abc] []内のものを検索
[0-9] 0-9の数字を検索

click me