- 1. Node.jsではmysqlよりmysql2を使うべき理由
- 2. フロントエンドテストにおける知見の宝庫を発見！「javascript-testing-best-practices」
- 3. JavaScript 日付フォーマット、日時分秒の差分計算（週末・年末まで）
- 4. Yahoo APIでの商品検索
- 5. 【ES6】配列の要素の合計値をreduce()で求める【メモ】
- 6. react-routerでnavigateする時、stateはどこに保存されているの？
- 7. 【JavaScript】物理エンジンまとめ
- 8. javascript classを使ってランダムな位置にランダムな円を描画する
- 9. paizaラーニング レベルアップ問題集 二分探索メニュー応用編 JavaScript 従業員
- 10. JavaScript 独学
- 11. javascript学習備忘録 for文
- 12. [メモ]Promise.allの各非同期関数の結果は配列で取得できる
- 13. Google Map APIでカスタムマップを作成しよう
- 14. 高卒未経験からフロントエンドエンジニアを目指す奮闘記・初投稿
- 15. Babylon.js の公式ミニマムサンプル の HTML に Webカメラの映像の表示を足してみる
- 16. JavaScript でテトリスを開発する その 4
- 17. JavaScriptのArray.prototype.join()のデフォルト引数
- 18. JavaScript でテトリスを開発する その 3
- 19. 【JavaScript・jQuery】コードの中にブレークポイントを仕込む方法
- 20. 【JavaScript】ES2023の新機能が何故かいまさら追加されていた
Node.jsではmysqlよりmysql2を使うべき理由
mysql2が一番Weeklyダウンロードが多い
フロントエンドテストにおける知見の宝庫を発見！「javascript-testing-best-practices」
# はじめに
JavaScriptにおけるテストのベストプラクティスをまとめた「**javascript-testing-best-practices**」というGitHubレポジトリが大変勉強になったため、特に参考になった内容をまとめて共有したいと思います。（補足）本レポジトリにはfrontendのみならずbackendのテストに関する情報もありますが、今回はfrontendに焦点を当てて共有します。そのため扱うSectionは以下の4つです。
– Section 0: The Golden Rule
– Section 1: The Test Anatomy
– Section 3: Frontend
– Section 4: Measuring Tests Effectivenesshttps://github.com/goldbergyoni/javascript-testing-best-practices
## 想定読者
– フロントエンドの実装はできるが、テスト経験はない方
– テストに対して解像度が低い方
– これからテストを学びたいと思っている方# ?
JavaScript 日付フォーマット、日時分秒の差分計算（週末・年末まで）
JavaScript の日付処理でさっとやったやつをメモしておく
フォーマット、日付計算とかもっと良いのないかなと感じてます．．．
変数名も適当すぎる．．．https://sueasen.github.io/javascript-exercise/work/datecalc/
“`JavaScript
// 曜日の日本語リスト
const weekdays = [‘日’, ‘月’, ‘火’, ‘水’, ‘木’, ‘金’, ‘土’];// 現在日時取得
const now = new Date();
// 今週末
const nextWeekEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate() + (6 – now.getDay()));
// 来年初日
const nextYearFirst = new Date(now.getFullYear() + 1, 0, 1);console.log(dateFormat(now));
console.log(diffDate(now, nextWeek
Yahoo APIでの商品検索
# 本記事で紹介すること
1. Yahoo APIの導入方法
2. Yahoo APIを使ったYahoo Shopping相当の検索今回は、その他内容には触れません。
## Yahoo APIとは
Yahooが開発したWebサービス（API）のことで、以下のようなAPIがある。
1. ショッピング（Yahooショッピング）
2. YOLP（地図）
3. テキスト解析
4. 求人
5. ニュース（Yahoo ニュース）今回は **ショッピング**の**ショッピング情報取得API**を使う。
:::note alert
旧仕様と新仕様の二つがあるが、旧仕様は提供停止なので、利用できない
:::使う前に必ず、アプリケーションIDを取得する必要がある。
## アプリケーションIDの取得方法
1. Yahooでアカウント登録
1. アカウント未所持の場合
2. 携帯の電話番号が必要
2. `https://e.developer.yahoo.co.jp/dashboard/`で*新しいアプリケーションを開発*をクリック
3. 必要な情報を入力し、アプリケ
【ES6】配列の要素の合計値をreduce()で求める【メモ】
“`js
// 数値を格納した配列を用意
const pureNumArr = [1, 2, 3]// 合計値を求める
let totalNum = pureNumArr.reduce((sum, element) => {
return sum + element;
}, 0)
console.log(totalNum) // 6
“`
react-routerでnavigateする時、stateはどこに保存されているの？
# 結論
**window.historyのstate**
# 前提
react-routerはなんとなくで使えてしまうので、一応確認したという程度のメモ書きです。
[react-router公式](https://reactrouter.com/en/main/start/overview)のメインコンセプトによると、HistoryはURLの変更をsubscribeできるようにするオブジェクトで、ブラウザのhistoryをプログラム的に操作するAPIも提供していると記載があります。
> History – An object that allows React Router to subscribe to changes in the URL as well as providing APIs to manipulate the browser history stack programmatically.また、LocationはWEB APIのwindow.locationを基にしているという記載もあります。
> Location – This is a React Rou
【JavaScript】物理エンジンまとめ
JavaScriptで利用できる物理エンジンをまとめます。
# 2Dの物理エンジン
|name|github|update|note|
|—|—|—|—|
|matter.js|[★14.2k](https://github.com/liabru/matter-js)|2013~2021|[web site](https://brm.io/matter-js/)
|LiquidFun|[★4.5k](https://github.com/google/liquidfun)|2013~2018|[web site](http://google.github.io/liquidfun/)
|planck.js|[★4.5k](https://github.com/shakiba/planck.js)|2017~2022|[w
javascript classを使ってランダムな位置にランダムな円を描画する
クラスはオブジェクトの設計書
クラス宣言内でクラスを宣言する際にはコンストラクターとメソッドで定義していきます。
コンストラクタとメソッドの書き方は以下の通りです。“`javascript:class.js
class Member {
//コンストラクタ
constructor(fitstName, lastName) {
this.firstName = firstName;
this.lastNamr = lastName;
}
//メソッド
getName() {
return this.lastName + this.firstName;
}
}let m = new Member(‘太郎’, ‘田中’);
console.log(m.getName()); //結果:山田太郎
“`クラスの使い方が分かったので、canvasを使ってランダムな位置にランダムな円を描画してみました。
“`html:index.html
paizaラーニング レベルアップ問題集 二分探索メニュー応用編 JavaScript 従業員
従業員 (paizaランク A 相当)
https://paiza.jp/works/mondai/binary_search_advanced/binary_search_advanced__workers
# 解答例
加える作業量で二分探索します。
範囲は0以上の整数、十分大きな10^14+1以下とします。
加える作業量をmid = Math.trunc((right + left) / 2)とします。
作業員一人の作業時間は、端数になった場合は、それぞれ 1 時間単位で切り上げなので、Math.ceil((B + mid)/A)で求まります。
全作業時間がK以下か調べ、探索を繰り返します。“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);const [N, K] = lines[0].split(” “).map(Number);
//加える作業量で二分
JavaScript 独学
# 独学フロントエンド
都内の自社開発企業でインターンをしています。
独学で学習してから入社しました。
今からあまりお金をかけずにどのようにフロントエンドを学習するかを考えてみました
HTMLやCSSは別途学習してください
## 前提
学習を進めていく中で足りないなと思ったことは自分で取捨選択してください
ゴールはReactで開発を行う。その際にJavaScriptの仕組みや、非同期処理を含めた基礎的なことを理解していることです
記事を書いている人は、ESLintやWebPackの学習経験もありますが、今回は省きます。本質的な部分ではないと思います。必要になったら学習しましょう。## はじめる
まずは環境構築を行う
JavaScriptを触ったことがない人が最初に見てほしい。 まずはJSの世界へ入門しよう
ク
javascript学習備忘録 for文
フロントエンドエンジニアになって約半年ほど。。
普段はVue.jsを使って開発しています。
フレームワークを使って開発を行っていく上でどうしてもJavaScriptを書かないといけないことが増えてきました。
その学習したことを備忘録として残していきます。
今回はfor文## for文
“`JavaScript:
for(初期化式;条件処理;増減式++){}
基本的にはこの形で書いていく。
“`
例文１
“`
for (let i = 0; i <= 10; i++) { console.log("hello world"); } ``` 出力結果はhello worldが10回繰り返されます。 これは簡単。 例文2 ``` for (let i = 0; i < 10; i++) { console.log("hello world"); for (let j = 0; j < 3; j++) { console.log("hello earth"); } } ``` 次の例文ではforの中にforをネストした書き方となる。 出力結果はherro w
[メモ]Promise.allの各非同期関数の結果は配列で取得できる
こんにちはみなさん
昨日ちょっと`Promise.all`の挙動で議論があったので、挙動をメモっておこうかなと思いました。まあ、仕様を読み込めばわかるやろ！って話なんだろうけど、手っ取り早くどうなるんだっけ？ってのを思い出すコストがめんどいんです。
# Promise.all
`Promise.all`は、引数に非同期関数(Promise)の配列をとって、それぞれを同時に実行してその結果を返すものです。“`promiseAll.js
const timeout = async (time) => {
console.log(`${time} start`)
await new Promise(res => setTimeout(res, time))
console.log(`${time} end`)
return time
}Promise.all([
timeout(500),
timeout(300),
timeout(100)
]).then(res => console.log(res))
“`
`ti
Google Map APIでカスタムマップを作成しよう
[](https://asameshicode.com/custom-google-map/)
今日はGoogle Map（グーグルマップ）のAPIを使ってカスタムマップを作成してみましょう！ワードプレスを使ったことがある人は簡単にプラグインを使って、カスタムマップを作成することができますね。今日は、同じことをマニュアルで行います。
これで不動産の物件を地図に表示したり、お店の位置情報を紹介することなどに使えたりすると思います。
完成したコードはGitHubから見てください。
https://github.com/TraitOtaku/custom-google-map
## **注意**
クレジットカードの登録なしでもAPIコールはかけられますが、Googleからのエラーのポップアップが表示されます。
高卒未経験からフロントエンドエンジニアを目指す奮闘記・初投稿
#自己紹介
初めまして、chibanoyatsuと申します。
タイトルにもあるように私は現在22歳で高卒です。知人の紹介で軽いホームページ制作のバイトはさせて頂いていますが、エンジニアとしては未経験で、エンジニア転職をしてバリバリ働くのを目標にしています。
目標にむけてスクールに入会をしましたので、学んだことのメモ、知識定着の確認として記事を投稿していきます。つたない文章ですが、ぜひアドバイス等頂ければ幸いです。
Babylon.js の公式ミニマムサンプル の HTML に Webカメラの映像の表示を足してみる
この記事は、以下の記事の続きです。
●Babylon.js を実行するミニマムな HTML について調べてみた ＆ ミニマムな変更を加えてみる – Qiita
https://qiita.com/youtoy/items/7ccaab2d8f90c1f5ff76今回の記事では、「Webカメラ映像を利用する」という内容を追加したのですが、その理由は「Webカメラの映像に対する画像認識処理を行う仕組み」を作って試したかったためです（※ 具体的には以下の内容）。
これまで、よく #p5js との組み合わせで使っていた #MediaPipe JavaScript版。
それを #BabylonJS と組み合わせる話が、 #BabylonJS勉強会 の Discord で出ていたので、Hands との組み合わせを試してみた！
Sphere の位置を、手の動きで操ってみるテスト！#MadeWithTFJS #TensorFlow #TensorFlowJS pic.twitter.com/sBoVpzt5yo
— you (@youtoy) February 12, 2023
これまで、ブラウザ上での「Webカメラの映像に対する画像認識処理を使った仕組み」は、描画の部分にp5.js という描画ライブラリを組み合わせたものをいろいろ試してきました。
しかし、それと似たようなことを Babylon.js でやってみようと思った時、そもそも Babylon.js で Webカメラを利用するというのは試したことがなかったので、まずはその部分をシンプルに実現する内容を作ってみました。
## B
JavaScript でテトリスを開発する その 4
# JavaScript でテトリスを開発する その 4
第 3 回です。今回は仕様 ④ テトリミノは画面内でかつ他ブロックに干渉しなければ自由に動かせる を実装していきます。
① 画面サイズは縦 20 ブロック分、横 10 ブロック分である →[その 1 参照](https://qiita.com/namakoRice/items/4933e77a41b2ac359229)
② 4 つの正方形ブロックで構成されるテトリミノがある →[その 2 参照](https://qiita.com/namakoRice/items/4fefc6557af480d8e9a5)
③ テトリミノは 7 種類ある →[その 3 参照](https://qiita.com/namakoRice/items/fd4489b04b511021bd7e)
④ テトリミノは画面内でかつ他ブロックに干渉しなければ自由に動かせる
⑤ テトリミノは画面内でかつ他ブロックに干渉しなければ自由に回転できる
⑥ テトリミノは画面最下部または他ブロックの上部に面したとき動かせなくなる
⑦ テトリミノは
JavaScriptのArray.prototype.join()のデフォルト引数
すぐに読めます。
# 導入
先日、JavaScriptのbuilt-in objectの`Array.prototype.join()`の仕様を理解していなかったことでかなり初歩的なバグを産み出しかけました。https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join
# 本文
具体的には、**デフォルト引数**の存在です。
以前は「引数で受け取った値でArrayインスタンスの全要素を結合してできた文字列を返す非破壊的なメソッド」だよね〜くらいの理解だったのですが、このメソッドはデフォルト引数に`,`を持ちます。上記のMDNのサンプルコードをそのまま借用します。“` typescript
const elements = [‘Fire’, ‘Air’, ‘Water’];// case1
console.log(elements.join());
// Expected output: “Fire,Air,Water”// case2
console
JavaScript でテトリスを開発する その 3
# JavaScript でテトリスを開発する その 3
第 3 回です。今回は仕様 ③ 7 種類のテトリミノの作成 と ⑨ テトリミノはランダムに生成される を実装していきます。
① 画面サイズは縦 20 ブロック分、横 10 ブロック分である →[その 1 参照](https://qiita.com/namakoRice/items/4933e77a41b2ac359229)
② 4 つの正方形ブロックで構成されるテトリミノがある →[その 2 参照](https://qiita.com/namakoRice/items/4fefc6557af480d8e9a5)
③ テトリミノは 7 種類ある
④ テトリミノは画面内でかつ他ブロックに干渉しなければ自由に動かせる
⑤ テトリミノは画面内でかつ他ブロックに干渉しなければ自由に回転できる
⑥ テトリミノは画面最下部または他ブロックの上部に面したとき動かせなくなる
⑦ テトリミノは画面上部に生成される
⑧ テトリミノは一定間隔で下方向に移動する
⑨ テトリミノはランダムに生成される
⑩ 横
【JavaScript・jQuery】コードの中にブレークポイントを仕込む方法
# コードの中にブレークポイントを仕込む方法
## 発端
コードの中にブレークポイントを置く必要があったため。## 結論
“`js
debugger;
“`
と記載するだけ。
【JavaScript】ES2023の新機能が何故かいまさら追加されていた
[ES2023その2](https://qiita.com/rana_kualu/items/49c51f4002043b97c59a) / [ES2023](https://qiita.com/rana_kualu/items/84f66fe970f7feccf367) / [ES2022](https://qiita.com/rana_kualu/items/8bafecd760ae69cfac41) / [ES2021](https://qiita.com/rana_kualu/items/ae3297dd2974fcf047c4)
先日[ES2023では新機能が2個しかなかった](https://qiita.com/rana_kualu/items/84f66fe970f7feccf367)という話をしましたが、どういうわけか2023/01/30になってからES2023が[2個追加](https://github.com/tc39/proposals/commit/d2a5cf370e4a9dc8b0249ad8a8386cd1280db815)[されました](https:
