- 1. Reactのbutton要素内でFont Awesomeアイコンを使う時の注意点
- 2. Stripe Checkoutを利用した注文ページで、顧客が商品の個数を変更できるようにする
- 3. Canvasを始めよう（入門編）
- 4. 世界中のWordleライクなゲーム
- 5. Electron 18 を使って200行以内でファイルの入出力ができるようなテキストエディタを作ってみる。
- 6. 【JavaScript関数ドリル】Lodash関数の実装【勉強用】_.indexOf関数
- 7. TestCafe触ってみる
- 8. javaScript_Array.filter
- 9. QuillJS を利用している場合にホワイトスペースが圧縮されてしまう問題の対処
- 10. 【Vue】v-forで配列を指定回数だけループさせて出力させる
- 11. 【JavaScript】Mochaについて
- 12. シークライズ
- 13. グレーアウトなよる
- 14. jQueryのAJAX通信でリクエストヘッダ送る際の備忘録
- 15. JavaScriptをTypeScriptにする一文字命名規則とは何か
- 16. 快適な開発環境のつくりかた (Mac)
- 17. 「マイクロサービスパターン」の復習 5章
- 18. Firebase Authentication 各種機能実装記事集
- 19. Tinderを簡単に自動化してみた
- 20. TypeScriptの基本的な型
Reactのbutton要素内でFont Awesomeアイコンを使う時の注意点
## 目的
クリックイベントで関数を呼び出すボタン要素の中にFont Awesomeコンポーネントを使ってアイコンを表示させたい。
しかしなぜか指定したnameがundefinedになってしまう…
“`react
samples.map( sample => {
return (
)const deleteMemo = (e) => {
const id = e.target.name //undefined…
console.log(id); //undefined…?
axios
//割愛
“`## 原因
以下のようにevent.targetをコンソールに表示してみたところ、
“`rea
Stripe Checkoutを利用した注文ページで、顧客が商品の個数を変更できるようにする
Stripe Checkoutを利用することで、オンラインでの注文フォームを数行のコードで実装できます。
“`javascript
const session = await stripe.checkout.sessions.create({
line_items: [{
price: ‘price_xxxx’,
quantity: 1,
}],
success_url: ‘http://localhost:3000′,
cancel_url:’http://localhost:3000’,
mode: ‘payment’
})
“`注文画面では、顧客の地域とStripeユーザーの設定に応じて決済情報入力画面が柔軟に表示されるため、複数の決済方法へのサポートもより簡単になります。
っていうパズルゲームを知っていますか？
今、世界中で流行っている最もアツイパズルゲームです！2022年1月頃くらいに爆発的に流行り、NYタイムズが**１億円**近い金額で買収したりしたことでも話題を呼びました。
話題になったのは比較的最近ながら、世界中のエンジニアたちが早速
Wordleみたいなクローンゲームを公開しています。この記事では世界中の面白いWordleライクなゲームを紹介します！
—
1. [Wordle](https://www.nytimes.com/games/wordle/index.html)
まずは本家。原点にして至高。NYタイムズのドメイン内にサイトが存在しています。
毎日一つだけパズルが午前０時に更新されます。2. [Svendle](https://exis9.github.io/Svendle/#/)
実はこれ、私が作りました！無限モード、ユーザージェネレーション、クリックで
Electron 18 を使って200行以内でファイルの入出力ができるようなテキストエディタを作ってみる。
## 初めに
実用を目的とはしていません。`Electron`の構造を理解するために、どれだけ骨格を抜き出せるかを目的にしています。
というわけでスクラッチから書いてみます。
`html`中に`style`と`javascript`を直書きしているので、以下のワーニングが出ます。
`Electron Security Warning (Insecure Content-Security-Policy)`以下のレポジトリにワーニングの出ない、他の機能も入ったバージョンを置いておきます。
ワーニングの消し方や結果だけを知りたい方はこちらで！
https://github.com/Satachito/electron-quick-start-MOD`npm`,`npx`は入っている前提です。(`node`が入っていれば通常入っています)
## 準備
フォルダを作ってその中に`package.json`を作って`npm`で`Electron`をインストールします。
“`
$ mkdir TE
$ cd TE
“`
“`package.json
{ “main”:
【JavaScript関数ドリル】Lodash関数の実装【勉強用】_.indexOf関数
# 【JavaScript関数ドリル】初級編の_.indexOf関数の実装のアウトプット
“`javascript:_.indexOf関数の挙動
_.indexOf([1, 2, 1, 2], 2);
// => 1// Search from the `fromIndex`.
_.indexOf([1, 2, 1, 2], 2, 2);
// => 3
“`
第1引数に配列、第2引数に検索する値、第3引数で開始位置を指定し、指定されなければ0が初期値
## _.indexOf関数の課題内容## _.indexOf関数に取り組む前の状態
– lastIndexOfと同じ要領で作成する## _.indexOf関数に取り組んだ後の状態
– −１のリターンを深く考えすぎてしまった
– 今後はできるだけシンプルに実装していきたい
– セミコロンの有無をまだまだ理解しきれていないため、指摘があればいただきたい。
– if文の末端にセミコロンをつけていないのは、for文の中身であるため付けるべきでな
TestCafe触ってみる
## はじめに
E2EテストツールのTestCafeのハンズオンです。
ほぼ、公式の[Getting Started](https://testcafe.io/documentation/402635/getting-started)をなぞってます。## ハンズオンのゴール
ゴールはテスト対象のデモサイトで、簡単なテストを実行してみるところまでです。## TestCafeのインストール
npmを利用していくので、インストールされていないマシンをお使いの場合は事前にインストールをお願いします。今回はTestCafeをローカルインストールするので、作業用のフォルダを用意してください。
“`bash
$ mkdir testcafe-sample
$ cd testcafe-sample
“`
npmをinitしてフォルダ内にインストールできるようにします。
“`bash
$ npm init –y
“`
`testcafe`をローカルインストールします。テストなので一応devDependencies指定しておきます。
“`
$ npm install –save
javaScript_Array.filter
MDNの中にfilter()メソッドについて、このように説明しています。
– filter() メソッドは、与えられた関数によって実装されたテストに合格したすべての配列からなる新しい配列を生成します。例：
“`ruby
const numArr = [1,2,3,4,5];
// 奇数のみを抽出する
const NewNumArr = numArr.filter((num)=>{return num%2 === 1;});
console.log(NewNumArr);
// 値を順番に取り出す
for(value of NewNumArr){
console.log(value);
}
“`文字列を連結するには、従来は＋を使いますが、ES6の書き方で${}を使います。
例：
“`ruby
const nameArr = [“田中”,”中田”,”藤井”,”蒼井”];for(let i=0; i
QuillJS を利用している場合にホワイトスペースが圧縮されてしまう問題の対処
# 問題
[quilljs](https://github.com/quilljs/quill) のversion 1.3.7 (記事執筆時点でGithubで表記されている latest リリース) での話。
Quill Editor で編集した値を一度 DB に保存する。 この場合、DB の中身はこのようになる。
“`
# 入力
テストです。 ← 全角スペースが４個配置されています。
“`
“`
# DBに保存される値テストです。 ← 全角スペースが４個配置されています。
“`
この値を再編集するために、`
` 要素に以下の通りに出力して Quill インスタンスを生成する。“`html
【Vue】v-forで配列を指定回数だけループさせて出力させる## 環境
Vue２## はじめに
今回はVue.jsの記事になります。案件の中で要素を最初の2件だけ表示させてほしいというご要望をいただきました。メソッドを使い配列フィルタリングしたりといろいろな方法を試したので書き留めておこうと思います。## v-forについて
### v-forディレクティブの使い方
v-forはいわゆるfor分の役割を持ちます。
HTMLタグの属性に`v-for=”要素(命名は自由) in 定義した配列”`を定義“`index.vue
- {{ item }}
“`
### v-forは２つ目の引数にindexを取れる
以下の様に第２引数を指定することによって、indexを取ることができます。indexの名前は自由につけてOK“`index.vue
- {{ item }}
【JavaScript】Mochaについて
JavaScriptのテストで**mocha**を使ったのではじめの基本的なところをメモしておく。
# mochaとは
**mocha**とは、柔軟性のあるJavaScriptのテストフレームワーク。
**mocha**自体には、アサーションなどの機能を持っていないため自由にライブラリを選択できる。また、Node.jsだけでなくブラウザでも実行することができるという特徴がある。
**mocha**は、“npm“を使って以下のようにインストールできる。“`
npm install –save-dev mocha
“`# chaiとは
**chai**とは、アサーションライブラリのこと。**chai**は、**mocha**と同様にNode.jsだけでなくブラウザでも実行できる。上記のように**mocha**自体はアサーションの機能がないため、今回は**chai**を使用した。
**chai**のインストールも“npm“を使って以下のようにできる。“`
npm install –save-dev chai
“`# package.jsonを編集
“nシークライズ
「Sequelize」の読み方を、私は「シークライズ」と表記、記述、呼称しています。
Sequelizeとは、データベースへ簡単にアクセスするためのNode.jsのライブラリです。
TypeScriptやJavaScriptで使用しています。グレーアウトなよる
# 背景
フロント実装にてクリック契機等で既存画面をグレーアウトして新たな要素を出す仕組みを書いたのでその備忘録も兼ねて。
単純にモーダル機能としてだけであればBootstrapで事足りるのですがそれだと少し痒いところに手が届かないよって方向けに。。# 実装例
ボタンクリックで背景グレーアウト→画像表示
“`Grayout.vue
表示
![]()