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

ES6構文をRailsでプリコンパイル

AWSにRailsアプリをデプロイしようとした時、、、

諸々設定も終盤、EC2へSSHでログインし、Railsアプリをプリコンパイルする

はい、怒られました。

原因は

“`
Uglifier::Error: Unexpected token: punc ()). To use ES6 syntax, harmony mode must be enabled with Uglifier.new(:harmony => true).
“`

この部分に書いてありますね。
google翻訳先生に聞くと、

>「Uglifier :: Error：予期しないトークン：punc（））。 ES6構文を使用するには、ハーモニーモードを>Uglifi

[W.I.P.] 【実況】Vue の 50 倍の速度が出るらしい「Svelte」のライブラリ「Sapper」を使って人生初のポートフォリオを作ってみる

前提として，
1. GitHub にリポジトリを作っただけの段階で記事を書き始めています。
2. Svelte を触ったことは一度もありません。ドキュメントも今から読みます。
3. ２日以内を目標に GitHub Pages に公開するまで随時更新します。

### 目次
[0. はじめに – Svelte って何](#0-はじめに—svelte-って何)
[1. 動機](#1-動機)
[2. 実装](#2-実装)

## 0. はじめに – Svelte って何？
あなたは Svelte をご存知ですか？　私は２日前にはじめて知りました :neutral_face:

[公式サイト](https://svelte.dev/)には次のように説明があります。

> Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte s

AppiumでFlutterアプリのテストを自動化する 実践編(JavaScript)

# はじめに

[AppiumでFlutterアプリのテストを自動化する 環境構築編 – Qiita](https://qiita.com/hiesiea/items/b4e31b6f1f585a93bae1)
の続きになります。
実際にテストコードを書いて、それを実行し、レポートを出力するところまでやります。
今回は「JavaScript」を使います。

# 前提条件

[AppiumでFlutterアプリのテストを自動化する 環境構築編 – Qiita](https://qiita.com/hiesiea/items/b4e31b6f1f585a93bae1)
で、Appiumの環境構築が完了していること

# なぜAppiumで自動化するのか

Flutterには、「Integration Test」という仕組みが存在します。

– [An introduction to integration testing – Flutter](https://flutter.dev/docs/cookbook/testing/integration/introduction)

これは結合

[Chrome拡張機能]ローカルのフォルダ／ファイルを開く機能を作ってみた

# はじめに
自分が勤めている会社に、社内Wikiみたいなものがあるのですが、各ページに書かれている参考資料へのパスが、社内のファイルサーバやローカルのパスになっていることが、多々あります。
パスを毎回コピーしてエクスプローラに貼り付けるのが、だんだん面倒になってきました。
そこで、Chrome拡張機能で自動化することにしました。

– 文字列を選択し、右クリックした時のコンテキストメニューから実行する
– 選択文字列がフォルダ／ファイルのパスなら開く
– 選択文字列の中に`file:`とか`<`とか`>`とかあったら、事前に取り除く

先に言っておきますが、苦労の割にあまり自動化されません。。。

しかも、Chromeウェブストアにないため、Chromeを起動する度に毎回「無効化する」かどうか聞かれます。
作った機能からして、Chromeウェブストアに置かせてもらえる気がしません。

そのため、毎回聞かれても無効化せずに利用いただくか、投稿が部分的にでも何かの参考になれば幸いです。

# やったこと

以下を~~丸パク~~、いや、参考にさせていただき、やったことを挙げていきます。
–

【JavaScript】Qiita 週間いいね数ランキング【自動更新】

# 他のタグ

– [Python](https://qiita.com/kou_pg_0131/items/9d7f2ffeafb36cf59a77)
– [JavaScript](https://qiita.com/kou_pg_0131/items/eaa7ac5b62a0a723edbb)
– [AWS](https://qiita.com/kou_pg_0131/items/e24b6279326a462d456c)
– [Ruby](https://qiita.com/kou_pg_0131/items/72c3d2e896bdc3e1a6b3)
– [Rails](https://qiita.com/kou_pg_0131/items/93b9e7f7d143e9ce650e)
– [Docker](https://qiita.com/kou_pg_0131/items/ae11fca7d2eba445b037)
– [Vue.js](https://qiita.com/kou_pg_0131/items/2774e02c6eea5c830d99)
– [PHP](htt

npm で全ての package をアップデートする

“`sh
$ npx npm-check-updates -u
“`

これで `package.json` のみ更新される。
あとは、いつも通り `npm i` 。

以下、オプション例。

“`sh
# “devDependencies” のみアップデートしたい
npx npm-check-updates -u –dep dev

# 特定の package はアップデートしたくない
npx npm-check-updates -u –reject typescript,@types/node
“`

## Ref.

https://www.npmjs.com/package/npm-check-updates

Slack デスクトップアプリの最新版にカスタム CSS を当てる方法

BetterDiscord のようにカスタム CSS の適用を Slack でもしたかったのですが，最新版の v4.3.2 で行う方法を探すのが難しかったので簡単にまとめました．

# はじめに
この方法は Slack 公式の機能ではありません．
何らかのデータ破損等が発生しても一切責任は負いませんので，自己責任でお願いします．

# 方法
Slack がインストールされたディレクトリを開きます．

|OS|ディレクトリ|
|—|—|
|Windows|`%LOCALAPPDATA%\slack`|
|macOS|`/Applications/Slack.app/Contents`|
|Linux|`/usr/lib/slack`|

`app-x.x.x` のうち一番バージョンが高いものを開きます．
`resources` 内の `app.asar` を以下のコマンドで展開します．

“`console
$ npx asar extract app.asar app.asar.tmp
“`

展開された `app.asar` 内の `main-preload-entry

【gon】jsでRails変数を取得する

`Railsでjsライブラリを使うときに楽にRailsで定義した変数をJavaScriptに渡したい！楽したい！`

# プログラマ三大美徳
**1.怠慢(Laziness)**
**2.短気(Impatience)**
**3.傲慢(Hubris)**

まさにこれですね。

# 何を使うか?

RailsといえばGemですね。[gon]というgemです。
https://github.com/gazay/gon

#インストール

Gemfileに記載

“`ruby:Gemfile
gem ‘gon’
“`

ターミナルからインストール

“`ruby:ターミナル
bundle install
“`

読み込み設定

“`ruby:application.html.erb
<%= include_gon %>
<%= javascript_include_tag "application" %>
“`

# 使ってみる

“`ruby:****.controller.rb
gon.user_name = ‘my name is imaizumi’
“`

`

js if条件判定 早見表

“`javascript
// 値
var v;
var v = ”;
var v = 0;
var v = ‘0’;
var v = null;
var v = ‘null’;
var v = undefined;
var v = ‘undefined’;
var v = [];

// console
console.log(‘v:’ + v);
“`

#条件が空文字

| 値 | console | if(v) | if(v == ”) | if(v === ”) | if(!v) | if(v != ”) | if(v !== ”) |
|:—————–|:—|:—:|:—:|:—:|:—:|:—:|:—:|
| v | value:undefined | false | false | false | true| true | true |
| v = ” | value: | false | true | true | true | false | false |
| v = 0 | value:0 |

SPA入門色々(Vue.js/Blazor/React)

# 概要
SPA(Single Page Application)という技術があることを知り、フロントエンドフレームワークを触ってみるいい機会になるのでないかと思い、Vue.js/Blazor/Reactをまとめて触ってみた。
SPAのルータのページ切り替えを見て従来のiframeや生のJavaScriptとできることがどのように違うのかということも疑問に思ったので同じようなこちらでも同じような感じで実装を試みた。

# 作ったSPAの仕様
* 上部にメニューバー
* Home/Counter/Todoの独立したWebアプリをコンポーネントとして所持。
+ Home
– 別のコンポーネントを読み込んで文字を表示するだけなアプリ。
+ Counter
– Blazorの実行サンプルに付いてきたカウンターアプリ。
+ Todo
– [Vue.jsミニハンズオン（TODOリスト作成）](https://qiita.com/moonglows76/items/358ef3cd1566c38ece3a)を8割位実装したTodoアプリ。

# 成果物
[Vue.js](https

サーバサイドレンダリングについて調べてみた

# サーバサイドレンダリングの勉強メモ
サーバサイドレンダリングがいまいち分からなかったので自分なりに仮説を立ててみたり、疑問に思ったところを書き残してます
ググると色々出てきますが、一通り読んでもなんとなくしか理解できず、、、
是非間違いがあればご指摘頂きたいです
主に[こちら](https://medium.com/@sundaycrafts/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E4%BD%93%E9%A8%93%E3%82%92%E5%90%91%E4%B8%8A%E3%81%95%E3%81%9B%E3%82%8B%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0javascript-%E6%AD%B4%E5%8F%B2%E3%81%A8%E5%88%A9%E7%82%B9-df68cd7cd991
)を参考にさせて頂きました

# サーバサイドレンダリングの

JavaScriptのデータ型や組み込みオブジェクトについて

#はじめに
自分なりの解釈で書いています。
多分間違っているかもしれないので「あーこんなかんじなのかなー」程度に聞いてほしいです。
そしてこの記事が僕にとっての初投稿となる記事になります。なので温かい目で見てくれると幸いです。

##データ型とは
>JavaScriptは動的型付け言語に分類される言語であるため、静的型付け言語のような変数の型はありません。 しかし、文字列、数値、真偽値といった値の型は存在します。 これらの値の型のことをデータ型と呼びます。
>>[jsprimer データ型とリテラル　より](https://jsprimer.net/basic/data-type/)　　

このように変数を定義して値を変数に代入した時、値が文字列ならstring型となって数値ならnumber型となります。
他にもありますが省略します

##組み込みオブジェクトについて
ビルトインオブジェクトともいうらしい。
標準で定義されているオブジェクトのプロパティやメソッドを使うことができるようだ

##データ型と組み込みオブジェクトの関係
詳しくは説明できないが、それぞれのデータ型(string

ES6の配列メソッドfilter,map　〜ポケモンとポケルスを使って考えてみる〜


#はじめに
ES6(ES2015)から便利なメソッドがたくさん増えました。その中で特によく使いそうな配列メソッドfilter,mapを、ポケモンを例えに説明します。

各メソッドの説明の後に、
**『メンバー6体をそれぞれ10,000回対戦させて、ポケルスに感染したポケモンを選抜しよう』**検証を通して、filter,mapを実践的に使います。

##filter()とは
対象となる配列からデータを抽出するメソッド

###filter()の例

“`javascript
// この御三家未だにかわいいと思う
const gosanke = [
{‘name’: ‘ヒトカゲ’ , ‘type’: ‘ほのお’},
{‘name’: ‘ゼニガメ’ , ‘type’: ‘みず’},
{‘name’: ‘

Vue.jsのイベント修飾子について理解する

# 概要
本記事では、Vue.jsで用意されているイベント修飾子について`.stop`と`.prevent`を例にしていまとめていきます。

## .stop
処理内容はJavaScriptにおけるDOMのEventオブジェクトの`event.stopPropagation()`と同じ。
下記の例では、`mousemove`によりpタグの上にマウスを乗せるとイベントが発火するようになっています。
そのpタグの中にspanタグを入れていますが、このspanタグの上にマウスを乗せた時だけはイベントを発火させたくないという時に`.stop`を使用します。
イベント発火をさせたくないspanタグに`v-on:mousemove.stop`を書いてあげることで、”ここでは反応させたくない”の文字の上ではイベントが発火しないようになります。

“`html:index.html

ここにマウスを載せると下のX、Yの値が変わるよ

React向けチャートライブラリRechartsで円グラフ

# React向けチャートライブラリRechartsで円グラフ

?グラフの種類

[AreaChart](http://recharts.org/en-US/api/AreaChart):面グラフ。折れ線グラフに基づき、定量データを表示したグラフ。
[BarChart](http://recharts.org/en-US/api/BarChart):棒グラフ。四角い棒の長さで何らかの値を表現するグラフ。
[LineChart](http://recharts.org/en-US/api/LineChart):折れ線グラフ。散布図の一種であり、プロットされた点を直線でつないだグラフ。
[ComposedChart](http://recharts.org/en-US/api/ComposedChart):折れ線グラフ、面グラフ、棒グラフで構成されるグラフ。線のような単一のタイプのチャートを描画する場合は、LineChartを使う。
[PieChart](http://recharts.org/en-US/api/PieChart):円グラフ。丸い図形を扇形に分割し、何らかの構成比率を

Deep Learningアプリケーション開発 (8) TensorFlow.js

# この記事について
機械学習、Deep Learningの専門家ではない人が、Deep Learningを応用したアプリケーションを作れるようになるのが目的です。MNIST数字識別する簡単なアプリケーションを、色々な方法で作ってみます。特に、組み込み向けアプリケーション(Edge AI)を意識しています。
モデルそのものには言及しません。数学的な話も出てきません。Deep Learningモデルをどうやって使うか(エッジ推論)、ということに重点を置いています。

1. [Kerasで簡単にMNIST数字識別モデルを作り、Pythonで確認](https://qiita.com/take-iwiw/items/796ec8560563625ace34)
2. [TensorFlowモデルに変換してPythonで使用してみる (Windows, Linux)](https://qiita.com/take-iwiw/items/80fc73ff23d8f51650f5)
3. [TensorFlowモデルに変換してCで使用してみる (Windows, Linux)](https://qi

GraphQLが”グラフ”であることを利用してビジネスロジックを入れ込んでみる

# 動機

GraphQLを勉強しているとき、

* GraphQLが”グラフ”を扱っているのはわかるけどそれによってどんないいことがあるんだろう？
* バックエンドにGraphQLを選択した際、ビジネスロジックはどこに表現されるべきなんだろう?

という私の疑問にサクッと答えてくれる日本語の文献が少なくともネット上には見つからなかったので、書いてみることにしました。

# 作るもの

いわゆる”TODOリスト”を作ります。[Todoist](https://todoist.com/)や[RememberTheMiik](https://www.rememberthemilk.com/)的なあれですね。

いきなり余談ではありますが、何か新しい言語やフレームワーク、DBなどをサクッと試したいときに作るものの題材として、”TODOリスト”は個人的に以下の観点からオススメです。

1. 仕様がイメージしやすい
* 大抵の方は何らかのTODOリストを使ったことありますよね？
2. どんなアーキテクチャでも大抵１日以内に完成する
* 慣れないアーキテクチャであまり壮大なアプリケーシ

【nuxt.js】headにmetaとかGAタグとか加える時のアレコレ

nuxt.js触っててheadの内容どこに書くのか分からなかったのでメモ
## これさえ読めば以降読まなくてもokです
headに色々入れることができます。ページのdataとかも使ってページ個別に記載できます。
[（公式）](https://ja.nuxtjs.org/api/pages-head/)

nuxt.config.jsの中のheadプロパティを使えば、全ページ共通の要素は一発で記載できます。
[（公式）](https://ja.nuxtjs.org/api/configuration-head)

## つかいかた　〜ページ個別の記載事項〜
各ページで記載内容を変えたい場合はこんな感じ。
こんな感じにhead()で書いていきます。

“`index.vue
head () {
return {
title: ‘ほげほげ’,
meta: [
{ hid: ‘description’, name: ‘description’, content: ‘説明’ },
　　　　　//キーワードはお守りらしい。（消したい。。）

Playwrightも知らないで開発してる君たちへ


# Playwrightとは

Microsoft から Playwright というツールが公開されました。
それはGitHubのトレンドにもなりインパクトのあるニュースでした。

Playwrightとは、ざっくり言うと
めっちゃ簡単にChrome、Safari、Firefoxをコマンドライン上で実行できるNodeのライブラリです。

公式: https://github.com/microsoft/playwright

# 使い方

Puppeteerとほとんど変わりません。
`npm isntall` して **数行のJavaScriptコードを記述するだけ** でスクリーンショットが取れます。

“`
npm i playwright
“`

“`js
const pw = require(‘playwright’);

(a

javascriptでテキスト音声読み上げ

# はじめに
javascriptでお手軽に音声読み上げできます。
Web Speech Synthesis API を使います。無料なのがうれしい(^^)


自分用メモまで。お勉強中です

# 環境　
windows10
python3 (anaconda)　
（※動作確認まで　ローカルホスト起動できれば、pythonでなくruby, apacheなどでもよいみたいです）

ブラウザ MicrosoftEdge (ver44?)
ブラウザ Chrome(ver74?)

#ソースコード
下記HTMLを作成して、
C:\Users\自分のユーザーのフォルダ\sample.html として保存します。

sample.html

“`