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

iPaaSを使って”ちょうど良い”電車の時間を教えてもらう

## 「今から家を出たらどの電車に乗れるのか」が知りたい
電車の時間を調べるために、時刻表アプリを使っている方は多いと思います。
確かに色々な駅からの経路や時間を調べるのには大変便利なのですが、自宅の最寄り駅からの電車で、毎回家を出る前に同じ経路を入力するのが面倒だと感じるのは私だけでしょうか？
自宅から最寄り駅までの所要時間は分かりきっているので、今から家を出たとしてちょうど良い時間が簡単に分かればいいのに…。という訳で、**iPaaS**の一つである**Make**を使って簡単にちょうど良い電車の時間が分かるアプリを作ってみました。

なお、ここでの”ちょうど良い電車”の定義としては、自宅から駅までの所要時間を計算した上で、一番早い時間の電車のことを指しています。

## スマホからワンタッチでちょうど良い電車を知らせてくれるアプリ
作ったものはこちらになります。
まず、ホーム画面に作成したショートカットからGASで作ったWebアプリにアクセスします。
![hoe.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.

パスワードを保存する時に最低限やるべき事　不可逆暗号（ハッシュ）化

## はじめに
仮に自前で認証機能を実装する場合、パスワードを保存する際には最低限すべき事があり、それについて少し理解を深めてみたので備忘録を残す。

## パスワード保存時には不可逆暗号（ハッシュ）化をする
パスワード保存時にはそのままDBに保存するのは絶対NGで、[sha256](https://wa3.i-3-i.info/word15997.html)などの暗号学的に優れたハッシュ関数でハッシュ化するのが鉄則になる。

そして、単にハッシュ化すればいいのではなく、ソルト（Salt）と呼ばれるランダムな文字列をパスワードに追加してハッシュ化する必要がある。理由としてはハッシュ化の方法が分かれば https://hashtoolkit.com/ のようなサイトで簡単に逆引きができてしまうため。

実際にどのようにパスワードを保存すればいいのか？だが、例えば以下のようなコードになるだろう（以下はORMの[Sequelize](https://sequelize.org/)を利用している時の実装例で、[create（Simple INSERT queries）](https://seq

非同期処理が終わってから別の処理をしたい時

## 何の記事か
Vanilla JSで非同期処理の完了をトリガーにして別の処理呼び出しをする時のメモです。
jQueryには`ajaxStop()`というメソッドがありますが、あれをVanillaで書くとこうなるというやつです。

## どうやるか
“`javaScript
((open) => {
XMLHttpRequest.prototype.open = function (method, url, async, user, pass) {
this.addEventListener(‘readystatechange’, function () {
if (this.readyState === 4) { // DONE
// 処理呼び出し
}
});
open.call(this, method, url, async, user, pass);
};
})(XMLHttpRequest.prototype.open);
“`

在宅中に休憩提案（ミッション）を課してくるLINE botを作ってみた（GAS&Make）

## 在宅ワークで有意義な休憩が取れていますか？
皆さんは在宅ワークをしていますか？？
私は今年度から部署が変わり在宅勤務が多くなりました。在宅ワーク中、休憩のタイミングを失ってしまったり、休憩中にSNSをみてしまってなかなか仕事に戻れなくなってしまったり。。。今回は適度なタイミングで休憩を提案してくれるアプリが欲しいと思い作成をしました。このアプリを使うことで休憩をより有意義にそしてちょっぴり楽しく過ごせればなと思います。

## LINEにミッションが送られてくる
あらかじめ、スプレッドシートに休憩中にしたいことを記載しておくことで指定した時間になると、その中からランダムにしたいこと取得をしてメッセージを作成します。
そして、作成したメッセージをLINEに通知をします。
あなたはこのメッセージの通りにミッションをこなすことで適度な休憩と達成感が得られ、最高のコンディションで仕事をすることができます。

在宅ワークの休憩のタイミング難しい問題を解決するために、一定時間ごと

Power PagesにJavaScriptで郵便番号検索を実装してみた。

前回に引き続き、Preview版のPower Pagesをハックしていきます。
今回は、標準の機能では提供されていない、郵便番号検索を実装します。

具体的には、Power PagesがレンダリングしているHTMLのDOMを調べて、そこにJavaScriptで直接ボタンオブジェクトを書き込み、そのボタンが押されたら郵便番号検索APIからデータ取得した住所データを表示するということをやってみたいと思います。

えぇ、、ちょっと自分でも「何言ってるのか、よくわからない」んですよ?

## まずはフィードバックテーブルに列を追加
Power Pagesのサンプルにある「お問い合わせ」ページに使われているテーブル「フィードバック」に「郵便番号」と「住所」を追加します。
![image.png](https://qiita-image-store.s3.a

節電対応

政府の節電要請に基づき、おうちモニターに当日の電気の使用状況を追加してみました。


sqlite3からデータを拾ってjson作るスクリプトは以下のようにしました。

“`ruby:todaysm.rb
#!/usr/local/bin/mruby

db = SQLite3::Database.new(“/tmp/ouchi.db”)

time = Array.new
val = Array.new

ago = 0

yday = (Time.now – 60*60*24*(ago + 1)).to_s[0, 10]
tday = (Time.now – 60*60*24*ago).to_s[0, 10]

i = 0
# select by JST
sel = “select time, power from sm”
whe = ” w

JavaScriptのthisについて

# 初めに
今回は`this`について自分なりにまとめたものをアウトプットしたいと思います。
主にこの二つの文章を参考したうえの勉強メモです。
[Understanding “This” in JavaScript | Codementor](https://www.codementor.io/@dariogarciamoya/understanding–this–in-javascript-du1084lyn)
[Understanding “this” in javascript with arrow functions | Codementor](https://www.codementor.io/@dariogarciamoya/understanding-this-in-javascript-with-arrow-functions-gcpjwfyuc)
検証を書いたら文章が長くなってしまって、TLDRの方は[結論](https://qiita.com/drafts/74529effd585de1d70ca/edit#%E7%B5%90%E8%AB%96)だけ読んでもいい

引数とパラメータがようやく理解できた僕

# はじめに
エンジニアとしてキャリアをスタートして半年。
“引数”という概念が全く理解できてませんでした。
**「変数を定義して使い回すときに便利なもの」**
↑こんな感じで理解した振りをして、使いこなせずに日々格闘しておりました。
そんなある日、業務後の自習時間中に **「そういうことだったのか！！」** と、なったので初投稿させていただきます。
僕は野球が大好きなので、自分なりに考えた野球ネタで初学者なりに何とか例えてみます。

# やりたいことの説明
ここではメソッドを使って、野球の球速をマイルからキロに変換するまでの流れを説明していきます。
例) 100マイルは約160キロだ
上記のような例文を、メソッドを組み込んで表示していきます。
※上手に活用できていないことは重々承知で、意味を理解することがミソです。

# 関数の定義
まずは関数の定義です。
“`js
// speedメソッドを定義して、パラメータをmileとする
function speed(mile) {
// 定数conversionに1.6を代入する
const conversion = 1.

過去問共有サービス Univer の開発を行いました。


過去問共有サービスUniverです。企画からデザイン、デザインに至るまで一気通貫して一人で行いました。

https://universitycommunity.herokuapp.com/

[開発背景]
開発の理由は二つあります。
一つ目の理由は、コロナの影響で縦と横のつながりが薄くなり、過去問が手に入りづらくなったという学生の問題を解決するためです。
また私自身の周りにそういった悩みを抱えている学生の方が多くいたことから、ユーザー数が期待できるため、多くの方のフィードバックを通じてより質の高いサービス開発に取り組めると考えたからです。

[実装機能]
投稿機能、画像投稿機能、ログイン・ログアウト機能、フォロー機能、いいね機能、コメント機能、お気に入り登録機能、検索機能など、SNSに利用

[Laravel]コメントに紐づいたアンサーがアコーディオンで表示される実装

### ルーティング
“`routes/web.php
//コメント
Route::resource(‘comments’,’CommentController’)->only([
‘store’,’destroy’
]);
Route::get(‘/comments/{recipe}’,’CommentController@create’)->name(‘comments.create’);
//アンサー
Route::resource(‘answers’,’AnswerController’)->only([
‘index’,’store’,’destroy’
]);
Route::get(‘/answers/{comment}’,’AnswerController@create’)->name(‘answers.create’);

Route::get(‘/answers’,’AnswerController@index’)->name(‘answers.index’);
Route::post(‘/answers’,’AnswerController@stor

Flutter から Lambda を経由し Amazon Pinpoint で Push 通知を実装 ②

# はじめに
こちらの続きになります。

https://qiita.com/hirai-11/items/4acb61bede53805c1527

以下を行っていきます。

– Pinpointに対してセグメントとキャンペーンを更新するLambdaを作成

– Pinpointに対してキャンペーンを削除するLambdaを作成

– Lambda_Layerを利用し、メソッドをモジュール化（共通化）する
– 作成、更新、削除をモジュール化します

– フィルタリング内容が同じ場合、セグメントを再利用するLambdaを作成

# Pinpointに対してセグメントとキャンペーンを更新する
Pinpointに対してセグメントとキャンペーンを更新するLambdaを作成します。


## 起

【React / Next】postした後に、SWRでfetchして表示している部分を更新させたい

個人的な備忘録です。

# やりたいこと
– モーダルなどで記事をpostした後に、後ろで表示されている一覧を更新させたい

# 環境
– React: 17.0.2
– Next: 11.1.3
– @chakra-ui/react: ^1.8.5

# 解決方法
– submit ボタンを押した時に post して、そのpost後に submit メソッド内で SWR の mutate を呼ぶ
– もし props で渡す場合、 `refresh={() => mutate()}` などとして渡す

# サンプルコード
“`tsx:親
const { data, error, mutate } = useSWR(~~~);

mutate()}
/>
“`

“`tsx:子
interface Props {
refresh: () => Promise
}

export const Modal = ({ refresh }) => {
const submitHan

【React / Next】同じ画像を選択してもonChangeが走るようにしたい

個人的な備忘録です。

# やりたいこと
– input type=”file” で画像を選択した時に、特定のメソッドを走らせたい
– 画像選択時に、同じ画像を選択すると onChange が走らない
– 同じ画像を選択しても、特定のメソッドを走らせたい

# 環境
– React: 17.0.2
– Next: 11.1.3

# onClickパターン
“`tsx
// 省略

const handleChangeFile = async (e: React.ChangeEvent) => {
if (e.target.files && e.target.files.length > 0) {
const file = e.target.files[0];
setSelectedImageType(file.type);
const resizedImage = await resizeFile(file, file.type);
setSelectedImage(resizedImage);
onO

【React / Next】引数ありのComponent自体をpropsで渡して、子Component側で引数を渡したい

個人的な備忘録です。

# やりたいこと
– 親から Component を渡す時には、引数なしで子へ渡す
– 子Component側に props で渡ってきた component へ引数を渡す

# 環境
– React: 17.0.2
– Next: 11.1.3

# サンプルコード
## 親Component
“`tsx
import { Item } from ‘./components/item’;

export const ParentComponent = () => {
return (
<>
{/* Componentを（）をつけずに渡す。引数なしの場合は（）でもOK */}


);
};
“`

## 子Component
“`tsx
interface Props {
component: (hoge: Hoge) => ReactNode;
// 引数をオブジェクトにしている場合
// component: (_p

【React / Next】親Componentから共通Componentをchildrenで渡して、子Component側で引数を追加したい

親から渡ってきた children に props を追加したかったので、その個人的な備忘録です。

# やりたいこと
– 親Componentから 共通Component を children として 子Componentへ渡す
– 子Component側で持つべきメソッドを、子に渡ってきた時に追加したい

# 環境
– React: 17.0.2
– Next: 11.1.3
– @chakra-ui/react: ^1.8.5

# サンプルコード
## 親Component
“`tsx
import { CommonForm } from ‘components/commonForm’;

interface Props {
email: string;
}

export const ParentComponent = ({ email }: Props) => {
return (
// 省略
{/* Container へ渡す children は 共通Component */}

Laravel6+Vue.jsの連携手順

Laravel6とVue.jsを連携して、APIを実行するまでの手順を、メモがてら手順をまとめてみました。

SPAを作成しようとしている方などのご参考になれば嬉しいです?

> ### バージョン
> composer: 2.2.7
> php: 7.4.28
> laravel: 6.20.44
> npm: 6.14.12
> node: 14.16.1
> vue: 2.5.17
> vue-router: 3.1.3

## laravelプロジェクト作成
~~~bash
composer create-project “laravel/laravel=6.*” {プロジェクトのお名前} –prefer-dist
~~~

## プロジェクトのディレクトリに移動して、以下コマンド実行
~~~bash
php artisan serve
~~~
– 以下のようなログが出力されます。出力されるURLをコピーしておきましょう。
~~~bash
Laravel development server started: {ここに出力されるURLをコピー!}
~~~
– コピーしたUR

JavaScriptで配列を検索するメソッドについて

### 記事

JavaScriptで配列を検索する方法は、やり方はさまざまあります。さまざまあるがため、便利である反面、どれを使うのがベストプラクティスなのか判断に迷うこともよくあります。

そんなときには、自分の中で、このような検索をしたい場合は、必ずこのメソッドを使おう。と、決めてしまうことがいいかと思っています。

配列の検索でよく使うメソッドは次の３つです。

– includes
– find
– filter

３つのメソッドは次のように使い分けるといいかと思います。

配列の中に特定の要素が含まれているかどうかだけを知りたい場合は、includesを使う。includesはtrueかfalseを返します。存在すればtrueで、存在しなければfalseを返します。

includesの代わりにindexOfを使って判断をすることもできます。includesがtrueかfalseを返すのに対し、indexOfは存在すれば配列のインデックスを返し、存在しなければ-1を返します。インデックスを知る必要がない場合は、includesを使った方が個人的にはシンプルでいいかと思ってい

JavaScriptで複数のチェックボックスのうち1つでも選択されていたらボタンを有効にする

この実装をしようと調べた時に生のJavaScriptの記事があまりなかったので、私のメモと勉強も兼ねて残しておきます。
JavaScript初心者でちゃんとした技術記事も初めてなので、変な表現をしているかもしれませんがご了承ください。

# 1. チェックボックスの作成
まずはHTMLでチェックボックスを作成します。
“`html:sample.html

選択肢1
選択肢2
選択肢3

“`

submitのinputタグに

ブラウザゲームを作ってみよう(その9:サンプルゲーム作成その2)

# はじめに
[その8](https://qiita.com/noji505/items/1d8a5be6c09a7344fc79)ではゲームのシーン遷移処理を行いました。
今回はゲームのメイン部分を作ってみたいと思います。

# サンプルゲームイメージ

前回も載せましたがイメージし易いと思うので再度載せています。
ここからゲームを作成するのに必要な処理を一つずつ考えていきます。

必要な処理は概ね以下のようになるかと思います。
| No | 処理内容 | 説明 | 参考 |
|:-:|:–|:–|:–|
| 1 | 雲を表示 | 雲の画像を表示する | [その6:画像表示](https://qiita.com/noji505/items/3679c0e86bb0e1b1d413)
| 2 | 雲を操作 | 左右キーで雲を移動する |

react-beautiful-dndでUnable to find draggable with idが出たときの対処法

## 原因

React 18でReact.StrictModeを使っているため

“`index.js
const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render(



);
“`

## 対処法
以下のようにReact.StrictModeを使わないようにする

“`index.js
const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render(
<>


);
“`

## 参考
https://stackoverflow.com/questions/60029734/react-beautiful-dnd-i-get-unable-to-find-draggable-with-id-1