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

Oraを用いたローディング・スピナーの途中でconsole.logを綺麗に出力する

CLIツールを作っていて[ora](https://www.npmjs.com/package/ora)でスピナーを出しながらconsole.logでログも出力したい

例えば以下のようなケース

“`js
import ora from “ora”;

const spinner = ora(“loading…”).start();

console.log(“this is logging in the middle”);

spinner.succeed();
“`

上記を実行すると以下のようになってしまう。


途中で出力したログのせいでspinnerがおかしなことになっている。

これを回避するには `console.log` の前後でspinnerを停止し、再レンダーしないといけない

“`diff
const spinne

QRコードを生成するChrome拡張機能を作る

記事「[JIS X 0510 – QRコードの GIF 画像を HTML+JavaScript (ローカル) で生成する](https://qiita.com/ikiuo/items/824b914ccd065b57a887)」を弄って Google Chrome の拡張機能（デベロッパー モード用）としてみました。


https://github.com/ikiuo/google-chrome-extension-genqrcode

Next.jsにhuskyとlint-stagedの導入とコミットの時のエラー回避

## 環境

“`bash
“scripts”: {
“dev”: “next dev”,
“build”: “next build”,
“start”: “next start”,
“lint”: “eslint src”,
“lint:fix”: “eslint src –fix”,
“format”: “prettier . –write”,
“prepare”: “husky install”
},
“dependencies”: {
“next”: “13.5.6”,
“react”: “^18”,
“react-dom”: “^18”
},
“devDependencies”: {
“@types/node”: “^20”,
“@types/react”: “^18”,
“@types/react-dom”: “^18”,
“@typescript-eslint/eslint-plugin”: “^6.19.0”,
“@typescr

【React】検索ボックス実装時のパフォーマンス改善案②

検索ボックスを実装したら画面が重たくなった…
という方向け
その②です

その①
https://qiita.com/nakakobiz0281/items/6acecb0e29824b463fb4

### 原因：onChangeのたびに不必要な画面レンダリングがされている

処理が重くなりがちな例
“`example.js
export function Example() {
const [nameList, setNameList] = useState(nameListData)
// ↓画面にレンダリングするのに高負荷がかかる長さの配列
const [veryLongList, setVeryLongList] = ([])
const filteringName = (inputValue) => {
if (inputValue) {
const filteredNames = nameListData.filter((name) =>
name.toLowerCase().includes(inputValue.toLowerCa

【JavaScript】配列でよく使用する関数

## 概要
JavaScriptの配列でよく使用する関数をまとめてみました。

## push()
push(): 配列の末尾に要素を追加し、新しい配列の要素数を返します。

引数：配列の末尾に追加する要素
返値：メゾットが呼び出されたオブジェクトの新しいlengthプロパティ
~~~JavaScript:
const arr = [1,2,3,4,5];
const firstElement = arr.push(6);
console.log(arr); //⇒[1,2,3,4,5,6]
console.log(firstElement); //⇒6
~~~

## pop()
pop(): 配列の末尾の要素を削除し、その要素を返します。

引数：なし
返値：配列の末尾の要素。配列が空の場合はundefinedを返す。
~~~JavaScript:
const arr = [1,2,3,4,5];
const firstElement = arr.pop();
console.log(arr); //⇒[1,2,3,4]
console.log(firstElement); //⇒

野球クイズアプリを開発します

## はじめに
突然ですが、今日からJavaScriptで野球のクイズアプリを個人開発します。

理由としてはこの前少し学んでみたJavaScriptが楽しかったこと、

そして好きな野球に関するアプリを作ってみたいという思いがあったからです。

https://qiita.com/Yuzaburo/items/750043e7b603c932ff06

## こんな機能が欲しい
Javascriptに関しては完全初心者ですが、以下のような機能は搭載したいと考えています。

* 基本的なクイズ機能
* 難易度に基づくポイントシステム
* 二人でのマルチプレイ機能
* ランキング機能

### 基本的なクイズ機能
まずは、4択クイズの基本的な機能を作成します。

– **問題と選択肢の表示**:
– JavaScriptを使用して、ランダムな問題とその4つの選択肢を表示します。
– HTMLとCSSでクイズのレイアウトをデザインします。
– **答えの選択とフィードバック**:
– ユーザーが選択肢をクリックすると、正解か不正解かを表示します。
– 正解

HTML & CSS & JavaScript でwebページに雪を降らせましょう！（寒いです）

# 初めに
今回のモノは、cssがメインなものになってるのかな？
と思われます。
意味不明なものは調べていただいたり、コメントして頂くと私も大変ありがたいです。

# 書いていこう
今回も説明（適当でごめんなさい）は、コード内で書いています。
cssはコメント多めですので、わかるとこは読んでいただかずとも大丈夫だと思います！
それではやってきましょう！

まず、HTML
“`html:index.html

【Web開発入門】localStorageとはなんぞや？Cookieとなにが違うんだい？

## 背景
仕事であるデータの保持期間について教えてほしいとの調査依頼がきました。
そこで社会人1年目のペーペーの自分はlocalStorageというものを知ったのでまとめようと思います。

## 目次
1. [localStorageってなんぞや?](#localstorageってなんぞや)
2. [どんなデータを保持できるのか](#どんなデータを保持できるのか)
3. [Cookieとの違い](#cookieとの違い)
4. [簡単な使用例](#簡単な使用例)
5. [使用するときの注意点](#使用するときの注意点)
6. [おわりに](#おわりに)

## localStorageってなんぞや?
Web開発を行う上で、ユーザーのブラウザにデータを保存する方法として、localStorageというものがあります。localStorageは、HTMl5の一部として導入されたWebストレージAPIの一つで、ユーザーのコンピュータ上にデータを長期間保存することができる仕組みです。これにより、サーバーにデータを送ることなく、ローカル環境でデータを保持できます。

> ユーザーのコンピュータ

WebページでKaTeXを使う

## やりたいこと
自分で作ったHTMLのWebページでKaTexがパースされるようにしたい。
ページ読み込みのタイミングではなく、ユーザーのアクションに合わせてパースされるようにしたい。

## 背景
サーバー上のcsvをjavascriptで読み取ってhtmlに表示するというwebページで、KaTeXを埋め込む必要があるということになったのですが、[公式HP](https://katex.org/docs/browser)のStarter Templateを使おうとしたら上手くいきませんでした。
今回はkatex.jsをサーバーに置いて呼び出す方法で対応することになったので、備忘録として書きます。

## 準備
[こちら](https://github.com/KaTeX/KaTeX/releases)からzipをダウンロードして、中のkatexフォルダをサーバーにアップロードしておきます。

## コードを書く
HTMLのheadタグ内にkatex.cssとkatex.jsへのリンクを記載します。
“`HTML

【websocket通信】チャットサービスでの欠落

こんにちは、私は機械学習のエンジニアとして週3、4で勤務しようとフリーランスエージェントを利用しています。

最近の面談で直近のPJでの技術的課題とその解決について聞かれ、うまく説明できなかったwebsocketでのチャット欠落問題について備忘録として残しておきます。

—
私はチャット機能のあるサービスの開発に当時携わっておりまして、無茶な工数と引き継ぎで炎上しつつもなんとか第一期リリースを終えた時にそれは起きました。

顧客から「チャットが表示されていたのに後から見直すとある時間の複数のチャットだけ無くなっている」との障害報告が来ました。

このチャットのやり取りをしている間は正常に表示できているところがややこしいところで、
##### 1.websocketはブラウザ間でハンドシェイクして通信している
##### 2.チャットのDBへの保存はサーバーへの通信で行なっている
と**二種類のレイヤーで通信している**ことに起因していると考えました。
チャットのやり取りが成功しているため。1の通信は成功していて2で失敗しているということですね。

対応策としては以下を実施しました。

【Kintone】 IPアドレスでソートしたい

Kintoneの一覧画面で、IPアドレスでソートを行いたい。

# 普通にソートするとどうなるか
下の画像のように、IPアドレスだけを持つアプリを作成した。


「IPアドレス」ヘッダーをクリックしてソートすると、


このようにソートされる。
できれば`192.168.1.1`→`192.168.2.1`→`192.168.10.1`の順でソートする方法が欲しい。

# IPアドレスを0パディングする
足りないケタを0で埋めれば思った通りにソートできそうだ。つま

マイクがない場合のZoomで、音声接続できない場合の応急処置

自分用メモ。

# 発生したトラブル
ブラウザ版Zoomを利用している際に、「コンピューターでオーディオに接続」ボタンが表示される。青いボタンを押すと、20秒程度は、音声が通常通り流れるが、しばらくすると音声が途切れ、同じような青いボタンが表示される。2023年12月末ごろから、継続的に発生。
20秒ごとに表示されるため、とてもうざい。


＜発生した端末＞
OS ： Windows 11 Home 23H2 22631.2861
Google Chrome バージョン ： 120.0.6099.216（Official Build） （64 ビット）

# 調査した項目
– Chromeのゲストモードに変更
拡張機能が問題なのかと考え、すべての拡張機能が無効となる、ゲストモードでZoomを開く。やはり同一の現象が発生。
– ブラウザをFiref

AstroとQiitaAPIを使って簡単なブログ？を作る

## AstroとQiitaAPIを使って簡単なブログ？を作る
今回はAstroとqiitaのAPIを使用して自分の作成した記事一覧を表示してみたいと思います。

### 環境
Astro 4.0.0
tailwindcss 3.0.24
react 18.0.0

### アクセストークン取得
QiitaのAPIを使用するためにはアクセストークンをヘッダーに含める必要があるので必ず準備しておきましょう。

**設定→アプリケーション→新しくトークンを発行**


“`.env
PUBLIC_QIITA_KEY=<取得したトークン>
“`
取得できたら見えないようにenvファイルに書き込んでおきましょう

### APIを叩いてみる ###
“`typescript:src/libs/qii

もうjsなんていらない！世界で流行っているHTMXについてまとめてみた

# HTMXとは

https://htmx.org/

HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。

**軽量** で **高速** で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。[WebSocket](#websocket)や[SSE](#sse)にも対応しているので、チャットアプリなどにも適している。

[2023 JavaScript Rising Stars](https://risingstars.js.org/2023/en)では、 **フロントエンド・フレームワーク**部門で見事2位に輝いた！(一位はReact)　似たような機能として、Ruby on Railsの[HotWire](https://hotwired.dev/)があるらしい。

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

どうしても頭の中にJavaScriptが出てきてしまう中学生の話

どうもAtsu1209です。
私は中学生なのですが、ある授業の時どうしてもJavaScriptが頭の中に
出ててきてしまうので、それを記事にしました。

# 技術
中学校の技術の授業でフローチャートを勉強することになりました。
そこで、`条件分岐`のフローチャートが出てきました。

それを見た瞬間頭の中に１つの単語が出てきました。それは、
`if` JavaScriptのifがどうしても頭から離れなくなりました。
どうしてでしょうね。

# 以上
今回は短い記事ですが、共感できる方がいましたらぜひコメントとハート
よろしくお願いします。
では

JavaScript documentオブジェクトの主なメソッド

# はじめに
JavaScriptでHTML要素を操作するのに使用するdocumentオブジェクトの，主なメソッドをアウトプットします．

# getElementByid
指定したID属性を持つHTML要素を取得することができるメソッド．
#### 使用例 : input内のテキストを取得
“`HTML:HTML
～～～

表示

～～～
“`

![input](https://lh3.googleusercontent.com/pw/ABLVV87IbQ9mkajB

AfterEffects expression よく使うものまとめ

いいものがあれば追記していきます。

Adobe Expressionの詳細はこちら

https://helpx.adobe.com/jp/after-effects/using/expression-language-reference.html

https://helpx.adobe.com/jp/after-effects/using/expression-basics.html

有志作のリファレンスページ

https://aereference.com/expressions

## 数値系

### 16:9画面内で16:9画像をはみ出さないように回転させるときの倍率

1080pの画面内で1080pの素材を回転するときなど

`203.972886119 %`

ちなみに逆数は
`49.026123963 %`

算出方法

Redux Toolkit を脳死して使う(チートシート)

Redux Toolkit の使い方を理解したいのでまとめてみました。
Redux Toolkit とは状態管理するライブラリです。

通常のReduxよりコード量が減って簡単に管理出来ます。

ポイントさえ抑えておけば簡単に使えます。

# Install
インストールは次の通りです。

“`cmd:npm Install
npm install @reduxjs/toolkit react-redux
“`

# index

一度追加したらほぼ編集しないと思います。該当の追加箇所をコピペしたらOK。

“`typescript:app/index.tsx
import React from ‘react’
import ReactDOM from ‘react-dom’
import ‘./index.css’
import App from ‘./App’
import { store } from ‘./app/store’ //追加
import { Provider } from ‘react-redux’ //追加

ReactDOM.render(

JavaはまだChromeやEdgeで使えるのか？解決策としてのCheerpJの紹介


広く使われているプログラミング言語であるJavaは、何十年もの間、ソフトウェア開発業界の基本技術となってきた。Webブラウザを含むさまざまなプラットフォームで数多くのアプリケーションを動かしてきた。しかし、テクノロジーが進化し続けるにつれ、[Javaとモダンブラウザの互換性](https://leaningtech.com/cheerpj/)が議論されるようになりました。

このブログは、その疑問を解決することを目的としている： Javaは今でもChromeやEdgeで使えるのか？

__Javaアプレットとその衰退__

Javaアプレットは、かつてWebブラウザでインタラクティブなコンテンツを配信するための一般的な手段でした。アプレットに

Visualforceでjqueryの使用

Salesforceに以下のような押すと日付が変わるボタンを実装したので書いておきます。
# 目標
– Salesforceにて、「前日へ」ボタンを押すとtable内にある`apex:inputField`フォームの日付が前日になる仕組みを作りたい。（ほかのボタンも同様）
– その際にjQueryを使用する。

# やったこと
### 1. ボタンを押した時に反応してほしい
– いきなり実装することは難しかったため、まずはボタンクリック時に`console.log()`でコメントを出力できるようにしました。
– 最初に書いたコードは以下の通りです。
“`apex


～省略～