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

jqueryライクにかけるライブラリを開発してみた。

# 経緯
多少、jsフレームワーク触ったり、jqueryでdom操作したりするぐらいで、そういえばあまり、jsの言語仕様を知らないなとお盆に気づきました。(jqueryが便利すぎて、思考停止でjqueryのプラグイン使ったりであまり知る機会が…)

ライブリ的なものを作ればjsの勉強にもなるし、古いブラウザ対応をしなければ、ファイルサイズも小さくなり、、小規模なものなら、活用できるかなと考えました。
やっぱり、ブラウザの差異が無くなったといってもjqueryのメソッドチェーンでのdom操作やslidetoggleなんかは、まぁ便利です。

↓開発したもの

https://github.com/teratai3/slimQuery

特に解説するような内容は無いのですが、jsでprivateが使えるようになっていたのは驚きました。
積極的にprivateを使ったのですが、プライベートを使うと遅くなるようです。(後から知りました…)

https://zenn.dev/waryu/articles/2dcc01d079db9a#%E7%B5%90%E8%AB%96

また、操作す

【個人開発】便利ツールサイト「Ruby Tools」を作ってみた

こんにちは！今回は、私が個人開発で作成した便利ツールサイト「Ruby Tools」について紹介します。プログラマーだけでなく、一般のユーザーの皆さんの日常的なタスクを効率化するためのツールを集めたサイトです。

## Ruby Toolsとは？

Ruby Toolsは、様々な職種や個人が日々の作業で使える便利なツールを集めたウェブサイトです。ポモドーロタイマー、抽選ツール、六曜/大安カレンダー、IPアドレス確認ツールなど、多岐にわたるツールを一箇所にまとめました。

サイトURL: [https://nomin.jp/rubytools/](https://nomin.jp/rubytools/)

## なぜ作ったの？

日常生活やビジネスシーンで「このツール、どこかにないかな？」と思うことが多々ありました。そこで、よく使うツールを一箇所にまとめたサイトがあれば便利だと考え、Ruby Toolsを開発することにしました。

## 主な機能

Ruby Toolsには2024年8月19日時点で20個のツールがあります。
具体的な機能については実際にサイトでご確認ください！

## 誰

JavaScript組み込みオブジェクト 文字列、日付

## 文字列オブジェクト
文字列はコンストラクタを使用しなくてもインスタンスを生成できる
“`JavaScript
let animal=new String(“くま”);//①
let animal=”くま”;//①をこのように省略可能
“`
“`JavaScript
console.log(animal.lengh);
2
“`

## 文字列を検索するメソッド
Stringが検索文字を含む場合はtrue、
含まない場合はfalseを返す。
“`JavaScript
String.includes(検索文字列[,検索開始位置デフォ0]);
“`
検索文字が先頭から何文字目に見つかったかを返す。
見つからなかったら-1を返す。
“`JavaScript
String.indexOf(検索文字列[,検索開始位置デフォ0]);
“`

## 文字列を分割するメソッド
文字列の一部取り出し、分割して配列にできる。

引数で指定した範囲の文字列をStringから取り出した後、
新しい文字列を返す。
終了位置を省略したら最後まで指定ということ。
開始位置は0から、終了位置は1か

JavaScriptの基礎 関数

## 関数の定義
“`JavaScript
function animal(){
console.log(“bear”);
};
“`
呼び出し
“`JavaScript
animal();
bear
“`
こう書くこともできる
“`JavaScript
const animal=function(){
console.log(“bear”);
}
animal();
“`

## 関数に引数を受け取る変数を指定
“`JavaScript
function animal(doubutu){
console.log(doubutu);
};
“`
引数catを持たせて呼び出し
“`JavaScript
animal(“cat”);
cat
“`

## 引数は複数渡すこともできる
“`JavaScript
function animal(doubutu,name){
let animalname=doubutu+”:”+name
console.log(animalname);
};
“`
引数を持たせて呼び出し
“`J

JavaScriptの基礎と配列

## JavaScriptの基礎
“`
let //変数
const //定数
“`
“`
&& //AND
|| //OR
“`
“`
コメント // /* */
“`

## 配列の宣言
“`JavaScript
let 変数名=[];
let 変数名=[値１,値２];
“`
要素番号は0から数える
“`JavaScript
let id=[1,2,3]
let names=[佐藤,伊藤,田中]

console.log(id[0]);
1
“`

プリミティブ型であるnameとnamesの箱は別なのでnameの中身を変えても配列の値は連動しない。
※オブジェクト型の場合は、代入元と代入先の変数が共有される。
“`JavaScript
let name=names[1];
//nameに伊藤が代入

name=”高橋”;
//nameに高橋を再代入

console.log(name);
高橋

console.log(names[1]);
伊藤
“`

## 連想配列
・配列の要素１つ１つに鍵のような任意の番号を振ることができる。
・鍵には””をつける必

TOPICS APIはChromeの独自実装で終わる

かつて[サードパーティーCookieのかわりとなる情報収集手段](https://japan.googleblog.com/2021/02/2021-privacy-sandbox.html)としてGoogleが提唱したものの[全方位からボコボコにされて](https://gigazine.net/news/20210305-googles-floc-terrible-idea/)[ひっこめた](https://japan.googleblog.com/2022/01/topics-api.html)[FLoC](https://qiita.com/rana_kualu/items/e470f0303e6b3a429c09)のかわりとして、Googleは[TOPICS API](https://github.com/jkarlin/topics)というものを[発表しました](https://blog.google/intl/ja-jp/company-news/technology/2022_01_topics-api/)。

これが2022年1月です。

それから2年半経ってTOPI

メモ取りツールをHTML、CSS、JavaScriptで作る

このコードは、シンプルなメモ取りツールのHTML、CSS、JavaScriptで構成されています。以下に各部分の解説をします。

### HTML部分
“`html

保存

```

### コードの説明

- **`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チートシート(TypeScript(JavaScript)の文法を学び，フロント・バック両方開発できるようにしよう[プログラミング文法,配列操作関数,React,クリーンアーキテクチャ,API])

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

# 他のチートシート
Docker コマンド

https://qiita.com/JavaLangRuntimeException/items/21f7c7bf3d143f821697

git/gh コマンド

https://qiita.com/JavaLangR

[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をツリー上に