- 1. firebase functionsのonCall呼出し時に認証する
- 2. Flash Advent Calendar 5日目 – Canvas2D –
- 3. 【React】Hooks(関数コンポーネント)の挙動を検証しながら確認する回
- 4. 【メモ】 Markdown Preview Enhanced で作ったHTMLを即席でスライド化する
- 5. 第三の答え、Stimulusjs
- 6. 入れ子のforeach文での非同期処理（async / await）
- 7. ESP32 と QuickJS で小さなJavaScript実行環境を作る
- 8. メトロポリタン美術館APIを使ってみた
- 9. 【初心者向け】コーディングでは積極的にメモにまとめよう（効率化）
- 10. ECMAScript2021に追加予定のJavaScriptの機能をみてみる。
- 11. 【初心者でもわかる】ワンクリックでテキストをコピーできるボタンの作り方
- 12. ポリゴン内の位置を返すさまざまな関数「center, centroid, centerOfMass, pointOnFeature」
- 13. JavaScriptでconsole.log()を使うのはやめよう
- 14. JSでいろいろな文字入力制御に対応してみた
- 15. Vue.jsとは
- 16. Alpine.js の良いところ
- 17. JSで簡単なゲーム作ってみた
- 18. Google Chrome の JavaScript エンジン V8 って？
- 19. [webpack]初回ビルド時に通知するプラグインを作ってみた！
- 20. Yarnについてまとめ
firebase functionsのonCall呼出し時に認証する
思い付きで書くのでアドベントカレンダーに参加できなかった。。。
# この記事の対象者
onCallファンクションの中で認証が必要なDB操作等をしたい人向け。ググっても出なかったので書き出します。
onCallの中では認証情報が渡されているのでuidを取り出してcustomTokenを作り認証すればOK!!
##以下サンプルソース
### web 側
バッチ実行ボタン等から呼ばれるclickHandler関数の中でfunctions.httpsCallableにfunctions側の関数名(ここでは’hoge’)を渡して非同期で実行する“`client.js
import firebase from ‘firebase/app’
import ‘firebase/auth’
import ‘firebase/functions’
import firebaseConfig from ‘./firebaseConfig’const clickHandler = async () => {
const hoge = functions.httpsCallable(‘h
Flash Advent Calendar 5日目 – Canvas2D –
将来的にはWebGLに移行する事になるのですが
初期はCanvas2Dを利用して描画を作っていました。
その中で得られた知見を書こうと思います。# Flashの描画手法
Flashの描画は基本、一筆書きでです。
使われる関数も3つです。* 移動(moveTo)
* 直線(lineTo)
* 曲線(quadraticCurveTo)どれだけ複雑な表現でもこの仕様で実現されており
結構、男前な仕様だと思ってます。ただ、この一筆書きがかなり難解でした。。。
[参考資料](http://codeazur.com.br/fitc/HackingSWF.pdf)
Canvas
【React】Hooks(関数コンポーネント)の挙動を検証しながら確認する回
## Hooks の挙動をきちんと説明できる自信がない…
みなさん、 `useEffect` とか `useState` とか、なんとなく使っていませんか？
stateの更新後に値が反映されるタイミングや`useEffect` が再実行されるタイミングを具体的に説明できますか？
自分はこの辺があやふやだったので、調べたり検証したりしてみました。
## 関数コンポーネントのライフサイクル
関数コンポーネント＋Hooksのライフサイクル？ は、[こちらの](https://github.com/Wavez/react-hooks-lifecycle) サイトに載っている図を見ていただけたらなんとなく理解できると思います。
クラスコンポーネント がわかる人は比較しながら見てみるとよりわかりやすそうです。
## コンポーネントの更新と再レンダリングの挙動
※ この記事ではブラウザに描画することをレンダリング、コンポーネントの関数を再実行することをコンポーネントの更新と表現します
コンポーネントの更新が発生するタイミングは、`useState`や`useReducer`によ
【メモ】 Markdown Preview Enhanced で作ったHTMLを即席でスライド化する
Markdown Preview Enhanced で HTML を出力したものを使って、
即席プレゼン資料を作りたいとき用。まず、資料を作る段階で、ページ分けしたい場所を `—` で区切る。
“`markdown
あああああああ
あああ
あああああああああああああああああ
ああああああああああああ—
– [x] ああああああああああああああ
– [x] あああああああああああああああああああああ
– [x] ああああああああ
– [ ] ああああああああああああああああああああああああ—
| AAAAAAAAAAAA | AAAAAAAAAAAAA |
| ————————— | —————————- |
| AAAAAAAAAAAAAAAAAAA | AAAAAAAAAAAAAAAAAAA |
| AAAAAAAAAAAAAAAAAAAAAAAAAAA | AAAAAAAAAAAAAAA
第三の答え、Stimulusjs
昨今のフロントエンドトレンドを鑑みてフロントエンドの技術構成を考えると今はどんな選択肢が主流でしょう？
それぞれ並列なものではないですが、React? Vue? Next? Nuxt?そんなワードがきっと頭に浮かぶでしょう。今の時代、jQueryでゴリゴリUIを記述するとなんだか白い目でみられる。
そう、令和とはそういう時代です。界隈の最先端おじさんをみると、build processがあるのは当然で、HTML/CSSはjsが吐き出すもので、それが最大限正しいように語られています。
確かにExising Domのアプローチで界隈から評価されてるライブラリはなく、さほどいい選択肢には見えません。(個人の主観)
ではそれらのアプローチの何がそんなにいいんでしょう？過去から現在まで我々は何に苦心して、それらはそれをどう解決してくれたのでしょう？
雑に紐解いていきましょう。(今回はUI構築の側面にのみフォーカスを当てます)## 2008年頃、jQueryが普及し始めた頃
jQuery登場以前、ブラウザが提供する低レベルなDOM APIでのUI構築は現在からすると想像を絶する
入れ子のforeach文での非同期処理（async / await）
## きっかけ
Reduxでコンテンツを管理していて、それぞれのコンテンツについて非同期の通信を行わなければいけなくなったときに、こんがらがったので記事にしておきます。## 前提
以下のような関数があるとして、更新後のstateを表示したいとします。“`js
const state = {
singers: [
{
name: ‘Alice’,
status: false
},
{
name: ‘Bob’,
status: false
},
],
composers: [
{
name: ‘InvalidUserName’,
status: false
},
{
name: ‘Charlie’,
status: false
}
]
};// 指定した時間がかかる非同期の関数
const sleep = time => new Promise(resolve => setTimeout(resolve
ESP32 と QuickJS で小さなJavaScript実行環境を作る
社員ではない上に仕事とも関係ない内容ですが [第二のドワンゴ Advent Calendar 2020](https://qiita.com/advent-calendar/2020/dwango2) 用に書きました．
# はじめに
IoT機器に組み込める JavaScript 実行環境が欲しくなったので，ESP32 を使った開発で QuickJS を使ってみました．
ESP32のモジュールは小さい＆簡単に使えそうな M5Atom を使います．**24 x 24 x 10 mm** に収まります．
誰でも入手可能でネットにつながる機器としては，世界最小＆最安の JavaScript 実行環境ではないでしょうか(※当社調べ) ．ニッチな内容なので読み飛ばしたい人のために，3行で書くと：
– ESP32 に QuickJS を載せて JavaScript を実行できるように
– Python や lua を組み込む感覚で JavaScript を使えると便利
– 使用メモリ削減のためのあれこれ## JavaScript が動くと嬉しいこと
普段はC++で開発していますが
メトロポリタン美術館APIを使ってみた
#はじめに
当方、好きが高じてフランスに行ってしまうほど美術館巡りが好きなのですが、今年はこういった状況でなかなか行けません…
そこで、美術館に行けないならAPIを取って観ればいいじゃない！ということで、メトロポリタン美術館(以下METと呼びます。)が出しているAPIを触ってみました。(フランスの美術館ではないですが…)#MET APIの使い方
MET API は無料かつ、登録やAPIキーの取得をする必要なく使えます。
下記のリンクで詳しく書かれています。
[The Metropolitan Museum of Art Collection API
](https://metmuseum.github.io/, “MET API”)#とりあえずデータを取ってみる
“`JavaScript:met.js
const request = new XMLHttpRequest();
request.open(‘GET’, ‘https://collectionapi.metmuseum.org/public/collection/v1/objects’, true);
req
【初心者向け】コーディングでは積極的にメモにまとめよう（効率化）
#メモにするメリット
急がば回れ、
コードを書く前にしないといけないことを明確にすることで、無駄なコードを書いて混乱せずに済みます。結局そのほうが開発が早く進みます。
また、後にコーディング内容に問題があったときに『自分が何を考えて何をコーディングしたのか』を振り替えることができます。特にPHPやHTML、JavaScriptなど複数言語を同じ開発で扱うときには、どの部分で何をするかもわかりやすくなるでしょう。
#ToDoリストを書く
コードを書く前にやることをToDoリストにまとめましょう。コードを書く前に
手順（しないといけないこと）をまとめる。
手順の中での課題になりそうなことをまとめる。
チーム開発では、何を相談すべきか明確する。コードを書きながら
やったことを都度まとめる。
新たに生まれた『これからやること』をまとめる。これらをメモすることで、分からなくなったときに今までしていたことを振り返ることができ、
チームメンバーに説明するときにも開発内容を説明しやすくなります。#初心忘れるべからず
とても基本的なことですが、メモにする
ECMAScript2021に追加予定のJavaScriptの機能をみてみる。
どうも、アラサーマークアップエンジニアです。
この記事は、[ゆめみ Advent Calendar 2020](https://qiita.com/advent-calendar/2020/yumemi)の6日目の記事です。JavaScriptの仕様は、TC39というECMAScriptの仕様を定める委員会が、毎年6月頃に新しい仕様を発表しています。
今年は[ECMAScript2020](https://www.ecma-international.org/ecma-262/)という仕様でしたが、来年は[ECMAScript2021](https://tc39.es/ecma262/)の仕様となります。この記事では、現在ECMAScript2021でリリースされることが、確定している新しい構文について見ていこうと思います。
## そもそも新しい仕様はどうやって決まるの？
[TC39/proposals](https://github.com/tc39/proposals)のリポジトリに現在検討中の仕様がまとまっています。仕様にはstageというものが存在し、ドラフト→レ
【初心者でもわかる】ワンクリックでテキストをコピーできるボタンの作り方
#どうも7noteです。クリップボードにテキストをコピーさせる方法。
ユーザーがわざわざドラッグしてコピーしなくても、任意のテキストをクリップボードにコピーさせることができます。
`input`や`textarea`などの要素のテキストをコピーさせることができます。**サンプル**
## ソース
“`index.html
確認コード：
“`“`script.js
function copy() {
var targetCode = document.getElementById(“code”); // コピー対象のテキストを選択する
tar
ポリゴン内の位置を返すさまざまな関数「center, centroid, centerOfMass, pointOnFeature」
建物や地形のポリゴンの「中に」マーカーを立てたいケースはいろいろあります。
turf.js で用意されているポリゴン内の位置を返す様々な機能を見ていきましょう。
– 黒: center
– 青: centroid
– 緑: centerOfMass
– 赤: pointOnFeature### 黒:[center](http://turfjs.org/docs/#center)
関数名の通り、図形の「中心」を返します。
穴あきや「コの字」だった場合は、図形外になる可能性があります。### 青:[centroid](http://turfjs.org/docs/#centroid)
こちらは図形の「重心」を返します。
これも、穴あきや「コの字」だった場合は、図形外になる可能性があります。### 緑:[centerOfMass](ht
JavaScriptでconsole.log()を使うのはやめよう
>本記事は、[Harsha Vardhan](https://harshaktg.medium.com/)氏による「[Stop Using console.log() In JavaScript](https://medium.com/javascript-in-plain-english/stop-using-console-log-in-javascript-d29d6c24dc26)」（2020年10月25日公開）の和訳を、著者の許可を得て掲載しているものです。
# JavaScriptでconsole.log()を使うのはやめよう
>もっと良い選択肢がある
>Photo by [Hugo Rocha](https://unsplash.com/@hugorrocha?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com/?utm_sourc
JSでいろいろな文字入力制御に対応してみた
## 背景
自社サービスにて、細かい入力制御をする必要がありました。
特に銀行口座の名義人カナ入力にて、半角カナ入力時に、小文字(ｧなど)は大文字(ｱなど)に直す必要があったり、ｰ(長音)は-(ハイフン)に直す必要があったりしたので、
そのあたりも含めいろいろ対応してみました。## 動作例
### ひらがなのみに変換
ひらがな以外を入力しようとしてもできないようになっています。少し分かりにくいのですが、最後の「エンジニア」はカタカナに変換して確定後、ひらがなに変換されています。
### 半角カナ大文字(+ハイフン)のみに変換
以下のように「フットボール」と入力した場合、「ﾌﾂﾄﾎﾞ-ﾙ」に変換されます。
を構築するためのJavaScriptフレームワークです。
フレームワークとは開発をする時に必要な機能などをまとめて提供してくれるソフトウェアのことで、使用することで開発の効率を上げることができます。Vue.jsでコードを書く時は、冗長な記述を少なくすることができます。Vue.js独自の規格やルールも少ないため、他のフレームワークよりも自分の好きなやり方でアプリ開発を行うことも可能です。
#Vue.jsの特徴
###■気軽に使える
Vue.js はjQueryと同様に、scriptタグを1行書くだけで使い始めることができます。“`vuejs
“`###■双方向データバインディング
双方向データ
Alpine.js の良いところ
これは [SOUSEI Technology アドベントカレンダー](https://qiita.com/advent-calendar/2020/st)6日目の記事です :pencil:
## 唐突ですが
Alpine.js 、素敵じゃないですか :cake:
https://github.com/alpinejs/alpine最初見た時は「Alpine」のとこだけ見て、 Linux の方かと思ったのは秘密です。
なんだかんだで普通の HTML のページを作る機会がある人はあると思うんです。ペライチの LP など。
その時に何を使うか :thinking:
素の JavaScript だったり jQuery だったりがまずパッと思いつきますかね？そんな時、自分は今まで [Stimulus](https://stimulusjs.org/) を使っていましたが、先日実際に Alpine.js を使った時に、どのようなポイントが「良いなぁ」と思ったのかご紹介します :hugging:
※ 紹介している Alpine.js のバージョンは **2.7.3** になりま
JSで簡単なゲーム作ってみた
今まで授業で習ってきた内容を活用して、JavaScriptで簡単なゲームを作ってみました。
#ゲームについて
###ダウンロード
こちらからダウンロードできます。
https://drive.google.com/file/d/1zp9tvFvftziMUGV-gTdD2AS15D4vkZM9/view?usp=sharing
「Game.zip」を解凍し、その中にある「index.html」を開くことで、ゲームをプレイすることができます。
※「CodePen」を利用してこちらの記事にソースコードを埋め込むこともできたのですが、ゲームが上手く動作しませんでした・・・。
###概要
このゲームは、画面上に一定時間の間隔で移動する1つのボタンを、単純にクリックしていくという、とてもシンプルなゲームです。クリックしていく度に、その間隔は短くなっていきます。FPSゲームのエイム練習にはもってこいのゲームなのではないかと思います。
####起動画面
Javascript から使える API （`setTimeout` など）には様々なものがありますが、これらは V8 エンジンから提供しているものではなく、ブラウザによって、提供されているものです。
## Call Stack
Javascript は、シングルスレッドで動くので、Call Stack もシリアルに動きます。例えば、このようなコードがあるとします。
“`javascript
function multiply(x, y) {
return x * y;
}
function printSq
[webpack]初回ビルド時に通知するプラグインを作ってみた！
## はじめに
webpackのビルド完了時に通知してくれるライブラリでwebpack-build-notifierなどがありますが、見た感じ初回ビルドのみはなかったので、今回はnode-notifierを使って、初回ビルド時に通知してくれるwebpackのプラグインを作ってみました！
webpackの簡単な設定などは済んでいる前提で進めていきます。以下のサイトを参考にさせていただきました。
[node-notifier](https://github.com/mikaelbr/node-notifier)
[簡単な Webpack plugin を作成して Webpack と仲良くなる (ビルド時情報を console.log に表示する)](https://o296.com/e/%E7%B0%A1%E5%8D%98%E3%81%AAWebpackplugin%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%81%A6Webpack%E3%81%A8%E4%BB%B2%E8%89%AF%E3%81%8F%E3%81%AA%E3%82%8B(%E3%8
Yarnについてまとめ
#Yarnとは？
– 2016年にFacebook社からリリースされたパッケージ管理ツール
– Node.jsのデフォルト搭載のnpmの代替となるツール
なぜあえてnpmでは無くYarnが使われるのでしょうか？
# Yarnのメリット
– 並列処理によりインストールが高速
– yarn.lockファイルによる厳密なモジュールのバージョン管理
– （yarnリリース当初、npmにはpackge-lock.jsonファイルが無かった）– npmとの互換性
– npmと同じpackage.jsonが使える#npmとyarnの主なコマンドの違い
##package.jsonの作成
“`:npm
npm init
“`“`:yarn
yarn init
“`##依存パッケージのインストール
“`:npm
npm i
“`“`:yarn
yarn
“`##新規パッケージのインストール
“`:npm
npm i <パッケージ名>
“`“`:yarn
yarn add <パッケージ名>
“`##パッケージのグ
