JavaScript関連のことを調べてみた2022年09月04日

DevToolsのconsoleを介してイベントと関数呼び出しを監視する

ブラウザの`console.log`は処理の状態を理解するのに便利です。
私もいつも`console.log`デバッグを使っています。
Chromeにはもっと便利な`monitorEvents`と`monitor`があり、イベントが発生したり関数が呼ばれたりするたびにログを取得することができます。

## Monitor Events
`monitorEvents`に要素と一連のイベントを渡して、イベントが発生したときにコンソールログを取得します。

“`JavaScript
// クリックイベントを監視
monitorEvents(window, ‘click’)

// 上キー、下キーイベントを監視
monitorEvents(document.body, [‘keyup’, ‘keydown’])

// スクロールイベントを監視
monitorEvents(window, ‘scroll’)
“`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184922/c0a8af58-

詐欺メール検証用WEBによる検索program

# 実行環境
>・macOS Monterey バージョン12.4
・ python3.7.7
・ selenium 3.141.0
・ webDriver GoogleChrome chromedriver version for 104.0.5112
>
# このプログラムを組んだ理由
>最近、Amazonを騙って下のようなメールがちょくちょく来るようになった。
「Amazon.com」とあるから最初ドキッとしたけど、差出人の **「Amazon.com」部分を右クリック　-「アドレスをコピー」をクリック　-　テキストエディットに貼り付け** てみると、http://amazon@member-amazon.shopとなっていた。(99%怪しい)
>でも、**amazon.shop

【class属性でソート】JavaScriptを使って、クラス名だけでテーブルをソートする新しい方法

::: note warn
普通に使われている方法だったら脱ぎます。
:::
# 目次
[1.やること](#1-やること)
[2.この方法を使うメリット・デメリット](#2-この方法を使うメリットデメリット)
[3.前提](#3-前提)
[4.ソートするテーブル](#4-ソートするテーブル)
[5.解説](#5-解説)
[6.終わりに](#6-終わりに)

# 1. やること
色が揃うの気持ち良すぎだろ

# 2. この方法を使うメリット・デメリット
### メリット
・テーブルの中身が何であろうと、データを好きなようにソートできる
　→クラス名でソートするのでテーブルの中身は関係なしに自由にソートができるってワケ。
・DOMをその

Perlの条件分岐 – ワンポイント解説【Python,Ruby,PHP,Java,JavaScriptとの違いは?】

Perlの条件分岐 – ワンポイント解説【Python,Ruby,PHP,Java,JavaScriptとの違いは?】

ウェブデザイン技能検定2級　令和4年度

自己採点では合格でしたが発表された解答と照らし合わせると学科不合格でした。　

受験手数料高かったので痛い。

1級 学科： 8,000円 ／ 実技： 25,000円 （実技はペーパー実技含む）
2級 学科： 7,000円 ／ 実技： 16,000円　または7,000円（25歳未満の在職者）※
3級 学科： 6,000円 ／ 実技： 8,000円 　または3,000円（25歳未満の在職者

Javascript 変数・定数について

# 変数・定数とは
JavaScript では、変数や定数を利用することでさまざまなデータを扱います。
この変数や定数を利用するためには、どんなデータを使うのか宣言する（定義）ことが必要です。
具体的には3つの宣言方法 var , let , const がありますが、var は非推奨のためここでは説明を省いています。
このチャレンジで利用した let と const はよく似ていましたが、具体的にどういった違いがあるのか確認。

# let
**let** は、再宣言が不可、再代入が可能な宣言方法です。
再宣言とは、すでに宣言された変数名を再び宣言し直すことを指してます。

たとえば次のようなソースコードです。
“`javascript
let num = 1
let num = 2 // エラー
“`
再代入は可能です。
再代入とはすでに宣言されている変数に、新しく値を代入することです。

たとえば次のようなソースコードです。
“`javascript
let str = ‘文字列’
str = ‘再代入ができる’ // 再代入は可能、新しく代入された値が利用できるようになる

Javascript いろいろなconsole

# console.log

“`javascript
// とりあえずlogを出す
console.log(‘Hello, World’)
“`

# console.warn

“`javascript
// 警告をlogに出す
console.log(‘警告’)
“`

# console.error

“`javascript
// エラーを表示させる
console.log(‘エラー’)
“`

# console.debug

“`javascript
// 変数など中身が知りたいとき
console.log(box)
“`

VanillaなJavaScriptからReactを使い出した時の前後のコードを見つめてみる

# 初めに

ただの記録です。
Reactに移る前のコードと移った後のコードを貼っているだけ。

# VanilaなJavaScriptでの記載

## 移行前の前(createElementを多用)

`document.createElement`をひたすら使ってるパターンです
bodyの中身が全部tdでいいならさらにmapでいいんですが、
各カラムで別々の何かを適用させたい場合はひたすら変数が増えていくパターン…(嫌すぎる)

Se

【Rails6系、ActionCable、デバック】チャットappでチャットが複数送信されてしまう不具合の解消

# 【 前提 】
ActionCableを使用したチャットapp
チャットルームは複数作成可能
この記事は日本酒をガバガバ飲みながら書いているため後々修正が入る場合がございます

## 開発環境
Rails:　6.0.3
Ruby:　3.0.1
DB:　postgresql, redis
PC:　Mackbook Air

## デバック前コード
“`ruby:channels/room_channel.js
import consumer from “./consumer”

document.addEventListener(‘turbolinks:load’, () => {
console.log(“addEventListener turbolinks:load”)
window.chatContainer = document.getElementById(‘chats’)

const element = document.getElementById(‘room-id’);
const room_id = element.getAttribute(‘d

parcelでライブラリをbuildするときにnode_modulesが含まれずError: Cannot find module…と表示される問題の解決法

# Parcelでライブラリをビルドする

## 最近のtypescript
だいたいビルドはparcelに任せてます。webpackの設定が面倒くさいので。まあ一度環境をつくってしまえばなんとかなるんですけど。

## parcelでライブラリモードでbuildするとnode_modulesが含まれない
ので、tsファイルをビルドして、他のディレクトリに移動してからnodeで起動しようとするとmoduleが見つかりませんというエラーが出る。例としてrambdaを入れてビルドした場合。
“`sh
Error: Cannot find module ‘rambda’
“`

## ライブラリモードはnode_modulesが基本的には含まれないのだ
> Determines whether to bundle node_modules or treat them as external. The default is true for browser targets, and false for library targets. Possible values are:

簡単に訳す

axios（Promise）で通信が成功しているのにcatchに入ってしまう

# 現象
JSでaxiosを使って通信処理を書いたときに、通信が成功しているのにcatchの処理が走っていた。
通信が成功しているのは開発者ツールのネットワークタブで確認済み。
問題のコードは以下。
実際にはいろいろと処理を書いているが、この記事では必要な部分だけを抽出。
API呼び出し時に共通の処理が入るため、_axios.jsにaxiosのインスタンス化と共通処理を書き、
Customer.jsでそれを呼び出し使用。
“`_axios.js
import axios from “axios”;

export const _axios = createAxiosInstance();
function createAxiosInstance(){
const axiosInstance = axios.create();

axiosInstance.interceptors.response.use(
(response) => response,
(error)=>{
if (error.response) {
consol

【PHP】同じ名前のcookieが重複して登録される不具合修正

同ドメインで同名のcookieが2つ登録されてしまい、原因を調査しました。

### cookieの判定条件
cookieは以下の3つのパラメータで差別化されています。
1. 名前 (cookieのキー名)
2. ドメイン (cookieを使用するドメイン)
3. パス (cookieが使用できるパス)

今回、名前とドメインは同じでしたが、パスが違ったため別のcookieと判断されて重複登録されていました。

### 重複登録されないようパスを指定
複数個所で同一のcookieを作成・更新する処理がある場合、重複登録されないようにパスを指定する必要があります。

今回はPHPとjavascriptでパス指定の方法を紹介します。

※例では「/」以下でcookieが使用できるようパスを設定。

#### 【PHPの場合】
“`:phpファイル
setcookie(‘name’, ‘value’, [
‘path’ => ‘/’,
]);
“`
※なお、setcookieのオプションに「’httponly => true’」が設定されていると、javascriptなどhttp

ajaxが通信成功しているのにfailで処理される場合の対処方法

## 原因
ajaxの通信が成功しているのに、thenではなくfailで処理されてしまう現象が発生した。

調査した結果、以下の4行目のdataTypeを指定しないと、jQueryのほうでjson形式に自動で変換しようするため、パースエラーが発生してfailに入ってしまう。

“`:jsファイル
$.ajax({
type: “post”,
url: “/api/test/done-test”,
dataType: “text”,　// ここでデータ型を指定しないとjsonで処理されてparsererrorになる
data: {
sampleData: ‘sample’,
},
})
//通信成功
.then((res) => {
console.log(‘成功’);
})
//通信失敗
.fail((xhr, textStatus, errorThrown) => {
console.log(textStatus);
console.log(‘失敗’);
});
“`
## 対策
レスポンスのデータ型dataTypeを適切に指定する。

REST APIって何?

# 結論
#### REST APIとは
RESTのルールに従ったAPIのことです。

# そもそもRESTとは何か
webサービス設計思想の１つ
Twiiterなどのアプリを作るときにどういう手段で作っていくかを考える思想の１つ

# REST4大設計のルール
※RESTは４つ以上ありますが今回は一般的な４つを解説します。
このルールを満たしたサービスがRESTfullと言われています。

#### 1.アドレス可能性(Addressability)
#### 2.統一インターフェース(Uniform Interface)
#### 3.ステートレス性(Stateless)
#### 4.接続性(Connectability)

## 1.アドレス可能性(Addressability)
クライアントが送ったURL(アドレス)をサーバーが理解しそれをクライアント返していること。

例：
ユーザーがQiitaのマイページのボタンを押したときにクライアント側からユーザーがマイページが見たいですといった情報がサーバーに送られる。
そしてサーバーが分かりましたとマイページの画面がクライアント

大容量JSONファイルのブラウザでの読み込み

# ローカルにある大容量のJSONファイルをブラウザで読みたい
## 前提
ブラウザの文字列変数には使用上の上限があるらしい。
(http://var.blog.jp/archives/52543754.html)
1GBのJSONファイルをJSON.parseで解釈しようとするとエラーを吐く。
（実際にはその全段階で文字列変数に突っ込んだ段階でエラー）
Googleのサービス（ロケーション等）でダウンロードしてJSONなどは平気で数百メガバイトいくため何とかしよう。
以下のサンプルはGoogleサービスでよくみるJSONファイルを前提としています。

※当然搭載メモリによる上限はあります。今回はあくまでブラウザの仕様上の上限突破を目指します。

## ちょっとづつ読み込んで配列に突っ込む
GoogleのJSONは1行に一つしか'{‘or’}’がない。
・・・ということでまずは、一行ずつJSONファイルを読み込む

### FileReaderクラスを拡張してバイト単位の読出しに対応
“`javascript:
class LargeFileReader extends FileRe

Nodejsのバージョンを上げたら`error:0308010C:digital envelope routines::unsupported`が出てしまう

# はじめに
最近はRailsしか触っていない筆者です。
本業の大きなプロジェクトが落ち着き、ほっとしております:smile:

さて今回は、Nodejsのバージョンを上げることで、Gatsbyのプロジェクトが`error:0308010C:digital envelope routines::unsupported`で怒られてしまったので、その暫定対応について記載します。

とりあえず、動かした方はこちらが参考になれば幸いです。

# 前提
– Nodejsのバージョン: 18.7.0
– npmのバージョン: 8.15.0

# 結論
`openssl-legacy-provider`オプションを使用する。

私は、package.jsonを編集し、以下のようにしました。

“`diff
“scripts”: {
– “develop”: “gatsby develop”,
+ “develop”: “NODE_OPTIONS=’–openssl-legacy-provider’ gatsby develop”,
}
“`

原因は、Nodejsnのバージ

Leafletでポップアップをドラッグしたい

# Leafletでポップアップ(L.Popup)をドラッグしたい
## 概要
– Leafletでポップアップをドラッグ可能にするためのプラグインを作成した軌跡です。
– LeafletプラグインはGithubで公開中。 (https://github.com/wrwrh/leaflet-popupmovable)
– Google ChromeまたはChromium Edge推奨。
– HTMLファイルおよびCSSファイルに以下の記述を加えてください。
“`html:index.html

“`
“`css:style.css
-webkit-print-color-adjust:

create-react-appで作成したアプリで絶対パスを利用できるようにする

## やりたい事
通常、コンポーネント内で別コンポーネントを呼び出す際は以下のように“`import“`文を定義します。
“`typescript:Top.tsx
import Introduction from “../organisms/Introduction”;

const Top = () => {
return ;
};
export default Top;
“`
Reactでは別コンポーネントの呼び出しが頻発する為、“`../“`と**毎回記述する事は面倒**です。
本記事の内容を実施する事で“`import Introduction from “organisms/Introduction”;“`と書けるようにしたいと思います。
## 方針
パスaliasを設定する方法と、絶対パス指定できるようにする方法があるようです。
前者の方法は“`tsconfig.json“`にエイリアス指定をする方法がよく紹介されていますが、create-react-appを利用した場合、実行時に“`react-scripts“`

Node.js環境構築

# Node.jsって言語なの？
Node.jsは言語ではなくJavaScriptを使ったサーバサイドの設計手法のようなもの

# 使うメリット
Node.jsはJavaScriptを学ぶだけでクライアントとサーバーも作ることができることができる。
非同期処理が得意なのでラインやチャットなどのリアルタイムアプリに向いている。

# Node.jsの環境構築
ここからNode.jsの環境構築をまとめます。

### nodeインストール
まずは公式ホームページからNode.jsをインストールしましょう。
[Node.js公式](https://nodejs.org/ja/)
nodebrewを使ったやり方の方が望ましいですが今回は公式ページからダウンロードします。


### npmを使ってモジュール

Javascript addEventListenerのイベント機能で、CSSを変更しよう

## はじめに
この記事は、「なんとなく理解できた」を目的としているため、正確性、具体性に欠ける表現がございます。

精度の高い情報を求めている方には向かないので、ご理解ください。

## 完成図


問い合わせボタンを押すとformの中身が表示されて、botボタンを押すと中身が消える文を作っていく。

## コード

### HTML側

“`
お問い合わせ
bot