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

querySelectorAllをmapする

# スクレイピング時に手軽にリストを展開したいとき
`querySelectorAll`は`Array`ではないのでforEachはありますがmapはありません
中のコンテンツを取り出したいときにforEach+pushだと煩わしさがあるのでmapでなんとかしたいと思うでしょう。

以下の方法でmapすることができます

## サンプルコード
“`
const data = […document.querySelectorAll(‘.list li’)].map((node) => {
return node.textContent
})
“`

HTML/CSSしかやったことないコーダーがJavaScriptを勉強する回〜復習：美しいコードを書くために

おはようございます！化・ω・石です。
実は先日のエントリ、[HTML/CSSしかやったことないコーダーがJavaScriptを勉強する回〜while文](https://qiita.com/a9744c/items/295073d096c139bf8ea6)を先輩のアドバイスをもらってちょくちょく整形してたのですが、

**化石まーたぐちゃぐちゃのソース作ってる**

っていうことに気づいたので、今のうちに整理整頓しておきたいと思います！
Hello Worldからif文、変数、while文とやってきて次の課がファンクションなので、ちょうどきりがいいかな。

# 美しいコードを書くために

古生物学では**頭しかない化石**とか**頭を上下反対につけて復元された化石**とか**別の化石とドッキングされて復元された化石**とかいますが…自分のコードがそんなふうに発掘されたら発狂しますね。そうならないために、コードの「身嗜み」に意識を向けましょう！

化・ω・石＜で、美しいコードってなんだろう？

うーん、「ちゃんとインデントされている」とか、「命名規則が統一されている」とか…でしょうか。

TypeScriptでWebAssemblyを開発できるAssemblyScriptを試してみた

TypeScriptでWebAssemblyを開発できるAssemblyScriptというのを見つけたので試してみる。

## AssemblyScriptとは？

* AssemblyScriptとは、TypeScriptからWebAssemblyにコンパイルする言語とそのコンパイラのこと。
* Microsoftによって開発されている。
* 厳密にはTypeScript風な言語であって、TypeScriptではない。
* 様々な制約と仕様上の違いがある。
* any型やunion型が無かったり、`Array#sort`が`Array#sort`として実行されたり、細かい違いがある。
* [AssemblyScript is *not* a subset of TypeScript – DEV Community ?‍??‍?](https://dev.to/jtenner/assemblyscript-is-not-a-subset-of-typescript-4ka3)
* まだまだ開発途上(2019-11-21現在)

Javascriptメモ

## はじめに
プログラミングをしていて覚えておきたいなと思った知識をメモしていきます。
個人的な備忘録です。。。

## onclickでクリックした要素をjsに渡す
“`html

“`

“`javascript
function testFunction(element){
console.log(element.value);
}
“`

onclickを使ってパラメーターを渡しつつ、fastConfirmでポップアップだしたかったので。

Scratch3 でポケミクを歌わせる

[先の投稿](https://qiita.com/UchiwaFuujinn/items/cf455acf2aecd6e024a9)でポケミクに使えない？というコメントをいただき、Scratch3でポケミクに歌詞を送信するExtensionを作成しました。

学研「[歌うキーボード　ポケット・ミク](http://otonanokagaku.net/nsx39/)」（略してポケミク）が発売されたのは2014年、すでに5年も前になってしまいました。すでに片付けられてしまったかもしれません。そんなポケミクをScratch3から歌わせてみたいと思います。

## 学研のページより

## デモ

[デモ](https://youtu.be/2KYXkHCd1bw)をYoutube に置きました。ちなみに子供向けの設定になっていました。Pushボタンを押すとポケミクがしゃべります。

[![image.png](https://qiita-image-store.s3.ap-nor

フロントエンドのコーディング課題６選-このフロントエンドの課題、実装できますか？

>こちらの記事は、[Indrek Lasn](https://medium.com/@indreklasn?source=follow_footer————————–follow_footer-) 氏により2019年 10月に公開された『 [Here Are 6 Front-End Challenges to Code](https://medium.com/better-programming/here-are-6-frontend-challenges-to-code-9952190c97cc) 』の和訳です。
本記事は原著者から許可を得た上で記事を公開しています。
著者Twitter https://twitter.com/lasnindrek

フロントエンドの開発はストレスが多く難しい作業ですが、練習すれば技術をマスターすることができます。

自ら進んで鍛錬と努力をすれば、フロントエンド開発の場面で問題を解決することのエキスパートとなることができるでしょう。

優れたフロントエンド開発者になるために効果的な方法の１つは、単純にできるだけ

Quasar v1メモ

# [Quasar (v1)](https://github.com/quasarframework/quasar)

vueのUIというような位置づけで紹介されているところが多いが、プロジェクト作成時に基本的なフォルダ構成も作成してくれてVueRouterやVuexが使える構造になっており、SPAやSSRを指定してビルドする機能があるのでUIというよりははじめから豊富なコンポーネントを持っているNuxtのような位置づけだと思った。

## [ロードマップ](https://quasar.dev/start/roadmap)

## [ドキュメント](https://quasar.dev/introduction-to-quasar)

見やすいが、アクセスできなくなってる事が多い気がするのが辛すぎる

## [Vueコンポーネント](https://quasar.dev/vue-components)
## [Vueディレクティブ](https://quasar.dev/vue-directives)

奇麗で豊富なので楽しい。

### 個人的に気になったコンポーネントとディレクテ

【初心者チャレンジ】楽天検索　LINE　BOT2　Herokuで実装

##axios と　javascript　を使った楽天検索　LINEBOTをHerokuで実装

今週は先日作成した楽天で本を検索できるBOTなど、今まではngrokを使用してトンネリングし
試作していましたが、ついにHerokuを使って実装してみたいと思います。

##参考資料

[【資料1】1時間でLINE BOTを作るハンズオン (資料+レポート) in Node学園祭2017 #nodefest](https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d)
[【資料2】【初心者チャレンジ】楽天検索　LINE　BOT](https://qiita.com/13sayu/items/ad9e41fe5117a121d1c8)

ラインボットの作り方は【資料1】
楽天検索botの作り方は【資料2】を参考に。

##環境
Node.js v10.16.3
Windows 10 pro
Visual Studio Code v1.39.1

##概要

![image.png](https://qiita-image-store.s

【JavaScript】非同期処理とコールバック関数をセットで理解したい

タイトル通り！

ただのメモ用かもしれないので雑な内容です。

#JavaScriptの基礎

JavaScriptはシングルスレッドで動く言語。つまり並行処理できないということ。

同期処理であろうと非同期処理であろうと2つ以上の処理を同時に行うことはできない。キューに登録された関数が順番に1つずつ実行される。キューに登録される順番が順序通りであることを同期処理、そうとは限らないものを非同期処理という。JavaScript以外（DBなど）に処理を任せている間は、その処理の完了を待たずに次へ進めるため非同期という。

“`sample1.js
console.log(‘いち’);
console.log(‘にー’);
console.log(‘さん’);
“`

“`zsh
$ node sample1.js
> いち
> にー
> さん
“`

“`sample2.js
setTimeout(function(){console.log(‘いち’)}, 1000);
console.log(‘にー’);
console.log(‘さん’);
“`

最初にキューに登録され

Node.js + ApolloServer + mongodb(mongoose)でリアルタイムなGraphQLサーバを構築する。

どうも。オンプレのインフラ企業からWeb系企業に転職し、4ヶ月のハヤシです。

最近は業務でgraphqlに触る機会があり、おもしろいと思ったので簡単なgraphqlサーバを構築します。
あまり詳しいことは書かず、とりあえず動く！を目標に書くので、よろしくお願いします。

# GraphQLについて
> GraphQL（グラフQL）は、APIのために作られた、データクエリとデータ操作のための言語と、保存されたデータに対してクエリを実行するランタイムである[2]。GraphQLは、2012年にFacebookの内部で開発され、2015年に公開された
ウェブAPIの開発に、RESTやその他のWebサービスと比較して、効率的、堅牢、フレキシブルなアプローチを提供する。GraphQLでは、クライアントが必要なデータの構造を定義することができ、サーバーからは定義したのと同じ構造のデータが返される。したがって、必要以上に大きなデータが返されるのを防ぐことができる。
※wikipediaより抜粋。

REST APIが今まで主流でしたがGraphQLはそれに代わるもので、近年人気が高まっているものら

2020年ソフトウェア開発の7つのトレンド

以下はTiara Brown Neilさん ( [hackernoon](https://hackernoon.com/@theneil248) )による記事、[7 Software Development Trends 2020 Revealed](https://hackernoon.com/software-development-trends-2020-revealed-spi305m)の日本語訳です。

# 7 Software Development Trends 2020 Revealed


知ってますか? ITプロジェクトの半分以上が失敗しています。
ソフトウェア開発業界の複雑さと動的な性質を認識している私たちの多くにとっては、それほど衝撃的な事実ではありません。

絶え間ない革新と進歩が伴うこの予測不可能な業界で生き残るためには、そのペースに合わせることが必須です。
賢い者は、ソフトウェア開発のサービスを利用するだけでなく、すべてのテクノロジーの長所と短所を比較し検

HTML/CSSしかやったことないコーダーがJavaScriptを勉強する回〜while文

こんにちは！化・ω・石です。最近めっきり冷え込みましたね。

今日のJavascriptは**while文（繰り返し）**です。ゲームの中では、「指定回数だけ探索する」とか「同一性が50以下になるまで探索する」とか、とかで使えそうですね。というわけでそんな設計を想定してコードを書いてみましょう！

while文の基本書式は以下の通りです。

“`javascript

while(条件式){
条件式がtrueの場合、処理を繰り返し実行する。
}
“`

#指定回数だけ探索し、そのたびに同一性をランダムで減少させる

まず回数をカウントする変数が必要そうですね。変数に格納した数値を1ずつ増やしていって、10回探索したら加算を止める、としたらよさそうです。
ついでにその数値をp要素で出力しましょう。要素をDOMツリーに追加するには、`createElemen()`メソッドと`appendChild()`メソッドで実装できるようです。

“`JavaScript

‘use strict’ // おまじない

let adv = 1; // 変数advに1を代入

while

ReactアプリにSentryを導入してエラー監視を行う

Sentryは、アプリケーションからエラーログを収集し、アプリで発生したエラーを一覧形式、または個別形式に可視化してくれるサービスです。Slackと連携することもでき、エラー監視ツールとして利用できます。

こういったツールはサーバーサイドに設置するケースが多いと思っていたのですが、今回フロントエンド側にも設置する機会があったので、導入方法についてまとめておきます。

## ReactアプリにSentryを導入する

Sentryの導入方法はめちゃくちゃ簡単で、アカウントを作成して[こちら](https://docs.sentry.io/platforms/javascript/react/)のドキュメントに従ってソースコードに変更を加えればOKです。

あとは、適当にエラーを発生させれば通知がSentryに飛び、こんな感じでエラーを表示してくれます。

railsでsubmitをキャンセルする

参考：https://www.sejuku.net/blog/28720#submit

「false」を渡してあげるだけです。

“`javascript

<%= form_for @wifi_agency, html: {class: 'form'} do |f| %>
<%= f.text_field :name, :class=>“form-control”%>
<%= f.submit "保存", class: "btn btn-success", :onclick => “return check_name()”%>
<% end %>

“`

webpackにESLintを導入する

webpack4.xがインストール済みのところにESLint v6.6.0を導入して使えるようにするまで。

# ESLintインストール
package.jsonがあるディレクトリで以下を実行。

“`sh
yarn add –dev eslint eslint-loader
“`

続いて初期化。コマンドラインでいくつかの質問に答えると、それに応じた内容の`.eslintrc.js`が作られます。

“`sh
eslint –init
“`
もし、eslintがない！？ということになったら、`./node_modules/.bin/`とかにあるのではないかと思いますので、確認してみてください。その場合は、`./node_modules/.bin/eslint –init`です。

# webpack.config.jsに追記
`module:`のブロックが追記部分です。

“`js
module.exports = {
mode: ‘development’,
entry: “./src/index.js”,
output: {
filename

DataTablesでカスタムエラーメッセージ表示

DataTablesにAjaxで取得したデータを表示するの、便利ですよね。

サーバーで何かエラーが起こったときにブラウザでカスタムメッセージを表示したいなーって場合、レスポンスのJsonを以下のようにすると一応表示できます。

“`json:JSON
{“error”:”カスタムメッセージ”}
“`

“`text:エラー表示例
DataTables warning: table id=hogehoge – カスタムメッセージ
“`

ただ、これだけだとJavascriptのエラーが出ちゃうので、データ0件だよーという内容のレスポンスに仕立てます。

“`json:JSON
{“data”:[],”draw”:1,”recordsFiltered”:0,”recordsTotal”:0,”error”:”カスタムメッセージ”}
“`

これでアラートが表示されたあとにJavascriptエラーは出ません。

ちなみに、アラート表示だけじゃなくて他に何かJavascriptで処理したい場合は以下のようにエラー処理方法もカスタムします。

“`javascript:Jav

VSCodeで効率的にconsole.logする 【Turbo Console Log】

# 思ってたこと
毎度console.log書いて変数名をC&Pするのが面倒:pensive:
（スニペット登録してても面倒に感じてました。

# 動作例
対象の変数名を選択して「Ctrl+Alt+L」（Macの場合は 「Option+Shift+L」）

# 拡張機能をインストールする

サイドバーのEXTENSIONS「(Ctrl|Cmd)+Shift+X」を選択し、「Turbo Console Log」を検索してインストール

VSCodeMarketPlace: [Turbo Console Log](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)

jQueryの変数で要素を取得

参考：https://stackoverflow.com/questions/17097947/jquery-using-a-variable-as-a-selector

“`html

hello

“`

“`javascript
$(“#”+sample).text()

//出力
=> hello
“`

Firebase Authenticationで「[vuex] Do not mutate vuex store state outside mutation handlers.」エラー

直接VuexのStateを変更しているつもりはないにも関わらず、タイトルのエラーが出てしまった。

具体的には以下のようなコードだった。

“`JavaScript
firebase.auth().onAuthStateChanged(user => {
this.$store.dispatch(“mutateUserData”, user);
});
“`

## :bomb: 原因
Googleアカウントでのログイン状態が変化したとき、Stateを変更するActionを発行するというものだ。

一見問題なさそうに見えるが、この user は色々プロパティがあってログイン状態の変化により勝手に色々と書き換わるらしい。

上記のやり方だと参照渡し（っぽい奴）なので、その時に直接Stateが書き換えられたと見なされてしまうんだと思う。

## :star: 解決策

“`JavaScript
firebase.auth().onAuthStateChanged(user => {
const { uid, displayName } =

Nuxt.js + Firebase + Ongaq.jsを使ってドラムのフィルインを自動生成するWebサービスを作った

## :star: 概要
[Drum Fills & Chops Generator](https://drumfills-c209e.firebaseapp.com/)
[ソースコード](https://github.com/oimo23/Drum_Fill_Generator)

一部のマニアックなドラマーにしか需用の無さそうなサービスを作ってしまった。
ドラムにはフィルインというものがある。

***「ドツタツドツタツ」***

というのが普通のビートとすると、フィルインというのは

***「タカトン」***

みたいな奴だ。

そのフィルインの中でも1小節、2小節という長めのフィルインを無限に自動生成できるというものだ。

## :tools: 使った技術
***Nuxt