VUE + Element-UI : フォームインスタンスの初期値設定に関する問題

“`

“`

### コードの説明

– **`const registerForm = ref(null)`**：
–

【JavaScript】3Dプリンタ (paizaランク B 相当) やってみたのと図で解説

これのやつです。

https://qiita.com/official-events/9ab96aa95d62fe3cbdd7

# 問題
https://paiza.jp/works/mondai/b_rank_skillcheck_archive/3d_printer

# 考え方
問題を見た時に「????」てなりませんでしたか？
自分はなりました。入力値がよく分からなかったです。
一緒に見ていきましょうか。

> “`
> <入力される値>
> 入力は以下のフォーマットで与えられます。
> X Y Z
> (1,1,1) (1,2,1) … (1,Y,1)
> (2,1,1) (2,2,1) … (2,Y,1)
> …
> (X,1,1) (X,2,1) … (X,Y,1)
> —
> (1,1,2) (1,2,2) … (1,Y,2)
> (2,1,2) (2,2,2) … (2,Y,2)
> …
> (X,1,2) (X,2,2) … (X,Y,2)
> —
> …
> —
> (1,1,Z) (1,2,Z) … (1,Y,Z

ActiveAdminで、全てのチェックボックスを選択するチェックボックスを追加する

## 動機
[前回の記事](https://qiita.com/Erga-mion/items/5ba48dbeb10573dd70c2)では、ActiveAdminで、複数のレコードを関連づけるために、フォームにチェックボックスを追加していました。 その続きになります。

そこに、選択できるレコードの数が膨大になることが考えられるので、それらを全て選択できるチェックボックスを追加して欲しい、という要望がありました。

ActiveAdminのドキュメント等を確認しましたが、そういった機能は用意されていないようですので、JavaScriptで実装することにしました。（もしありましたらご指摘お願いします:bow:）
## 動作環境
– ruby 3.2.2
– rails 7.0.8
– activeadmin 2.14.0

## 実装
前回の記事のものと同じものになります。

`User` の作成・更新ページに、複数の`Book` を選択できるチェックボックスを追加しています。

“`mermaid
erDiagram
User ||–o{ BookReservation : u

TypeScript(JavaScript)の文法を学び，フロント，バック両方開発できるようにしよう(TypeScriptで学ぶプログラミング言語,React,クリーンアーキテクチャ,API)

みなさんTypeScript(JavaScript)でどんなことができるかご存知ですか？初学者向けの言語や大規模開発でよく使う言語だというイメージがあると思います．TypeScript(JavaScript)はフロントの開発からバックの開発前なんでもできる非常に有用な言語です．本記事ではプログラミングをしたことのない人やTypeScript(JavaScript)を触った人のステップアップのためなど幅広い方向けに書きました．また，Node.jsの仕組みやReact,Vue.jsでの応用例やAPI作成まで網羅しました．文法がわからなくなったら適宜文法の欄に戻って確認したり，逆に飛ばしてみたい方はどんどん先に進んで読んでいってください！

この記事ではTypeScriptについて以下の流れで説明します．
– TypeScript(JavaScript)の概要
– TypeScriptを学ぶ意義
– TypeScriptとJavaScriptの関係性
– TypeScriptの基本文法
– Helloworldプログラム(変数constの宣言とコンソール出力)
– 再代入可能

[paiza]1周目完走（【殿堂入りキャンペーン】村人の友好関係 (paizaランク S 相当)

# くぅ～疲れましたw
やっとJavaScriptで問題が一通り終わったよ～！
次回【Javaで2周目】、ディエルスタンバイ！！

https://paiza.jp/works/mondai/s_rank_skillcheck_archive/group_popularity

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!

“`javascript:groupPopularity.js
// [問題文（原文）]
// あなたは今「PAIZA の村」という、村人と交流しながら生活していくゲームで遊んでいます。
// 村人は合計で N 人であり、各村人は 1 ～ N で番号付けられています。
// このゲームの目的の一つは村の人々と仲良くなることです。
// これを示すパラメータとして、各村人と村人の間には「友好度」と呼ばれる非負整数が定められています。
//
//

【Javascript】DOMの概念について図解で端的に解説する

# はじめに

前々から「DOM」という言葉は知っていたのですが、あまり概念について把握してない状態で学習を進めていました。今回、Javascriptの基礎概念を網羅した動画で勉強したので、この記事にて共有できればと思います！

# DOMについて

### 概要

DOM(Document Object Model)とは、下図のように、**HTMLを描画するにあたって描画しやすいようにプログラムを整形してくれる仕組み**です。


上図より、「test」と出力するHTMLファイルを記述して、DOMで何らかの整形をして、画面に「test」と反映できていることが確認できます。
それでは、DOMでは具体的にどういったことが行われているか？を次で解説します。

### 内部ではどういったことが行われているか？

DOMの内部では、HTMLをツリー上に

【Vue】VeeVallidateによるカスタムバリデーションの作成

## はじめに
「サーバーへリクエスト送信する前に、フロント（Vue）側でバリデーションをかけるには何を実装すればいいんだ？」と疑問を持たれている方向けに投稿しました。

## 開発環境
|言語(FW,ライブラリ)|バージョン|
|—|—|
|vue.js |2.6.14 |
|nuxt.js/composition-api |^0.33.1 |
|vee-validate |3 |
|node |16.11.0 |

## vee-vallidateとは
Vue.jsでリアルタイムバリデーションを行うためのライブラリです。
入力時に不正な値があった場合、サーバーへ送信する前にエラーを表示させることができます。

## 実装内容
ユーザー登録時のパスワード入力のバリデーションエラーを表示する。

### 仕様
– パスワードには**大文字・小文字・数字**がそれぞれ1文字以上含まれていること。含まれていなかったものがあれば、バリデーションエラーを返す
– パスワードは**8文字以上16文字以内**で入力されていること。8文字未満もしくは16文字を超えた場合はバリデ

島探し (paizaランク S 相当) を妙な方法で解く

## 問題

https://qiita.com/official-events/9ab96aa95d62fe3cbdd7

昨夜投稿した際にこの企画を知って、

https://paiza.jp/works/mondai/s_rank_skillcheck_sample/search-island

これを面白そうと思ってしまったので、
まあ被らないだろうと思った方法で解いてみました。

行×列のデータ構造とか使いませんよ。

## 説明

コードにも大体説明が書いてあるので、合わせて読むなりしてくださればと思います。

###### 最初の行
行数と列数が書いてあるらしいですが使いません。**捨てます。**

###### 列挙の仕方
これは普通に、1行ずつ、左から順番に見ます。

###### データ構造
データは以下のような構造です。リンク形式のリストで、1行分の情報を繋げて持ちます。

`{ start:開始位置, end:終了位置, id:島ごとのユニーク値, next: 次の構造 } → { start: … } …`

###### 「0」の場合
何もしません

[Node.js] [Jest] 単体テストにおける jest.spyOn の使い方

# 環境
MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0

# 目次

# `jest.spyOn(object, methodName)`の基本構文
> jest.fnと同様の関数を作成しますが、引数に与えられたobject[methodName]へのコールも実装します。 Jestの モック関数を返します。

~~~ts:xx.test.ts
const spy = jest.spyOn(object, methodName);
~~~

# `mockFn.mockResolvedValueOnce(value)`の基本構文
> モック関数を1回呼び出したときに返す値を受け取ります。 次のモック関数へのコールが異なる値を返せるようチェーンすることができます。

~~~ts:xx.test.ts
const spy = jest.spyOn(object, methodName);
spy.mockResolvedValueOnce(value);
~~~

# 活

JavaScript で 3D の地球の描画：ライブラリなどを雑に調べてみる【その1】

この記事は、JavaScript で 3D の地球の描画ができるライブラリなどを、網羅的ではなく雑に調べてみるという内容です。

とりあえず、以下と別のもう 1つを試してみてたのですが、それを探す過程で見つけた情報をメモとして残してみます。

https://x.com/youtoy/status/1825062055973711934

## ライブラリなど

### Gio.js
最初は、冒頭でも試した Gio.js です。

●Gio.js
　https://giojs.org/

描画部分で Three.js を使うようで、使い方のところで Three.js も読みこむようにと書かれています。


データの可視化をしたときの描画で、光るエフェクトが素敵です。

[ライブラリのリリース履歴](https://github.com/syt123

Tips: AWS SDK for JavaScriptを使ってAmazon Pollyで生成した音声データをローカルにファイルとして保存する

## この記事は何
AWSにはAmazon Pollyという、テキストから読み上げデータを生成する（いわゆるText to Speech）ためのサービスが存在します。

https://aws.amazon.com/jp/polly/

Amazon PollyにもJavaScript SDKは存在するのですが、ExampleにはS3に生成したデータをアップロードする方法しかなく、ローカルにファイルとして保存する方法がわかりづらかったので、記事としてまとめました。

https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v3/developer-guide/polly-examples.html

## 前準備
まずは`@aws-sdk/client-polly`をインストールします。

“`sh
$ npm i @aws-sdk/client-polly
“`

認証についても以下の記事などを参考にセットアップを行なってください。

https://docs.aws.amazon.com/sdk-for-javascript/v

JavaScriptでLaravelアプリに削除確認モーダルを実装する

## はじめに
Laravel学習の一環でBreezeを利用した簡単な記事投稿アプリを作成しました。
その際、投稿削除時に確認モーダルを表示する機能をJavaScriptで実装してみたので、備忘のため記事に残します。

## 完成イメージ
:::note warn
都合により画像は後日追加予定です
:::

## 実装フロー
1. HTMLでモーダル本体と暗転用の要素を作成
1. CSSでモーダルと暗転効果のスタイルを定義
1. JavaScriptでモーダル表示等のイベントリスナーを設定

## 1. HTMLでモーダル本体と暗転用の要素を作成
削除ボタンと同じビューファイルに記述します。

“`php:モーダル本体

本当に削除してよろしいですか？

はじめてのWebアプリを作ろう（1）-環境構築

HTML・CSS・JavaScriptの基本を学び終えた初心者です。

学んだことを体系的に復習するため、いくつかWebアプリを作っていきます。
定番のToDoアプリを作成したのち、TypeScript・Reactを用いてアップグレードしていく予定です。

私と同じように基本を学び終え、「次なにしよう…」と迷っている方の一助となれば幸いです。

今回は環境構築について一部まとめます。

※プログラミング初学者がまとめている記事です。
温かい目で見守ってくださると嬉しいです:hugging:

# 前提条件

以下の環境で使用している前提でまとめていきます。
– OS：Windows10 22H2 or Windows11
– エディタ：Visual Studio Code
– 仮想環境：Docker Desktop

# 1.Docker導入

仮想環境の構築については、すでに多くの先輩方が解説されているので、そちらの記事を参考にします。

まずはじめに、WSL2とDockerを導入します。
– [Windows上でDocker環境を作成する方法とその構成](https://qiita

*.min.jsより遥かに小さい爆縮js file

minifyだけでは満足できない人向けの企画。今まで散々その手の記事を書いてきましたが、その応用という事になります。
圧縮率も重要ですが展開速度も重視したいところ。自己展開する事になるので復号処理も小型である必要があります。
## 爆縮形態
凄まじい圧力によって一瞬にして潰れてしまったjs fileの形態の1つ。自己展開能力により一瞬にして再生する。
ただし一瞬では潰れ切らずに、二瞬、百瞬と時間がかかりまくる事もざらにある。再生も同様である。そこは爆縮者の腕にかかっている。

## 爆縮対象
以下のfileとなります(link先は配布元)。随時追加予定。他にも要望があれば増やしていきます。ついでに元の大きさと爆縮後の大きさも掲載しておきます。
* [angular-1.8.2.min.js](https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js) 177324 -> 64656(36.4%)
* [bootstrap.bundle-5.3.0.min.js](https://cdn.jsdelivr.n

変数宣言についてメモ

JSでは変数宣言には以下の3つがある
– var
– let
– const

## var

`var`は再宣言・再代入が可能な変数宣言。
3つの中で一番緩い。

“` js
var a = “a”;
a = “b”; // ok
var a = “c”; // ok
“`

あと、ホイスティングされる。

“` js
console.log(x); // undefined
var x = 10;
“`
上記コードのように、宣言が先に巻き上げられる（実行される）。
初期化がされるわけではないので、undefinedにはなる。

## let

`let`は再宣言は不可能、再代入は可能な変数宣言。
“` js
let a = “a”;
a = “b”; // ok
let a = “c”; // NG
“`

宣言前にその変数にアクセスしようとするとエラーになる。
“` js
console.log(x); // ReferenceError: x is not defined
let x = 10;
“`

## const
`const`は再宣言も再代入もで

React｜TechPitの『ゴルフ場検索サービス』を作ってみた

エンジニアのみなさま、日々の学習本当にお疲れ様です！
また本記事まで足を運んでいただき本当に感謝です。
約2分程度で読めるので最後まで読んでもらえると幸いです。

# こんな人におすすめ

– React × TypeScriptを使ってみたい方
– サーバーレスでの開発に興味がある方
– AWSのサービスを使ってみたい方
– 外部APIを使ってみたい方

# サイトURL

https://www.techpit.jp/courses/15

めちゃくちゃ勉強になりました。ありがとうございました！！！

# TechPitとは

https://www.techpit.jp/

# アーキテクチャ

※ https://www.techpit.jp/courses/15/curriculums/

jQueryプラグインで文字数制限を簡単に実装する方法

ウェブ開発において、ユーザーが入力する文字数を制限することはよくある要件です。特に、コメントフォームや問い合わせフォームなどで、入力内容が長すぎる場合に送信を制御したい場合があります。今回は、jQueryを使って、文字数制限と送信ボタンの制御を簡単に行うプラグインを作成する方法を紹介します。

# 1. jQueryプラグインとは？
jQueryプラグインとは、jQueryライブラリを拡張して、新しい機能を追加するためのスクリプトです。これにより、複数の要素に同じ機能を簡単に適用することができます。今回は、文字数制限を簡単に管理できるプラグインを作成します。

# 2. プラグインの作成
まず、以下のような `maxLengthChecker` という名前のプラグインを作成します。このプラグインは、テキストエリアに文字数制限を設定し、文字数が制限を超えた場合に警告を表示し、送信ボタンを無効化します。

“`javascript
(function($) {
$.fn.maxLengthChecker = function(options) {
const se

Mermaid記法をパースする方法（ライブラリの紹介）

## 概要
FlowChartなどをテキストで書けるようにするMermaid記法のparserは公式で提供されていない．[@excalidraw/mermaid-to-excalidraw](https://github.com/excalidraw/mermaid-to-excalidraw)というnpmのライブラリを使用することで，dictionary形式でノードとエッジの配置データを取得できる．

excalidrawは手書き風の図を作成するツールであり，jsライブラリが提供されている．mermaid-to-excalidrawはexcalidrawのAPIと一緒に使うことが想定されたライブラリである．想定された使い方ではないかもしれないが，excalidraw形式のdictionaryデータには図形の種類，位置，サイズなどの情報が含まれているのでMermaidパーサーとして使用することが可能である．例えばMermaid記法で入力すると図形を配置してくれるExcelプラグインなどが考えられる．

## 使い方

– npm経由でライブラリをインストールする

“`sh

【JavaScript】よく使うDOMメソッドを整理してみる

こんにちは。あがさんです！！
今回はJavaScriptを学習する中で、苦労したDOMメソッドについて書いていきます。

## DOMって何ぞ！？
**“Document Object Model“** の略称。
Webページの構造やNode（要素）をJavaScriptで操作するための手段になります。
DOMを使うことでJavaScriptからHTMLにアクセスしてNode（要素）の作成、追加、変更、削除で行うことができます。

## DOMの基本的な構造
DOMは下記のようにDocumentを元にした階層構造として表現できます。一般的なHTMLページを例にDOMツリーの構造を確認しましよう。
“`index.html

Welcome to My Page

This is a paragraph.

“

解けたらコラッツ予想を否定できる式

## はじめに

コラッツの問題(コラッツ予想)に関心のある方もそうでもない方も初めまして。

コラッツの問題について詳しくはWikipediaの[コラッツの問題](https://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%A9%E3%83%83%E3%83%84%E3%81%AE%E5%95%8F%E9%A1%8C) などを読んでいただければと思います。

簡単に言うと、
「すべての正の整数は、偶数なら2で割り、奇数なら3倍して1を足す、を繰り返すと1を含むループに収束する」
が正しいか否か、という未解決の問題です。

「1を含まないループになる値」「1に収束せず無限に増え続ける値」のどちらかを見つければこの予想を否定できます。

今回は「解けたらコラッツ予想を否定できる式」と題しましたが、
正確に言うと「整数解で割り切れればループする値が得られる式」を立てたので、それを紹介していきます。

## 操作の言い換え

まず今回の式の元となる、コラッツの操作の言い換えを行います。

**すべての正の奇数は、
　(手順1) $1$を足すと偶数になるので、