JavaScriptでビンゴゲームを作ってみた

JavaScriptでビンゴゲームを作ってみました。

#仕様
+ カードは25マス。
+ 「CARD SET」を押すと，カードにランダムな数字が入る。「CARD SET」は無効化する。
+ 「CHOOSE NUMBER」を押すと，ランダムな数字が結果として表示される。
+ 結果と一致するカードのマスは色が変わる。
+ 履歴欄に結果の数字を順番に追加していく。
+ 全ての数字を選び終わると，アラートで終了を知らせる。「CHOOSE NUMBER」は無効化する。
+ 「RESET」を押すと，最初の状態に戻る。

↓最初の画面
↓ビンゴ中の画面
![bingo_img.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1178942/9b007011-9116

Hook API(React)[Material-ui]

Hook API使う場合は
`npm install –save @material-ui/styles`
実行してください

“`javascript
import {createStyles, makeStyles} from “@material-ui/core/styles”;

const useStyles = makeStyles(() => (
createStyles({
“button”: {
borderColor: ‘#FFB549’,
color: ‘#FFB549’,
}
}
})
));

const Article = (props) => {
const classes = useStyles();

return(

)

}

“`
`const classes`から`Buttom`へ`style`をつけています

日付、時刻表示(firebase,timestamp,moment.js)

#日付、時刻表示について
チャットアプリ作成時、苦戦したのでまとめておく。
メッセージを送信した際に、Cloud Firestore（firebase）にtimestampを保存し、そのtimestampを取り出してフォーマットした後、表示させる。

#大前提として、、、
###○firestoreにtimestampを作る

“`
firebase.firestore().collection(“messages”).add({
content: value,
timestamp: firebase.firestore.FieldValue.serverTimestamp(), //<-new Date()だとそのパソコンの時刻が使われるのでズレる場合を考慮してサーバーサイドの時刻を追加する // timestamp: new Date(), }); ``` new Date() だとクライアント側 (ブラウザ) の時刻になるが、端末の時刻が狂ってたら (または故意にずらしてたら) 問題が起こる可能性がある。 serverTimesta

Kinx v1.0.0 正式リリース（プレ卒業）

# はじめに

Kinx v1.0.0 を正式にリリースしました! やっとプレリリース卒業です。実は1～2週間前くらいにリリースしてたのですが、あまりアピールしてなかったので書きました。[Kinx](https://github.com/Kray-G/kinx) の [Release Page](https://github.com/Kray-G/kinx/releases)をご覧ください。

さて、**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。 Kinx v1.0.0 は、プロジェクト開始から開発されたすべての機能を含む第1回目の公式リリースバージョンとなります。

* 参考
* 最初の動機 … [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)
* 個別記事へのリンクは全てここに集約してあります。

[JS] 配列 / forEach

“`
const arry = [1,2,3,4,5];

arry.forEach(function(v, i, ary) {
console.log(v, i, ary);
})

for(let i = 0; i < arry.length; i++) { const v = arry[i]; console.log(v); } ``` [](https://gyazo.com/f20871ba79089166a2fe561af96fee1d) v　　　　　値 i　　　 　　添字 ary 　　　　配列

jsで入力項目を出し分けしていた時、戻るボタンでも項目を出したままにする方法

# どうも7noteです。戻るボタンに悩まされるのを解決

戻るボタン（ブラウザバック）をすると、ページロードされるのでjavascriptで出し分けていた内容がもとに戻ってしまう現象を解決。

問題はページロードが起こり初期状態になることなので、解決策としてはページを読み込んだ時にも項目の出し分け処理をするような作りにします。

※前提材料（[ラジオボタンの選択で項目を出し分ける方法](https://qiita.com/7note/items/4046c8e54ee8d00bcb16)）

## ～問題が起こる流れ～

**①ラジオボタンで項目が変わるフォームがある**

**②googleを選択したあと入力確認画面に行き、「戻るボタン（ブラウザバック）」を押す.
**

**③すると、ラジオボタンはGoogleが選択

和欧文字間（漢字仮名と英数字の間）に半角スペースが挿入されないようにするPrettier Markdownプラグインを作った

# TL;DR

日本語MarkdownをPrettierでフォーマットするなら拙作の[`prettier-plugin-md-nocjsp`](https://github.com/tats-u/prettier-plugin-md-nocjsp)を入れましょう。

さもないと

“`markdown
このように Markdown 中の英数文字と日本語の間に容赦なく半角スペース U+0020 が挿入されます。
“`

組版の和欧間スペースと英単語間のスペースは幅が違います。似ていますが絶対に許してはなりません。

# お断り

Prettierやこの問題の発端となった人物には結構恨みを持っているため、以下ところどころそれがにじみ出た文章になっています。ご了承ください。

# ことの発端

VSCode の Prettier 拡張プラグインを入れて Mar

新一二年生のためのくりかえし算数ドリル緊急回避プログラム

https://qiita.com/wakou-qiita/items/ce9b8664eb50f15acb69

新一二年生の皆さん。おはようございます。
今日は、逆ポーランド記法の計算の仕方を教えます。

# 注意：
まだ割り算を習っていない皆さんには、割り算を教えてはいけないので、
割り算の計算方法は教えません。

# 準備
– Node.js 14.16.0 (ほかの言語でもできる)
– Windows10 (かそれ以外)

# 方法
やり方を教えます。
よく見てください。
1. 逆ポーランド記法の式が入った配列をexpに代入する。
2. 計算する関数calcを用意する。
3. 配列stackを用意する。
4. 6までをexpが空になるまで繰り返す。
5. expをshiftする。
6. 5の値が数値だったら、stackにpushし7まで飛ばす。演算記号だったら、5に進む。
7. stackから2こ切り出し、それを使ってfuncを実行する。
8. stackからpopし、値をreturnする。

# お手本

“`js
var exp = []//”逆ポーランド記法の式”/

小学校低学年のための算数ドリル回避プログラム

小学生の皆さん。
算数ドリルめんどくさくないですか？
僕はめんどくさかった記憶があります。
**九九覚えるのとか、めんどくさいですよね。**
***
**実は、**
九九を覚えなくてもJavaScriptを覚えれば
算数ドリルを解くことができます！！
今日は小学生の皆さんに、”けいさんロボット”の作り方を教えます。

## 注意:
始める前に、注意です。
よく聞いてください。

– まだ、低学年の皆さんは、割り算を習っていないと思います。
– そのため、この”けいさんロボット”は割り算を行うことができません。

## 手順：
手順を説明するので、よく聞いてください。
わからないことがあったら先生に聞いてください。

1. 中間記法から、逆ポーランドに変換する。
2. 計算する。

## 準備：
持ち物を用意してください。

・Node.js 14.16.0 (ほかの言語でもできる)
・Windows10 (かそれ以外)

## 製作:
### パース:
####先生のお話:
まず、手順①の中間記法から逆ポーランド記法へのパースをやりましょう。
中間記法というのは、

“`
1

submitする前に入力チェックがしたい

##やること
– submitする前に入力チェックして、メッセージを表示したい。

##方法

“`html:html

submit
“`

“`js:js
$(“#submitButton”).on(“click”, function () {
if ($(“input[name=textform]”).val() == “” ) {
$(‘#validationModal’).modal();
return false;
}
});
“`

シンプルで使いやすい日付変換ツールを作ってみた

# はじめに

こんにちは、システム開発チーム「presto」です。
開発業務（プログラミング中）に「こんなツール、あんなツールが身近なところにあったらいいなぁ」と思ったことはありませんか？

ここではそんなツールをVuetifyを使って作ってみたので紹介させてください。

# 日付変換ツール

今回紹介させていただくのは、[日付変換ツール](https://web-tools.presto-service.com/date-converter)です。

画面は以下の通りです。


# 使い方

使い方は以下の通りです。

1. 時刻を指定する
2. ほしいフォーマットの時刻をコピーする

## 1. 時刻を指定する

指定したタイムゾーンの現在時刻が表示されます。
![時刻を指定する](https://qiita-image-

【Win10】alertのせいでsubmitができなくなった話

##起こったこと
* 画面の確認メッセージや登録メッセージに**alert()**や**confirm()**を使っていた。
* 出力されたメッセージの**「このページにこれ以上メッセージの作成を許可しない」**にチェックを入れた。
* **confirm()**のOKでsubmitするようにしていたが、メッセージが表示されなくなったため、ボタンを押下しても、**sumitできなくなった。**

##対処
画面メッセージの表示方法をBootstrapやjQueryで代用した。

SBPayment(リンク型)のフロント対応備忘録

## 前置き
こんにちは。suginokoです。[弊社](https://brewus.co.jp/)でSBPaymentサービス(以下SBPayment)を使って対応する予定があるかもということで調査しました。
SBPaymentではかなり豊富な数の決済方法ができるようで、その分だけ多くの取扱説明書(以下仕様書)を読み込む必要がありました。

個人としてはGMOの決済対応したことがあったのですが、SBPaymentは初めてでした。
基本的にはSBPaymentで提供されている仕様書をDLして読めばいい(契約後にアカウント教えてもらえるんだと思われる)と思いますが、読むものが多かったので弊社webフロントがどのような対応をすればよいのかを今後苦労しないでもいいように備忘録を残すことにしました。

## 決済方法
ここでは**クレジットカード決済**の**リンク型**の対応について紹介します。
※他にAPI型というものがあります。

##### リンク型
* SBPayment側に決済画面を用意してもらう。
* デザインの自由度は低い
* 決済方法が豊富

##### API型
* デザ

【Firebase】CloudFirestoreのcollectionを消去する方法

皆さんこんにちは！

CloudFirestoreを触れて間もない方はこう思ったことはないでしょうか？？

不要なcollectionは消去したい！

結論から言うと、CloudFirestoreにはコレクションを消去するメソッドは**存在しません**！！

公式のドキュメントでも以下のように書いてあります。

>Cloud Firestore でコレクション全体またはサブコレクションを削除するには、コレクションまたはサブコレクション内のすべてのドキュメントを取得して削除します。大きなコレクションがある場合は、メモリ不足エラーを避けるため、小さなバッチに分けてドキュメントを削除することをおすすめします。コレクション全体またはサブコレクションが削除されるまで、このプロセスを繰り返します。

では、どのようにしてコレクションを消去するのか。

それをお教えします！

まず、ドキュメントを消去する方法はこんな感じでやります。

“`javascript
db.collection(‘example’).doc(‘example_1’).delete()
“`

“`javascript

JavaScriptで配列のメソッドを使いこなして綺麗なコードを書きたい

# 前書き
**「コメントではなくコード本体を見て何やってるか理解できるコードを書きたい」**
最近いろんな本や記事を読んだりして、当たり前のことですが改めて考える機会が増えてきました。

これを実現するためには、
適切なクラス、関数の切り分け、名前の付け方など手段は沢山あります。
その中で簡単にできる方法の1つとして、
配列をいじる際に適切なメソッドを使うだけでコードリーディングが早くなるような気がしたのでご紹介できればと思っています。

（ここで紹介するコードの動作検証はやっていません。ニュアンスが伝わればいいなと書いてみました。）

# 配列操作の基本形
まずよく初心者記事で見かける配列の処理です。for文を使った単純なループ。

“`JavaScript:配列操作の基本例
const fruits = [‘apple’, ‘orange’, ‘grape’];

for(let i = 0; i < fruits.length; i ++) { const fruit = fruits[i]; console.log(fruit); } ``` ```text:実

[個人開発]Webイベントを開催できるアプリ作りました

#初めに
[crieit](https://crieit.net/)の「１週間でWebサービスを作るイベント」というのを見て作りました。

サービスURL↓
https://eventer-work.herokuapp.com/


#概要
誰でもwebイベントを開催でき、参加できるサービスです。
最優秀賞と優秀賞を一つずつ設定できるようになってます。

#使用したgem ＆ 技術
rails6.1
ruby2.7
postgresql
heroku free

“`
gem ‘ridgepole’
gem ‘slim-rails’
gem ‘html2slim’
gem ‘pry-rails’
gem ‘devise’
gem ‘kaminari’
gem ‘activeadmin’
gem ‘ra

自分用メモ: reg-suit + s3 + cloudfront + lambdaの構成ではaclとcustomDomainをちゃんと設定しよう

reg-suit + s3 + cloudfront + lambdaで画像比較の資料全てに認証を必要としたい時のメモ

[ドキュメントに書いてある](https://github.com/reg-viz/reg-suit/blob/master/packages/reg-publish-s3-plugin/README.md#configure)んだけど、reg-publish-s3-pluginのデフォルトだとaclがpublic-readでputしようとする. [ソースコード](https://github.com/reg-viz/reg-suit/blob/cfb155bb75814eea096e52911a48c8cf78257589/packages/reg-publish-s3-plugin/src/s3-publisher-plugin.ts#L88)
この状態でreg-suitを走らせようとすると、ポリシーを先程の構成に最適化したS3だとpublic-readでのputは当たり前なんだけど、拒否される.
この際のaws sdkのエラーメッセージはAccessDenie

JavaScriptでDropbox APIから読み込む

とりあえず動いた喜びとメモ帳書きとして

“`html

DropBox Test