JavaScript関連のことを調べてみた2019年11月12日

【TypeScript/JavaScript】Optional Chainingのトランスパイル後がわからなかったので調べてみた

[こちら](https://qiita.com/102Design/items/5f23f47f478ff845e3af)の記事で、TypeScript
v3.7からの新機能「Optional Chaining」が解説されていました。
その中に「Optional Chaining」を使用したコードのトランスパイル結果が記載されています。

> 例えばこんなコードがあるとして
>
> “` typescript
> interface Foo {
> name: string
> bar: {
> name: string
> baz?: {
> name: string
> }
> }
> }
>
> let foo: Foo
>
> foo = { name: ‘a’, bar: { name: ‘bar’ } }
> console.log(foo.bar.baz?.name)
> “`
>
> トランスパイルするとどうなるかというと下記のようになります。
>
> “` t

【簡単】ブックマークレットを使って、口コミを5秒で調べる！！【お手軽】

職場でブックマークレットの話が出てきたものの

え？え？何それ？？便利なの？？
説明聞いてもイメージ湧かない….

となり、茫然としたので、触ってみることに。

結論

$\huge{めちゃ便利でした?}$

## ブックマークレットって？

ブックマークレットとは、ブラウザのブックマークにJSのコードを登録しておき、
クリックすることで実行できる技術です。

結構前からあったみたいですね。

具体的にどんなことできんの？って方は、
下の実例集みると、想像が膨らみます

### 実例集

– URLをHTML形式でコピー
– URLをMarkdown形式でコピー
– 日本語を含むURLをエンコードせずにコピー
– YouTubeを保存する
– 次/前のページへ
– ページの読み込み速度を計測する
– ページのHTMLチェック
– Webページで使われているフォントを調べる
– ページのレスポンシブチェック

などなど、便利なブックマークレットが紹介されていますね。

https://psephopaiktes.github.io/pages/bookmarkle

jquery.ui.touch-punch.jsをSurfaceのタッチパネルでも使えるようにする

# 概要
jQuery UIをタッチイベントに対応させるライブラリに
jquery.ui.touch-punch.jsがあるが、
surfaceのタッチイベントでは動かないので
jquery.ui.touch-punch.jsを修正する。

# 施策
“`javascript
$.support.touch = ‘ontouchend’ in document;
“`

上記スクリプトの下に追加

“`javascript
$.support.touch = ‘ontouchend’ in document;

//追加
if(‘onpointerenter’ in window){
$.support.touch = true;
}
“`

# 解説
「Ignore browsers without touch support」の行で
タッチデバイス以外は処理を中断するスクリプトが記述されているため、
ポインタデバイスであるsurfaceでは動かなくなる。

“`javascript
// Detect touch support
$.

[ kintone devCamp 復習コンテンツ ] Step3 kintone REST API 編

こちらは、**「[ステップで学ぶ kintone カスタマイズ勉強会](https://kintone-devcamp-stepup.qloba.com/)」 kintone devCamp Step3 kintone REST API** の復習コンテンツです。

# ? はじめに
Step3 では、アプリ間データ操作や 他サービス連携で使える kintone REST API の概念と書き方を勉強しました。
今回も知識を定着させるために、復習問題をご用意しました

正規表現がわからない〜デリミタってなんじゃい〜

“`
window.location.href.match(/\/groups\/\d+\/messages/)
“`

はて？
正規表現を使っているのはわかるけど、ちょっとよくわからない。
調べているうちにたどり着いた　デリミタ
・・・はて？
というわけで、正規表現について少し調べてみたことをまとめてみました。
初心者の初投稿なのでご意見お待ちしております。

## デリミタってなんじゃい

デリミタ(Delimiter)とは
：データを項目ごとに区切る時の「区切り文字」のこと
（参考：https://wa3.i-3-i.info/word11621.html）

うーん、つまりどういうことだろう。
正規表現の両端を同じ記号で囲むことで、範囲を明示している。
（参考：http://www-creators.com/archives/5272）
つまり、例の場合は `/`で囲むことでその中のものが対象の範囲ですよ！と、そういうことだろうか。
アドレスを表現したいのにバックスラッシュにスラッシュに並んでて初心者にはどうも目が痛いというのが率直な感情です。
慣れるものなんでしょうか。

DiscordとGoogleSpreadSheetのファイル送受信

# はじめに
DiscordとGoogleSpreadSheet(以下GSS)を連携して書き込んだり読み込んだりしたい！という考えから作成したもの

結果できたものは
1. Discordで送信したメッセージや、ファイルのURLをGSSに書き込み
2. GoogleAppsScript(以下GAS)で送信したメッセージやファイルをDiscordに書き込み
3. 送信したファイルのURLをGSSに書き込み

使用言語は以下
– python3.6.4
– HTML5
– JavaScript
– Vue.js
– GAS

ちなみにVue.jsを使ってるのは筆者の趣味。使わなくても問題ないはず(試してないけど)

# Discordから送信

## 全体ソースコード
“`python:DiscordBot.py
import discord
import gspread
import json

client = discord.Client()

#ServiceAccountCredentials：Googleの各サービスへアクセスできるservice変数を生成します。
from

[nodemon] app crashed – waiting for file changes before starting… というエラーに遭遇した時の対処法

# [nodemon] app crashed – waiting for file changes before starting… というエラーに遭遇した時の対処法

## Githubのissuesをのぞいてみる
見たことないくらいのコメント数が付いていました。
https://github.com/linnovate/mean/issues/1066

いろいろな意見があるが問題としては

– nodemonがない（インストールしていない）
– インストールしたnode_modulesに問題がある

## 上記を踏まえ行った対応

1. `npm install -g nodemon` でnodemonをインストール
2. node_modulesを一旦削除して`npm i` でインストールしなおす

## こちらを実行し再度ビルドしたところ正常に動きました。

nuxt.jsで一文字ずつ文字列を表示する

javascript勉強中です。

ゲームとかでよくある、メッセージを一文字ずつ表示するというのを、nuxtでやってやりました。
勉強のためにクロージャを使った場合と、そうでない場合とやってやりました。

撮影したものはgifなので少し表示が遅いです。
イメージです。


予め配列で表示する予定のメッセージを用意しておきます。
[“aaa”,”bbb”,”ccc”]
ボタンを押すとaaaを一文字ずつ表示します。
もう一度ボタンを押すとbbbを一文字ずつ表示します。
もう一度ボタンを押すとcccを一文字ずつ表示します。

##クロージャを使った場合

“`vue:index.vue