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

Railsにjavascriptを導入する

### javascriptを導入
RailsではWebアプリケーション開発が可能です。私も自身でポートフォリオを作りましたが、どうにも寂しい印象がぬぐえませんでした。というのも普段利用しているサービスを見ると、要素に動き、つまりアニメーションがあるものが多いです。マウスを合わせることでイラストが動いたり、文字が下から上からスライドして現れたりといったような感じです。
今のポートフォリオはページをリンクでただつなげたようなものなので、改善したい。
そこで扱うのがjavascriptです。これをRailsに導入します。
まずは、ファイルの作成。importでよびだすためです。
`script.js`ファイルを作成します。それをapp/javascript/packs/application.jsに記述しましょう。
“`
import Rails from “@rails/ujs”
import Turbolinks from “turbolinks”
import * as ActiveStorage from “@rails/activestorage”
import “channe

PDFを閲覧＋αするクロム拡張の楽な作り方③

# 連載一覧
– **[PDFを閲覧＋αするクロム拡張の楽な作り方](https://qiita.com/largetownsky/items/1cb016598824b7ea1b1e)**
– クロム拡張でWeb上のPDFファイルを閲覧できる様になる
– ただし、URLは謎形式で手入力する必要あり
– **[PDFを閲覧＋αするクロム拡張の楽な作り方②](https://qiita.com/largetownsky/items/fe854ea78960816538e5)**
– 普通のURL入力やリンククリックのPDF閲覧に対応
– 普通にPDFビューアとして使える様になる
– **[PDFを閲覧＋αするクロム拡張の楽な作り方③](https://qiita.com/largetownsky/items/e61624ba8be7e1d50fed)**
– PDF閲覧に独自処理を追加

拙作のWebにリンク＆ノートを追加できるクロム拡張も、PDF対応する予定ですので、よろしくお願いします。

https://qiita.com/largetownsky/items/

JSでErrorを継承して作った独自エラークラスを判定する方法

Errorを継承して独自のエラークラスを作る方法は以下の感じです。

“`js
class MyError extends Error {
constructor (msg) {
super(msg)
}
}

try {
// …
// ここでエラーがあったとき
throw new MyError(‘エラー’)
// …
} catch (err) {
// instanceof でエラーの型を判定
if (err instanceof MyError) {
console.log(‘MyError’)
} else if (err instanceof Error) {
console.log(‘その他のエラー’)
}
}
“`

複数の場合も同じ感じです。

“`js
class MyError extends Error {
constructor (msg) {
super(msg)
}
}

class MyErrorEx extends MyError {
construct

import * as 構文とパフォーマンス最適化

JavaScriptには、`import * as` という構文があります。これは、インポート先のモジュールの中身全部をオブジェクト（モジュール名前空間オブジェクト）として取得できる構文です。

“`js
import * as mod from “./some-module”;

console.log(mod.foo, mod.bar);
“`

たまに、「この構文を使うとTree Shakingが効かなくなる」といった説明が見られることがありますが、必ずしもそうではありません。そこで、この記事では`import * as`構文とパフォーマンス最適化に関連する正しい知識と、その背景をご紹介します。

## webpackで検証してみよう

Tree shakingを行うのはモジュールバンドラであることが知られています。そこで、webpackを使って色々と構文を検証してみましょう。今回は次のような設定を用います。これは最適化を切って出力ファイルを見やすくしつつ、import/export周りの最適化だけは有効にするという設定です。なお、この記事では執筆時点での最新バージョンであ

kuromojiを使ったJavaScriptだけの形態素解析

# はじめに
形態素解析というと、Pythonを使って[mecab](http://taku910.github.io/mecab/)というのが鉄板でしょうかね。辞書は[neologd](https://github.com/neologd/mecab-ipadic-neologd)で。
でもほかの環境でも形態素解析したい場面があり、今回はJavaScriptでやってみるお話です。使うライブラリはkuromojiのJavaScript版。

https://github.com/takuyaa/kuromoji.js

ちなみに、mecabもneologdもkuromojiも、更新が止まっています。mecabは、2013/02/18 MeCab 0.996 が最新、neologdは2020/08/20 v0.0.7が最新、kuromojiは2018/11/24が最終更新日です。（2022/5/28時点）
最新の単語に対応していない等の問題が出る可能性がありますので、ご使用の際にはちょっとご注意ください。

## 作ったもの
動くものを置いておきます。公式のデモとほぼ同じですが、自分で文

An account already exists with the same email address but different sign-in credentials.

# 背景
Google firebaseのSNS認証で、同じemailアドレスを登録しているプロバイダで認証したところ
(例えば、FacebookアカウントとGoogleアカウントのメールアドレスが同じ場合など)

An account already exists with the same email address but different sign-in credentials…
のエラーメッセージと共にログインできなくなってしまいました…?

# 改善策

Google Firebase様の公式ドキュメントの通りにjavascriptを書けばよさそうです!!

https://firebase.google.com/docs/auth/web/account-linking

1 : データベースなしでブラウザチャット作ったけど質問ある?

### 2: >>1 なんでデータベースなしでやったの?
#### 金かかるからw
#### 有料系のやつじゃないとクッソ重いしだるいからやて

### 俺、佐藤裕也（｀ェ´）ﾋﾟｬｰ
#### お金がないので今日も、無料のブラウザサーバーを謳歌する
#### というわけでw replitっていうブラウザエディタ使ってんだけど、無料でサーバー使えるんだよねw
#### で、せっかくここまで有料を華麗に回避してきたのに、今更有用のデータベース使うのアホらしいんだよねw
#### じゃあもう自分で擬似データベース作ろうとwっていうわけなんだお

## 仕組みのお話。
#### `POSTでデータを送信　→ phpで、ファイルに保存。(txtでもなんでもいいお) → 非同期通信でリアルタイムで表示するためにajaxで表示`
#### みたいな感じだおw　仕組みはEZ

## ソースコードとかとか
#### まあ基本コードって感じかな？これベースにしていくよ。
##### POSTのPHP register的な？　送信先の処理だけどw
“`php:post.php
//日本語が文字化けしな

JavaScriptでreadOnlyの値を強制的に上書きする方法

# はじめに
Angularのテストをjasmineで書いています。
テスト対象のComponentを`extends`していますが、拡張元のComponentのプロパティが`readOnly`で変更できず詰みました。

トリッキーな方法かもしれませんが、以下の[`Object.defineProperty()`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)を使用する方法でreadOnlyのプロパティを変更できたので、共有します。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

# やりたいこと
Angularのテストをjasmineで書いた場合、拡張元のComponentの読み込み専用プロパティの値を変更したいです。

ちなみに、このプロパティは本来の実装で変更の必要がないも

【簡単】React Developer Toolsとwhy did you renderを使ったレンダリング最適化方法をいまさらだけど整理してみた

# React.memo/useCallback/useMemo…知ってはいるけどいつ使えば良いかわからない

Reactを始めてまもない方やバックエンドとフロントを両方兼務している方にとって、レンダリング最適化やパフォーマンスチューニングは苦手意識を持つ方が多いと思います。

かくいう私も普段はPHPとTypeScriptをいったりきたりしつつ、
フロント業務ではNext/Reactを触り始めてはいるもののメモ化周りとチューニング方法は全く理解できていませんでした。

原因を振り返ってみると以下のようなものでした
「各フックそれぞれの説明において、その場では分かった気がしていた」
「console.logが埋め込まれた前提で再レンダリングの説明をされるだけでは応用が効かない
「問題を検証　→ 分析　→ 改善（ここでメモ化周りのhooksを使う）フローで進められていない」
「そもそもどこがネックなのか検証できるツールと利用方法を理解していない」

そんな反省を踏まえて自分用の備忘録的に今回の記事を書こうと思いました。

:::n

ぼくがかんがえたさいきょうのREPLを作る（JScript）

# 概要

https://github.com/mukai1011/jscript-repl

まあまあやり尽くされたネタではありますが、JScriptのREPLを作ります。ES3のREPLなんか誰も嬉しくないってつっこみはナシです。

REPLとはRead-Eval-Print Loopとのことで、たいていのスクリプト言語に付属しているやつです。たとえばNode.jsでは、引数なしで`node`を実行することでREPLに入ることができます。


# やりたかったこと

せっかく後発なので、Node.js風に使えるかっちょいいものにしました。

## TypeScriptで書く

そこそこのサイズになりそうです、さすがにES3では書きません。構成はこの記事に準じます。

https://qiita.com/mukai1011/items/f9

npm install -g 〇〇に失敗する

# エラー内容

権限がないと言われているようです。
“`bash
% npm install -g typescript
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /usr/local/lib/node_modules/typescript
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, mkdir ‘/usr/local/lib/node_modules/typescript’
npm ERR! [Error: EACCES: permission denied, mkdir ‘/usr/local/lib/node_modules/typescript’] {
npm ERR! errno: -13,
npm ERR! code: ‘EACCES’,
npm ERR! syscall: ‘mkdir’,
npm ERR! path: ‘/usr/local/lib/node_modules/typescript’

PDFを閲覧＋αするクロム拡張の楽な作り方②

# 連載一覧
– **[PDFを閲覧＋αするクロム拡張の楽な作り方](https://qiita.com/largetownsky/items/1cb016598824b7ea1b1e)**
– クロム拡張でWeb上のPDFファイルを閲覧できる様になる
– ただし、URLは謎形式で手入力する必要あり
– **[PDFを閲覧＋αするクロム拡張の楽な作り方②](https://qiita.com/largetownsky/items/fe854ea78960816538e5)**
– 普通のURL入力やリンククリックのPDF閲覧に対応
– 普通にPDFビューアとして使える様になる
– **[PDFを閲覧＋αするクロム拡張の楽な作り方③](https://qiita.com/largetownsky/items/e61624ba8be7e1d50fed)**
– PDF閲覧に独自処理を追加

# 前回のまとめ
Web上でPDF閲覧にスクリプト処理を追加するのは、[pdf.jsライブラリ](https://mozilla.github.io/pdf.js/)のおかげで想像よ

23歳フリーターが、ライブ会場の座席検索サービスを作ってみた

今回、ポートフォリオとして**ライブ会場の座席検索サービス**を作ったので、少し解説します。

# 目次

[1.作った経緯](#1-作った経緯)
[2.実際のページ](#2-実際のページ)
[3.使用技術](#3-使用技術)
[4.工夫した点](#4-工夫した点)
[5.苦労した点](#5-苦労した点)
[6.これからの課題](#6-これからの課題)

# 1. 作った経緯

僕はよくアーティストのライブに行くのですが、チケットの席番号を見て毎回思うことがありまして、**「自分の席の位置がよくわからない」** ということです。

**特にスタンド席などは、会場全体を囲むように色々な方向に席があり、なおかつ 2階,3階とフロアも分かれているので、会場内で迷ってしまうこともあると思います。**

そんな悩みを解決するために今回作ったのが、**ライブ会場の座席検索サービス**です。
意外とありそうで無いサービスだったので、**だったら作ってしまおう！！** ということで作ってみました。

# 2. 実際のページ

[ライブ座席検索](http://www.search-venue-seat

JavaScriptのオプショナルチェーンを使ってオブジェクトの値にアクセスする。

# オプショナルチェ-ンとは

オプショナルチェーン演算子 (`?.`)を使うと、 オブジェクトの深い階層に存在するプロパティ・メソッドへのアクセスの際に、指定のプロパティが存在しない場合にエラーを吐かず、undefinedを返します。

これを使うことで、`keyA.keyB.keyC…`というようにオブジェクトチェーンで値を指定する時に、「keyBが存在しない場合にエラーを吐くな。。」といったことを気にせずかけます。

# どんな挙動をするのか
まずは、以下のようなオブジェクトを定義します。
こちらのプロパティにアクセスしつつ挙動を見ていきます。

“`js
const obj = {
test: {
key: ‘value’,
},
}
“`

### 通常の記述で存在しないプロパティにアクセス

以下のようにプロパティにアクセスすると、正常に値が帰ります。

![スクリーンショット 2022-05-28 11.02.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6

this language feature is only supported for ECMASCRIPT6 mode or better 【Google Tag Manager】

Google Tag Manager でカスタムHTMLを作成していたとき、次のようなエラーに遭遇

>JavaScript Compiler Error Typeform Tag Error at line 3, character 5: This language feature is only supported for ECMASCRIPT6 mode or better: const declaration.

同様に、line4, 5, 6, 7, 11, 22 行目もエラーがあるらしい

書いていたコードは以下

“`HTML




```
```
.box1 {
background-color: #FFFFFF;
height: 200px;
width: 200px;
floa

イベント設定

### イベント
ブラウザ上でユーザーが実行する動作（クリックやマウス操作など）のことを「イベント」と言います。
###### マウスオーバー、マウスアウト
要素にマウスカーソルが重なっている状態をマウスオーバー、要素からマウスカーソルが外れることをマウスアウトといいます。
```
.box1 {
background-color: #FF0000;
height: 200px;
width: 200px;
}
```
赤色の四角にマウスオーバーイベントを設定します。
```
$(function(){
$(".box1").mouseover(function{
```
mouseover()関数でマウスオーバーイベントを設定できます。（）内にfunctionを設定して、マウスカーソルが重なったときの動きを記述します。
```
$(function(){
$(".box1").mouseover(function(){
$(".box1").css({'background-color':'#0000FF'});
});
});
```
マウスカーソルが重なっ