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

【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

【JavaScript】【jQuery】配列同士の検索 some()の中でincludes()

コールバック関数は最強

# コード some ※OR条件
“`javascript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);

var arr = [3, 5, 4, 2, 7];
var item_1 = [1,6];
var item_2 = [1,3];
var result = arr.some(function(v){return item_1.includes(v)});
// ↓これでもOK
console.log(result);
var result = arr.some((v) => item_2.includes(v));
console.log(result);
“`

# コード every ※AND条件
“`javascript
var arr = [3, 5];
var item_1 = [3,5];
var item_2 = [1,5];
var item_3 = [5];
var result = item_1.every(function(v){return arr.

kintoneでコピーボタンを設置する

kintoneでは標準機能に加えて、JavaScriptやプラグインを使えば自由にカスタマイズできるようです。
今回はコールセンターでの作業効率化のため、電話番号のコピーボタンを実装しました。

# 前提
– kintoneでデータの管理をしている方。
– kintoneのカスタマイズをしたい方。
– kintoneにコピーボタンを実装したい方。

上記のような内容を実装したい方は、ぜひ参考にしてみてください。

# 完成系
“`kintone_customize.js
(() => {

‘use strict’;

// 詳細画面でイベントを宣言
kintone.events.on(‘app.record.detail.show’, event => {

// ボタンを設置
let CopyButton = document.createElement(‘button’);
CopyButton.innerHTML = ‘copy’;
CopyButton.id = ‘電話番号’;
CopyButton.style.borde

Cloudrun+NuxtjsでSSRをする時に、Cookieが消えて困った話

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

# 環境
– 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)だったり色々。
## 本番の動作環境
– Google Cloudrun
– Firebase Hosting
Cloudrun上でNodejs+NuxtjsUniversalモード(SSR)で動作させて、静的ファイルについてはFirebase Hostingで配信するという形式。

# 発端
## 個人で制作しているWebサイトにオプトインの確認表示を実装した
WebサイトにGoogle Analytics4を導入したので、初回表示時に使用を承諾するかどうか確認表示を追加することにした。
常に画面下側に表示したいので、ルートにあたるapp.vueにoptin

【関数について】pythonとJavascriptのスコープの違い

# やろうとしていること
1.グローバルスコープ内で変数を宣言
x
y
z→こいつを関数の中で代入したら、その結果は反映されるのか？
2.関数内でグローバル関数スコープ内で代入
“`python:python
x = 100
y = 200
z = 0
def main():
z = x + y
main() //ここで呼び出し
print(z)
“`
→関数内が反映されていないので、0になった
“`javascript
let x = 100;
let y = 200;
let z = 0;

function main(){
z = x + y;
}
main()

console.log(z)
“`
![スクリーンショット 2023-02-09 13.38.10.png](h

JavaScriptで関数のオーバーロードを宣言する【TypeScript5.0新機能】

TypeScriptによる型のある世界は生のJavaScriptでも体験できます。[JSDoc](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html)を使えば良いのです。JSDocを使えば型が付与された、しかし正真正銘のJavaScriptコードが書けます。JSDocはJavaScript実行環境にとってはただのコメントなので当然ブラウザでそのまま動きます。`tsc`による変換の儀式は不要で、型チェックだけを行うことになります。

その型チェックもVSCodeを使っていればTypeScriptをインストールしなくても勝手にやってくれるので、小さなプロジェクトならこれで十分だと思います。VSCodeを使っている前提にはなりますが、その場合なんのセットアップや変換もなく型のあるJavaScriptを扱えます。

JSDocによる型付けは割と強力で一般的な場面ではほとんど不自由しません。しかし比較的よく使う型宣言なのに今まで唯一できないことがありました。それが関数のオーバーロードの宣言です。

そのJ