GASからBigQuery のクエリを実行する

GASからBigQueryのクエリを実行して、スプレッドシートへのデータ書き出し機能をつくります。

# やりたいこと

スプレッドシートにメニューを追加して、チームの誰でもワンクリックでBigQueryから最新のデータをから取得できる状態を目指します。BigQueryのWEB UIも便利ですが、広くチームで使用していく場合、メンバーが使い慣れたスプレッドシートでデータを確認できることは大事でしょう。ノー学習コスト！


# 「BigQ

【JavaScript関数ドリル】初級編のtake関数の実装アウトプット

## take関数の課題内容

_.take関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#take

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】take関数の実装

## 課題に取り組む前の状態

– 解答例を見なくてもできそうだと思った。

## 課題に取り組んだ後の状態

– だいたい解答例と同じようなコードを書くことができた。

## take関数の実装コード（答えを見る前）
“`javascript

function take(arr, n = 1) {
const newArray = [];

if (arr.length <= n) { return [...arr]; } if (n === 0) { return []; } for (let i = 0; i < n; i++) { newArray.push(arr[i])

【JavaScript関数ドリル】初級編のtakeRight関数の実装アウトプット

## takeRight関数の課題内容

_.takeRight関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#takeRight

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】takeRight関数の実装

## 課題に取り組む前の状態

– 配列関数のslice()を使えばいいのかなと思った
– slice()の動きがうろ覚え

## 課題に取り組んだ後の状態

– slice()の動きをリファレンスで確認して実装した
– Returns the slice of array という要件の部分で、リファレンスではslice()は新しい配列を返すとあったので、解答例のように新しい配列の宣言をせず、そのまま返り値を戻したがよかったのか確信なし。

## takeRight関数の実装コード（答えを見る前）
“`javascript
function takeRight(arr, n = 1) {

if (n >= arr.length) {

WebサイトURLからカラーパレット生成する

WebサイトのURLを入力するとカラーパレット生成してくれるツールを作成しました。

↓ 動いてるところ

画面はこんな感じ https://t.co/KtI0yjPWdI pic.twitter.com/daWAB6sbQz

— Taro Tenugui (@tenugui_taro) June 7, 2022

### 何をやっているか
– ヘッドレスブラウザを用いて該当URLのフルスクリーンショット取得
– スクショ画像からカラーパレット生成
– Firebaseを用いたバックエンド実装


【ServiceNow】特定の列の要素一覧を取得したい～応用編～

### はじめに

– バージョン
– ServiceNow: Rome

　前回の記事[【ServiceNow】特定の列の要素一覧を取得したい～基礎編～](https://qiita.com/masa2223/items/c71d942773ee38518780)では、
**欲しいデータが1つのテーブルで完結している場合**で使えます。今回は**欲しいデータが1つのテーブルで
完結していない場合**、列の要素一覧をどのように取得するかを紹介します。
　例としては、以下テーブル“Requested Items[sc_req_item]“の列Additional commentsの要素を
取得する場合です。Requested Item(RITM0010057)の列Additional commentsを見ると、
Requested Itemに紐づくAdditional commentsが全て(3つ)記載されています。また、Requested Item内の
“Activities“を見ると、Additional commentsの内容が確認可能です。
　前回の記事との違いは何で

動的にフォームを追加、削除する

# 追加した分もDBに保存したい

初投稿です。

フォームを追加、削除する記事はいくつかあったのですが、
DBに保存できるようにする記事は見つけられなかったので備忘録として投稿します。

初学者なのでアラが目立つコードだと思いますが、どなたかの役に立てば幸いです。

間違えや、添削があればコメントにて教えていただければものすごく嬉しいです。

“`ruby:new.html.rb

<%= javascript_pack_tag 'addForm.js'%>

<%= f.fields_for :ingredients do |ingredient| %>

<%= ingredient.text_field :name, id:"ingredient-name_0", p

動的に表示したDOMに対してjQueryでfocus()する方法

jQueryの.focus()を使ってinputタグに自動的にマウスカーソルのフォーカスを当てようとしていたのだけれど、うまくいかない。
しかしこの方法で別のDOMに対してはfocusできていたので、jQueryのバージョンだとかそういう要因ではなさそうだった。

よく考えると今回フォーカスを当てたいDOMは普段は隠れていて、ボタンを押した時だけ出てくるミニモーダルの中のinputタグだった。このボタンを手動で押してミニモーダルを開いた場合には自動的にフォーカスが当たるのだけれど、それ以外の方法（今回は onclick → trigger(“click”)による自動？クリックでミニモーダルを出現させていた）では動作していないようだ。

解決した方法：

ミニモーダルをdisplay:blockなりで出現させてから.focusするまでにsetTimeoutで１００ミリ秒待つようにしたら普通に動いた。

ちなみに：

.focus（)だけじゃなく.select()もこの方法で動いた。
せっかくなので.focusを.trigger(“focus”)に変えておい

今週の学び　第8回

# 今週の学び

jQueryなど

– .text()
– 引数を設定しなかった場合はjQueryオブジェクトで指定した要素のテキスト情報を取得引数を設定した場合はjQueryオブジェクトで指定した要素のテキストを設定する

– prop()
– 属性プロパティに値を設定、または設定されている値を取得する
val()などと同様の使い方

– disabled属性
–

～

内で使用する要素で、無効 を指定する
この属性の指定により要素が無効化されるとユーザーからのその要素への操作は一切受け付けなくなる

– Math.random()
– 0 以上 1 未満 (0 は含むが、 1 は含まない) の範囲で浮動小数点の擬似乱数を返す

# まとめ

今週は特に学びが少なかったように思う
進捗が良くないので、積極的に調べたり教えてもらうようにする

【fabric.js】『化物語』の閑話休題演出をサクッと作れる「化物語「風」扉絵メーカー」を1.5時間で作ってみた

## はじめに
最近、Youtube動画の演出で「化物語でよく見る閑話休題や黒駒演出取りいれるのはどうだろう」と思い、動画編集ソフト上で実現してみた。
場面転換としてなかなか優秀だなと思い、これからこの演出を使っていこうかなと思ったが…

「都度色を考えたり、カラーコードコピーしたりが面倒だ…!!」

というわけで、自分が楽するためにサクッと閑話休題演出を作ってくれる簡単なWebアプリを作ってみた。

なお、1時間ちょっとで作ったver0.5版なので、簡単な操作しかできないが、気が向いたらもう少しブラッシュアップする予定。

## 作った(作っている)モノ

[化物語「風」扉絵メーカー](http://tasokori.net/webapps/monogatari-tobirae-maker/)

【Next.js】useRouterのrouter.queryが初回レンダリングでundefinedになる

## やろうとしていたこと
Next.jsでURLの中のパラメータを取得。
取得したパラメータの有無によって、関数処理を分ける。

## 生じていた問題
確かに、目視ではパラメータがあるんです。
あるのに、どうして…
なんでだか、console.logで値を覗いてみるとundefinedが…oh..No
たしかに、次レンダリング時には値は取れてる、取れてるのだけど、その前の値(undefined)で処理が走ってしまう。
“`react.js:logout.jsx
const router = useRouter();
const { param } = router.query;

useEffect(()=>{
onLogOut(); //←paramの値がundefinedでログアウト処理が進んでしまう
},[param])
“`

## 解決できた方法
useRouterには、router.isReadyというオブジェクトがあるらしいです。
文字通り、routerの準備の有無が確認できました。
なので、router.isReadyを使って、routerの準備が

【React】公式のチュートリアルをやってみる～④stateのリフトアップ

[React】公式のチュートリアルをやってみる～②プロジェクト用ファイル作成](https://qiita.com/asahina820/items/661f95434e6a6c73fa20) の続きです。
勝利したプレイヤーを判定できるように、9個のマス目の値を1か所で管理します。

## 親コンポーネントで状態を管理する
### Boardコンポーネントにthis.state の初期状態を設定するコンストラクタを追加する

“`diff_jsx
class Board extends React.Component {
// コンストラクタ
+ constructor(props) {
+ super(props);
+ this.state = {
+ squares: Array(9).fill(null),
+ }
+ }
renderSquare(i) {
return ;
}
render() {
(略)
}
}
“`

– 9個のスロットにnullが入った配列が生成され、s

【Vue.js初心者向け】比べて分かる！ jQueryで作ったスライダーをVue.jsに落とし込んでVue.jsを理解しよう

# 1．はじめに
大学生フリーランスの [むささび](https://twitter.com/musasabi_byun) です．
主にWeb制作活動を行っています．

普段は JavaScript のライブラリとして jQuery を触る機会が多いですが，モダンなフレームワークにも大変興味があるお年頃です．

そこで，昨今大変人気な JavaScript フレームワークのひとつである `Vue.js` についてお勉強しました．

本記事ではモダンな JavaScript フレームワーク初心者向けに，`Vue.js` でスライダーを作成します．
また jQuery との比較もしたかったため，jQuery と Vue.js を用いて同じ機能のスライダー (計2つ) を実装します．

また，今回作成したスライダーは [こちら](http://musasabibyun.php.xdomain.jp/jsfw-sliders/) ですが，Vue.js を初めて触って `3日` で完成させました．
この際の勉強方法も参考になるのではと思い，辿ったルートも簡単に紹介したいと思います．

:::no

Flatpickrで現在時刻をセットするボタンを実装する（TypeScript対応）

## 現在時刻をセットするボタンを実装したい

### まずは日付フォーマットで楽するためにdayjsをinstall
“`cmd
yarn add dayjs
“`
https://www.npmjs.com/package/dayjs
日付フォーマット系の中でも軽量らしく、今回はフォーマットしかしないのでdayjsを選択。

### 実装
“`javascript
import flatpickr from ‘flatpickr’;
import { Japanese } from ‘flatpickr/dist/l10n/ja’;
import dayjs from ‘dayjs’;

const myElement = document.querySelector(‘.myElement’);
if(myElement) {
const fp = flatpickr(myElement, {
enableTime: true,
dateFormat: ‘Y/m/d H:i’,
minDate: ‘today’,
time_24hr: t

FlatpickrのmethodをTypeScriptで使用する

## Flatpickrの公式ドキュメントのコードを貼り付けたが、TSで怒らるし意味不明という方へ

例えば公式のこんなコード
https://flatpickr.js.org/instance-methods-properties-elements/#methods
“`javascript
let calendar = flatpickr(yourElement, config);
calendar.changeMonth(1); // go a month ahead
“`
これを貼り付けてもTypeScriptの設定によっては、
**プロパティ ‘changeMonth’ は型 ‘Instance | Instance[]’ に存在しません。**
と怒られます。他のmethodsでも同様にキレられますよね。

### こんなコードに変更すると解決できるかもしれません。
“`javascript
const myCalendar = document.querySelector(‘.yourElement’);
if(myCalendar) {
const fp =

HTMLタグを超えてキーワードをハイライトするアルゴリズム

## はじめに

HTMLタグを超えてウェブページのキーワードをハイライトさせるアルゴリズムを考えました。
:cherry_blossom:
よくあるのはHTMLタグの内側に限定してキーワードをハイライトさせる方法ですが、HTMLタグを超えてキーワードをハイライトさせるには少し工夫が必要です。:thinking:

## アルゴリズム

簡単な例とともにアルゴリズムを示します。

“`html:HTML

今日は晴れ。

明日は？

“`

HTMLタグを超えてキーワード「今日は晴」をハイライトさせたいとします。

“`mermaid
graph TD
A((A)) –> B((B))
B –> C((C))
B –> D((D))
A –> E((E))
C -.- CT[“今日は”]
D -.- DT[“晴れ。”]
E -.- ET[“明日は？”]
style CT fill:transparent
style DT

JavaScriptでCPU対戦できる乱数ゲーム作った

ヤッツィーというアメリカ発のダイスゲームを参考に、より簡単に楽しめるものをJavaScriptで作りました。（お手軽ヤッツィーとか呼んでます。）

htmlのbodyにそのまま突っ込んでデベロッパーツールで遊んでます。

ボーナス計算の処理や、CPUがダイスを振り直すか振り直さないかの判断、またどれを振り直すかの処理など凝って作りました。

ご意見等お待ちしております！

以下、ルールです。


“`JavaScript
let a, b, c, i, r, score, bonus, cpuscore, cpubonus, ss, ts=0, cputs=0;
let min, max;

for(i=1;i<=3;i++){

ブラウザのJavaScriptから直接メールを送れるPaaS、EmailJS

ほとんど静的でバックエンドのいらないサイトでも、唯一バックエンドが必要な部分がお問合せフォームだったりします。このお問合せフォーム等からのメール送信の機能をクラウドサービスとして行ってくれるのがここで紹介する[EmailJS](https://www.emailjs.com/)です。このサービスを使うことでGUIでポチポチ設定するだけでメール送信機能ができ、自分でプログラムを書いてバックエンドを組む必要がなくなります。

# 特徴
– ブラウザからREST APIでサービスのURLに直接アクセスしメールを送信できる、REST APIをラップしたJavaScriptのSDKもある
– 予めサービスの管理画面からメールのテンプレートの設定をし、APIからメール送信するときは穴埋めに使うテンプレート変数のみを送る
– 問い合わせ窓口に対するメールと、問い合わせ投稿者に対する確認メールの2通を同時に送れる
– reCAPTCHAを設定できる
– 月200通まで無料
– シンプルだが必要な機能は揃っており、使い方がわかりやすい
– ただしメールサーバー自体は別に用意する必要がある

# 他のメー

りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】の学びまとめ

## この記事 is 何
– 読んで初めて知ったこと、とくに学びになったことをピックアップして紹介する

## 本の紹介
[りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】](https://oukayuka.booth.pm/items/2368045)

## 第1章
### node.js
– `node`コマンド単体で実行するとREPLが起動して対話環境でJavaScriptを試すことができる

“`js
$ node
> 2 + 1
> 3
> const hoge = ‘ほげ’;
> hoge
‘ほげ’
“`

– yarnはFacebook製

### Visual Studio Code
– React開発元のFacebookでもvscodeがデフォルトの開発環境として採用されている

### Create React App
– 非推奨になったAPIの使用や意図しない副作用をWarningで教えてくれるStrictモードがある
– Create React Appバージョン3.4.1からはデフォルトで追加してく

webpackでbuildした際、そのbuild versionをブラウザから簡単に確認できるようにする

## はじめに
検証・本番環境で今見ているものが一体どのバージョンのものなのか？が分からなくなる事があると思う。そんな時、手軽にバージョン確認できればいいなという事で、[webpack-version-file](https://github.com/fed/webpack-version-file)を利用して静的ファイルの配信を行うフォルダに`version.json`を生成する方法を試してみたのでそれについて備忘録を残す。

[^1]: アイディアの1つとしては、APIで`/healthcheck`のようなエンドポイントを設け、APIサーバーが動くために必要になる他のMySQLやRedis等が生きている事を確認しつつ、そこでbuildバージョンをJSONで返す、というのがあるだろう（ただし、こういうhealthcheckのエンドポイントはセキュリティのためにALBなどでのIP制限は必須になると思われる。

※フロントエンドとバックエンドのプロジェクトが分かれている場合、今回見ていく方法では、フロントエンドのプロジェクトのbuildバージョンの確認はできるようにはなるが、バックエンド

nvmのデフォルトをltsに変える

いつも忘れてしまうのでメモ。
# For LTS(長期サポート版)
“`shell:デフォルトをltsにする
nvm alias default lts/*
“`
ついでによく使うコマンドを載せておきます。
“`shell:ltsの最新版をインストールする
nvm install lts/*
“`
“`shell:最新のltsを使う
nvm use lts/*
“`

# For Stable(安定版)
“`shell:デフォルトをstableにする
nvm alias default stable
“`
ついでに
“`shell:stabeをインストールする
nvm install stable
“`
“`shell:stableをインストールする
nvm use stable
“`