- 1. 整数除算として最適化してくれそうな記述
- 2. Next.jsのRouterとuseRouterは何が違うのか
- 3. 【Jest】はじめてのテスト
- 4. p5.jsの関数まとめ part.12 rotate()
- 5. JavaScriptで、なぜfor文の初期化部分においてletで宣言された変数はループごとに異なるインスタンスを持ちうるのか
- 6. Next2D Frameworkのrouting設定[導入編]
- 7. React + FullCalendarでデフォルト状態から各種プロパティを使ってカスタマイズしていく
- 8. 【Party.js】で魔法使いになってみた（基本的な使い方から〜カスタマイズまで）【JavaScript / ポートフォリオ / UX】
- 9. google-home-notifierの代替となりそうなgoogle-home-playerを試してみる
- 10. ReactNative 出会ったエラーと解消の記録
- 11. 【obniz 2021】 #obniz で複数台の #toio を同時に扱うための試行錯誤と 2台同時制御
- 12. JavaScriptのDOMって？(初学者向け）
- 13. 【PixiJS 覚書】第五回 クリックやドラッグに反応させよう（インタラクション）
- 14. エサに飛びつくtoioを作ってみた（磁気センサー）
- 15. モダンな（ES6以降で実装した）Node.jsでJestを実行する ESLintの設定も
- 16. ipad,iphoneなどユーザーエージェントを判別（判定）する方法/js
- 17. 【React】【Vue】 など流行りのフレームワークを使うもののためのJS基礎「オブジェクトとしての関数」
- 18. this
- 19. 【Vue.js】GoogleBookApiをlocalStorageに保存する。
- 20. 正規表現にマッチする文字列を渡してもRegExp.testがtrueにならない
- 21. Stripe Billingでの定期課金への消費税設定方法とStripe Taxを使った効率化
整数除算として最適化してくれそうな記述
JavaScript の最適化がどうなっているのかは知りませんが
“`JavaScript:
// a と b が整数ならば必ず割り切れるので、c も整数になる
c = (a – (a % b)) / b;
“`ならば機械的に整数除算と判断して最適化してくれることを期待したい。
Next.jsのRouterとuseRouterは何が違うのか
# 結論
大体同じ。でも基本は`useRouter`を使う方がベター。# useRouter vs Router
画面遷移する時や、URLパスを取得したい時など利用する`useRouter`。
以下のように使うことができます。“`react
import { useRouter } from ‘next/router’;const router = useRouter();
router.push(‘/home’); // ‘/home’へ遷移
“`同じく`Router`というものもあり、オブジェクトも画面遷移やURLパスの取得にも使えます。
“`react
import Router from ‘next/router’;Router.push(‘/home’); // ‘/home’へ遷移
“`何が違うのか…。
[公式ドキュメント](https://nextjs.org/docs/api-reference/next/router)を見てもその違いが分からなかったのでちょっと調べてみました。# 若干の違い一覧
[Nextのリポジトリで行わ
【Jest】はじめてのテスト
みなさん、テストコードはちゃんと書いてますでしょうか？
私は今回アサインされたプロダクトで初めて書きました :dizzy_face: :dizzy_face:テストを書くことがなんか大切であることはわかるけど、
書く時間がない…なんか難しそう…って思う人もいるかもしれません。
自分は正直、思ってました。笑でも実は、ただの「確かめ算」をしているだけでそこまで難しくない & それ以上に大きなメリットがある、と
テスト書き始めて2ヶ月程度で気づき始めました。そんなテスト初心者の自分が、テストの素晴らしさを力説しようと思います:muscle_tone1:
## そもそもなんでテストを書くの？
### 自分たちが書いたコードがちゃんと正しく動き続けることを保証するため
プロダクト開発する上で、こんなことが起きちゃったりしていませんか？:scream: 「このパターンの場合、このロジックでは正しく動きません！！！」
→ このパターンのテストを書いてちゃんと検証しておけばなぁ。:fearful: 「Cちゃんがコードを改修したら、このロジックが壊れました…
p5.jsの関数まとめ part.12 rotate()
この記事は Qiita p5js アドベントカレンダー17日目の記事です。
## これはなに
p5.jsが用意している関数について理解を深める記事です。
今回は回す関数、rotate()について。## rotate()
物体を回転させる機能を持つ関数です。
引数を動的なものにすることによって、物体も持続的に回転しているように見せることができます。### リファレンスより
> angleパラメータで指定された量だけ、図形を回転させる。この関数はangleModeを考慮するので、角度はRADIANSまたはDEGREESで入力することができます。オブジェクトは常に原点を中心とした相対位置で回転し、正の数はオブジェクトを時計回り方向に回転させます。変換は、その後に起こるすべてのことに適用され、その後にこの関数を呼び出すと、その効果が蓄積されます。例えば、rotate(HALF_PI) を呼び出した後に rotate(HALF_PI) を呼び出すと rotate(PI) と同じになります。すべての変換は、draw()が再び開始されたときにリセットされます。技術的には、rotate()
JavaScriptで、なぜfor文の初期化部分においてletで宣言された変数はループごとに異なるインスタンスを持ちうるのか
JavaScriptで、なぜfor文の初期化部分においてletで宣言された変数はループごとに異なるインスタンスを持ちうるのか? について調べた。
# 発端
社内のslack内での@i9iの発言による。
確かにJavaやCだと、変数iの一つのインスタンスが逐次インクリメントされるようにコンパイルされるので、そのような疑問が上がるのも自然である。
# 調査
理解できていなかったので、規格のfor文の記載を調べる。
[14.7.4.2 Runtime Semantics: ForLoopEvaluation](https://tc39.es/ecma262/multipage/ecmascript-language-statements-and-declarations.html#sec-runtime
Next2D Frameworkのrouting設定[導入編]
# routing.json
routing設定について解説したいと思います。
ルーティングに設定できるトッププロパティは、英数字、スラッシュ、ハイフン、アンダースコアです。スラッシュ、ハイフン、アンダースコアをキーに`CamelCase`で`View`クラスにアクセスします。例)
下記のサンプルの場合は、`https://example.com/quest/list`でアクセスが可能になり、コンテキストに`QuestListView.js`がセットされます。“`json:routing.json
{
“quest/list”: {
“requests”: []
}
}
“`## 第二階層のプロパティ設定
プロパティ|型|初期値|説明
—|—|—|—
private|boolean|false|SPAモードでも直接のアクセスを制御した時に利用します。trueに設定し直接アクセスすると、TopViewが読み込まれます。
requests|array|null|Viewにアクセスする前に、指定した先にリクエストを送信します。
React + FullCalendarでデフォルト状態から各種プロパティを使ってカスタマイズしていく
はじめまして。GxPのよこがわ（@riki_ykgw）と申します。
この記事は、[グロースエクスパートナーズ Advent Calendar 2021](https://qiita.com/advent-calendar/2021/gxp) 17日目の記事です。私が所属している部では個人の成長を目的とした「GrowthUs」という活動があります。
そこで私が所属しているチームでは[React](https://ja.reactjs.org/docs/getting-started.html)とカレンダーライブラリである[fullCalendar](https://fullcalendar.io/docs/getting-started)を使って1週間の予定を確認できるビューアーを作っています。
今回は活動を通じて学んだFullCale
【Party.js】で魔法使いになってみた（基本的な使い方から〜カスタマイズまで）【JavaScript / ポートフォリオ / UX】
# はじめに
みなさん『ハリー・ポッター』が好きですか？
僕は好きです。小さい頃はよく木の枝で奇妙な形をなぞって、どこの国の言語かもわからない呪文を唱えながら遊んでいました。特に光を出す「ルーモス」という魔法に憧れてて、それである日。。。え？なんの話かって？
ごめんごめん、[Party.js](https://party.js.org/)を紹介しようとしていました。これはWebページに「**紙吹雪**」や「**星形がキラキラと爆ける**」エフェクトを表現できるとても面白い**JavaScriptのライブラリー**なんです。
ユーザーがボタンなどをクリックすると発火し、フォームの**Submitボタン**や**お気に入りボタン**に実装することで、**ページ全体が華やかになり、ユーザー体験を向上させられます。**どんなエフェクトなのか、さっそく見ていきましょう。
そうですね、今の時期は冬で、冬と言えば雪ですよね。では**
google-home-notifierの代替となりそうなgoogle-home-playerを試してみる
# はじめに
Google Home発売当初、Google HomeハックのHello Worldとも言える「Google Homeを喋らせてみた」ハックで誰もが使用したであろう「google-home-notifier」ですが、動かなくなったりメンテされなくなったりで、もはや多くの方がGoogle Homeを喋らせることをやめてしまったのではないでしょうか。
https://github.com/noelportugal/google-home-notifier
そんな折ふとnpmを眺めていたら「google-home-player」というパッケージがあり、READMEでもgoogle-home-notifierの代替とあったので試してみました。
# google-home-player
https://github.com/mihyaeru21/google-home-player
google-home-notifierはcallback形式の書き方でしたが、google-home-playerはPromiseで書けます。もちろんasync/awaitでも。
その
ReactNative 出会ったエラーと解消の記録
# 記事の目的
私の ReactNative 勉強＆制作の記録メモ# 教訓：要素数が少ない、一定である配列要素のレンダリングは、FlatList ではなく、単純ループで記述せよ
## 何が起きたか
`VirtualizedLists should never be nested inside plain ScrollViews`
のエラーに出会った要は、FlatList を ScrollView の中で使うなよ、と怒っている
## FlatList と ループの使い分け をちゃんとする
### FlatList
複数ある配列要素を、ダイレクトローディングしながらレンダリングしてくれる
要素数が多い、不定、サーバサイドから供給されるなど、配列全要素をレンダリング前にロードするのはパフォーマンス的に問題となるケースの時に使う### ループ
配列要素が一定、少ないときには、単純なループで記述すべきだった# 教訓：条件で表示・非表示するときの条件記述をBoolean型に矯正せよ
## 何が起きたか
`Text strings must be rendered withi
【obniz 2021】 #obniz で複数台の #toio を同時に扱うための試行錯誤と 2台同時制御
この記事は、[2021年の obniz のアドベントカレンダー](https://qiita.com/advent-calendar/2021/obniz) の 17日目の記事です。
## 今回の内容
この記事の内容は、obniz と複数台の toio を組み合わせるための準備をしていく過程での試行錯誤と、2台同時の制御を行ったという内容を記事にしています。Web Bluetooth API を使った toio の制御は、以下の記事に書いた 6台同時というのをやったことがあったのですが、「obniz で複数台の制御をやろうとするとどうなるのかな？」と思って手をつけたのが今回の内容です。
●Web Bluetooth API で toio を 6台同時に制御する – Qiita
https://qiita.com/youtoy/items/2fae3f4365788810215d### 途中の試行錯誤の情報が不要な場合
途中に試行錯誤した過程を、後々の自分用のメモも兼ねて色々と書いています。結果の部分だけさっと確認したいとう方は、記事の最後のほうの「同時制御も試す」の「
JavaScriptのDOMって？(初学者向け）
## 目次
|No1| 目次 |
|:–|————–|
|1|はじめに |
|2|DOMって？ |
|3|DOMツリーって？|
|4|まとめ|
|5|おわり|## 1.はじめに
JavaScriptを学び始めるとDOMという言葉に必ず出会います。
ではいったいDOMとはなんなのかという部分にこの記事では触れていきます。## 2.DOMって？
DOMについて触れていきます。
DOMとは「Document Object Model（ドキュメントを物として扱うモデル）」の略で、
HTMLなどの文書をJavaScriptなどのプログラムで扱いやすくするためのAPIです。DOMを利用する事で、
HTML要素の取得,ユーザの操作時の処理,イベントの設定,
見た目の変更などが主に行えます。## 3.DOMツリーって？
DOMを理解するために理解が必須となるのがDOMツリーです。
階層構造とは組織図のようなものだと考えると理解しやすいです。（DOM上ではHTMLのタグのことをNodeと
【PixiJS 覚書】第五回 クリックやドラッグに反応させよう（インタラクション）
##これまでのあらすじ
PixiJSの基本となる仕組みを把握し、
図形、スプライト、文字の描画方法を学び、
それをアニメーションさせる方法まで追ってきました。（超ざっくり）今回はクリックやドラッグなど、ユーザーの操作に反応させる方法を見ていきます。
##PIXI.utils.EventEmitter
####PIXI.DisplayObjectの基本クラス
さて、これまで見てきた描画オブジェクトはどれもPIXI.DisplayObjectの派生クラスでした。
しかしPIXI.DisplayObjectにもまだ上の基本クラスが存在します。
それが**PIXI.utils.EventEmitter**です。では早速、PIXI.utils.EventEmitterがどのような機能を持っているのかAPI Documentationを見てみましょう。
（リファレンス：[PIXI.utils.EventEmitter](https://pixijs.download/dev/docs/PIXI.utils.EventEmitter.html)）
で追加された**磁気センサー**を使った動作を紹介します。
↓まずは早速動いている様子から↓
toioにハンバーガーをあたえてみました。#toio pic.twitter.com/NxPBWshZF0
— Hiroshi Takagi (@TkgHrsh) December 15, 2021
お腹を空かせたキューブが、（大好物？の）ハンバーガーを追いかけます。
キューブの動きが本当に生きているようで、愛着が湧きますよね笑
お気付きの方もいると思いますが、ハンバーガーのシールをマグネットに貼っているので、このマグネットの磁気を検知してキューブが追いかけてくる仕組みになっています。
それでは早速、中身に関して説明していきます!
# 開発環境
* [toio.js](https://github.com/toio/toio.js/)
* toio Core Cube １台
* P
モダンな（ES6以降で実装した）Node.jsでJestを実行する ESLintの設定も
## はじめに
Node.jsの方でもフロントエンド（React・Vue・Angularなど）と同じようにimport/export, async/awaitなどを使った書き方（ES6以降の書き方）をする事があると思う。しかし、その場合どうやってJestを実行するの？という疑問が出てくると思う。今回はモダン化したNode.jsでJestを実行できるようにする方法についてまとめてみたい。また、ESLintを入れていると以下のようにJestの構文で`no-undef`のエラーが出てしまうのでその警告が表示されないようにする方法も見ていく。
GitHubのコードは以下（Step4の章の部分がこの記事でやった内容になっている）。
https://github.com/yuta-katayama-23/node-express/commit/ed
ipad,iphoneなどユーザーエージェントを判別（判定）する方法/js
##まず初めに
こういう時ってないですか？
「レスポンシブだけど、なぜかブレイクポイントを作ってもipadだけ表示されてまう」
「そもそもipadとかiphone,androidやったら表示したくないねんけど」
「なんなんもう。。。」上記みたいな時って、僕はありました。
masx-widthでブレイクポイント作ってもうまくいかない時### jsで判定して、あとからstyleを追加しよう
とりあえずコード
“`js
“`pcのみで表示させたい要素に”pc_only”のIDを付与してあげます。
【React】【Vue】 など流行りのフレームワークを使うもののためのJS基礎「オブジェクトとしての関数」
JavaScriptでは、関数はFunctionオブジェクトである。
なので、ほかのオブジェクトと同じように使用することができる。
ex)
・変数や、オブジェクトのプロパティ、配列要素に代入できる
・関数の引数にできる
・関数の戻り値にできる
・プロパティやメソッドを持つことができる
・無名のリテラルとして表現できる（無名関数）
・動的に生成できる
this
関数が呼び出されるたびにthisの値が決定される。
thisの値は、「関数が呼び出されたときにその関数が所属していたオブジェクトへの参照」。
下の例では所属していたオブジェクトが[person‗1]でありこれが＝thisなのである。
オブジェクトのnameプロパティがtomなのでコンソールのような結果になる。“`javascript
let person_1 = {
name: “tom”,
say: function() {
console.log(“hello”, this.name);
}
}person_1.say();
//コンソール
hell
【Vue.js】GoogleBookApiをlocalStorageに保存する。
# 概要
[【 Vue.js】Vue.jsでGoogleBookAPIを取得する。](https://qiita.com/Quest_love33/items/df2dbfa0d8de838267e1)で書いたデータをlocalstorageに保存します。
次回以降Vue CLIで一つのアプリケーションにしたいと思います。[公式リファレンス](https://jp.vuejs.org/v2/cookbook/client-side-storage.html#%E8%A4%87%E9%9B%91%E3%81%AA%E5%80%A4%E3%82%92%E6%89%B1%E3%81%86)の情報をもとに作成します。
## case
[【 Vue.js】Vue.jsでGoogleBookAPIを取得する。](https://qiita.com/Quest_love33/items/df2dbfa0d8de838267e1)で最終的にserachResultsという配列にjsonデータを取得しました。
* 取得したデータ
* title
* image
*
正規表現にマッチする文字列を渡してもRegExp.testがtrueにならない
基本的なことですが、少しはまったので備忘のため記します。
##やりたかったこと
文字列がURLかどうかを正規表現で判定したい
##試したこと 起きたこと
“`
const str = ‘https://google.com’;
const reg = new RegExp(‘https?://[\w/:%#\$&\?\(\)~\.=\+\-]+’);
reg.test(str); //結果:false
“`
正規表現は合っているはずなのに、マッチする文字列を渡してもfalseが返ってくる…。:thinking_face::thinking_face::thinking_face:##解決方法
コンストラクター構文では正規表現を文字列として指定しているため「\」のエスケープが必要でした。“`
const reg = new RegExp(‘https?://[\\w/:%#\\$&\\?\\(\\)~\\.=\\+\\-]+’);
“`正規表現リテラルを使用する場合
“`
const reg = /https?:\/\/[\w\/:%#\$&\?\(\)~\
Stripe Billingでの定期課金への消費税設定方法とStripe Taxを使った効率化
Stripe Billingを利用することで、SaaSや会員制サービス・頒布会などの定期課金・継続課金を比較的簡単に実現させることができます。
そして2021/12/14に日本での提供が開始されたStripe Taxを組み合わせることで、税金の計算や徴収・申告についても効率化することができます。
https://qiita.com/hideokamoto/items/e92b6ae22065b0d134cd
この記事では、すでにStripe Billingを利用されている方向けに、Stripe Taxをお勧めしたいケースについて紹介します。
# 対象の読者
– Stripe Billingで定期課金を行なっている方
– 消費税の申告・納付が必要な方
– [Optional] 将来的に海外展開も検討されている方
– [Optional] 税率の変更があった場合に、追加作業をおこないたくない方# アジェンダ
– Stripe Billing単体での消費税徴収方法
– Stripe Taxのメリット・デメリット
– 運用中のBillingにStripe Taxを設定する#
