f@ctor

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

JavaScript関連のことを調べてみた2023年08月24日
目次

AI 術士に負けるな！今なら間に合うアブラカダブラ

AI 術士なる耳慣れない言葉が世の耳目を引く今日この頃、いかがお過ごしでしょうか？

日夜、「すてーぶるでぃふゅーじょん」なる所で苛烈な呪文開発競争が行われているそうです。これは負けていられませんね。

ですので、西洋呪術の王道アブラカダブラで迎え撃ちます。

我々は本格派ですから、さらに呪文の回文化を行い万全を期します。

ついでにコーディングで得られた知見とサンプルコードを共有します。

## 前提条件

– 回文プログラム
– 文字列を引数に取り、返り値に回文を返す関数
– 回文は引数に引数の逆順を結合する「パワー系回文」方式
– 最後の 1 文字は繰り返さない

これ単体ではあまり面白くないが、次のプログラムのパーツとなります。

– アブラカダブラ回文プログラム
– 回文プログラムを再帰的に適用することでアブラカダブラ風の呪文を作る関数

具体的には次のような答えを返すプログラムを作ります。

“`goal.txt
想定される答え:
ABCDEDCBA
ABCDCBA
ABCBA
ABA
A

なお、実在するアブラカダブラの呪文が書かれた護

元記事を表示

【Vue.js x AWS】CodeBuildのエラー「Did you mean to enable the ‘allowJs’ option?」の原因と解決方法

# 概要
`Vue.js`を扱ったプログラムをAWScodepipelineで自動デプロイしたら、ビルドステージで`Did you mean to enable the ‘allowJs’ option?`というエラーが表示されて失敗していました。
本記事では本エラーの解決方法を記します。

## エラー内容

CodeBuildのエラーログは以下の通り。

“`
error TS6504: File ‘/codebuild/output/src1493754208/src/xxx/app/src/views/Sample.vue.js’ is a JavaScript file. Did you mean to enable the ‘allowJs’ option?
The file is in the program because:
Matched by include pattern ‘src/**/*’ in ‘tsconfig.app.json’
ERROR: “type-check” exited with 2.
“`

エラーメッセージの内容を見ると、

元記事を表示

Grid.js　セルデータの編集について

　JavaScriptのグリッドライブラリのなかでも、よくできているGrid.jsですが、どうもセルデータの編集機能がない様です。セルデータを編集できるようにしてみたので、公開しておきます。
　仕組みとしては、テキストボックスをセルに表示させて、更新したデータでグリッドのセルデータも更新しています。ただ、Grid.jsのloadイベントが呼び出せないようで、Grid.jsに埋め込んだタグを読み込むために、setTimeOutを使って、時間を稼いで埋め込んだタグを読み込込んでいます。他にいい方があるとよいのですが。

動作はこちらから確認できます。

~~~index.html




Grid.jsの活用
?初めてのJavaScript

***:cherries:学んだことを随時まとめてく:cherries:***
~間違っている点があれば是非教えてください~
***
# 変数について
“`javascript
//変数宣言
let xxx; //変数宣言
xxx = “文字列”; //文字列や数値など
//再代入が可能
xxx = 123;
xxx = 456; //最後に代入された値が格納される
“`

# 定数について
“`javascript
//定数宣言および値代入
const yyy = “文字列”; //文字列や数値など値を代入しないとエラーになる
//再代入ができない
“`

# 出力について
“`javascript
//コンソールへの出力
///console.log(変数、定数、値など);
console.log(xxx);
>>456

//文字列に改行を含める場合①
console.log(“あいうえお\nかきくけこ”);
>>あいうえお
かきくけこ

//文字列に改行を含める場合②(長文の時に)
let me

CSSで3Dのボックスを作る手順

See the Pen
Just reviewing how 3d works in css by FrontendKanazawa (@jikkensya)
on CodePen.

Ruby, JavaScriptの命名規則比較

# 目的
フロントエンドをVue.js(JavaScript)、バックエンドをRails(Ruby)のアプリケーションを作成しており、
命名規則がどちらの言語の書き方なのか混乱したのでまとめる
# Ruby, JavaScriptの命名規則比較
|　記法 | Ruby | JavaScript |
| — | — | –|
| クラス | アッパーキャメルケース
例)`MyClass` | アッパーキャメルケース
例)`MyClass` |
| メソッド | スネークケース
例）`find_items` | ローワーキャメルケース
例）`findItems` |
| 変数 | スネークケース
例）`cart_item` | ローワーキャメルケース
例)`cartItem` |
| 定数 | 大文字のスネークケース
例）`MAX_WIDTH` | 大文字のスネークケース
例）`MAX_WIDTH` |

# 記法
| 記法 | 説明 |
| — | — |
| アッパーキャメルケース | 先頭と区切りの文字が大文字で、それ以

JavaScript の Selenium 使い方メモ (Node.js (Mocha))

JavaScript の Selenium の使い方メモ
HTML の要素(DOM) 取得は一番使い勝手が良い `By.css` になれると良さそう
環境構築とかはこちらを参考にしてください
– [JavaScript の Selenium 実行環境 (Node.js (Mocha) から Selenium 実行)](https://qiita.com/sueasen/items/cf6379a7efd0dea668ee)

あと公式ドキュメントはこちら
– https://www.selenium.dev/ja/documentation/

# 実行の待機
“`JavaScript
await driver.sleep(1500) // 引数はミリ秒
“`

# ファイル操作
“`JavaScript
const fs = require(‘fs’);

// 存在確認
fs.existsSync(filePath)
// ディレクトリ作成 (filePath 多重階層OK)
fs.mkdirSync(filePath, { recursive: true })
// ディレ

Chrome拡張機能の実装（入門から公開まで）

# はじめに
ふと、Chrome拡張機能を作ってみたいなと思って調べて作ってみました。
まずは用語とかの説明をつらつらと書いていきます。

作ってるところだけ見たいよって方は「作る」まで飛ばして読んでみてください！

# 拡張機能の開発について
## Chrome拡張機能とは
Chromeブラウザに機能を追加することができます。
自分がよく使うものだと [DeepL翻訳](https://chrome.google.com/webstore/detail/deepl-translate-reading-w/cofdbpoegempjloogbagkncekinflcnj) や [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) とかがあります。

## 拡張機能で使う技術
主に HTML、CSS、JavaScript で作られます。

### Chrome API
拡張機能では Chrome AP

シングルスレッドで実行されるJavaScriptがどのように非同期処理を実現しているか①

# ちょっと踏み込んだ視点でJavaScriptの非同期処理を視てみる
シングルスレッドで実行されているJavaScriptが非同期処理をどのように実現しているのか、少し踏み込んで調べてみました。
正直このあたりを知らなくても開発に差し支えはないと思いますが、仕組みを理解していることで性能面を考慮した開発ができるようになったり、他言語との差別化にも繋がると思います。

JavaScript初・中級者の方にとって、ステップアップするきっかけになればと思います。

※下記の記事が非常に参考になったので、参考リンク等はここから引用させていただいてます。
もっと詳しく知りたい方はこちらからどうぞ。

https://zenn.dev/canalun/articles/js_async_and_company

一度でまとまり切らなかったため、②に続く予定です。

# 概要

– 調査に至った経緯
– JavaScriptが非同期処理をシングルスレッドで実現する仕組み

## 調査に至った経緯

調査に至った経緯としては、こちらの記事を見ていたことが始まりです。

https://qiita.c

位置情報アプリに使用できるHEREロケーションサービス利用入門（まとめ記事）

# はじめに
HEREでエンジニアをしておりますkekishidaと申します。
本記事ではHEREロケーションサービス利用入門ということで、HERE公式のチュートリアルページについて紹介したいと思います。

まずは、拙記事ですが、これまでにいくつかのHEREロケーションサービスに関する記事を投稿しました。例えば、**Maps API for Javascript**関連では、

https://qiita.com/kekishida/items/c49df325fe4e32c9aac0

**REST API** (Route Matching API)では、

https://qiita.com/kekishida/items/e261f3c4c076b0425e0a

いくつかの記事について、多くの皆様にご関心を持って頂けたようですが、更にHEREロケーションサービス製品群を理解するために、詳細が記載されているHERE公式の**Developer guide**以外に公式のチュートリアル記事となるものはないか？というニーズがありました。（以下は**Developer guide**

[TypeScript] CommonJSプロジェクトの型定義で”export default”を使ってはいけない？！

## はじめに

JavaScriptで実装されているライブラリにおいて、`index.d.ts`で型定義を公開しているものがある。その中で、package.jsonに`”type”: “module”`の設定がなくCommonJSの設定になっているプロジェクトにおいて、以下のような`export default`を利用した型定義がいくつか見られた（以下の例は[axios-retry](https://github.com/softonic/axios-retry/tree/master)のindex.d.tsを少しわかりやすくしたもの）。

“`ts:index.d.ts
import * as axios from ‘axios’

declare namespace IAxiosRetry {
export interface axiosRetryConfig {
…
}
}
export type axiosRetryConfig = IAxiosRetry.axiosRetryConfig;

declare function axiosRetry(ax

Grid.js　使い方の例

　ブラウザ上で、グリッドを表示させるためのライブラリは有償、無償を含めて各種あります。もちろん有償のライブラリの方が高機能なグリッドがたくさんありますが、ここでは、MITライセンスで使うことができるライブラリとして、「Grid.js」についてシンプルな使い方をメモしておきます。
Grid.jsの公式サイト https://gridjs.io/
ドキュメント https://gridjs.io/docs
以下は、とりあえずデータを表示させる例です。

~~~index.html




Grid.jsの利用