ApexでJSのfindIndex的なメソッドを実装してみた

## 背景
特定の値が一致したら`Map`のキーを探したいというメソッドを作るためです。
そこでJS好きの僕はfindIndexを思い出しました。

## ロジック
ApexでJavaScriptのような`Map`の`findIndex`機能を実装するには、マップのエントリを反復処理し、各エントリを条件と照合する必要があります。Apexのマップは配列やリストのように順序付けられたインデックスを維持しないため、特定のキー値ペアの「インデックス」を条件に基づいて見つける必要がある場合、通常はリストを使用してこの機能をシミュレートします。

## 実装
以下は、Apexでこれを実装する方法の例です：
“`apex
public class MapUtils {
/**
* 指定された条件を満たすMapの最初のエントリのインデックスを見つけます。
*
* @param map 検索するマップ。
* @param condition 各エントリに対し

【2024年】これが最速！未経験から年収1000万のエンジニアになる完全ロードマップ！

### 未経験から年収1000万のエンジニアになる完全ロードマップ

Step1：Html CSS を学習する
Step2：JavaScript を学習する
Step3：React を学習する
Step4：ポートフォリオを作成する
Step5：正社員エンジニアになる（月収25万）
Step6：フリーランスエンジニアになる（月収50万）
Step7：単価を上げる（月収80万）

https://magicgifted.com/roadmap/

ブックマークレットで発生するClipboard APIの “Document is not focused.” をなんとかする

久々にまともなやつ。

# やること
– JavaScriptで何かしらの情報をクリップボードへコピーするブックマークレットを作る

# 道具
– Clipboard API

https://developer.mozilla.org/ja/docs/Web/API/Clipboard_API

# 背景
昔は、`document.execCommand(“copy”);` というコードがありました。
ただ、こいつ今は非推奨なんですよね……

https://developer.mozilla.org/ja/docs/Web/API/Document/execCommand

で、代わりになるClipboard APIという便利なAPIが登場しました。
登場からもうかれこれ5年以上は経過しているはず[未確認]で、最初は対応していないブラウザも多く、まだまだ`execCommand()`が使われていましたが、現在はもう（基本機能は）だいたいのブラウザで使えるはずです。

しかし、新しいAPIはとてもしっかりものなので、セキュリティがガッチリしているんですよね。~~は～～～面倒～～～~~

DOMとは

## DOMとは

DOMツリーは、HTMLドキュメントを表現するツリー構造です。木のように、各要素が枝分かれして繋がっています。

HTMLドキュメントの構造を理解しやすい: 視覚的に分かりやすく、ドキュメント全体の構成を把握しやすくなります。
要素へのアクセス・操作が容易: JavaScriptで特定の要素を操作したり、スタイルを変更したりする際に役立ちます。


## サンプルコード
“`html

タイトル

本文です

• 項目1

MapLibre　レイヤーから特定の市区町村の町丁目だけを抜き出して表示したいときのExpression

別の記事で、日本全国の町丁目ポリゴンのベクトルタイルから特定の市区町村の町丁目だけを色塗りする場面がありました。
その時のやり方があっているのか疑問だったので、振り返りつつ他の方法も考えてみます。
そのときの記事はこちら↓

https://qiita.com/4gou/items/0bd5dd6217d0fef64757#%E7%94%BA%E4%B8%81%E7%9B%AE%E3%83%AC%E3%83%99%E3%83%AB%E3%81%A7%E5%B9%B3%E5%9D%87%E5%B9%B4%E5%8F%8E%E3%82%92%E8%A6%8B%E3%82%8B

# index-ofでできけど、それでいいの？
その記事で使用した方法は以下のような感じです。（記事で使用したコードを少し簡略化しています）
ソースとして町丁目ポリゴンのベクトルタイルを指定し、レイヤーに町丁目ポリゴンの塗りつぶしレイヤーとラインレイヤーをセットしました。
“`js
import ‘./style.css’
// MapLibreの読み込み
import maplibregl from ‘map

Railsの動的プルダウンリストで`include_blank: true`を削除した際のJavaScriptの不具合とその解決法

## はじめに
Railsアプリケーションで動的なプルダウンリストを扱う際、初期状態を空白にすることがあります。このオプションは一般的に`include_blank: true`で実装しますが、この記述を削除すると、JavaScriptが正常に作動しなくなり、動的に選択肢を取得することができなくなる場合があります。特に、選択肢が一つしかなくユーザーがそれを変更できない場合、JavaScriptのイベントが発火せず、結果として動的に選択肢を更新できなくなる問題が生じます。この記事では、その問題の原因と解決策を一つのケーススタディとして紹介します。

## 問題の詳細

例えば、以下のコードは予約システムで使用されるフォームの一部で、ユーザーはスタッフを選択し、その選択に基づいて利用可能な時間帯のプルダウンリストが動的に更新されます。`include_blank: true`を使用して、初期選択肢として空白を提供しています。

“`erb
<%= form_with url: time_tables_path, method: :post, local: true, data: { co

Hexabase TypeScript SDKの使い方（フィールドの追加・更新・削除）

[Hexabase（ヘキサベース）](https://www.hexabase.com/)は企業においても安心して利用できるBaaS（Backend as a Service）を提供しています。多くのBaaSがそうであるように、主にフロントエンド開発者に利用してもらいたいと考えています。そこで現在、TypeScript SDKの開発が進められています。

この記事ではHexabase TypeScript SDKのインストールと、データストアのフィールドをCRUD操作する方法を紹介します。

## インストール

インストールはnpmやyarnを使って行います。

“`bash
# npmの場合
npm install @hexabase/hexabase-js

# yarnの場合
yarn add @hexabase/hexabase-js
“`

## インポート

インポートすると、 `HexabaseClient` というオブジェクトが取得できます。

“`jsx
import { HexabaseClient } from “@hexabase/hexabase-js

Webpack入門：実務で理解するための第一歩

# はじめに
業務で`Rails`の`webpacker`を利用しています。
ただ、`webpacker`の使い方もそうですが、その前に`webpack`を学んだ方が理解できると思いました。

なので、今回は`webpackとは？`を中心に、学んだことをアウトプットしようと思います。

# webpackとは？
`webpack`とは、JavaScriptやCSSなどを一つまたは複数のバンドルにまとめるためのツールです。依存関係のあるモジュールを検出し、ブラウザで利用可能な形式に変換してパフォーマンスを向上させます。

https://webpack.js.org/

イメージとしては、以下になります。

“`mermaid
stateDiagram-v2
A.js –> webpackでモジュールをバンドル（プラグインを実行）
.css –> B.js: ローダーで変換
.png –> C.js: ローダーで変換
B.js –> webpackでモジュールをバンドル（プラグインを実行）
C.js –> webpackでモジュールを

ESLintの設定を視覚化してくれるESLint Config Inspector

## はじめに
ESLintは2024年4月5日をもってバージョン9.0.0を迎え、ルール設定ファイルのデフォルト形式がFlat Configになりました。これにより、`eslintrc`で記述される旧形式が非推奨となりました([リリースブログ](https://eslint.org/blog/2024/04/eslint-v9.0.0-released/))。

Flat Configでは1つのファイルから中央集権的に設定を構築するので、どのファイルに対してどのルールが有効になっているかが把握しにくくなっています。
そのため、旧形式からの移行やルールの増減時に設定を確認する作業が困難になります。

このような時、ESLint Config Inspectorを利用することで、視覚的に有効なルールと対象ファイルを確認できます。

![スクリーンショット 2024-04-08 11.37.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591069/23e8f4e3-b488-b5df-45a5-8b

Docker Composeで３層アーキテクチャ（ JS + Python + MySQL）を構築する

# はじめに

Docker Composeで３層アーキテクチャの開発環境を構築していきます。

* プレゼンテーション層はJavaScript
* アプリケーション層はPython
* データ層はMySQL

を使用します。

ソースコードは[こちら](https://github.com/ayakakawabe/docker-three-tiered-architecture)


## 開発環境

* MacBook M2
* Docker v.25.0.3
* Docker Compose v2.24.5

## ディレクトリ構成

“`
root/
├ web/
| └ sample.js
├ app/
| ├ api.py
| └

【WYSIWYGエディタ】Summernoteのオリジナルボタンの作り方

## はじめに
前回、Summernoteのエディタ部分へWordやブラウザからコピペする際に、プレーンテキストでコピーされるようにカスタマイズする方法を解説しましたが、蛇足だったかなぁと反省。
ただ、自分的には必要な機能だったのでメモとしては有りかなぁということで、今回はSummernoteでオリジナル機能を持たせるために専用のボタンを作成してツールバーに表示する方法をメモっていこうと思います。

前回の記事の内容はこちら

https://qiita.com/chika_pon/items/8847966b4be2139306a0

## 1. 基本のソース
以前投稿した「【WYSIWYGエディタ】Summernoteのツールバーカスタマイズ」のソースです。

https://qiita.com/chika_pon/items/27bc6b47ccf967ce573b

“`html:test.html


inertiajsによるリンク、form submit、APIリクエストの実装

### 画面遷移のリンクの場合
Linkを使う。
※aタグを直接使うとSPAによる部分リロードのメリットがなくなる。

https://inertiajs.com/links

通常はaタグにレンダリングされる。

“`javascript:
import { Link } from ‘@inertiajs/vue3’;

About
“`

### formのsubmitによる画面遷移
inertiajsのrouterかそのヘルパーであるformヘルパー(useForm)を使う
useFormの場合はデータのエラー時や、初期値のバインドも簡単にできる。

https://inertiajs.com/forms

“`javascript