JavaScript関連のことを調べてみた2023年02月11日

【JavaScript】コロンのないオブジェクト！？

## 前書き
Udemyを受講している時、JavaScriptのコードでコロンのないオブジェクトを見かけました。
波括弧で囲われているのにも関わらず、波括弧の中で宣言済みの変数(定数)を配列のようにカンマで羅列させていました。
混乱しましたが、結果自分で解決できました。くっそ簡単な理論でした。
## コロンのないオブジェクトの正体とはいったい！？
このコロンのないオブジェクトを考えていると、あることを閃きました。
**波括弧の中の変数(定数)は「変数名:変数の値」を表しているんじゃね？**
居ても立ってもいられず書いてみました
“`JavaScript:test.js
const hoge = “hogeだよ”;
const fuga = “fugaだよ”;
const piyo = “piyoだよ”;

const testDict = {
hoge,
fuga,
piyo
}

console.log(testDict);
// =>{ hoge: ‘hogeだよ’, fuga: ‘fugaだよ’, piyo: ‘piyoだよ’ }
“`

## 正解

なんか、Swiperもっさりしてるな

# 主旨
Reactのスイープ処理ライブラリ、Swiperを使用してみたけど、意外ともっさりしてた。
pure jsでスイープ処理を実現するサイトを参考にして、スイープ処理を自作した話。

# Swiper
[こちら](https://swiperjs.com/demos)。
Reactでスイープ処理を実現しようとすると、一番の候補となる。

## なんか、思ってたよりももっさりしてるな
実現したい要件としては、ネイティブアプリのTrelloのリスト切り替え時くらいのレスポンス。
だけど、スマホでSwiperのdemo操作をして、もっさりすることが判明。また、実際にアプリに組み込んでみても、案の定、もっさり動作することが判明。
普通にストレスフル。

## pure js ならばどうか
[参考サイト](https://dianxnao.com/javascript%E3%81%A7%E3%82%B9%E3%83%AF%E3%82%A4%E3%83%97%E5%87%A6%E7%90%86%E3%82%92%E3%81%99%E3%82%8B/)
[デモサイト(スマホのみ反応)](htt

lodashはメソッドによってファイルサイズが全然違っていた

# 概要

Lodashは便利なnpmパッケージですが、ファイルサイズが非常に大きいです。
圧縮前で71.5kB、圧縮後で25.2kBなので、`import _ from ‘lodash’` をフロントエンド開発でやってしまうと、画面のJSロード時間に影響が出てしまいます。
解決策として、`import range from ‘lodash/range’`のように、1つのメソッドだけをインポートすることが知られています。
しかし、実はメソッドによってファイルサイズが異なります。
例えば、`lodash/max` は 1.6kB ですが、`lodash/omit` は 21.5kBもあります。これは `lodash/omit` がいくつかの内部メソッドをインポートしているためで、特に `_baseClone.js` のファイルサイズが大きいからです。
このようにインポートする内部メソッドによってファイルサイズがかなり異なるため、全てのメソッドのファイルサイズを計算してみました。

# メソッドごとのファイルサイズ
| Function Name | File Size(kB) | G

Vue3でコンポーネントを作るときは、ネイティブイベントをいちいちemitしなくて良い。

Nuxt3もRC版になったということで、勉強も兼ねて自分のWebサイトを作っている途中に遭遇した問題(その2)について。

# 環境
node.js v18.13.0
Typescript v4.7.4
Nuxt v3.0.0-rc.14
TailwindCSS v3.2.4
vue-gtag-next v1.14.0
※Vueは3.0系（ここ大事）
開発環境はWSL(Debian)だったりChromeOS(Crostini)だったり色々。

# 発端
## ボタンだけのコンポーネントを作った。
せっかくTailwindCSSやVueを使っているのだから、要素単位でコンポーネントを作って使いまわそうと考え早速ボタンを作った。
“`html:AppBtn.vue

“`
コンポーネント内でclickイベントが発火したら、親コンポーネントにイベントをemitする割とよくあ

keyclaokの認可機能を利用する

keycloakと連携した認証認可制御を行う場合、Open ID Connectの認可フローを実装することが多い。
keycloak側で好きなclaimとscopeの設定ができるため、ほとんどの場合はアクセストークンの情報だけで認可制御ができる。
しかし、より細かな認可を行うために、keycloakではより細かな認可制御を行う機能が提供されている。
（例えば時間や条件に応じてアクセス可否を変更したい等）

:::note
keyclaokの公式ドキュメントにはjavaを利用したpolicy enforcerの実装が出てくるが、webを漁っても他の実装がなかなか出てこなかったので、メモがわりに。。
:::

作ったもの

https://github.com/m-masataka/keycloak-authorization-demo

# keycloakの認可
keycloakの認可機能ではAttribute-based access control (ABAC)やRule-based access controlに対応した様々な認可機能を備えている。

https://www.ke

【React Express】CORSエラー回避（特定のURLの許可）

## 前回
https://qiita.com/huntas0624/items/a2f610b45dbb46fecb1e

前回このような記事をアップロードしました。
この時は許可するドメインを`”*”`としてすべて許可していました。
今回は特定のURLのみを許可する設定をしていきます。

## やったこと
“`javascript:api.js
app.use(
cors({
origin: “http://example.net”,
credentials: true, //レスポンスヘッダーにAccess-Control-Allow-Credentials追加
optionsSuccessStatus: 200, //レスポンスstatusを200に設定
})
);
“`
これだけです！
originに指定のURLを記述しました

## つまづいた所
originに設定するURLはクライアント側なので、一度ブラウザで開いてそのURLをコピペしていました。その時のURLは`http://example.net/`と最後に`/`が入っていました。

【サンプル動画あり】選択した画像src の情報をpostして、次ページで表示させる。Jquery

### サンプル動画

#### 流れ

１：index.php（テーブル選択画面）で、Jqueryでクリックした要素のsrcのパスを取得する

２：１で取得したパスを、

タグの、valueに入れて、postする。

３：form.php で、postされた画像パスを受け取り、表示させる。

#### ソースコード（抜粋）

“`index.php

#

冷やし中華じゃなくてYouTube始めました、なぜか。

YouTubeチャンネルを開設しました。そのお知らせのざっくり記事です。
（冷やし中華全く関係ないですごめんなさい）
# 経緯
自分は約7年ほどフリーランスで生計をたてた後、数年前に法人成りしたソフトウェアエンジニアで、主にwebアプリ開発をメインにお仕事させて頂いています。
開発業務の他にも、これまでに初学者メインの学習会等を運営した経緯があり、現在もDiscord上で毎週火曜夜に交流会を主催しています。

自分のメインフィールドは、JavaScript/TypeScript、Node.js、Reactなので扱うトピックはこれらが主になります。現在開催している交流会では、フロントエンド開発の話題を中心に参加者の発表や質疑応答等を実施しています。

Discordはこちらです:wave:
[discord.gg/zPhh4KeBm5](https://discord.gg/zPhh4KeBm5)

前置きが長くなりましたが、この交流会において自分の好みでピックアップした世界中の話題を延々と喋るということをやっています。
話題のジャンルはもちろん上記の技術ネタです。

これまでは数人に対

JavaScriptとHTML,CSSとReact実装の違い

# はじめに
JavaScript,HTML,CSSのみの実装とReactの実装では書き方が変わってきますし、
Reactの便利さがわかります。

# JavaScriptとHTML,CSSの実装
TODOアプリを例にしていきます。今回CSSの実装は省略します。

“`App.jsx
//省略
export const App = () => {
return (
<>

追加

未完了

ポチ

完了

本当に、「初めてのJavaScript」part1 変数と定数、データ型

JavaScriptを本当に初歩から学んでみようと思います。

概念的に現段階で理解が難しそうな内容は、多少間違っている表現でもこじつけて理解しやすいように、強引な~~改悪~~翻訳をしています。その都度注釈を入れて補足しますが、間違いは温かい目で見守りつつ、コメントお願いします。

# 目次
[そもそも「プログラム」とは](#そもそもプログラムとは)

[データ「型」とは？](#データ型とは)

[リテラルとは？](#リテラルとは)

[定数と変数](#変数と定数)

[代入、定義、初期化、識別子](#代入定義初期化識別子)

## そもそも「プログラム」とは？
　強引に単純化すると、「データを処理するもの」ということができます。なにかしらの入力(input)に対して、必要な処理を施して出力(output)する。それがプログラムの行っていることです。そしてそれを書くのが、コーディングあるいはプログラミングと言えます。

## データ「型」とは？
　扱うデータには、数値や文字列の他にも、さまざまなものがありますが、その種類によって施される処理は異なります。この様々なデータの種類を **

日々の業務をプチハック – Chrome Extension(拡張機能)を作ろう！

毎日の業務で、webブラウザから同じような操作してませんか？
それ、`Chrome Extension` で自動化してみよう！

`Chrome Extension` といいつつ、開発は `Microsoft Edge(chromium版)` でやっていきます。
(垂直タブ表示したいのでEdge使ってます)

## Chrome Extensionとは

ざっくりいうと、Chromeに拡張プログラムを入れて、既存のページを便利にする機能です(Edgeでも使えます)。

有名どころだと、Amazonで商品ごとの価格推移を教えてくれる[keepa](https://chrome.google.com/webstore/detail/keepa-amazon-price-tracke/neebplgakaahbhdphmkckjjcegoiijjo)なんかは、底値を確認するのにとてもお世話になっています。

## Chrome Extension で何ができるか？

ChromeExtensionを書くと

– Slack(web版)のリアクションボタンを自動で押す
– Salesf

【JavaScript】スクロールが終わった時に発生する「新しいイベントScrollend」とは？

## はじめに
みなさんは、JavaScriptでスクロールが終わった時に何か処理を行いたいと思ったことはありますか？

「スクロールが終わった時にアニメーションしたい」や「スクロールが終わった時に動画や音楽を再生させたい」など、
そんな頻繁に思いはしないと思いますが、たまにはあると思います。

この記事では、そんな時に使えるスイベント`scrollend`を紹介します。

## スクロールが終わった時に発生する Scrollend
:::note warn
**`Scrollend`は、実験的な機能です。**
Chrome Canary, chrome 112以降, Firefox 109以降のブラウザで対応しています。
*※投稿日2023/2/10時点*
:::

### 今までのやり方
今までは、確実にスクロールが終わったことを検知する方法はありませんでした。
そのため、以下のハックのようなやり方でスクロールが終わったことを検知していました。

“`sample.js
document.onscroll = event => {
clearTimeout(window.

①フロントとサーバの通信方法(RPC)　テキスト　定義

動作環境 windows10 Java6 GWTSDK2.7 Eclipse4.4 (基本他の条件でも動作すると思います)

GWTでは、フロントとサーバで通信ができます。
もちろん、みんなが大好きなJavaだけで・・
定義する箇所は４つのみ
なれないうちは、戸惑うかもしれませんが、基本的に定義なので、１度書いてしまえば終わりです。
また、今回はテキストのみですが、Javaの得意分野の独自オブジェクトも送受信が可能です。


A　名前は任意（サーバ処理用インターフェース
“`
package kut.hp_rc.client;

import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelat

nvm 使用方法


# 概念説明

## nvm

node Version Manager、省略してnvmと呼びます。nodeのバージュン管理ツールです。

nvmを利用する事で、任意バージュンのnodeを簡単にインストール、削除、切り替わって使用や設定ができます。

例えば、Aにnode12を使わせて、Bにnode14を使います。

## node

node.js、省略してnodeとも言います。

Chrome の V8 エンジンで動作する JavaScript 環境です。オープンソースかつ高性能で JavaScript 環境 中の TOP です。

## npm

node Package Manager、またはnpmとも言います。nodeのパッケージ管理システムです。

簡単に説明すると、App Storeみたいなものです。他の人が開発したnode.j

【メモ】WebSocket使ってみた

## はじめに
Websocket使って双方向通信ができるように実装してみました。
フロントは素のjavascriptでバックはjavaです。

### javascript

“`javascript:test.js
var connection = new WebSocket(‘ws://localhost:8080/test’);

connection.onopen = function(e) {
connection.send(‘test’);
};

connection.onerror = function(error) { };

connection.onmessage = function(e) {
console.log(‘メッセージを受け取った’);
console.log(e.data);

};

connection.onclose = function() { };
“`

### java

“`java:WebSocketConfig.java
package com.example.demo.web

【Rails】郵便番号による住所検索機能を作る ※ gem 無し

## 概要

巷でよく見かける「郵便番号を入力すると該当の住所が番地以前まで自動で入力される」といった機能を Rails で作ってみました。

こういった記事はすでに世の中に溢れていますが、JQurey やら gem やらを使ったものが多く、個人的にはもっとシンプルな実装にしたかったため今回備忘録として残します。

## 下準備

※ Rails の環境構築はすでに済んでいるものとして話を進めます。

– Address モデルの作成
– Prefecture モデルの作成

住所に関する各種情報を持たせるための Address モデル、都道府県用のマスターデータとして Prefecture モデルを作成します。

| Address |
| —- |
| postal_code: 郵便番号 |
| prefecture_id: 都道府県ID |
| city: 市区町村 |
| house_number: 番地 |
| building: 建物名・部屋番号 |

“`
$ rails g model Address postal_code:integer

NCMBのソーシャルログインを複数サービスに関連付ける

2022年終わりくらいからTwitter界隈が不穏になっています。特にAPIの有料化が発表されたり、クライアントアプリが開発できなくなったりと、開発者向けの施策で締め付けが増えています。

そんな中、認証でTwitterログインを利用しているアプリは多いでしょう。もしTwitter認証に何かあれば、ログインする手段が失われてしまいます。

そこで、現状のTwitter認証に他のソーシャルログインも関連付けておくことで、万一の際の代替手段になり得ます。今回はニフクラ mobile backend（NCMB）のソーシャルログインで、複数のサービス認証を関連付ける方法を解説します。

本記事ではJavaScript SDKを利用しています。

## 最初のソーシャルログイン

まず最初にログインを行います。例えばこれはTwitterでの認証とします。以下の処理で、ユーザーがいなければ作成し、ユーザー情報が返却されます。

“`jsx
const twitter = {
oauth_token: “OAUTH_TOKEN”,
oauth_token_secret: “OAUTH_TOKE

JavaScript でテトリスを開発する その 2

# JavaScript でテトリスを開発する その 2

前回の続きです。
前回は仕様 ① 画面部分の作成を行いました。今回は仕様 ② ブロックの描画とテトロミノの描画を行っていきましょう

① 画面サイズは縦 20 ブロック分、横 10 ブロック分である ⇒[その1参照](https://qiita.com/namakoRice/items/4933e77a41b2ac359229)
② 4 つの正方形ブロックで構成されるテトリミノがある
③ テトリミノは 7 種類ある
④ テトリミノは画面内でかつ他ブロックに干渉しなければ自由に動かせる
⑤ テトリミノは画面内でかつ他ブロックに干渉しなければ自由に回転できる
⑥ テトリミノは画面最下部または他ブロックの上部に面したとき動かせなくなる
⑦ テトリミノは画面上部に生成される
⑧ テトリミノは一定間隔で下方向に移動する
⑨ テトリミノはランダムに生成される
⑩ 横 10 ブロック分がそろった場合、そろった列は消えて上の列が下りてくる
⑪ テトリミノ生成

JavaScript でテトリスを開発する その 1

# JavaScript でテトリスを開発する その 1

JavaScript でライブラリを使わずにテトリス作成してみました。世の中にテトリス開発記事はたくさんありました。が、理解するのに非常に苦労したポイントも多くありました。そこでアウトプットを兼ねてできるだけ丁寧に解説付きで記載してみました。
下記参考にしたサイトになります。
https://joytas.net/programming/tetris1 （本記事のベースにさせてもらっています。ある程度JS触れる方はこちらのサイト見ていただいたほうが早く進められるかと思います）

## はじめに

各回につき 1 回は課題 N という形で表現している箇所があります。その個所に来たら次に進むのをストップして一度どうしたらいいのか 5 分ほど考えてみましょう。
また、コーディングに正解はないので自分なりのロジックが浮かんだら記事内のコードと比較してどちらがより合理的か検討してみてください。

## テトリスの仕様を知る

まずはテトリスの

csvの予定をカレンダーにインポートできる iCal 形式に変換する csv2ical を JavaScript で作った

## やりたかったこと
　Excel 等で作成した予定を、一括でAppleのカレンダーアプリに登録したかった。
ググると、一度 Google カレンダーに CSV 形式のものを一括インポートして、それをエクスポートしたものをAppleカレンダーに読み込ませるとあった。
　そのためには１行目に項目識別のキーワードを入れた次のような表を作って CSV に書き出した。

■ 表データ（Excelなどで）
| Subject | Start Date | Start Tim | End Date | End Time |
|:-:|:-:|:-:|:-:|:-:|
| 出勤 | 2023/2/10 | 9:00 | 2023/2/10 | 15:00 |
| 出勤 | 2023/2/11 | 9:00 | 2023/2/11 | 15:00 |
| 出勤 | 2023/2/12 | 9:00 | 2023/2/12 | 15:00 |
| | | | | |

■ csvデータ
“`csv:
Subject,Start Date,Start Tim,En