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

【Vuetify】iPhoneやiPodTouchでv-data-table のexpanded-itemが表示/非表示切り替えで崩れる

実機でのみ発生する
デベロッパーツール上では発生しない
ブレークポイントごとに再レンダリングさせることで解決できた様子
下記はVue.js2.0の場合の方法です

v-data-table(
:headers=”headers”
:items=”items”
:single-expand=”‘false'”
:expanded.sync=”expanded”
show-expand
:key=”isMobile ? `spTable${expanded.length}` : ‘pcTable'”
)

computed: {
isMobile () {
return this.$vuetify.breakpoint.mobile
},
},

jQuery　functionが効かない　jsで後から追加した要素

## 用途
– jsで後から追加した要素にfunctionを効かせたい時に使う。
– ページの読み込みが終わった後に作られた要素に対して、functionを効かせたいときに使う。
– jsでfunctionが効かない時に試してみる。

## 使用方法
“`js:効く書き方
$(.hoge1).on(“click”, “.hoge2”, function(){
// クリックした際の処理を書く
});
“`
hoge1クラスがhoge2クラスの親要素。
hoge2クラスはページ読み込み後にjsで追加された要素。

**このコードが効く理由**
親要素である「hoge1クラス」はページ読み込みの際には存在していて、後から追加した「hoge2」クラスも「hoge1クラス」に `on` をしたことに含まれているから、このような形で効くようになる。
　

“`js:効かない書き方
$(.hoge2).on(“click”, function(){
// クリックした際の処理を書く
});
“`
**上記のコードが効かなかった理由**
ページ読み込みの際には「hoge2クラス」は存

HTTP経由で任意のコマンドを実行する

“`bash
echo GET / H | nc -l 8080 && systemctl poweroff -i
“`

http://localhost:8080/ にアクセスするとシャットダウンできます。ポートフォワーディングすれば外出先からシャットダウンできます

“`bash
curl localhost:8080
“`

“`javascript
fetch(‘http://localhost:8080/’)

// 動画が終了したらシャットダウン
document.querySelector(‘video’).addEventListener(‘ended’, () => fetch(‘http://localhost:8080’))
“`

### Firefoxを開く
“`bash
echo GET / H | nc -l 8080 && firefox
“`

### 参考
http://blog.livedoor.jp/sonots/archives/34703829.html

React18がリリースされたので、開発環境をゼロから構築してみる。【中編】

[前編](https://qiita.com/kztmk_media_pep/items/a00631a5e1bb1cd13597)からの続きです。

## なぜWebpack設定ファイルを分割するのか？

webpackは、「JavaScript」「CSS」「SASS」「画像」などを

* 1つ、または、複数のファイルにまとめる。
* 出力されたファイルを圧縮・難読化する。

などの機能があります。

設定ファイルが複数あれば、

開発時にはJavaScript、CSSはソースマップ付きで読みやすく、リリースビルド時には、圧縮しファイルサイズを小さくする。

開発時には、圧縮関連のプラグインを読み込まずコンパイル時間を短くする。

など、開発時、リリースビルド時で設定を柔軟に変更することができます。

### Webpack設定ファイルの分割

今回は、webpack.config.jsを

* 共用
* 開発版
* リリース版

の3つに分割し、開発時は、

共用版 + 開発版

リリースビルド時は、

共用版 + リリース版

を使うようにします。

コマンドラインで作成さ

楽天銀行に自動ログインする

### なんか自動ログインがうまくいかない

ということで、

https://www.tampermonkey.net/

を使用して自動ログインをしてみることとしました。

### 想定以上に簡単なスクリプトです。

なんだ、これならできるじゃん、ってほど、簡単です。

“`rakuten-bank-autologin.js
// ==UserScript==
// @name 楽天銀行自動ログイン
// @namespace https://fes.rakuten-bank.co.jp/MS/main/RbS?CurrentPageID=START&&COMMAND=LOGIN
// @version 0.0.1
// @description:楽天銀行自動ログイン
// @author nano
// @match https://fes.rakuten-bank.co.jp/MS/main/RbS?CurrentPageID=START&&COMMAND=LOGIN
// @require https://ajax.

FirebaseをJavaScriptで使ってみる

## FirebaseをWebで使ってみる

1. プロジェクトを作成
2. ファイルを作成

“`
.
├── index.css
├── index.html
└── index.js
“`

index.js
“`javascript
const register = () => {
// input要素のtype属性を取得
const email = document.getElementById(‘email’).value
const password = document.getElementById(‘password’).value
console.log(email, password);
};
“`

index.html
“`html

Prisma で Upsert Many はないのか

**ない**です。
updateMany や deleteMany はあるのに・・・
ですが似たようなことを簡単に実現できそうです。

# 結論

公式の例をもとにすると複数の User 情報をまとめて Upsert したい場合は以下のようになるかと思います。

“`ts
async upsertUserMany(userList: User[]):Promise<{count:number}> {

// map関数でupsertのクエリを複数作成
const query = userList.map(user => (
prisma.user.upsert({
where: {
email: user.email,
},
update: {
name: user.name,
},
create: {
email: user.email,
name: user.name,

照度センサーを使って灯りがついている時間を計測し、電気料金がわかるものづくりに挑戦してみた！！

こんばんは。

現在小売業で働いており、新入社員の受け入れの研修をしています。
講義の中で「**店舗で使用しているものはすべて経費が掛かっていると思ってください。**」と
新入社員に伝えましたが、こんなぼんやりしている説明はないなと反省・・・

**なので、経費としてわかりにくいものを**
**分かりやすくするための装置を作ろうと実装してみました。**

（ひとまず照度センサーを使って電気料金がわかるものを作りたくなったので、
まずは家のトイレで使用している電気料金を調べてみることにしました！）

## 作ろうとしたもの
照度センサーを使って電気がついている時間を分単位で計測し、
電気料金がわかるものを作ろうとしました。


↑の画像は電気をつけている状態でNode.jsを実行して、
0.15v以下になった時間を計測してくれるものです。

【rails入門】javascriptを用いてリロードしてもチェックボックスの値を維持する（本題）

# やりたいこと
リロードしてもチェックボックスの値を維持する
### 実装したらこんな感じ


# 仕組み（ゴリ押し）
1. javascriptで全てのcheckboxのtrue/falseをリストに格納
1. そのリストを「次へ」ボタンが押されたときにコントローラに送り、保存する
1. 「次へ」ボタンを押したらリロードするので、その時にデータベースから最新のcheckbox情報が入ったレコードをviewに渡す
1. 受け取ったリストに基づいてjavascriptを用いてチェックをつけていく
# 実装
checkboxがtrueかfalse保存する用のモデル作成！
1行ずつ実行してください
“`ruby:ターミナル
rails g model Check　

【７日目】メモ帳アプリの作成 [４]

# 本日の課題
今日は前回までに作った機能にCSSで見やすいようなデザインにし、削除ボタンを追加します。
まずはメモ内容と日付のセット1つ1つに枠を設けてパッと見たときにわかりやすくなるようなデザインを書きます。今回は`box`という名前にします。

See the Pen
Memo5 by mizmizsan2 (

JavaScript MikotoStudio 保存版 2022

# 概要

しまぶーさんのIT大学を基にまとめました

– 歴史と変遷
– 重要な３つの概念
– 変数宣言
– モジュールのImport/Export
– パッケージ管理
– バージョン管理
– CSS
– Mikoto プロフィール

# 歴史と変遷
JavaScriptは、昔シェアを占めていたブラウザーのNetScapeの社員が開発したブラウザでの表示・振る舞いを拡張させるための言語です。
Javaとは別の言語ですが、当時のJava人気をあやかってJavaScriptと名付けら

Adsenseを遅延読み込みさせるツール作ったらスコアが40点上がった

**Googleアドセンスを遅延読み込みさせるコードの生成ツール**を公開して実際にどれ位高速化したのか検証しました。
結論の通り40点もLighthouseのモバイルスコアが上昇しました

https://tools.ic731.net/seo/adsense/

## ツール概要
Webサービスを収益化しようとした際に必ず直面するのが**Google Adsenseを使うとPagespeed InsightsやLighthouseのモバイルのスコアが露骨に激落ちする**問題。

一応 AdSenseコードにも`async`属性がついており非同期で読み込むようになっていますが、如何せんスクリプトが肥大化しているため、パフォーマンス低下の要因となります。
別にInsightsやLighthouseのスコアが直接SEOに関係するわけではないのですが

JavaScript備忘録

補足：記号呼び方
[] 角括弧(かく – ) bracket ブラケット

{} 波括弧(なみ – ) brace ブレース

<> 山括弧(やま – )　　　　　　小なり／大なり less-than sign

`出力`
console.log(“”);
//「()」に出力する文字を入力。文字列は””　、数字はそのまま

`変数　let`
例
let name =”こんにちわ”;
console.log(“name”)　;
結果：こんにちわ

`定数 const`
例
const hello =”こんばんわ”;
console.log(“hello”);　
結果：こんばんわ

`テンプレートリテラル`　　特徴：※バッククォーテーションで囲む
例
const hello =”にんじゃわんこ”;
console.log(`こんにちは、${name}さん`);
//結果：こんにちは、にんじゃわんこさん

`条件分岐 if`　　※見やすくするために、Tabでインデント（字下げ）をつける

例
const number = 12;
if (number > 10) {
　　　　　　con

コピペでOK! 0円LINEチャットボットを作ろう! #LINEDC #GAS #クイックリプライ

## これ0円で出来んじゃない？

ある小売業でずっと営業職(店長)をしていたアナログ人間です。
昨年あるプログラミングスクールに通い、LINEを使ったアプリを0から開発。
クラウドファンディングにも挑戦しました。

https://camp-fire.jp/projects/528736/preview

自分で作ってみたことで、これまで何気なく「友達登録」していた色々な会社の
LINEチャットボットに対して「どう作ってるんだろ？」「なるほど～この機能こう使うか～」
と、色々な見方が出来るようになりました。(偉そう)

自社ではLINEチャットボットがまだ開発されていなかったので
**ならば0円で自分で作ってみちゃおう!!**と思い立ちました。

## LINEを入口にして情報にアクセス

プロトタイプとして作ったものはこちら

クイックリプライと
リッチメニューで
0円企業LINEbot
自作してみた?#protoout#linedc pic.twitter.com/gyzsTCpa4N

— おきなかがいこつ?のこるん作るひと? 【CF支援感謝】 (@okinakamasayos1) April 12, 2022

試作段階ですが、ぜひこちらからお試しください!!

!

yarnでcreate-react-appをするには？

Reactのアプリの雛形を作成するコマンドといえば
“`
npx create-react-app my-app
“`
に馴染みがあるのではないでしょうか。
私も特に疑問も持たずに、これまでこのコマンドでアプリを生成してきました。

しかし、これだと開発を進めていく際に`yarn`コマンドでパッケージの追加を使うと`package-lock.json`と`yarn.lock`がどちらもある状態になってしまい気持ち悪いことになります。

一旦、`package-lock.json`と`node_modulesディレクトリ`を削除して、`yarn install`で入れ直すことで解決できますが、それも二度手間。できれば気持ちよくReactの開発をスタートさせたいものです。

では、「yarnでcreate-react-appする」にはどうすればいいのか？

## Yarnでcreate React Appする
それが、こちら。
“`
yarn create react-app my-app
“`
`npx`の時は**create-react-app**でしたが、`yarn`の場合は

TypeScriptの基本の型

## 目的
皆さんこんにちわ！
都内でエンジニアをしております者です。
今回の投稿では、仕事でTypeScriptを用いた開発をすることになりましたので、その学習と振り返りを兼ねて記事を投稿しようと思っています。
この記事は少しづつブラッシュアップしていこうと思いますので、まずはメモ書き程度に見ていただければと思います。

### 基本の型
・boolean
・number
・string
・array
“`typescript:qiita.ts
//記述方法が二つ存在する
let list :number[] = [1,2,3]
let list :Array = [1,2,3]
“`
・tuple
“`typescript:qiita.ts
let x: [string, number];
x = [“test”, 100] //OK
x = [100, “test”] //NG
“`
・any
→どんな値も許容するが、使用するとTypeScriptの恩恵が受けられないので基本使用しない。
・unknown
→値の代入は肝要ですが、使用する際は厳しくType

jsonで中間プロパティが存在しないときに使えるオプショナルチェーン

APIなどでjsonを取得時、中間プロパティが存在しない場合
オプショナルチェーンという方法で解決できたため記載します。

## 先に結論
##### 解決したコード
“`javascript:sample-answer.js
// リクエストを投げる処理
console.log(data.items[i].volumeInfo.imageLinks?.thumbnail);
“`

以下の配列で`thumbnail`が欲しいのに`imageLinks`のプロパティすらないって場合
`console.log(data.items[i].volumeInfo.imageLinks.thumbnail);`

オプショナルチェーン [?] を利用することで左側のプロパティが存在するかチェックし、
存在しなければundefinedを返してくれます。

## 動作環境
ローカル環境でHTML, CSS, JS, jQueryを使用
　※Chromeで動作確認

## 解決したい課題
今回はGoogle Books APIを利用して簡単なWEBアプリを作成する際に発生しました。
APIで4

【備忘録】.phpから別の.phpを実行する

web開発初心者の備忘録です。
ガラパゴスでも自家消費用だからへーきへーき。
# ポイント
include関数とrequire関数を使用することで、外部の.phpを参照する事ができる。(.phpに限らずファイルなら何でも読み込める？未検証。)
それぞれの違いは以下の通り。
– include関数　→　ファイルを読み込めなかった際、E_WARNINGを発生させるが、処理は強行する。
– require関数　→　ファイルを読み込めなかった際、E_COMPILE_ERRORを発生させて、処理も止まる。

https://www.php.net/manual/ja/function.require.php
# ファイル構成
“`
IISでルートに設定しているフォルダ
　└ test
　　　├ main.html
　　　├ main.php
　　　├ lib.php
　　　├ main.js
　　　└ jquery-3.6.0.js
“`
# ソースコード
### main.html
“`html

【更新中】プログラミングノート（モダンJavaScript）

# はじめに
Udemyの[【世界で7万人が受講】Understanding TypeScript 日本語版](https://www.udemy.com/course/understanding-typescript-jp)を参考に一部JavaScriptを学習したので、プログラミングノート（カンペ用ノート）をします。

# letとvar
letを使うべき(ベストは全部const)
“`
// varはグローバルスコープまたは関数スコープ
function add(a: number, b: number) {
var result; // これは関数スコープ
result = a + b;
return result;
}

if (age >= 20) {
var isAdult = true; // これはグローバルスコープ
}
console.log(isAdult); // undefined

// letはブロックスコープ
if (age >= 20) {
let isAdult = true; // ブロックスコープ
}
console.log

JavaScriptで入力値を100万単位に変換したい時

## やりたいこと
input入力欄に3と入力されたら300万にしてAPIに送りたい。
桁数が大きいデータを扱うときにフロントでは桁数を少なく表示したい。一方でAPIに送る情報には元の数値を入れて送る

## 実装メモ
“`ts

“`

“`ts
const getInputValue = ():string => {
const target = document.querySelector(“input[name=name]”);
return target.value;
}
“`

inputで入力された値を取ってくるgetInputValue関数を作ります。
getInputValue関数の返り値はstringで返ってくる想定です。

### inputで入力された数値を100万単位にする関数
“`ts
const changeToMillion = ():number => {
const normalValue = getInputValue();
const millio