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

jQuery無しの環境で「matchHeight」が使いたい

# はじめに
jquery.matchHeight.js
使用したことはありますでしょうか？
自分はこれまで何度もお世話になってきました。

https://github.com/liabru/jquery-match-height

しかし昨今、私は下記が気になっていました。
– jqueryに依存しない環境がメジャーになり、使いにくい場面が増えている
– jqueryのresizeイベントを利用していることで、パフォーマンス的にも良くない点がある

# 目標
そこで、この記事では 「jquery.matchHeight.js」 を参考にしつつ、以下の点を達成した、気軽に使用できるコードを提示したいと思います。
– jquery非依存
– matchHeightとして必要な、横並びの要素の高さを揃え、リサイズされた時には高さを再設定する処理
– パフォーマンスを改善
– 機能を絞ってシンプルに

# 完成コード
“`javascript: matchHeight.js
export default class MatchHeight {
constructor(targetC

スライドして実行するUIとそのアクセシビリティ

# スライドして実行するUI

旧iOSのスライドしてロック解除やチケット系アプリのスライドして入場など、わざわざスライドして実行させることで誤動作を防ぐUIがあります。ツイキャスにもイベントのチケットを販売できる機能があり、この機能の実装時に以下のようなスライドして入場するUIを実装しました。この記事ではその実装とアクセシビリティ対応を紹介します。

# 実装

以下に簡略化したサンプルコードを示します。特に難しいことはしていないのですが、ポイントとしては

– スワイプを始めたところところからの差分でスライダーを移動させる
– スマホ対応のためにスワイプ時はtouchmoveをキャンセルする

あたりだと思います。

Schematics で使える6つのユーティリティ関数

## はじめに

みなさまの開発現場では、JavaScriptフレームワークは何を使っていますでしょうか？弊社製品[^1]では Angular を使ったプロジェクトが多数存在します。日々、たくさんの要求からビジネスロジックを実装していくためには、単純な処理のプログラムは自動生成できるようにしておいて、より製品の価値を高め競争優位となる機能の開発に集中したいものです。Angular では **Schematics** というコードジェネレータが存在します。高機能なツールである一方で公式リファレンスに具体的な内容が少なく、実装の難易度が高いです。これまでの開発経験でジェネレータ実装の際に、公式リファレスに記載が少なくWeb検索やGitHubリポジトリなどのコードを読むことで把握することができたTipsを、同じようなスタックで開発を行う際のストック用として記しておきます。

## ソーステンプレートで使えるユーティリティ関数
アプリケーションのコードを生成するテンプレートを作る際には、DBのテーブル名はスネークケース、クラス名はパスカルケースなど、オブジェクト毎に命名規則が異なる場合がありま

memo・useCallback・useMemoをそろそろちゃんと理解したい！【Reactパフォーマンス最適化】

この記事はAll About Group（株式会社オールアバウト）Advent Calendar 2023の21日目の投稿です。

https://qiita.com/advent-calendar/2023/allabout

## はじめに

こんにちは、[株式会社オールアバウト](https://corp.allabout.co.jp/)の@hide2020です。

Reactのパフォーマンス最適化に対する理解を深めるため、memo・useCallback・useMemoについて、勉強しつつまとめてみました。

この記事を読むことで、以下の悩みや疑問を解消できるでしょう。

– memo・useMemo・useCallbackの使い方が分からない..
– memo・useMemo・useCallbackの使い所が分からない..
– memo・useMemo・useCallbackの使い分けが分からない..
– Reactのパフォーマンス最適化って何をすればいいの？

少しでも **「memo・useMemo・useCallbackがよく分からない。。」** と感じている方の参考に

D3.jsでグラフ書いてみる

Webでデータを見せるときによく使われている[D3.js](https://d3js.org/)を使ってグラフを書いていきます。
D3.jsはデータを視覚化するときに便利なJavaScriptのライブラリです。
D3とはData-Driven Documentsのことだそうです。

今回主に使用するSVGについては下記記事をご参照ください。
[SVGの描画領域](https://qiita.com/takeshisakuma/items/a6a06902e955acad5c99)
[SVGの扱い方](https://qiita.com/takeshisakuma/items/6bd2b4cc9fb4edf61288)
[SVGの記述方法](https://qiita.com/takeshisakuma/items/777e3cb0a54ea7b1dbe7)
[CSSによるSVGアニメーション](https://qiita.com/takeshisakuma/items/4942579825f75b4153f9)
[JavaScriptによるSVGアニメーション](https://qii

addEventListener(‘resize’)をレスポンシブ対応で使うときの注意

この記事は [ここのえ Advent Calendar 2023](https://qiita.com/advent-calendar/2023/99no_exit) Day 21 の記事です。

# 超忙しい人向けの要約

Resizeイベントは `height`がガンガン変わるので `width` を見ておいた方がよい

# ブラウジングしているだけでResizeイベントが走る？

今回はJavascriptのレスポンシブ対応に関するちょっとしたTipsです。

レスポンシブ対応などの関係で、ブラウザのサイズが変更された際にアニメーションを再発生させる、といった何かしらの処理を行うことがあります。そんな時に`addEventLisnter`で`resize`のイベントを取り扱います。

“`sample.js
window.addEventListener(‘resize’, () => {
console.log(“on resize”)
})
“`

開発環境にiPhoneで接続し、Safariで開きます。iPhone上ではコンソールを確認できないので、Macbook側

【JavaScript】Promise 〜 初めてのAPI操作 〜

初めまして、現在プログラミングスクールで学習中のやまちゃんと申します。
Reactを勉強してみたいなと思っていましたが、そもそもJavaScriptの基礎を
さらっとしか触れていなかったので勉強することにしました。

その中で非同期処理で大事だとされているPromiseについて少し調べてみました。
今回はcatAPIを用いて猫画像を取得する非常にシンプルなコードで見ていこうと思います。

※ この記事は「RUNTEQ Advent Calendar 2023」の21日目を担当した記事です。
***

:::note warn
現在プログラミング勉強中の初学者です。
内容に誤りや補足情報等ございましたら、コメント・DM等で
教えていただけると幸いです。
:::

#### そもそも非同期処理とは？
JavaScriptでは基本一つの処理が完了するまで他の作業はできませんが、
非同期処理は一つの作業をしている間に他の作業ができるようにした仕組みの事です。

参考記事
[非同期処理とは何か、何が嬉しいの？](https://qiita.com/yunity29/items/7ccc8

非同期処理が難しすぎるから少しだけ整理してみた

## はじめに
今まで特に意識せずにAPIコールしていたのですが、JavaScriptの[Fetch API](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API)を使うことになり、いざ書いてみるとasyncやawait、Promiseなどの非同期処理がわかっていないことに気づいたので、整理しようと思いました。

まだ理解や解釈が曖昧なところがあるため、間違っているところなどありましたら教えてくださると嬉しいです🙇

### 参考
https://jsprimer.net/basic/async/

## JavaScriptはシングルスレッド
まずはJavaSctriptがどのようにプログラムを実行しているのかを知る必要があります。

JavaScriptでは、プログラムの実行は**シングルスレッド**で行われます。
プログラムを実行しているのが1人しかいないイメージです。コードを順番に処理していきます。**複数の処理を同時に行うことはできません。**

## 非同期処理とは
では非同期処理とはなんでしょうか。

>非同期処

「rails console」を使ってRedmine上のスケジュールを一括変更する方法

# 「rails console」を使ってRedmine上のスケジュールを一括変更する方法

[Redmine Advent Calendar 2023](https://adventar.org/calendars/8974)の20日目の記事として作成しました。

* * *
## 背景

プロジェクトは長期の工程を扱ったり、不確実性な要素をたくさん含んでいるため、外部や内部の要因でプロジェクトの途中でスケジュールの変更やリソースの変更、予算の変更などが頻繁に発生します。そのため、プロジェクト管理ツールは、プロジェクトの変更に合わせて、柔軟にシステム上でも情報を変更できる必要があります。しかし、残念ながら、Redmineでスケジュールを一括変更させる方法がありません。

Redmineでスケジュール管理をする一般的な方法を確認します。Redmineでスケジュール管理をするためには、チケットに開始日、期日を登録すると、自動的にガントチャートを作成できるので、スケジュールの管理をガントチャートで確認することができます。

![image.png](https://qiita-image

Array.prototype.shift(),unshift(),push(),pop()を北斗の拳でアタァする。

shift(),unshift(),push(),pop()
どれがどれだかわかりにくい!!

ということで、分かりやすくまとめてみました。

### shift
`配列の最初の要素を削除` し、その要素を返します。
例えば、[1, 2, 3] という配列で shift を使うと、1 が削除されて 2, 3 が残ります。
「次の段階へ`シフトする`」とか言いますね。
それはつまり、`元の所からはいなくなる`(削除)ということですね。
こんな感じです。
“`js
const array = [‘bat’, ‘rin’, ‘ken’]
// デレレレー! 先に行ってるぜ
const first = array.shift()
console.log(first) // bat
console.log(array) // [‘rin’, ‘ken’]
“`

### unshift
配列の最初に一つ以上の要素を追加し、新しい配列の長さを返します。
例えば、[1, 2, 3] という配列に unshift(0) を使うと、配列は [0, 1, 2, 3] になります。
`un`は、元の単

Babylon.js Playground上のサンプルで自分が欲しい部分を ChatGPT に取り出してもらう【完走賞ゲット-22】

:::note info
※ [Qiita の完走賞をゲットするための条件は「単一／複数のカレンダーに投稿した記事が合計25」です](https://twitter.com/Qiita/status/1593441648796524545)
:::

この記事は、「[完走賞ゲットのため小ネタ 25記事を投稿しようとチャレンジ v2 Advent Calendar 2023](https://qiita.com/advent-calendar/2023/youtoy)」の 22日目の記事です。

## 今回の内容
今回の内容は、Babylon.js Playground上で公開されているサンプルで、自分が欲しい部分がその全体ではなく一部だという時に、ChatGPT に取り出しをやってもらった話についてです。

以下の記事に書いた内容をやる中で、Babylon.js Playground上で公開されていたパーティクルを使った描画をいくつか見ていきました。その中で、パーティクル描画のコアの部分のみを取り出したいということがあり、それをやるのに試しに ChatGPT でやってみたという流れのも

JavaアプリケーションをHTML5やWebAssembly/JavaScriptに変換できますか？


一般的に信じられていることとは異なり、Javaはまだ完全に終わったわけではなく、特にソフトウェア業界では、全体で2番目に人気のあるプログラミング言語です。

非常に活発なコミュニティ、豊富なツールのエコシステム、膨大な数のライブラリとフレームワークがあり、後方互換性を保ちながら適応と進化が可能で（ほとんどの場合）、今でも業界で広く使われています。

# 最新のエンタープライズ・アプリケーション
Javaはサーバーサイドやネイティブ・アプリケーションに最適な環境を提供しますが、最近のエンタープライズ・アプリケーション・クライアントはHTML5標準への移行が進んでいます。これは、ユーザーの要求を満たすために、幅広い

React Three Fiber(R3F)勉強1: プロジェクトを作りたい

# はじめに
以前、[Reactのチュートリアルをまとめた記事](https://qiita.com/skm_bnn/items/64fa6ccb58101eadbb63) を投稿しました。今回は、 React Three Fiber(R3F)を勉強して、Reactアプリケーション上で3Dグラフィックスを動かせるようにしていきます。筆者はThree.jsすら触ったことがない全くのド素人ですが、公式リファレンスを頼りにR3Fの基礎を固めていきたいと思います。

# R3Fとは？
R3Fは、ReactのコンポーネントベースのアーキテクチャとThree.jsの3Dグラフィックス機能を組み合わせたものです。これにより、直感的に3Dアプリケーションの開発ができるとのことなので勉強をしていきたいと思います。

# プロジェクトのセットアップ
R3Fのプロジェクトをローカル環境で作成していきます。プロジェクトファイル名は“`sample0“`とします。

## Reactプロジェクトの作成
手動でプロジェクトの作成をしていきます。[この記事](https://qiita.com/skm_bnn/

【JavaScript】

元記事を表示

JavaScriptで指定月日まであと何日か表示したい！

# 目指すもの
1. 現在から指定した月日までカウントダウンしたい。
1. 指定月日になったら、 **その日だけ** 表示を変えたい。

# 実際に作ったやつ
[WEBサイト](https://null8r.github.io/uruharushia/)
[GitHub](https://github.com/null8r/uruharushia/)
[JavaScript](https://github.com/null8r/uruharushia/blob/main/src%2Fjs%2Fbirthday-count.js)
# JavaScript
現在の日付を **2024年1月1日**、指定月日を**2024年1月22日**とする。

``` js:プログラム
// 表示させたい文字入れるため
let msg;

function countDown(){
// 現在の「曜日 月 日 年 時 分 秒」を取得
let nowDate = new Date();
// nowDateを「1970年1月1日00時00分00秒」から何ミリ秒経過したかに変換

ドラクエ式縦列パーティ

いいかんじの距離で後ろについてくる縦列パーティ↑のロジック
ストリートファイターのコマンド入力もこんな感じのロジックだと聞いた。
```js
var party = new Party(
new Member(0),new Member(1),new Member(2),
new Member(3),new Member(5),new Member(6),
new Member(7),new Member(8),new Member(9),
new Member(10)
)
var camera = new Camera(...party.items)
party.camera = camera.delta
```
```js
class Party{
constructor(...a){
this.ite

Bunで生成したバイナリがdistrolessコンテナ上で動かない【解決】

# 結論

`gcr.io/distroless/static-debian12`ではなく`gcr.io/distroless/base-debian12`を使え！

# はじめに

Bun、速くて身軽で快適ですよね。

もはやyarnやpnpmなどのパッケージマネージャは不要だし、ランタイム同梱のバイナリまで生成してくれるのでDockerfile職人にも優しいです。

しかし今回、一部のdistrolessイメージではBunが生成するバイナリを動かせないという事象に遭遇したため、解決方法と共にこちらに残しておきます。

# 使用したDockerfile

```Dockerfile
FROM oven/bun:1 as install
WORKDIR /temp/build
COPY package.json bun.lockb /temp/build/
RUN bun install --frozen-lockfile

FROM install as build
COPY . .
RUN bun run compile

FROM gcr.io/distroless/static

MySQL X Dev API から位置情報を検索してみた（リレーショナル編）

このエントリは、[RDBMS-GIS(地理情報・位置情報) Advent Calendar 2023](https://qiita.com/advent-calendar/2023/rdbms_gis) の20日目です。「RDBMS-GIS Advent Calendar」では参加者を絶賛募集中です！軽いネタでもいいので、お気楽に参加ください！

MySQL には、昔ながらの SQL インターフェースの他に、[X Dev API](https://dev.mysql.com/doc/x-devapi-userguide/en/) というプログラム的なインターフェースもあります。これは、主には MySQL でリレーショナルなデータだけではなく、ドキュメントデータ（JSON）も扱えるようにする[ドキュメントストア](https://www.mysql.com/jp/products/enterprise/document_store.html)機能のために設計されたものではありますが、コレクション (リレーショナルでのテーブル相当) - ドキュメント (リレーショナルでのレコード相当)で管

既存のNext.jsプロジェクトにshadcn/uiを導入してみました | yarnでの導入

## はじめに
現在プログラミングスクールに通っている者です。個人開発をする中で、Next.jsプロジェクトを作成した後に、shadcn/uiを導入したいと思い公式サイトを確認していたのですが、いまいちよくわからなかったため導入した内容を備忘録として残したいと思います。

https://ui.shadcn.com/

:::note warn
注意
プロジェクトの内容によってはこちらのやり方で正しく動作するとは限らないため、一度テスト環境等で試していただくことをお勧めいたします。また、私の場合はyarnを使用しているため、基本的にはyarnを使用したセットアップとなることご了承いただけますと幸いです。
:::

## shadcn/uiの導入
プロジェクト内に移動してから実施してください。
まず、yarnを使用してshadcn/uiをプロジェクトに追加します。
```bash
$ yarn add shadcn-ui
```

インストール後、shadcn/uiの初期化を行います。

```bash
$ yarn shadcn-ui init
```
以下、選択していきます。入力項目

エンジニアへの転身：30歳、二児の母が外国で歩む新たなキャリアの道

# **序文**
株式会社エアークローゼットに今秋入社したばかりの藤崎です。この記事はエアークローゼット Advent Calendar 2023の20番目の記事です。外国人であり、しかも二児の母であることから、いい年（30歳）にもかかわらず新しい職に転職したことで、「どうやって！？」とLinkedInなどでよく尋ねられることがあります。そこで、今回はエンジニアになるまでの経緯について書いていこうと思います。

# **まずは決断**

28歳のとき、「ウェブ開発者になりたい！」と思い切って決断しました。経験は？ありませんでした。パソコンが得意？別に得意ではありませんでした。でも、まあ、「やる」と決めたのでやり切るしかなかったです！

# **どうやって勉強した？**

​​最初は、Eloquent Javascriptのような本やUdemyのオンラインコースなどを使って独学で勉強しました。しかし、数カ月経ったら、独学で勢いを維持するのはとても難しいことに気づき、コーディングスクールに通うことにしました。コーディングスクールでは、オブジェクト指向プログラミング、Javascript、R