JavaScript関連のことを調べてみた

React + React Router + TypeScript: チュートリアル[02] 遷移の細かな制御と検索の機能

React Routerのv6.4から採り入れらた新しいData API(「[Using v6.4 Data APIs](https://reactrouter.com/en/main/routers/picking-a-router#using-v64-data-apis)」参照)を使った公式サイト「[Tutorial](https://reactrouter.com/en/main/start/tutorial)」の作例にもとづくチュートリアルの後編です。TypeScriptを用い、モジュールの組み立てやコードは手直ししました。解説も書き改めています。さらに、要所ごとに[StackBlitz](https://stackblitz.com/)のコードサンプルを掲げました。各モジュールのコードが開けて見られ、動作を確認しつつ、書き替えて試すこともできるでしょう。

* [React + React Router + TypeScript: チュートリアル[01] loaderとactionでデータを作成・編集・削除する](https://qiita.com/FumioNonaka/i

バリデーションチェックの実装

Javascriptを使ったバリデーションの実装について学習記録用として残しておきます。
動かすことを目的としているのでスタイルシートは最低限の記述にしています。

**今回使った技術、ライブラリ等**
・bootstrap
・jQuery
・Javascript
・HTML
・SCSS

## 概要
今の会社でバリデーションチェックや、アラート表示などちょっとしたJavascriptを書く機会が増えたので使いまわせるようにある程度の型を作っておくと良いかと考えた

## HTMLファイルの作成
まずはHTMLファイルに必要最低限のコードを書きます。

“`html

TauriのUIテンプレートをまとめた

# はじめに
Tauriを使ってマークダウンエディターを作ろうと現在奮闘中です。
（[このライブラリ](https://milkdown.dev/)をつかいたい）

そこでUIテンプレートに`React`を指定していたのですが、どうもうまく作れず・・。
Reactが理解出来る気がしない・・。

ということで、他のUIテンプレートがなにあったっけ？と調べようと思ったのですがリスト出してくれているページが全くなかったので、まとめておきました。

**JavaScript系のフレームワークはほぼほぼ触ったことがないので、知識皆無です。
検討ハズレな感想があっても見逃してください・・。**

# UIテンプレート

## Vanilla
ピュアJavaScriptってやつですね。
なんだかんだこれで良くない？という気持ちもありつつ、それだと勉強にならな

javascript / typescript – 日本時間で今日の日付の文字列を得る

# 概要

– 第一引数に日付フォーマットの国の種類を指定する
– 第二引数の timeZone には得たいタイムゾーンを指定する

# 日付を得る

“`js
new Date().toLocaleString(‘ja-JP’, {
timeZone: ‘Asia/Tokyo’,
year: ‘numeric’,
month: ‘2-digit’,
day: ‘2-digit’,
})
“`

結果の例:

`’2024/03/22’`

# 時刻まで得る

“`js
new Date().toLocaleString(‘ja-JP’, {
timeZone: ‘Asia/Tokyo’,
year: ‘numeric’,
month: ‘2-digit’,
day: ‘2-digit’,
hour: ‘2-digit’,
minute: ‘2-digit’,
second: ‘2-digit’
})
“`

結果の例:

`’2024/03/22 12:19:31’`

# 参考

div タグのスタイルを参照しようとしたら参照できなかった話

例えば、次のような HTML と CSS があったときに、

“`html:hoge.html

“`

“`css:hoge.css
#hoge {
display: flex;
}
“`

以下のコードでコンソールに出力されたのは “flex” ではなく**空文字**だったという話です。

“`javascript:hoge.js
const divElement = document.getElementById(“hoge”);
console.log(divElement.style.display); // 空文字が出力される
“`

## 解決方法

上記のコードで言うと `divElement.style.xxxx` で参照できるのは JavaScript で動的に設定したスタイルとなるため、CSS で適用したスタイルを参照する場合は `window.getComputedStyle()` を使用します。

https://developer.mozilla.org/ja/docs/Web/API/Window/

useEffectに書いた処理が実行されるタイミング

### useEffect内の処理はマウント時 + 依存配列内の変数の値が変更された時に実行される。

– useEffectの第二引数である依存配列`[]`に何も入れなかった時は**初期レンダリング後のみ**（コンポーネントに書いた記述がDOM構成に反映された後）実行される。
– 依存配列に変数を指定した場合は **初期レンダリング後 + 依存配列内の変数の値が変更された時**に実行される
– アンマウント時に実行される、と言われるのは下記の `return () => {}` に書いた記述がコンポーネントが画面から消えるときに実行される**クリーンアップ関数**のこと。つまり、**クリーンアップ関数を書かなければアンマウント時はなにも実行されない。**

“`tsx:UseEffect.tsx
useEffect(() => {
// ここに副作用を実行するコードを記述

// クリーンアップ関数を返す
return () => {
// コンポーネントのアンマウント時に実行されるコード
};
}, [

p5.js Web Editor上で Gamepad API を使う： DualShock 4 を使ったシンプルな接続確認・ボタン押下判定

今回の内容は、以下の記事で取り扱ってきた「Gamepad API」の話です。

●【完走賞ゲット-11】gamecontroller.js を p5.js Web Editor上で使ってみる（DualShock 4 との組み合わせ） – Qiita
　https://qiita.com/youtoy/items/1cf1fe244d992456140f

●【完走賞ゲット-13】p5.js Web Editor上でボールが跳ね返る時に DualShock 4 を振動させる（gamecontroller.js での実装） – Qiita
　https://qiita.com/youtoy/items/c4d3b6fde5365090a5de

Gamepad API は、ゲーム用のコントローラーをブラウザで扱える API です。

上に掲載していた記事では、API を直接使うのではなく「gamecontroller.js」というライブラリを用いていました。

今回は、API を直接扱ってみようと思います。

## 今回利用する環境・参照する情報

### 今回利用する環境
今回、開発・実

JS&TS用に画期的なログ出力ライブラリを作ったので報告

# 何を作ったの？
今回自分が作ったライブラリはこちらになります。

https://www.npmjs.com/package/log4debug

このリンクだけだとまだ分からないと思うので説明していこうと思います。
## どういうライブラリ？
簡単に言うと従来のconsole.logを改造する様なライブラリです。
まず以下のコードを見てみてください
“`typescript
import log4debug from “log4debug”

log4debug.set(log4debug.defaultTemplate)

console.log(“This Package is JavaScript and TypeScript’s Logger”)
“`
これ普通にログ出力されると思いますよね？
実はこれlog4debug.setをやることによって、console.logが改造されて以下のようにログが出力されるんです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26

PleasanterのWebAPIを内部から実行する！？

# Pleasanterのサーバスクリプト「httpClient」を使ったUsersの拡張項目の取得

突然ですが、皆様はPleasanterのAPIやスクリプト、サーバースクリプトを利用されたことがありますでしょうか。
私たちエンジニアはこちらの機能を使い慣れていますが、ユーザ目線で考えると少し難しいと思われます。今回、アサインされている案件で「全ユーザを対象にユーザテーブルの拡張項目で表示非表示制御を実装したい」というご要望から意外な使い方をしたため、本記事でご紹介いたします。

## はじめに

APIやスクリプト、サーバスクリプトについてよくわからないという方もいらっしゃると思いますので、まずは基礎知識からご紹介いたします。

## Pleasanterの開発者向け機能について・・・

Pleasanterの開発者向け機能の中で本記事で対象としている下記についてご紹介いたします。

* API
* スクリプト
* サーバスクリプト

そもそも、上記の3つは下記のように大きく2つに分けられます。

* 外部用
* API

* 内部用

htmlでJavascript処理を出来るようにテキストファイルを読み込む

一度やったのだけど忘れてしまって、やり直してみました。

fileからtextareaに出すにはJavascriptを読み込み時に一度だけ読み込めば、objectが常駐して閉じるまでtextareaの選択リストを更新してくれます。

textareaをクリックして、実行ルーチンはこれとは関係ありません。
**htmlの見本**
“`html