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

Vue CLI+ Laravel 5.8で、Notification API 通知対応の メッセージ機能の作成。 #Laravel #Vue.js

# 概要
前の 、クロスドメイン構成の
Vue-CLI + Laravel API サービス
SPAの関連となり。会員間メッセージ機能となります

・自動更新で、新着を受信できて
　通知API で、タスクバーに通知出せます。

・会員制となり、Google認証で
　ログインに対応しています。

・PWAも対応しています

***
# 構成
PWA
firebase
Notification API
Vue CLI
vue-router
@vue/cli-service : 4.4.0
・API サービス:
Laravel 5.8
nginx
mysql
・フロント設置ドメイン ,Vue-CLI:
netlify / ホスティングサービス
***
# 画面
・通知APIで、新着の自動通知

・一覧
![ss-

【JavaScript】初心者向けメモ（Java開発者にとっての難しさ）

**書籍で独習したが限界があり、手を動かして学べる実習サイトを利用することとした。学習サイト自体は初心者向けのものだったが、それなりにJavaScriptを身近に感じられたので、書籍に戻って整理することが可能となった。**
・対象は、ES2015。但し、既存バージョンのES5も最小限対象とする。
・参考書：「JavaScript本格入門（山田祥寛著）」。
　　　　　※下記記載内容は、この参考書から抜粋させていただいたものです。
・実習サイト：　Progate。
・学習阻害要因は、自身Java開発者であり、似て非なる部分が用語も含めて混乱するところ。

##JavaScriptは関数型言語
・関数を変数に代入できる。
・関数の引数や戻り値に関数を使用できる。
※関数はデータ型の一種である。

##Java開発者→JavaScript習得の難しさ
Javaは関数型言語ではありません。関数を変数に代入したりできません。「関数を変数に代入できる」事にすごく違和感があります。
ただ、Java8からラムダ式（関数型インターフェース）とStreamAPIが導入され、関数型言語の機能が一部導入されてい

地図上にマーカーを落とし、その場所の緯度経度を取得する方法

GoogleMap APIを使い、地図上にマーカーを落とし、その場所の緯度経度を取得する方法を学んだので備忘録のため、書きます。
※APIキーは事前に取得している前提

###緯度・経度の入れ物を作る
new・editのページを想定して作っています。

“`html:_form.html.erb
<%= form_with(model: place, local: true) do |form| %>
<% if place.errors.any? %>

<%= pluralize(place.errors.count, "error") %> prohibited this place from being saved:

<% place.errors.full_messages.each do |message| %>
• <%= message %>

<% end %>

Illustrator javascriptとC#でのPageItem

#illustratorのオブジェクト
illustratorのオブジェクトにはGroupItemやPathItem等色々な種類があるが
その細かい種類に分類せずにとりあえずオブジェクト全般というものがあり、それが

**PageItem**　と　**PageItems**

例えばレイヤー内にGroupやPath、CompoundPath等色々入ってるけど
参照したいプロパティは、表示状態やロック状態等の
どのオブジェクトでも共通の場合にはPageItemを使用するほうが楽
※どの種類のオブジェクトか判断しないで良い為

ということで、良くPageItemを使うのですが
例えば、PageItemsを回して、個々のPageItemのプロパティにアクセスする場合

##javascriptだと以下のようになる

“`javascript:pageItem.js
for(var i = 0; i < layer.pageItems.length; i++){ var pageItem = layer.pageItems[i]; $.writeln(pageItem.locked)

filterを使って、目的のデータのみを抽出する

# 目的
スプレッドシートを二次元配列で扱う際、必要なレコードと不要なレコードをフィルタリングするために、filterを使って選別しました。

“`
function filterPractice() {
const IndexSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(‘Index’);
let data_range = IndexSheet.getDataRange().getValues();
//console.log(data_range);
//配列の２番目要素が”の場合のみを抽出する
let status_values = data_range.filter( function(record){return record[2] === ”});
console.log(status_values);
}

“`

Next チュートリアルやったよ

Gatsbyに引き続きNext.jsのチュートリアルもやってみたので、
覚えたことをまとめておきます。

【公式】https://nextjs.org/learn/basics/create-nextjs-app

##Link

Next.jsのページ内リンクは下記のように呼び出す。

“`react
import Link from ‘next/link’

~
this page!
~
“`

スタイルを効かせたい時はaタグの方につけることに注意。

## Asset

assetファイルはpublicファイルに置くことで呼び出せる。
呼び出すときのルートはpublicからスタート。

“`react

“`

robots.txtや認証系なんかもここに置くと便利。

## メタデータ

メタデータを変更したい場合は下記のようにする。

“`reac

Denoでlintする! Deno@v1.1.0で実装されたdeno lintコマンドの紹介

## はじめに

Denoの[v1.1.0](https://github.com/denoland/deno/releases/tag/v1.1.0)がリリースされました。
本記事では、その新機能である`deno lint`コマンドについて紹介します。

## `deno lint`コマンドについて

– linterがDenoに組み込まれています。そのため、Denoがインストールされていればすぐに使用できます。
– Rustで記述されているためとても速いです。
– [deno_lint](https://github.com/denoland/deno_lint/tree/v0.1.10)の`README.md`にベンチマークの結果が記載されています。詳しくはそちらを参照ください。
– 現時点では、eslintほどの機能や拡張性はありません

## 使い方

`deno lint`コマンドはまだ[unstable](https://deno.land/manual@v1.1.0/runtime/stability)という扱いなので、使用する際は`–unstable`フラグが必

ツイキャスの画面をコラボキャス用に切り出すやつ 作った

アプリはここ https://tiger-brother.github.io/twitcasting_collaboration_thumbnail/

# できること

ツイキャスでライブ中のユーザのIDを指定すると、その人の画面を取得して、コラボキャスのユーザのサムネイルが表示される領域を完璧に切り出し（分割し）ます。

# 使い方

ID（Username）を指定して「取得」ボタンを押し、画像が取得されたらタイプを選択してください。右側（スマホとかでは下側）に切り出された画像が表示されますので、端末の保存機能を使って保存して使ってください。

# 使うと何が嬉しいの？

ラジオキャスにコラボしに行くときに、自分のサムネイルにこれで切り出した画像を使うと、背景と同化し、そこにいないかのように見せることができます。それが嬉しいかは知りません。著作権に

jQuery 基礎知識 メモ書き

#DOMとは？

HTMLの要素にアクセスして、その要素の情報を書き換えたり削除したり、操作するための仕組みのこと。

要素：Document,html,head,bodyなどなど

DOMができあがることで、要素（ノード）間の親子関係や兄弟関係がわかるようになる。

jQueryやjavascriptはDOMは出来上がる前に書くと、エラーになる。
javascriptはオブジェクトを操作する言語。DOMもオブジェクトになる。

#オブジェクトを操作したいとき

オブジェクトのメソッドを操作したい場合

“`
オブジェクト名.メソッド名（引数値）;
“`

オブジェクトのプロパティを操作したい場合

“`
オブジェクト名.プロパティ名 = 値;
“`

Node.js・npmのインストール方法

なんとなく使っていたnode.jsとnpmについての今日、基礎を教わる機会があったのでメモ代わりに書いておく。

##Node.jsのインストール
Node.jsとはサーバサイド側で動くJavaScriptのこと。

インストール方法は、まずはnodeのwebページに行く。
[nodeのwebページ](https://nodejs.org/ja/)

自分は最新版のインストールした。
インストールされているかの確認として、CLIで`node -v`をたたく。

“`
v11.14.0
“`
と出ればnodeがインストールされている。

##npmのインストール
npmとはNode Package Managerの略。
_npmのインストール_

“`
sudo npm install -g n

今日は何のごみの日かを教えてくれるシステム(Trash_day_notification)2/3

# 今日は何のごみの日かを教えてくれるシステム(Trash_day_notification)

## 前回の記事

[今日は何のごみの日かを教えてくれるシステム(Trash_day_notification)1/3](https://qiita.com/kurikurisan/items/cb0e069c13deac3e4894#line-notify設定)

## 困っていること

ごみの日がどうしても覚えられない、、
私の家には、庭があって、ごみを一時的にためておくことができるために、ごみをいつでも捨てれるのは素晴らしいのですが、
ごみの日を覚えられないため、基本的に朝の用事があるときに、周りを見て、今日何のごみの日かを確認している。
-> これが非常に面倒くさい、、

ということで、通知してくれるシステムを作ろう！

## 機能

* 毎朝8時30分にごみの日をLINEに通知する([前回の記事](https://qiita.com/kurikurisan/items/cb0e069c13deac3e4894#line-notify設定))
* なんのごみがストックされているかが

青空文庫スピーカー

たぶんこれは誰も使わないと思いますが、 [青空文庫](https://www.aozora.gr.jp/) の作品を音声合成で読み上げるブックマークレットを作りました。

“`
javascript: (() => { var VOICE_INDEX = 0, RATE = 5.0, VOLUME = 1.0, MIN_WAITING_TIME = 250; var ssu = new SpeechSynthesisUtterance(); ssu.lang = ‘ja-JP’; ssu.rate = RATE; ssu.volume = VOLUME; var main = () => { var voices = speechSynthesis.getVoices().filter((voice) => voice.lang === ‘ja-JP’); ssu.voice = voices[VOICE_INDEX]; console.info(voices); var mainText = document.querySelector(‘.main_text’).cloneNod

JavaScriptでjoin()を使おうとして起こったエラーについて

はじめまして, 「つゆ」と申します。
Qiitaではじめての投稿となります。作法のなっていないところ、投稿内容について知識が不十分なところ多々あると思いますがどうぞよろしくお願いいたします。

#はじめに
本記事では、javascript 初学者である私が学習中に出会ったエラーの中で、個人的に気になったエラーが起こったので、そのエラーについて調べたことを書かせていただきます。

#開発環境
この記事ではwin10 HomeにインストールしたVS codeを使用。
htmlファイルの実行には、Google Cromeを使用。

#エラー内容
エラーが起こった経緯ですが、文字列に関する命令について学習している際、

“`main.js
‘use strict’

const d = [2020, 06, 14];
console.log(d.join(‘/’));
“`
とエディタに記述して実行したところ、ブラウザのConsoleにおいて以下のエラーメッセージが出力されました。

“`error
Uncaught SyntaxError: Octal literals ar

今日は何のごみの日かを教えてくれるシステム(Trash_day_notification)1/3

# 今日は何のごみの日かを教えてくれるシステム(Trash_day_notification)

## 困っていること

ごみの日がどうしても覚えられない、、
私の家には、庭があって、ごみを一時的にためておくことができるために、ごみをいつでも捨てれるのは素晴らしいのですが、
ごみの日を覚えられないため、基本的に朝の用事があるときに、周りを見て、今日何のごみの日かを確認している。
-> これが非常に面倒くさい、、

ということで、通知してくれるシステムを作ろう！

## 機能
* 毎朝8時30分にごみの日をLINEに通知する

## 使用するもの
* GAS (Google Apps Script)
* LINE Notify

## 設計

シンプルに
GAS(トリガー機能) -> LINE Notify -> LINE

## 1. 設定とコーディング1

まずは、午前8時にLINE Notifyを使って、LINEに通知する仕組みを作成する。

### LINE Notify設定

[LINE Notifyのwebhook登録ページ](https://notify-bot.l

作って理解JavaScript：JOKE開発記その5 – 条件分岐とループ

# 今回のスコープ

今までは一つの開発記で一つのステップについて説明していましたが今回は関連の深い以下のステップをまとめて説明します。[^1]

[^1]: そもそも開発記と開発ステップは一対一対応の予定でもなかったので。

ステップ5

比較演算と論理演算

ステップ6

if文

ステップ7

while文とfor文

# ステップ5：比較演算と論理演算

条件分岐のためには比較演算を実装しないといけない。
また条件分岐のためには必須ではないけど論理演算もあるとよい。
というわけでこれらを実装するわけですが問題として、`&&`と`||`（短絡評価）のためには条件分岐（を行う命令）が必要という鶏が先か卵が先かな状況・・・

まあ悩んでいても仕方がないので論理演算を先に実装しました。ステップ5時点でのコードは以下にあります。
https://github.com/junjis0203/joke/tree/step0005

## 比較演算

比較演算自体は特に難しく

React Hooks useStateでformのonChangeハンドリング

#React Hooksでフォームで全てのinput要素にonChangeイベントを割り当てる際、input要素が多いと大変面倒くさいと感じていたので。

– Reactには一月前から触れたばかりで日々学習しています。
– 公式チュートリアル、ドキュメントを一通りやって、オリジナルアプリの開発を始めた段階です。
– 公式がこれからはHooksで行くと暗に宣言していると感じたので、クラスコンポーネントは流しただけです。最初からHooksオンリーで始めています。
– JavaScriptはなんとなくやっている感じで体系的な学習はまだまだです。

##Reactでフォームを扱う場合
自分はform要素を一つ一つstateにして、onChangeイベントでは条件分岐でtargetのname属性に応じて該当するstateを割り当てていました。

“`react:form.jsx
const Form = (props) => {
//input要素を一つ一つstateとしていた。input要素が増えると面倒
const [firstName, setFirstName] =

KintoneとOutlookカレンダーを連携して工数を集計する

# やりたいこと
スケジュールをOutlookカレンダーで行っているので、そのデータを元に工数を集計できるようにしたい。

## 仕様
一覧画面に集計開始日と終了日を日付形式で設定し、その期間のOutlookカレンダーのデータを取得して一覧にする。
既に登録済みのデータは更新する。

## ソースはこちら
– [GitHub](https://github.com/soramoyou04/kintone-connect-outlook-schedule)

## 公式にサンプルがあるのでこれをベースにする
[Outlook連携 – kintoneからOutlookスケジュールを登録しよう！！](https://developer.cybozu.io/hc/ja/articles/360022249111-Outlook%E9%80%A3%E6%90%BA-kintone%E3%81%8B%E3%82%89Outlook%E3%82%B9%E3%82%B1%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%82%92%E7%99%BB%E9%8C%B2%E3%

KintoneとOutlookカレンダーを連携して工数を集計する #2

## この記事の続き
– [KintoneとOutlookカレンダーを連携して工数を集計する](https://qiita.com/iNaoki04/items/844c66db6538082606f0)

Outlookカレンダーと連携してキントーンにスケジュールを一覧化しています。
公式にサンプルがあるので改造して実装しています。

## サンプルのままではまだ微妙なので改修する
### graphは1度に10件しか取得できない問題
graphは一度のリクエストで10件分しか返さず、超過した分を取得するにはページングして再度リクエストする必要がある。
ページング用のリンクは`@odata.nextLink`に格納されているので、JSONに格納されているかを判断する。

“`kintone-connect-outlook-schedule.js
// outlook予定表取得
getEvent: function(eventGetUrl) {
~
// Outlookの予定表取得
kintone.proxy(eventGetUrl, ‘GET’, header, {}).t

Qiitaで見つけた便利なJavaScript保管庫

これまで私はHTMLのページを作る上で、何度もQiitaの記事にお世話になってきました。それはこの記事を見ているあなたも（おそらく）同じでしょう。

この記事は、そんなQiita巡りの最中に私が出会った、「なくてはならない機能」「あったら便利な機能」を自分なりに書き直したものの保管庫です。まだ数は少ないですが、これから時間をかけて、もっともっと拡充していこうと思います。

jQueryが肌に合わない残念人間なので、元記事ではjQueryで書かれていたコードであっても、全てピュアJavaScriptに書き直されています。ご了承ください。

#ユーザーエージェント判別
**参考:** [使用してるブラウザを判定したい](https://qiita.com/sakuraya/items/33f93e19438d0694a91d)（@sakuraya さん）

“`javascript
var _ua = (function () {
var u = window.navigator.userAgent;
return {
device: (function

はじめてのThree.js 10章 日記

[はじめてのthree.js](https://www.amazon.co.jp/dp/4873117704)

#新たに知った知識
– バンプマップテクスチャで奥まで詳細に見える
– バンプマップテクスチャで奥まで詳細に見える
– canvas-textureという手法でリアルタイムに手書きの絵が箱に映し出される

#気づいたこと
– uvマッピング楽しい

#wow moment
– canvas-texture
![Screen Shot 2020-06-13 at 20.06.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/b2a26cdf-c31f-e67e-8a28-e22