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

ポートフォリオとして、寝ていたら起こしてくれるCamera SleepというWebアプリを作成しました。

# はじめに
Camera Sleepというアプリを作成しました。
パソコンの前で作業をしているときに、つい寝てしまった時に、起こしてくれるアプリです。
使用場面としては、会議中につい寝てしまうような時に、起こしてくれるよう想定しました。
ただし、会議にはパソコンを持ち込む必要があります。

アプリのURLはこちらです。
https://camera-sleep.herokuapp.com/index.html

githubのソースコードはこちらです。
https://github.com/shosuke1989/camera-sleep

# アプリの説明
– 目を閉じているかwebカメラで判定し、寝ていると判定した場合音を鳴らします。
– 寝ている場合にメールを送信することもでき、スマホのバイブレーションで眠気を覚まさせます。
– メール記入欄に、メールアドレスを記入すると寝ている場合に、メールが送信されます。
– メールが届かない場合は、アドレスが間違っているか、迷惑フィルタがかかっている可能性があります。
– 目を閉じているか判定する閾値を調整することで、精度を上げることがで

配列のループは、基本のfor of loopでも、for loopでも書ける！

JAVASCRIPTのforループを整理するための記事です。

この記事を見るとわかること：配列のループfor of loopでかける配列のループは、for loop でもかける

＜書きたいもの＞
仮引数：数値型の要素を持つ配列
返り値；与えられた配列のすべての数字の合計

actual = sumArray([1, 2, 3, 4]);
expected = 10;

その１　for of loop　を使う
（配列の各要素にアクセスする）

function sumArray(numbers) {

let result = 0
for (const number of numbers){

result = number + result

}
return result;
}

その２　for loop　を使う
（配列の要素、オブジェクトのキー、一つ一つに同じ処理を繰り返したいとき）

function sumArray(numbers){

　 let result =

【JavaScript】データ型とリテラル

# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。

# この記事で理解できること
* JavaScriptの値のデータ型について
* データ型の分類(プリミティブ型、オブジェクト)
* 主要なデータ型のリテラル

# データ型とリテラル
* JavaScriptでは、変数に対する型は存在しないが、値には型(`文字列、数値、真偽値など`)が存在する。
* その値の型のことを`データ型`と呼び、大きく分けると二つ(`プリミティブ型`、`オブジェクト`)に分類される。

## プリミティブ型
* `文字列や真偽値、数値`など一度作成すると、値自体を変更できない`イミュータブル`な特性を持つ基本的な型。

|型|例・備考|
|–|–|
|

classnamesほど高機能じゃなくてもいいんだよなぁ～の場合の書き方メモ

## classnames
こちらの[classnames](https://github.com/JedWatson/classnames)はREADMEにある通り、結構いろんな書き方ができるので便利です。

便利だな～と思ってつかっているのですが、ちょこっとクラス名を切り替えるくらいしかしない自分にとっては「stringの配列で指定できればそれでいいのだよな…」
と思っていました。

最低限

– 配列でクラス名をいくつか指定したら半スぺ区切りの文字列を返してくれる
– 要素が配列になっていたら均してくれる(2～3くらい　それ以上は型ではじく)
– クラス名がミスって被っていたとしても重複を除いてくれる
– 空文字列を返すと除外してくれる

こんくらいあればよくて、ちょっとサポートしてくれるだけで充分なんだよなぁと思っていたのでメモ代わりにコードを残します。

オブジェクトでプロパティにクラス名を入れてvalueにbooleanをいれて…
がやりたい人はこの記事の対象ではありません。

例はSvelte。.svelteにするとハイライトがきかないので分けて書きます。

### &l

jest で uuid がインポートされているファイルを読み込むとエラーになってしまう。

## 環境
– nodejs: 14.17.6
– uuid: 8.3.2
– nextJs: 12.1.0
– typeScript: 4.6.2

## エラー内容
uuid パッケージが ECMAScript　に対応していないのが原因かな？？
“`sh
● Test suite failed to run

Jest encountered an unexpected token

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel c

ゆめみからの挑戦状第3弾のreduceを用いる解法

皆さんこんにちは。先日、~~大喜利大会~~ [ゆめみからの挑戦状](https://qiita.com/Yametaro/items/86cbd945b4faf44e8349) としてJavaScriptのクイズが出題され、とても盛り上がっていました。リンク先の記事では、自分の解答も面白解答として紹介していただきました。模範解答は `flatMap` を用いるものですが、筆者の解答では配列操作の定番のひとつとして `reduce` メソッドを使ってみました。

そこでの解法がやや難解なコードとなっていたので、解説記事を用意しました。

# 問題と解答

出題されたクイズの内容は以下の通りです（上述の記事から引用）。

“`js
const array1 = [1, 2, 3, 4, 5, 6]
const array2 = array1./* ここに解答を書いてください */

console.log(array2)
// -> [1, 1, 1, 2, 2, 3, 3, 3, 4, 4, 5, 5, 5, 6, 6]
“`

配列を指示通りに加工するコードを書いてねという問題です

「Typescript」でprototypeの沼にハマったので、色々調べてみた。

Typescriptを学習中、prototypeに対する挙動について調べる機会があったので、
復習も兼ねて投稿します。
間違っている箇所等があればぜひご指摘ください！?

# 【 前提知識 】
## 1. Javascriptは「プロトタイプベース」

Javascript本格入門より

>Javascriptには「インスタンス化・インスタンス」という概念は存在するが、
>「クラス」という概念はなく、プロトタイプ（雛形）と言う概念が存在する。

**■Javascriptのクラスの作成方法（ES2015以前）**
“`javascript
let A = function() {}; // クラスの作成完了。

let a = new A(); // インスタンスの完成。

let B = function ( firstName, lastName ) { // クラスの生成とコンストラクタ
this.firstName = firstName; // プロパティの生成
this.lastName = lastName;
this.getName = fu

ファイルアップロード機能をファイル選択ボタン非表示で行う方法

## 前提
・ ファイルアップロード機能を作りたい人
・ 「ファイルを選択」ボタンを表示させたくない人

## ファイルアップロード
通常ファイルアップロード機能を作る場合、「input type=”file”」にすると思うが、それだとファイル選択が表示される。


“`html

“`

こういった「ファイルを選択」ボタンを出さないようにするにはどうすれば良いのだろうか。
![スクリーンショット 2022-08-23 21.47.00.png](https://qiita-image-store.

人事のおじさんプログラミングを学ぶ Day6「論理演算子」

書籍『確かな力が身につくJavaScript「超」入門 第2版』に沿って、
時間で異なるメッセージを表示する～論理演算子をやってみた。

現在地が取得(できたら|できなかったら)何かする

少し時間が経つと忘れすぎ問題

“`js
function hogehogefunc() {
function success(position) {
// todo
}
function error(error) {
// todo
}
var watch_id = navigator.geolocation.watchPosition(success, error, {
enableHighAccuracy: true
});
}

hogehogefunc()

“`

おまけ：これも調べず書きたい
“`js
if( window.matchMedia(‘(max-width: 767px)’).matches ) { // スマホ幅以下だったら
// 何かの処理
} else { // スマホ幅以上だったら
// 何かの処理
}
“`

import { ~ as ~ } の”as”とは何者なのか

はじめに
—
ポートフォリオのフロント側をTypeScript(react)で開発しているのですが、参考にしていた記事で出てきた”import { ~ as ~ }”の”as”はどういう意味なのかしっかり理解しておきたいと思ったので、調べたことを備忘録として残します。
(※import/exportの説明は割愛します）

asとはなんなのか
—
ものすごく簡単に結論だけ述べると、”as”を使うことで元のモジュール名を別名として使用することができるようになります。
MDNの下記の例が分かりやすかったので引用します。
~~~js
import {
reallyReallyLongModuleExportName as shortName,
anotherLongModuleName as short
} from ‘/modules/my-module.js’;
~~~
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import#%E3%82%A4%E3%83%B3%E3%83

JavaScript で for ループ ってどう書くんだっけ？

– [あるWebサービスの開発メモ・目次ページに戻る](https://qiita.com/ishi32/items/152a1ecf7eeee7a8fb57)
– [あるWebサービスの開発メモ・JavaScript チートに戻る](https://qiita.com/ishi32/items/aa1db70e2176652dc97f)

### やりたいこと

本サービスではユーザの生まれ年を登録していただこうとしています。これには mui の Select コンポーネントを使用します。あらかじめ選択肢をセットした配列を作成し、これを map で展開して Select コンポーネントの選択肢として設定しようとしています

### 実装

“`
const years = [];
for (let i = 1921; i <= 2022; i++) { years.push(String(i)); } ``` JavaScript の for ループは C と全く同じでした。これならもう忘れることなく for ループは書けそうです JSX 側ではこのように Select コ

ShadowDOM内のcontenteditable属性を使ったエディタ内のキャレットの位置を取得する方法

Web上で使えるWYSIWYGエディタなどのエディタを製作する時に、div要素などに`contenteditable=”true”`の属性を追加すると、その要素は編集可能な要素になる。
“`html

“`

これを使ってエディタを作っていくわけだが、エディタを使ってリンクや他の様々な要素を挿入したい時に、今どこにキャレットがあるか等のキャレットの位置を知る必要がある。

そこで、`document.getSelection()`のAPIを使って、SelectionやRangeを取得し、キャレットの位置を把握するのだが、WebComponentsのShadowDOMを使っているサイトの場合、これでは取得できないのだ。

現状のブラウザの実装を述べると、
Chromeでは、`document.getSelection()`を実行しても、ShadowDOM内を指したSelectionオブジェクトは返ってこない。しかし、`shadowRoot.getSelection()`というAPIが用意されている。
FireFoxでは、`doc

コメント化の切り替えTips

# 概要

リファクタリング等を行う際に元の処理と新しく作った処理を切り替えるのに「ここからここまでをコメントアウトして…ここからここまでを有効化にして…」というちょっと面倒な作業を解決するTipsです

# 解決策

“`php
/*/
processA(); // ここがコメントアウト状態
/*/
processB();
//*/
“`

“`php
//*/
processA();
/*/
processB(); // ここがコメントアウト状態
//*/
“`

(Qiita上でシンタックスハイライトが効いてくれているのでわかりやすい・・・ｗ)

CやPHPやGo、JavaScriptその他諸々の言語で採用されている↓の場合に使用できます。

“`php
// 1行コメントアウト

/*
複数行コメントアウト
*/
“`

:::note warn
ただしPHPDocのような書き方のコメントが途中にあるとうまく動いてくれないので注意

“`php
//*
var_dump(‘a’);
/*/

/**
* PHPDOcとか
*/
var_dump(‘b

【javascript】【jquery】autocomplete(オートコンプリート)の複数セレクタを判定する

# コード

“`html




“`

“`javascript
area.find(‘セレクタ1,セレクタ2’).autocomplete({
source: function(request, response) {
const text = request.term;
const hit_list = [];
if(this.element.attr(‘name’) === ‘chara_nam

React + TypeScript: Apollo Clientのフラグメントで操作間のフィールドを共有する

[Apollo Client](https://www.apollographql.com/docs/react/)はReactで使える状態管理ライブラリです。ローカルとリモートのデータをGraphQLで扱えます。本稿は公式サイトの「[Fragments
Share fields between operations](https://www.apollographql.com/docs/react/data/fragments/)」にもとづいて、複数のクエリや変更の操作間でフィールドをどう共有するかについての解説です。Apollo Clientでクエリを使うための基礎はすでに学んだことが前提となります(まだの方は先に「[React + TypeScript: Apollo ClientのGraphQLクエリを使ってみる](https://qiita.com/FumioNonaka/items/0c6b711627e3443ff73b)」をお読みください)。ドキュメントの邦訳ではなく、日本語で説明し直しました。原文から省いた部分もあり、逆にわかりにくいところは補っています。

[Gra

SSR と CSR の違いを図で表してみた

# はじめに

SSR と CSR の違いを説明するために、一目で把握できる資料が欲しかったので作成してみました。

どっちがどういうときに有利なのか、といった考察はしません(うまくまとめる能力もないので?)。

以下の違いを表現することが主な目的です。

– 最終的な HTML が生成されるタイミング
– ダウンロードされるデータ量

# 用語解説

– SSR
– **S**erver-**s**ide **R**endering の略
– CSR
– **C**lient-**s**ide **R**endering の略

# 概略図


# まとめ

自分の表現力の乏しさにはがっかりですが、実際に説明するときにうまく使えれば良いなぁ、と思ってます?。

バリデーションが実行された後、jsが機能しない

# はじめに
本記事はプログラミング初心者が、railsの学習を進めながら、躓いた部分、解決した箇所、またそれらの解決方法を備忘録も兼ねてまとめているものです。
最初はprogate。そのあと、「現場で使える RubyonRails5 速習実践ガイド」(通称)「現場Rails」を参考に進めていきました。
そのため、記事の内容には誤りがある可能性があることをご理解ください。
誤りがあればお手数ですが、ご指摘いただければと思います。よろしくお願いします。

# 環境
Ruby 3.1.2
Rails 7.0.3.1

# 問題のエラー
バリデーションが実行された後に、jsが機能しなくなってしまった。
![スクリーンショット 2022-08-21 23.01.30.png](https://qiita-

規約などが更新された時に確認をして自動遷移する

## 規約などが更新された時に確認をして自動遷移する

よくある「規約が更新されましたので、ご確認ください。」をPHP内で実現したかったので。

### 必要なもの

– 新規規約開始日は9月1日
– DBには同意日をDATE TIMEで保管済み
– DBから$result[“agrDate”]で同意日を取得済み

### コードの骨子

“`php:top.php
$new_confirm_date = date(“Y-m-d H:i:s”, strtotime(‘2022-08-31 09:00:00’));//前の日にしている
$agree_date = date(“Y-m-d H:i:s”, strtotime($result[‘agrDate’]));

//規約の同意日を確認
if($new_confirm_date >= $agree_date){
/*規約更新ページへ移動する*/
$doui_alert = “