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

https://qiita.com/kztmk_media_pep/items/1a5da1e989a0da5bc215

からの続きです。

## Babel.jsのインストール
Babel.js とは、Babel.js のトップページの例にあるように、モダン JS(ES2015 移行のJavaScript) を未対応の古いブラウザでも解釈できるような JavaScript に変換してくれるトランスコンパイラ (変換器) です。

古いブラウザに未対応やElectron向けの場合は不要です。

インストール方法は、[Babel.jsのSetup](https://babeljs.io/setup#installation)で、[Webpack]を選択すると表示されます。

1. Webpackを選択
1. npm install –save-dev babel-loader @babel/core
1. webpack.config.common.jsへ追加するコード
1. babel.config.jsonファイルの作成
1. npm install @babel/prese

【rails入門】javascriptを用いてチェックボックスの値を維持する Ver-2.0

# はじめに
この記事は以前投稿した[【rails入門】javascriptを用いてリロードしてもチェックボックスの値を維持する（本題）](https://qiita.com/Naoya_pro/items/c3e8c450302aca6053f4)という記事でやっていたことと同じことをよりスマートに書いたものです！
プログラミング初心者の僕にコメントでご教授いただいたことに感謝してこの記事を書いています！それでは早速やっていきましょう！！
# 現状とやりたいこと
* ゲーム名がランダムで1つ表示されるようなガチャを作りたい
* タグ検索機能を使ってジャンルを絞り込めるようにしたい
* 絞り込む時に使用するチェックボックスを**リロードした時も、リロード前と同じ値を維持したい**

今回は3つ目の`リロードした時も、リロード前と同じ値を維持したい`これをやっていきます:scissors:

![Something went wrong]()

## 1.今のチェックボックス
現状こんな感じでチェックボックスをrailsで作っています
“`ruby:gatya.html.erb
<%=

新年を迎えた時にセレクトボックスにその年の項目を自動追加する

Webアプリでスケジュール帳のようなものを作る際に、知識ゼロのだった頃は年が変わると毎回その年をセレクトボックスに追記…というような今思えばとても残念な対応をしていました。
そんな過去の自分のためにこのメモを。
“`javascript:add_year.js
var today = new Date();
var year = today.getFullYear();
var next_year = year + 1;
var year_after_next = next_year + 1;

document.write(““);
document.write(““+year+”“);
document.write(““+next_year+”“);
document.write(““+year_after_n

Stripe Billingで、銀行振込とカード決済の両方をサポートする際に注意すること

Stripe Billingを利用することで、カード決済だけでなく、銀行振込でのサブスクリプションも簡単に提供することができます。
しかし、決済タイミングの違いなどでサービスへの組み込みには注意が必要な点がいくつか存在します。
今回はそれぞれの決済方法での違いと併用する際のポイントを紹介します。

## Webhookで決済方法の違いを吸収する

もっとも大きな違いは、「請求・支払い方法」です。

カード決済の場合、顧客が登録したカードに対して請求を行うため、2回目以降の決済についても提供側・顧客どちらも特別な操作は原則不要です。
しかし銀行振込の場合、毎回顧客が必要金額を指定口座に振り込む必要があります。
そのため、サービスの提供開始タイミングを「決済が完了した後」とする場合には、以下のようなWebhookを用意して、決済が完了しているか否かを処理する必要があります。

“`js
if (event.type === ‘customer.subscription.updated’) {
const subscription = event.data.

v-modelに指定したObjectが動的に更新されたけど画面に反映されない

v-modelにObjectとかを指定しているとき、メソッドとかでそのObjectの要素が変わったとしても画面に反映されない時がある。そんなときの対処方法。

問題例）
“`html

花子の年齢：

年：

“`

セレクトボックスで年を選ぶと、自動的に花子の年齢テキストボックスに年齢が表示される想定です。

“`js
export default {
data(){
return {
hanako: {},
year: [
2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,
2010,2011,2012,2013,2014,2015,2016,2017,2018,2019
],
},
watch: {
selectYear: function(newValue)

Screeps:ArenaをTinyGoのWebAssemblyで書こうとして断念した話

# あらすじ

– Screeps:Arena チュートリアルやったけどおもろそうやん
– CtFやろうと思ったけどクラスないとしんどいなぁ
– WebAssemblyでほかの言語も行けるらしいし勉強がてらGoでやるか
– 環境整えるのめんどいからDockerで作るか
– ビルドできたけどwasm_exec.js動かんやんけ！
– 断念

# 目次
– [Dockerの準備](#Dockerの準備)
– [ビルド](#ビルド)
– [他に必要なコードの取得](#他に必要なコードの取得)
– [結果](#結果)
– [展望](#展望)

# 環境
– Windows10 Home
– TinyGo 0.22.0
– Docker Desktop 4.7.0

# Dockerの準備
– https://docs.docker.jp/docker-for-windows/install.html からダウンロード＆インストール
– https://tinygo.org/getting-started/install/using-docker/ を参考にTinyGo環境のDockerイメージ

[vue]github pagesで表示されない

github pagesでvueプロジェクトを公開した際、なぜか真っ白なページになっていたのでその解決法を書く。

# 原因
jsなどassetsファイルへのパスが間違っている。

公開されるパス:
https://\.github.io/\<プロジェクト名\>/

一方build後のindex.htmlはjsの読み込みを絶対パスで表記しているのでファイルが読み込めない。

期待しているパス:
https://\.github.io/

“`index.html

“`

# 解決法
相対パスに直せば良い。

vue.config.jsに書けばbuild時に相対パスで出力してくれる。
“`vue.config.js
module.exports = defineConfig({
// …
assetsDir: ‘./’,
publicPath: ‘./’,
})
“`

“`index.html

create-react-appでReact18がインストールされた後にReact17へ戻す方法(JavaScript編)

# create-react-appでReact18がインストールされた後にReact17へ戻す方法(JavaScript編)
先日、React18がリリースされてCRAもReact18に対応しました。
しかし、react-beautiful-dndなどのライブラリがまだこのバージョンに対応してなくて動かないことがあるため、前バージョン(17.0.2)に戻す方法を紹介します。

## 前提
“`
npx create-react-app <プロジェクト名>
“`
または
“`
yarn create react-app <プロジェクト名>
“`
でReact18がインストール済みである。

## 手順
1. package.jsonの”dependencies”を下記の通りに書き換える。
“` json
“dependencies”: {
“@testing-library/jest-dom”: “^5.16.2”,
“@testing-library/react”: “^11.2.7”,
“@testing-libra

夜集中して、寝ないで頑張れる環境をつくり、疲れたらLINEで癒しの曲を！

## Obniz X LINE Botで勉強を頑張れる「環境づくり」にチャレンジ！
最近仕事が特に忙しく、**プログラミングスクールとの両立に苦労していました**。辛酸をなめる状況が続き、まとまった時間を捻出するのが難しい環境だからこそ、**よなよな勉強を頑張れる環境を整えたい。**

特に、**仕事後の夜の勉強時間を増やし、質も向上させたい**。そのために今回は、**IoTの力**を利用して、**３つの課題解決**に取り組んでみました。

##### ①　妻が部屋に入ってきて話し込んでしまう　→　集中モードの時は赤いLEDを点灯させる
##### ②　眠くなってくると、寝てしまう　→　ベッドに寝ようとするとき、警報を鳴らす
##### ③　休憩すると、長くなってしまう　→　疲れたよ！と送ると、自動的に癒しの音楽が流れ、その間だけ休憩する

**今回のイメージ動画をご覧ください。**

勉強に集中できる部屋作りに、IoTの力を借りてモノづくりしてみた#protoout pic.twitter.com/wlK667w1Qi

— Nori (@NORI30363592) April 14, 2022

## 課題①　妻が入ってきて、話し込んでじゃうので集中モードの時間を

とかく、この世は住みにくい。対人関係の距離感をobnizで物理的に測り矯正するLINEBotを作成！

## 目的
みなさん、毎日生きづらいですか？ちゃんと懊悩してますか？この世の悩みごとの多くは対人関係から生まれると言いますが、他人との距離感の取り方って難しいですよね。私個人としては他人と距離を置き気味で迷惑をかけることもあるのではと思っているのですが、その自己認識すらずれているかもしれません。悩ましい。

というわけで、友人知人に対して、自分が心地よいと思っている距離感が、果たして客観的に見てどれぐらいなのかをセンサーで図り教えてくれるLINEBotを作ろうと思います。


こちらの42カ国、9000人を対象にしたパーソナルスペースの調査によると、ルーマニアやハンガリーなどは、130センチ以上距離を取り、アルゼンチンやペルーは80センチを下回る超情熱系のインファイターと、国によってもパーソナルスペースにかなり変動がある

fetch の使い方 (get)

次のページを参考にしました。
[[HTML5] Fetch API で GET/POST で通信する](https://blog.katsubemakito.net/html5/fetch1)
[World Time API](https://worldtimeapi.org/)

“`html:index.html

Fetch API Sample1

…サーバから時

JavaScript メモ

# メモ JavaScript
* 次にふれる機会のための防備録的に。。

## 規約

– (先頭大文字)キャメルケース
– クラス名
– (先頭小文字)キャメルケース
– オブジェクト名＝変数名、関数名
– 関数名は「動詞＋目的語」
– 全て大文字のスネークケース
– 定数
– 文末の`;` は省略可
– 省略するか付与するかは統一した方がいい。プロジェクトの規約に従う。
– 文字列を囲う記号は シングルクオート と ダブルクオート どちらでも良い
– 文中に表れない方を用いれば良い

## 宣言

### 変数

– `let` キーワード で宣言

“`jsx
let myValue
“`

– スコープ範囲：ブロック

– `var` キーワード宣言 は非推奨
– スコープ範囲：関数

### 定数

– `const` キーワードで宣言

“`jsx
const min = 0
“`

– スコープ

Stripeでカード決済と銀行振込の両方をサポートする決済処理を実装する

クレジットカードを利用した商品の注文やサービス申し込みは、今やオンラインビジネスに欠かせない要素です。
ですが、より多くの顧客に商品・サービスを提供したいと考えた場合、クレジットカードを利用できない顧客やシーンについても考慮する必要があります。

例えば、電車での移動中や混み合った店内、信頼性の低いwi-fiネットワークを一時的に利用している場合などでは、クレジットカードを取り出したりカード情報を送信したりすることをためらうことがあります。
また、未成年者など自分のクレジットカードを持っていない方の存在もビジネスによっては無視することができません。

この記事では、Stripeを利用してカード決済だけでなく、銀行振込での決済も処理する方法を紹介します。

## 銀行振込での決済処理も、PaymentIntentを利用する

StripeでのカードやGoogle Pay / Apple Payなどの処理は、まずサーバー側でPayment Intentを作成します。

“`js
const paymentIntent = await stripe.paymentIntents.c

JavaScriptの親切過ぎる型変換

# 概要
jsの比較演算子に関する仕様です。
間違って配列と数値を比較してしまいましたが、処理が通ったので驚きました。

“`js
// 比較A
1 == [1] // true
// 比較B
1 === [1] // false
// 比較C
‘1’ === [1] // true
“`

# 種明かし
比較する値がオブジェクトの場合、手順を追ってプリミティブ型に変換した上で比較される。

# 解説
[stack overflow](https://stackoverflow.com/questions/1724255/why-does-2-2-in-javascript)でも解説をみつけましたが、`比較A`を例に解説します。
解説中にプリミティブ型とオブジェクト型が出てくるので、分からない方は以下を参考に
> プリミティブ型とオブジェクト型
> https://qiita.com/makotoo2/items/9566cebf205ef8b42505

“`js
// 比較A
1 == [1]
“`

1.　まず、右辺がオブジェクトなので、プリミティブ型に変換。
Arra

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

実機でのみ発生する
デベロッパーツール上では発生しない
expanded-itemの表示/非表示切り替えごとに再レンダリングさせることで解決できた様子
下記はVue.js2.0の場合の方法です

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

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[src]’).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