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

JavaScript Consoleをブラウザで立ち上げるショートカット※mac

JavaScript Consoleをブラウザで立ち上げるショートカット
※mac OSでChromeの場合
command + option + J

[WordPress] 投稿をAjaxで読み込む時にプラグインのShortCodeが発動しない時のTips

# はじめに
WordPressテーマ開発をしている中で、

* WordPressの投稿をAjaxで取得
* 何かしらプラグインのショートコードを`do_shortcode()`する

っていうことは、それぞれよくやると思う。でもこの2つがかけ合わさった時に色々と手こずったので知見をメモしておきます。せっかく早起きして優雅に始まった朝がめちゃニッチなデバッグに消えたので、この記事で他の誰かの優雅な朝を守りたい。

ちなみに自分が手こずったのは[AddToAny Share Buttons](https://ja.wordpress.org/plugins/add-to-any/)というプラグインで、なぜかAjax経由だとアイコンが表示されない。最終的にはプライグイン独自の仕様の問題だったのでとにかく解決策を知りたい方は[最終セクション](#addtoanyをajaxで読み込む時は)を見ると良いです。

# WordPressでAjaxを使う時のお作法
そもそもWordPressでAjaxを使う時にはお作法が決まっていたので基本としてメモ。

### Ajaxリクエストを投げる場所
W

テスト駆動でtextareaを追加

vue-cliで作成したプロジェクトをベースにした空白のwebページに、Jestを利用したテスト駆動開発でtextareaを追加をする。

テスト項目は以下とする。

– textarea(id=sampleArea)の存在をテスト
– textareaの初期値(=”)をテスト
– textareaに入力された文字列の取得をテスト

完成したソースコードは[GitHubのリポジトリ](https://github.com/kubotama/sample_textarea)にある。

# textareaを追加する前のディレクトリ構成とファイル

textareaを追加する前のディレクトリ構成とファイル

“`sh
├ public
│ └ index.html
└ src
├ App.vue
├ components
│ └ SampleTextArea.vue
└ main.js
“`

“`html:index.html

Progate終了レベル+αの知識でReactアプリを実装

ProgateでReactの勉強をしました。
Progate上で実装した機能をローカル環境で再現して理解を深めようと思います。

##作成する機能
– 複数のコンポーネントを組み合わせて1枚のページを作成
– ボタンをクリックしたらテキストの中身が切り替わる
– モーダル
– フォーム
– 送信をクリックするとフォーム部分だけ表示が変わる
– 何も入力されていないとエラーを出す

##creat-react-appのインストール
“`zsh
$ npm i -g create-react-app
“`

##プロジェクトの初期化
“`zsh
$ create-react-app progate-local
$ cd progate-local
$ rm -rf src
$ mkdir src src/components
$ touch src/index.js src/components/App.js
“`
“`src/index.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;

[JavaScript]初心者が初見で必ずthinking顔になるもの特集

初心者が見た瞬間:thinking:になるもの特集です。
小テクだったり、省略記法だったり、、
実際私も出会って:thinking:になりました！

## !!
### is 何
booleanへの型変換。
### 例
“`js
const obj = { hoge: ‘hoge’ }
function hasHoge() {
return !!obj.hoge // => true
}
“`
論理否定（！）を二つ繋げて、`boolean` への型変換をしています。
!の結果を!で評価しているんですね〜。

## JSON.parse(JSON.stringify(obj))
### is 何
ディープコピー。
### 例
“`js
const deepCopy = JSON.parse(JSON.stringify(obj))
“`
JavaScriptでディープコピーをする際は、現状ライブラリを使うか自分で実装するしかありません。
そんな時に楽にコピーする時の方法として使われます。
ただし、どんなオブジェクトも完全にコピーできるわけではないので注意が必要です。

##

Qiitaのユーザページから消えたタグの円グラフを取り戻す

# 初めに
Qiitaのユーザーページが改変され、以前はユーザページに表示されていた、タグの円グラフが表示されなくなりました．

参考:
[Qiitaユーザページリニューアルで無くなった機能とその代替手段](https://qiita.com/suin/items/ec9a04c17d7bdd199960)

そこで、僕が以前趣味で作ったQiitaのクライアントアプリ上で、タグの円グラフの機能を再現してみようと思います．
ちなみに、前回作ったときに書いた記事はこちら↓
[モバイル初心者がQiitaのスマホアプリを個人開発した話【React Native】](https://qiita.com/kazu914/items/ac9881565ed5cdfe86b1)
アプリ自体はこんな感じ↓

||
|:-:|

完成図はこんな感じ↓

|!

偽陽性・偽陰性の分布を計算するスクリプトを書いたよ

既に類似のものが存在するかもしれませんが、「**検査精度・実際の陽性率・検査対象人口を入力とし、偽陽性・偽陰性の人数とそれらが検査結果に占める割合を計算する**」スクリプトを書き、jsFiddle で公開しました。

# 偽陽性・偽陰性分布計算
https://jsfiddle.net/darutk/Lbhwp1d4/show/

スクリプトの主要な計算部分にコメントをつけると次のようになります。

“`js
// 実際の陽性率と検査対象人口から、実際に陽性の人の数を計算する。
let positive_population = Math.round(input.positive_ratio * input.population);

// 実際に陰性の人は、検査対象人口から実際に陽性の人の数を引いたもの。
let negative

Webを使った新人研修　～Linuxコマンド編 – viコマンド～

######[Webを使った新人研修　～Linuxコマンド編～](http://qiita.com/fujisystem/items/63b787ac71e9bdcaf3f6)

#viコマンド 「viエディタの起動」
vi（ヴィーアイ）は、UNIX環境で人気があるテキストエディタ。大体のLinuxでビルトインされていることが多いです。
viは、「VIsual editor」ないし「Visual Interface」に由来するようです。
Shellを作成したり、テキストファイルを記載したりと使いこなすと非常に便利です。
セキュアな環境ではこのエディタのみで開発する場合もあるかもしれません。
viの派生でvimというものもあります。

まずは、「実践」してみましょう。

##実践する
LinuxマシンのエミュレートされているWebページを開きましょう。
・jor1k
http://s-macke.github.io/jor1k

早速「viエディタの起動」してみましょう。
左側の黒いウィンドウで以下のコマンドを実行し、最後にエンターキーを押して下さい。

“`
vi test.txt

特定のページにのみJSファイルを適用する方法

Railsは、初期状態でapp/assets/javascriptsディレクトリ以下の全てのJavaScriptを自動で読み込みます。

ただ、別ページに遷移した際にJSファイルの読み込みができず、エラーが起きてしまうのことがあるため、特定ページのみでJSファイルが発火する様にしていきます。

読み込ませるJavaScriptを個別に指定するには次のようにします。

こちらのページを参考にさせていただきました。

Rails 必要なJavaScriptのみを読み込む

作成の都合上、HTMLをHAMLで記載しております。

## STEP1
app/assets/javascripts/application.js内の一番下にあるこちらの記述を削除します。

“`
//= require_tree .
“`

## STEP2
config/initializers/assets.rb

Spring Boot ウェブアプリにフロントエンド技術を含める webpack ビルド

## はじめに

Spring Boot で構築するウェブアプリケーションに、ES Modules、babel や Sass/CSS コンバートなどのフロントエンド技術を含めてビルドする TIPS を書いてみました。普段はバックエンドばかりで [webpack](https://webpack.js.org/) よく分からないよ、という方の参考にもなるかもしれません（自分ですが…!）

この記事中の全てのソースコードは以下のリポジトリーから参照できます。なるべくバックエンドとフロントエンド担当の方がリポジトリーを共有して作業できることを心がけました。

> https://github.com/h1romas4/springboot-template-web

また、Gitpod からビルドして動作する様子も確認できます。

[](https://gitpod.io#https://github.com/h1romas4/springboot-template-w

どの8進数リテラルが使えるかはプログラミング言語によって異なる

（この記事は [地平線に行く](https://yujisoftware.hatenablog.com/entry/octet_literal) とのマルチポストです）

8進数を表記する文法は、主に以下の3つがあります。
（二番目と三番目は分かりにくいですが `ゼロ オー`[^octet] です）

* プリフィックスとして `0` を付与する (例: `0123`)
* プリフィックスとして `0o` を付与する (例: `0o123`)
* プリフィックスとして `0O` を付与する (例: `0O123`)

これらのうち、各プログラミング言語がどの文法を採用しているかを表にまとめました。

|言語|`0`|`0o`|`0O`|
|:–|:–:|:–:|:–:|
|C|○|×|×|
|PHP|○|×|×|
|Perl|○|×|×|
|Java|○|×|×|
|Scala (~2.9)|○|×|×|
|Scala (2.10~)|×|×|×|
|Kotlin|×|×|×|
|C#|×|×|×|
|Rust|×|○|×|
|Swift|×|○|×|
|Go|○|○|○|
|

東大生が5秒で始められるゲームプログラミング学習サービスを開発・リリースした話

この度、5秒で始められるゲームプログラミング学習サービス「プロアカ」をリリースしました。1人での開発でしたが月額課金制度まで実装しており、少し大きなプロダクトになったので知見を共有したいと思いました。

また、新型コロナの影響で自宅待機の時間が長くなっている方が多いため、自宅学習できる当サービスについて知っていただければと思いました。休校中の学生の方もぜひプログラミングを学んでいただければと思います。[サービスサイトはこちらです。](http://proacainc.com/)

#目次
– [作ったサービス](#作ったサービス)
– [サービス内容で工夫したこと](#サービス内容で工夫したこと)
– [使用した技術](#使用した技術)

JSでArray.forEach() をbreakしたくなったら代わりにArray.some()を使おう

掲題通り。

“`.js
[1,2,3].forEach((v, i) => {
if(i === 2){
return;
}
console.log(v)
})
// 1 と 3
“`

“`.js
[1,2,3].some((v, i) => {
if(i === 2){
return true;
}
console.log(v)
}
// 1
“`

> arr.some(callback[, thisArg])

callbackの受け取る引数は、 `element`, `index`[optional], `array`[optional] の3つです。
someそのものの第二引数thisArgについては基本わすれてもいいかと。

– [JavaScriptのArray\.forEachをbreak、continue、returnさせたい](https://www.deep-rain.com/programming/javascript/778#some)
– [Array\.prototype\.some\(\) \- Jav

Javascript then/catch/finally chainの動作の実験

then/catch/finally chainの動作の理解が曖昧なので実験

“`javascript
var p = Promise.resolve(0);

p
.then((v)=>{
console.log(“then1:”+v);
return Promise.reject(1);
})
.then((v)=>{
console.log(“then2:”+v);
return Promise.resolve(2);
})
.catch(v=>{
console.log(“catch1:”+v);
return Promise.reject(-1);
})
.then(v=>{
console.log(“then3:”+v);
return Promise.resolve(3);
})
.catch(v=>{
console.log(“catch2:”+v);
//return Promise.resolve(-2);
})
.then(v=>{
console.log(“then4:”+v);
return Promise.

JavaScriptのthisは難しくない

JavaScriptのthisを完全に理解したのでまとめます。

## JavaScriptのthisは難しくない

最初はキモすぎて理解不能でしたが要するにこうゆうことだと思います。

– 呼び出し元によってthisの値は変わる。
– thisの値は固定することができる。

## 突然undifinedになるthis

JavaScriptを少し触り始めるとthisが想像とは違う値になっている事に気づきます。

“` js
class Dog {
constructor(name) {
this.name = name;
}

bark() {
console.log(`私は ${this.name} です。`);
}
}

const dog = new Dog(‘Bob’);
dog.bark() // 私は Bob です
const bark = dog.bark
bark() // Uncaught TypeError: Cannot read property ‘name’ of undefined
“`

これは他言語とは異なる

GASとLINE Botで下ネタメッセージを取り締まるボットを作成

こんにちは、大学生としてプログラミングで遊んでいるKantaです！

Googleの提供する、Google Apps Script（以下GASと省略）を使って最近遊び始めました。
このGASは面倒なサーバーの設定を行わずに、他社のAPIと組み合わせて高度なことができます。
今回はGASとLINEを連携させて、LINE Botを作成した事例を共有します。
(ここでは、技術的な説明はあまりせず、アイデアの共有にフォーカスします。後述の参考リンクが実装には役立ちます。)

## 作ろうとした背景

さて、LINEは現代人にとって必須サービスですよね。
このため、LINE Botを作ることはマーケティングの観点からも重要です。
幸いなことに、LINE Bot作成のために、LINE Messaging APIが用意されています。
GASと組み合わせることで、便利かつ創造的な遊びができそうです。

今回は、その一つの面白い使い道として、ラインのトークやグループで下ネタメッセージを検知し、それを戒めるような趣旨のLINE Botを作成してみました。

簡単にLINE Botが作れることと、応用

【NodeJS】AWS Lambda＋APIGateway＋DynamoDBでTODOアプリを作成

## はじめに
サーバーレスを趣味で始めてみたので、勉強がてらAWS Lambda＋APIGateway＋DynamoDBでTODOアプリを作成し始めました。
個人のメモとして、サーバー側とクライアント側での処理を記事にまとめます。（まだ作成途中です）

## 概要
Lambdaで使用する言語はNode
DynamoDBはidとtodoという項目のみを持ちます。
テーブル名は「todoTable」
今回は、GETとPOSTのみを実装します。

## Lambdaで関数作成
本来であれば１つの関数にまとめたかったのですが、GETメソッドであることをLambdaに渡す方法がわからず、ひとまず関数を分けました。

まずはGETメソッドから。
単純に全てのカラムを取得します。（本来はあまりscanは使わない方がいいらしいが）

“`js
const AWS = require(‘aws-sdk’)
const dynamo = new AWS.DynamoDB.DocumentClient()

exports.handler = (event, context, callback) =>

【解決法】Chart.jsで作ったグラフが潰れてしまう。

#詰まったこと
Chart.jsで円グラフを作成すると、円グラフが潰れてしまう。
下の画像のようになってしまったわけです。


#解決法
##optionsの設定を見直す
“`javascript
options: {
maintainAspectRatio: false,
}
“`
maintainAspectRatioを追加することで、「サイズ変更の際に、元のキャンバスのアスペクト比(width / height)を維持します」、とのことです。

##canvasタグ内の設定を見直す
chart.jsでは、これ↓も

“`html

“`

これ↓も、無効な値となります。

`

ワンランク上のJavaScriptエンジニアになった気がするTip

# はじめに

JavaScript初心者の僕が脱初心者を目指して身に付けた知見を随時更新する記事第一弾です。

JavaScript初心者の同志は一緒に勉強しましょう。

# オブジェクトを展開して変数に定義する方法

JavaScript初学者の皆さん、下記のような記述を目にしたことはありますか？

“`javascript
const { name, age } = person
“`

僕も、この{}なんやねん！

ググろうにも、なんてググったらいいかわからない。。

って思って避けてた矢先、先輩エンジニアの方にコードレビューで指摘されたので、

いい機会なので学び直してみました。

これってつまりこういうことなんです。

“`javascript
const person = {
name: ‘hogehoge’,
age: 22
}
“`

上記のようなオブジェクトがあったとして、

nameの値を持った変数とageの値を持った変数をそれぞれ定義したいとします。

そんな時、我々初学者は、下記のようにコードを書くと思います。

“`javascript
c

Nuxt.jsのSPAモードのファイルをレンタルサーバーにデプロイした時にリンク切れが起きる場合の対処法

# はじめに

意気揚々と「[初心に戻ってNuxt.js＋Vuetify ルーティングを学び直す](https://qiita.com/idani/items/ac793fd77b0ee3b3d080)」を作成して、レンサバにデモサイトとして設置しようとして問題が起きました。

なんとリンク切れが起きるのです！！

問題は2つありました。

# リンク切れの問題　その１

ブラウザに「 https://hirotae.com/nuxt/routing/user 」を入力すると、自動的に末尾に「/(スラッシュ)」が追加されて「 https://hirotae.com/nuxt/routing/user/ 」ます。

この結果、Nuxt.jsで作成したボタンリンクは、相対リンクで作成していますので、図の③のように、[https://hirotae.com/nuxt/routing/user/**user/159**](https://hirotae.com/nuxt/routing/user/user/159) となってしまいます。
![2020-04-12_17h27_49.png](h