f@ctor

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

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

より早く、より便利になったStorybook 8

Storybook 8がリリースされたので、簡単にまとめ。

https://storybook.js.org/blog/storybook-8/

– 📸 ビルトインのビジュアルテスト
– ⚛️ React Server Componentのサポート
– 🎛️ ReactのパフォーマンスアップとVue control autogenerationの改善
– ⚡️ Vite5やVitestのサポート
– 🧪 2-4倍高速なテストビルド
– 📲 モバイル・デスクトップUIの刷新
– 🙅‍♀️ 非ReactプロジェクトでのReactへの依存性を削除

## 特に気になったもの

### ビルトインのビジュアルテスト

– アドオンで、ChromaticをStorybookに組み込み
– ワンクリックですべてのストーリーを同時テストし、変更点を特定可能
– CIのワークフローを、Storybookの中で直接実行可能に

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

元記事を表示

Google Map上にベクトルタイルを描画してみた

# 概要説明
ベクトルタイルを、Google Map上に描画する方法を調査してみました。
結論から言いますと、Vector-Tiles-Google-Mapsといライブラリを使用して、Google Map上にベクトルタイルを描画します。描画のイメージは以下になります
![qiita1 (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2916958/3015f77b-f370-b0c4-5243-97cab51659b6.gif)

## 使用したもの
### Vector-Tiles-Google-Maps
Google MapにベクトルタイルをレンダリングするためのJavaScriptライブラリ。

https://github.com/techjb/Vector-Tiles-Google-Maps/tree/master

### ベクトルタイル(TerraMap API町丁目ポリゴン)
今回使用したベクトルタイルは、TerraMap APIの町丁目ポリゴンデータをベクトルタイル配信にしたも

元記事を表示

先日の続き

解決策が分かったため記述

どうやらrubyとJavaScript を同時に使うことは相性が悪かったことが原因とメンターさんに伺いました。
解としては、該当するviewファイルの中の

“`ruby
<%= form_with model: @item, local: true do |f|%>
“`
のなかに`data: {turbo: false},`を追記した
“`ruby
<%= form_with model: @item, data: {turbo: false},local: true do |f|%>
“`

と記述すること。でした。

元記事を表示

javascriptでオブジェクトが入った変数をコピーする方法

JavaScriptでオブジェクトが入った変数をコピーするには、いくつかの方法があります。

## 1. 浅いコピー（シャローコピー）

オブジェクトの参照をコピーする方法です。オブジェクト内のプロパティは共有されます。

方法

– Object.assign()

“`javascript
const obj1 = {
name: “John”,
age: 30,
};

const obj2 = Object.assign({}, obj1);

// obj1とobj2は同じオブジェクトを参照している
console.log(obj1 === obj2); // true

// obj1のプロパティを変更すると、obj2も変更される
obj1.name = “Mary”;
console.log(obj2.name); // “Mary”
“`

コードは注意してご使用ください。
– スプレッド構文
“`javascript
const obj1 = {
name: “John”,
age: 30,
};

const obj2 = { …obj1

元記事を表示

js 数値にsort()使ってもうまくいかない理由

## jsのソートがうまくいかない
kintoneカスタマイズのために、javascriptを練習しているとこんな現象が起きた

“`js
const array = [2, 99, 80, 2, 19, 22];
array.sort();
console.log(array); // 出力 Array(6)[ 19,2,2,22,80,99 ]
“`
うまくいけば
“`js
// Array(6)[ 2,2,19,22,80,99 ]
“`
と出力されるはずだ。

## sortメソッドはデフォルトだと文字列として要素を比較する
sort()メソッドは本来、デフォルトだと文字列を比較するメソッド。つまりアルフォベット順にする。数値として比較したいときは、比較関数を用いる

## 比較関数とは？
sort()メソッドに指定するコールバック関数。[MDM](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)では`compareFn(a, b)`と表現さ

元記事を表示

Google SlidesやGoogle Docsで入力内容を取得する

数時間が溶けてしまったので、自分用メモを兼ねて公開しておく。

# 問題点
ブックマークレット等、任意のWEBサイトにコードを流し込める状態で、ユーザが入力した文字を取得したい。Google Spreadsheetを含む多くのWEBサイトでは、以下のようなコードを流し込むと可能である。

“`js:Google Slides 内
window.addEventListener(“keydown”, e=>{
console.log(e.key+”を押した！”);
});
“`

しかし、Google Slides（Googleスライド）とGoogle Docs（Googleドキュメント）は、このコードでは思っている通り、動作しない。正確に言うと、上部にあるメニューの部分をクリックした後に入力したキーは取得できる。しかし、スライド内の文字を編集している時は、このイベントは発火しない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197285/d97c73a7-b345-7d

元記事を表示

【WordPress】GTranslateのウィジェットをcssでカスタマイズして好きなところに設置する

## WordPressサイトに超お手軽に翻訳機能を搭載できる

GTranslate というプラグインとその使い方の記事が大量にあるのですが、
意外とウィジェットをカスタマイズして設置する方法が見つからなかったので書きます。

雑なスクショ&デザインで恐縮ですが、こんな感じで好きな翻訳ナビを作れます。

![スクリーンショット 2024-03-12 20.58.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3733749/9146961d-b33c-e75e-05eb-f96a08c5b6be.png)

### [1]. wp管理画面側でプラグインを追加・有効化

「Translate WordPress with GTranslate」というプラグインです。
「今すぐインストール」して有効化します。

### [2]. 設定画面を開いて設定する
プラグイン > GTranslate > 設定 を開き、以下の設定をしていきます。
– **ウィジェット表示**： 言語コード
　後で整形し

元記事を表示

生年月日入力フォームに「西暦と和暦」を表示するよう実装した話

# はじめに
自分の生まれた年は西暦で分かると思いますが、自分の親や親せきの人の生年月日は西暦だけだと分からないですよね。

そこで西暦と和暦を両方表示させてユーザーが選びやすいように、実務で実装を行ったため、備忘録として残します。
# 使用技術
HTML, Javascript, Laravel

# 実装コード
HTML
“`html

OTHERカテゴリの最新記事