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

【JavaScript】画面が固まるほど重い処理の対策【フリーズ】

## 結論

WebWorkerを使いましょう。

https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API/Using_web_workers

## サンプル

https://mogamoga1024.github.io/CountermeasuresForHeavyProcessing/

https://github.com/mogamoga1024/CountermeasuresForHeavyProcessing

## チラ裏

等差数列の和の公式を使えという反論は受け付けません。

noteのユーザー情報を取得ー覚え書き1

WEBサービスnoteからユーザー情報を抽出して
コンソールで表示するJavascriptの覚え書き

検索窓からキーワードで検索
検索結果のページでユーザー情報を取得します

※TOPページでは機能しない
**【取得する情報】**
・ユーザーネーム
・ユーザーID
・ユーザープロフィールのURL
“` Javascript
// XPathの一般的なパターン
const xpathPattern = ‘//*[@id=”__layout”]/div/div[1]/main/div[3]/div/div/div/div/div/div[2]/div/div/section/div/div[3]/div/div[1]/a’;

// XPathの一般的なパターンに一致するすべての要素を取得
const

フロントエンド開発の変遷④ JavaScriptライブラリ乱立時代

フロントエンド開発の変遷シリーズ第4回です。
第3回はこちら。

https://qiita.com/yusuke2310/items/411c6fd4cce9eba084f2

—

:::note
2009年ごろからWebアプリケーションはSPAを代表に、複雑な要件を求められる傾向にあり、フロントエンド開発のパラダイムシフトが起きていました。jQueryは次第に影をひそめ、MVC/MVVMを活用したBackbone.js、AngularJSなどの新たなWebアプリケーションフレームワーク、ライブラリが次々と出現しました。
:::

この時期フロントエンド開発でJavaScriptが担う役割は飛躍的に大きくなりました。この状況でフレームワークなどが提供する設計指針なしに実装を進めると、非常に**複雑でレガシー化を引き起こしやすいコード**になってしまう。

そこでMVC設計という従来サーバーサイドで普及していた概念がフロントエンドに導入されました。

MVCフレームワークとして人気の高かったのが**Backbone.js**でした。

:::note
MVCモデルを導入す

自作の「かな入力」のタイピングソフトで作業効率化を図りたい

# 概要

巷では、「ローマ字入力」より「かな入力」のほうが入力するキーが少ないので、タイピングが速いといわれていますよね。

しかし、「かな入力」で仕事の効率化を行っている人に出会ったことがありません。

そこで、「かな入力」を練習しようと思ったら、有名なウェブ上でのタイピングソフトの「寿司打」や「イータイピング」は、「かな入力」が対応していませんでした。
そのため、`JavaScript`で **「かな入力」のタイピングソフトを自作**してみました。

今回は、「かな入力」のタイピングソフトを作成して分かったことを紹介できたらと思います。

# 作ったタイピンソフト

### Githubのリポジトリ

https://github.com/ishi720/keyboardUI

### 実際の動作

まだ開発途中ではありますが、入力補助機能を使ってタイピングの練習ができます。
(黄色ボタンが次の入力ボタン、赤色ボタンが実際に入力したキーです）

![Animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazon

Qiitaで自作の素因数分解プログラムを公開したら添削されて30倍速くなった件(4)

# 前回までのあらすじ
詳しくは下記の記事を参照されたい。
[Qiitaで自作の素因数分解プログラムを公開したら添削されて30倍速くなった件 – Qiita](https://qiita.com/TETSURO1999/items/ffc1cae68c16a5c26fde)
[Qiitaで自作の素因数分解プログラムを公開したら添削されて30倍速くなった件(2) – Qiita](https://qiita.com/TETSURO1999/items/28ca00f958628423d64f?1)
[Qiitaで自作の素因数分解プログラムを公開したら添削されて30倍速くなった件(3) – Qiita](https://qiita.com/TETSURO1999/items/38ddcc0f4f3411924fe9)

# エラトステネスの篩（ふるい）のチューニング

前回の記事のコメント[^1]より，重要な助言を頂いた。それは素数判定テーブル `table[]` への書き込み完了を待たずに素数リスト `list[]` の作成を開始できること。この結果，素数判定テーブル `table[]`

自前サイトを３ヵ国語対応させたい話

僕は、将来スペイン語圏に移住したいという夢を持っています。

若いうちに稼げるだけ稼いで、早くリタイアして、その国で多くを求めず幸せに暮らす。

今から興味津々なので、スペイン語も勉強しています。

なので、自前の創作サイトも勉強がてらスペイン語に対応させることにしました。

サイト自体はすでに英語に標準対応しているので、あとは適切な表現に変えていくだけなのですが、

まだ始めたてなのでそれがわからず…

それでも、とりあえず入口ページだけでもスペイン語を追加しようと思い立ったのでした。

そのコードがこちらです。

“`HTML

Select language:

javascriptで配列の仕分け方をChatGPTにコードレビューしてもらいました。

# やる事
numbers配列内の数値を３以下とそれ以外で分けたオブジェクトを作る

“`ruby:js
const numbers = [1, 2, 3, 4, 5, 6];

{
ika: [1,2,3],
ijo: [4,5,6]
}
“`

## まずは自分で書いてみる

“`ruby:mycode.js
const numbers = [1, 2, 3, 4, 5, 6];

let siwake = {
ika: [],
ijo: []
}

numbers.forEach((number) => {
if (number <= 3) { siwake.ika = [...siwake.ika, number] } else { siwake.ijo = [...siwake.ijo, number] } }); console.log(siwake); ``` スプレット構文をループ処理内で使っているあたりを怒られそう。 # 質問してみた Q. 上記のようなjavascriptのコードのように3以下と

どうやってReact Function ComponentをMockするか

## 検証環境

Jest

React Testing Library

Create React App(上記が含まれるので)

## 背景

サードパーティ製のComponentを避けてテストを行うために、ComponentをMockする必要がありました。

特に、Amplify-uiなど事前設定が必要なComponentに対しては有効な手段となります。

## テスト環境を作成

“`bash
# 作業フォルダを作成
mkdir work && cd work

# Package ManagerでCRAを利用してReact Applicationを生成する
pnpm create react-app jest-app –template typescript

# フォルダに移動
cd jest-app

# componentsとtestフォルダを作成
mkdir src/components src/tests

# Editorを開く
code .
“`

Componentを作成

以下をサードパーティ製のComponentやテスト範囲外の”複雑なCompo

Oracle Database 23cで追加されたMLE JavaScript Post-Execution Debuggingを試してみた

Oracle Database 23cではMultilingual Engine(以下MLE)のJavaScriptに関する機能が大幅に強化されています。
今回はその中でもPost-Execution Debuggingと呼ばれるデバッグ機能について検証してみました。
こちらはMLE Moduleを実行した後に、JavaScriptコードの指定した箇所の状態を出力し、想定した結果になっているか確認できる機能です。
なおMLE JavaScriptの基本については以下の記事をご参照ください。
[Oracle Database 23cで追加されたMLE JavaScriptの基本的な使い方紹介](https://qiita.com/ssfujita/items/5651d35ebbf0d27e6dc1)

## 事前準備

必要な権限を付与しておきます。
詳細は上述した別記事をご参照ください。
特にPost-Execution Debuggingの利用には以下の権限が必要です。

“`sql
GRANT COLLECT DEBUG INFO ON TO <ユーザ名>;

【vue.js】draggableコンポーネントの基本的な使い方と導入方法

## draggableコンポーネントの導入と依存関係の設定

vue.jsについて初心者エンジニアに向けて、今回はdraggableコンポーネントの基本的な使い方と導入方法について解説します。draggableコンポーネントは、要素をドラッグして移動させることができる機能を持つコンポーネントです。これを利用することで、ユーザーが要素をドラッグして自由に配置することができるようなインタラクティブなアプリケーションを作ることができます。

まず、draggableコンポーネントを導入するためには、vue.jsのプロジェクトに以下のように必要な依存関係を設定する必要があります。

“`javascript
// package.json
{
// …

“dependencies”: {
// …
“vue-draggable-resizable”: “^2.2.1”
}
}
“`

上記の依存関係を設定した後、以下のコマンドで必要なパッケージをインストールします。

“`bash
$ npm install
“`

または

“`bash
$

【vue.js】ドラッグ可能なリストを作成するためのdraggableの活用方法

こんにちは。今回は、
vue.jsについて初心者エンジニアに向けて、ドラッグ可能なリストを作成するためのdraggableの活用方法についてご紹介します。

## リストの表示とデータバインディングの設定方法
vue.jsを使用してドラッグ可能なリストを作成するには、まずリストの表示とデータバインディングの設定を行う必要があります。以下のコードは、vue.jsを使用してリストとデータを表示する例です。

“`javascript