JavaScript関連のことを調べてみた2020年07月02日

GAS Calendarの予定削除

#### GAS Calendarの予定削除
—
カレンダーを全て取得して
ある日程から先の予定を全て削除する。

Exceptionエラーとなり、操作できないと表示されるが
何度か繰り返すと予定は削除された。

“`javascript:コード.gs
function Delete_CalendarEvents() {

var calendars = CalendarApp.getAllCalendars();

const startTime = new Date(‘2020/7/3 7:00:00’);
const endTime = new Date(‘2021/1/1 12:00:00’);

for (var i in calendars) {
var id = calendars[i].getId();
var calendar = CalendarApp.getCalendarById(id);
//Logger.log(id)
var events = calendar.getEvents(startTim

getElementByIdとgetElementByClassNameの違い

“`javascript
const aaa = document.getElementsByClassName(“aaa”);
console.log(aaa);
//
const bbb = document.getElementById(“bbb”);
console.log(bbb);
“`

上記は同じように見える少なくともjQueryで書くと多分こう

“`javascript
const aaa = $(“.aaa”);
console.log(aaa);
const bbb = $(“#bbb”);
console.log(bbb);
“`

aaaもbbbもオブジェクトを返してくれる。

しかしプレーンのjavascriptはそうはいかない。

getElementByIdはオブジェクトを返してくれる（jQueryのように）が
getElementsByClassNameはHTMLCollection（配列っぽいもの）を返す。

“`javascript
const aaa = document.getElementsByClassName(“aaa”);

JavaScriptの関数学習に特化したサイト作りました【JavaScript関数ドリル】

## 詳細

詳細は以下の記事にまとめているので、詳しくはそちらもご覧になっていただけたらと思います^^

https://bit.ly/2VC7WLn

## 概要

以下のような悩みを持っている方に向けて、「JavaScript関数ドリル」という、JavaScriptの関数学習に特化したサイトを作りました^^

– 「JavaScriptの関数の仕組み頭では理解したけど、自分で作れない…」
– 「JavaScriptの関数の知識を定着させたいから、たくさんの関数の問題を解きたい！」

内容としては「JavaScriptの関数の課題をひたすら解く」という感じです。

現在は「初級編」だけを用意している状態で、今後は「中級編」「上級編」を随時追加していく予定です。

興味がある方は、最初の方に張ったリンク先のページで、サイトの全体像のイメージを動画でも解説しているので、そちらもご覧になっていただけたらと思います^^

Git 使い方 git push origin masterまで

#Gitでのpushまでの道のり

gitの学習メモ
pushまでの手順。

githubのアカウントは持っている前提。

##1、リポジトリの作成

###・リモートリポジトリ
・GitHubにログイン
・画面右上＋ボタンを押す。
・New repositoryを選択
・リポジトリ名を付ける
・Create Repositoryを押す

###・ローカルリポジトリ

・ローカルのソースコードのあるディレクトリに移動
・git init でローカルリポジトリ作成

#リモートリポジトリの指定

・git remote add origin https ~ .git
・https ~ .git は　GitHubの作ったリポジトリのCodeのページのHTTPSのボタン押したところのやつ

#add、commit、push

ソースコードの変更をローカルリポジトリに追加し、リモートリポジトリにローカルリポジトリを反映する。

・git add . ( . は全部のファイルって意味)
・git commit -m “何を変更したかとかのメッセージ”

・git push origin mast

Javascript クラスの書き方

### Javascript クラスの書き方。
“`js
var Foo = (function(name) {
var privates = new WeakMap();

function Foo(name) {
privates.set(this, {});

privates.get(this).prop = 1;
privates.get(this).name = name;
}
Foo.prototype._share = ‘share’;
Foo.prototype.changeShare = function(newValue) { Foo.prototype._share = newValue; };
Foo.prototype.method = function() { return privates.get(this).prop; };
Foo.prototype.say = function() { console.log(privates.get(th

今見ているページのTwitter投稿を補助するブックマークレット【選択したテキスト＋URL】

ニュースやブログなど、何らかのサイトを見ていて
:bird:Twitterで投稿したいけど、シェアボタンが無くて不便！
ボタンはあるけど文章がついていないなどの経験はありませんか？
特に古い記事、ブログ以外のサイトなど。

そんな時にこのブックマークレットがあれば、ワンボタンで
タイトルまたはH1タグまたは【選択したテキスト】＋
URL付きの投稿画面を表示出来ます。

下記のコードをコピペして、ブラウザのブックマークの
URLに貼り付ける事で利用できます。
※PC版Chromeで動作確認しています。2020.07.01現在

**選択しているテキストを文章とする版**

“`
javascript:tt=window.getSelection().toString();window.open(‘https://twitter.com/intent/tweet?url=’+encodeURI(location.href)+’&text=’+encodeURI(tt),’_blank’)
“`

—

**ページタイトル版**

“`
javascript:tt=document

firebase functionsから別のfunctionsをキックする

## やりたいこと

– functionsから別のfunctionsをキックしたい

## 先に代替案

[firebase-queue](https://github.com/FirebaseExtended/firebase-queue) というものがあるので、条件に合えばこれを使っても良さそう

– firebase realtime databaseを利用している
– 4年くらい更新されていないので怖い

## ユースケース例

この記事では下記のような挙動を例にします

– チャットアプリ
– ユーザーAがメッセージを投稿する
– 同じチャットルームに属するユーザーB, C, Dにpush通知が届く

具体的には下記のような処理フローになります

– ユーザーAがメッセージを投稿するとfirestoreにドキュメントがinsertされる
– ドキュメント作成のイベントを受けて、functionsAがキックされる
– functionsAの中で
– 同じルームのメンバー一覧を取得
– メンバーそれぞれについて、push通知を発行するfunctionBをキック

firestoreのデータをvue-chartでグラフ化する時にハマった

firestoreからデータを引っ張り出しvue-chartでレンダリングしようとした時に躓き時間をだいぶ割いてしまったので同じように悩んでる人が居れば（多分いない）助けになりたいと思い共有

###データの流れ

API（openweathermap）→　firestore　→　vue-chart

###絵画してみる

“`chart.vue
mounted() {
this.renderChart(this.chartData, this.options);
},
“`
グラフは表示されない
タブの大きさ等変更すると表示される
![808f10d38bc132c34a312d9cb31f30da.png](https://qiita-image-store.s3.

JavaScriptで日付が変わったら処理する

## 改訂

以下に書いてある記事は思いつきで書いたものです、当初は毎日入っているデータに対して曜日を取れば処理できると思っていましたが、色々考えた結果普通にgetDateを使ったほうが同じ手間で簡単でした

## 前提

arrayにはこういう構造でデータが入っているものとする

“`javascript
const messages = [
{
“date”: new Date(“2020/06/29”)
},
{
“date”: new Date(“2020/06/30”)
},
]
“`

## 曜日比較コード

dateのgetDay()関数で曜日を示すindexが取れ、それが日付が変わることを示すのでそれを使った判定が楽だと思います。(日を取って比較してもいいがこちらのほうが手間がかからない)

formatにはdayjsを使っていますが気にしないでください

“`javascript

let day

messages.forEach((message) => {
// 次の日になったら日付を出力する
if

JavaScriptの基礎文法

コンソールにて　Heloo world と出力されます

下記の解説をします。
# let btn = document.querySelector(“button”);
ノードオブジェクトのbuttonをbtnに代入しています。
# function printHello() {
console.log(“Hello world”);
printHello関数を定義しています。
２番目の記述で、コンソールにHello worldと出力しています
# btn.addEventListener(“click”, printHello);
buttonのノードオブジェクトに対して、clickイベントとprintHello関数を紐付ける仕組みであるイ

[Javascript]おばあとおじいの1週間の献立を無理やり再帰にする準備をする。

# 背景
「どうせ学んでいるのならアウトプットせい！」と~~お叱り~~愛の叱咤激励をもらいました。
ごもっともなので毎日投稿を習慣化してみる。

#自己紹介（=~~情報の信頼度~~)
2020年4月から学習をはじめた駆け出しエンジニア
HTML、CSS、Javascript、React、Vue、Laravelを学習
AWSもamplifyとかS3、EC2あたりをちょこっと。ふくおか。

#今日のおはなし
〜おじいおばあの家〜

おばあ「今週のごはんは何にしようか。」

おじい「精のつくものとらねばねえ。」

おじい「しかし、ついつい昨日のごはんも忘れてしまうとよ。困ったもんちゃ！」

おばあ「では、私が「1週間の献立」をつくってみようかね」

おばあ「最近、ぷろぐらみんぐ教室で学んだの。」

#お題
[朝、昼、夜]の献立表をつくる。

献立表＝[
[?、?、?][?、?、?][?、?、?]
[?、?、?][?、?、?][?、?、?]
[?、?、?][?、?、?][?、?、?]
[?、?、?][?、?、?][?、?、?]
[?、?、?][?、?、?][?、?、?]
[?、?

Error ExecJS::RuntimeUnavailable: 発生時の対処法

#発生現象
AWSのEC2でWebサーバ、アプリケーションサーバの設定時に、環境変数の設定をする際の`$ rake secret`を実行した際に下記Errorが発生。

“`terminal:terminal
ExecJS::RuntimeUnavailable: Could not find a JavaScript runtime. See https://github.com/rails/execjs for a list of available runtimes.
/var/www/chat-space/config/application.rb:7:in `‘
/var/www/chat-space/Rakefile:4:in `require_relative’
/var/www/chat-space/Rakefile:4:in `‘
(See full trace by running task with –trace)
“`
→Javascriptがうまく走っていないので、[Node.js](htt

Denoでファイルダウンロードをする

最近Denoでファイルダウンロードをする必要があったので、実装しました。
てきとうに書いたのであまり良くない書き方をしているかもなので、その時はコメントでご指摘ください。

# 結論

“`js
import ky from “https://deno.land/x/ky/index.js”;

const url = “https://raw.githubusercontent.com/denolib/high-res-deno-logo/master/deno_hr.png”;
const path = “deno.png”;

ky.get(url)
.arrayBuffer()
.then(buffer => {
Deno.writeFileSync(path, new Uint8Array(buffer));
});

console.log(“Completed download!”);
“`

kyでファイルを取得し、ArrayBufferからUint8Arrayにしたあと保存しています。

# やってみる

![try.gif

ncestryによる多階層構造データを表示、投稿！！　~Ajax~

# はじめに
ancestryで作成したカテゴリーデータを用いて、選択肢を動的に変化させる機能を実装しました。

学習メモとして投稿します。
まだ、理解が浅いところもありますが参考になればと思います！

完成形

https://gyazo.com/8a5adc080698873d544b8665855c0901

以下が完成コードです！

“`ruby:routes

resources :products, except: [:index] do
get ‘new/children_category’, to: ‘products#children_category’
get ‘new/grandchildren_category’, to: ‘products#grandchildren_category’
end
“`

“`ruby:puroducts_controller
before_action :set_categories, only: [:edit, :update]

〜省略〜

def children_cate

CSSアニメーションとJSで『崩壊するサイト』を簡単に作る

今回はサイトに崩壊するイースターエッグ（隠し要素）みたいな物を、基本的なコードのみで実装してみたので方法をまとめます。
なので初学者の方でも比較的分かりやすいかと思います。

インフラエンジニア「もっと手軽に崩壊できる。」
CSS職人「こんな崩壊にしてみました。」
やらかしエンジニア「崩壊しました。」
な話がある場合はぜひ教えてください！（自分は最近やらかしました。）
　

# ? 作ったもの

（↑サンプルページのGif動画）

**■ サンプルサイトURL（PCのみ）
https://aocattleya.github.io/Collapse-Site**

**■ GitHub
https://github.com/aocattleya/Collapse-Site**

サイト内のキャラクターアイコンをクリックすると、**サイトが

Electronをセキュアな設定の状態で、jsのrequierを行う

# Electronの基本おさらい

Electronは、`メインプロセス`と、そこから読みだされwebページ画面として動く`レンダラープロセス`の2つの領域が存在します。
そのうち、表示を行うレンダラープロセスはセキュリティを厳しくすることが推奨されています。

# Electronのセキュリティ設定

Electronのドキュメント見ると推奨のセキュリティ設定が上げられています。
https://www.electronjs.org/docs/tutorial/security#reporting-security-issues

しかし、デフォルトとのセキュリティ要件だとレンダラー領域でrequierもできずnodeのライブラリを読めません。
もちろん、“require(‘electron’)“もできないのでレンダラープロセスとメインプロセスとの通信もできません。

# requireを渡す

### preloadを経由することでrequireを渡すことができます

electronの仕様で、preload内でcontextBridgeを実行することでレンダリング

【javascript】　テンプレートリテラル とは　一言で。

##【ゴール】
####テンプレートリテラルの理解

##【テンプレートリテラルとは、、、】
####定数や変数を楽して出力できる

**不使用の場合**
＊「+」を2回も。。面倒だな。。。

“`js:hoge.js
const name = “太郎”;

console.log(“私の名前は” + name +”です”); //私の名前は太郎ですが出力
“`

**使用した場合**

“`js:hoge.js
const name = “太郎”;

console.log(`私の名前は${name}です`); //私の名前は太郎ですが出力
“`

##【具体的な使い方】

**①console.log()の括弧内を「“」（バッククォーテーション）で囲む**
　**※Macの方は「command + @」です**

**②変数や、定数で指定したものを${}で囲む**

以上。意外と使います。

##【合わせて読みたい】

■ 【Javascript】 メソッド　まとめ　基礎基本コード　メモ
https://qiita.com/tanaka-yu3/items/2438

JavaScriptのデータ型を変換するの一番簡単な方法

JavaScriptのデータ型を変換するの一番簡単な方法がこの記事で説明します。

また、本記事で紹介するコードスニペットはV8エンジン（V8 8.1.307.32）を搭載するGoogle Chromeのバージョン81.0.4044.138 (64-bit)で検証されていました。

JavaScript は弱い型付けあるいは動的型付けの言語です。javascriptのどのデータも、他のデータ型のコンテキストに意味を持っていますのでデータ型変換するが簡単です。

### 文字列に変換する
`+` 演算子と空文字列を使って文字列に変換することができます。
例えば:
“`let val = 1 + “”;
console.log(val); // 結果: “1”
console.log(typeof val); // データ型: “string”
“`

### 数値に変換する:
データか変数の前`+` 演算子を使ってそのデータとデータ型が数値になります。
例えば:
“`let val = “15.3”;
val = +val;
console.log(val); //

IndexedDB + Vue CLI, Chart.js で、測定値の表示 ファイルのインポート可

# 概要
前と同様、IndexedDB + Vue CLIで
Dexie.js　ライブラリを使用した構成となり。
測定値の登録、chart.jsグラフ表示

・ブラウザ内 IndexedDBデータの エクスポート、インポート機能で
jsonファイル経由で可能で、
別ＰＣや、外出先ＰＣのブラウザにインポートできます。

# 構成
Chrome 83
Vue CLI
dexie : 3.0.1
vue: 2.6.11
vue-router
chart.js
SinglePageApplication / SPA
Progressive Web Apps / PWA

***
### 参考
https://vue-chartjs.org/ja/

Vue-cli（webpack）環境にChart.js（vue-chartjs）をインストールしてグラフを実装する方法

### npm 追加
Vue CLIで、chart.jsだけでは、描画できず。
vue-chartjs　ライブラリも。追加しました。

“`
npm install vue-chartjs chart.js –save
“`

# package.

指定したHTML要素にスクロール

JavaScript で指定した HTML 要素にスクロールさせます。自動的にフォーカスを移動させることなどを想定しています。

よくある処理だと思いますが、そのものズバリのサンプルが見当たらなかったので、実装を残しておきます。

See the Pen