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

Node.js Worker Threads: もしWorkerが例外を投げたらどうなる？→メインスレッドもろとも死ぬ

前回に引き続き、Node.jsのWorker Threadsについて解説していきます。

本稿では、もしもWorkerが例外を投げたらどうなるのかを検証します。

前回: [CPU負荷で3秒かかっていた処理を「Worker Threads」で1秒に時短する](https://qiita.com/suin/items/bce351c812603d413841)

## 本稿で分かること

* Worker Threadsでエラーが発生した場合、メインスレッド側はどうなるのか？
* Worker側の例外をメインスレッドでエラー処理できるのか？

## Workerで例外を起こすと？

まずは、Workerで例外を投げるとどうなるのか見ていきましょう。

メインスレッド側のコード、シンプルにWorkerを起動するだけにします:

“`main.js
const {Worker} = require(‘worker_threads’)
const worker = new Worker(‘./worker.js’)
“`

Worker側のコードは常に例外を投げるようにします:

“`w

PHPができないなりに、お問い合わせフォームに動きをつけてみた

#はじめに
現在ポートフォリオサイトを作っており、そちらに掲載するためのサイトを作成しているのですが、自分はPHPが使えないので、お問い合わせフォームに実際に送信させる機能をつけることができないのですが、それではあまりにも寂しいなと思ったので、入力して送信ボタンを押した後、また、入力して欲しい項目が未入力だった時に、JavaScriptを使って何か反応が起きるようにしてみました。

#JavaScriptのコード
“`
$(function(){
$(‘#formlink（送信ボタン）’).on(‘click’, function(){
if($(‘.formcheck（入力してほしい項目）’).val() === ”){
alert(‘未入力の項目があります！’);
$(‘.formcheck’).focus();
return false;
}
alert(‘送信完了！’);
});
});
“`
上記のコードにより、お問い合わせフォームで、入力がすべて完了し、
送信した場合は『送信完了です！』
入力してほし

React Nativeを書いててCSSの設計についてすごく考えたときの小話

# React Nativeを書いててCSSの設計についてすごく考えたときの小話

HTML5 を書いているみなさんは、以下のようなコンポーネントがあったときにフォントサイズをどこに定義しますか？

“`html

home
about
google

“`

継承したらいいので `li` に書くぜ :raised_hand: :raised_hand: :raised_hand: :raised_hand:

“`css
li {
font-size: 20px;
}
“`

文字列のすぐ上の要素の `a` に書くぜ :hand_splayed: :hand_splayed: :hand_splayed: :hand_splayed:

“`css
a {
font-size: 20px;
}
“`

さてReact Nativeではどう書くのでしょうか。それを見ていきます

Firebase x OGPの決定版【Dynamic Links】

# Firebase x OGPの決定版はDynamic Linksだと思うけど異論ある？

異論は受け付けます。

まず最初に私が紹介する方法は何種類か存在するOGPでも一種類だけしか使えないっぽいので、それ以外だと以下のようなやり方が一番いいと思います。

[Vue.jsとFirebaseでOGP画像生成系のサービスを爆速で作ろう](https://qiita.com/serinuntius/items/3017fb6ef51cd47352f6)

HostingにアクセスしたときにFunctionsをいい感じに使えるのは `us-central1` のみですので、その詳細は、この記事 [Cloud Functions を使用した動的コンテンツの配信とマイクロサービスのホスティング](https://firebase.google.com/docs/hosting/functions?hl=ja) の `重要: Firebase Hosting は、us-central1 でのみ Cloud Functions をサポートします。` のあたりを見るといいと思います。

## 試して

Progate無料版をやってみる【JavaScript I ES6】#1

[前回](https://qiita.com/GodPhwng/items/3c3a0308b16f4511e580)~~は初級編を終えたので、今回から中級編をやっていきたいと思います。~~

あと、前の記事にも書きましたが、Progate側で演習の回答結果をチェックしてくれるので、ここで私の結果を貼っても仕方ないと思うようになりました。

レッスン中の、自分なりの解釈や、自分用メモ等を載せていこうと思います。

#HTML中級編に取り掛かろうとしたら・・・
なんと有料でした・・・ｗ

無料／有料の一覧は[こちら](https://prog-8.com/lessons/info)

なので、JavaScriptの無料レッスンをやろうと思います。
いまだとES6(エクマスクリプト6)のレッスンみたいですね。

ES6はあくまでJavaScriptの標準の仕様。
各ブラウザはこれにのっとって実装をしていく。
ブラウザによって実装されているバージョン(機能)が異なる。GoogleはES6の〇〇まではできるけど▲▲が実装されていない、
Edgeは逆に▲▲が実装されているが、〇〇がないなど・・・

変数について

#なぜ変数を使うのか？

『効率的』
これが最大の理由だと思います。
例えば、
「お世話になっております。」みたいな言葉を
何度もいろんな場所で、使わなければならないとしましょう。
そんな時、何度も
「お世話に…..」
と記載するのは、とても面倒だと思います。
（私は面倒です….)
そこで、

“`ruby:qiita.rb
$great = “お世話になっております。”;
“`

このように記載すれば、
必要な時に、$greatと必要な箇所で記載すれば、
コードを打つ手間を省くことができます。

想像してみて下さい…
同じ文字、数字を20,30回と書かなければならなかった時…
ゾッとします…

なぜ、変数は使用するのか？
効率的で、時間短縮につながるからです。
本日は以上になります。
ご鑑賞ありがとうございました。

【4日目】JavaScript2日目　

#目的

毎週末の予定でしたが、継続的にアウトプットしていく方針にします。
なぜなら・・・

**昨日学習した事を忘れているから！**

毎日のアウトプットにより、知識の定着を図ります。

##progate Javascript 学習コース1
昨日の内容です。

“`ruby:qiita.rb
//表示
console.log(“name”);

//変数(変更は追記すればよい)
let name =”masa”;

//定数
const name =”masa”;

//テンプレートリテラル(記号注意)
console.log(`私は${name}`)

//if　else
if(条件1){
console.log( );
}else if(条件2){
console.log( );
}else {
console.log( );
}

//swich(フローチャートみたいなイメージ)
swich(条件){
case ” “:
console.log(” “);
default:
処理
　break;
}
“`

##progate Javascript 学習

JavaScriptでサイトの言語切り替え2

昔作った物の書き換えた物です

[JavaScriptでサイトの言語切り替え](https://qiita.com/metalgearsolid3love/items/856118faa1504fe26456)

“`javascript
class Lang {
lang;
el;
data;
ctx;
content;
afterContent;
address;
constructor(obj) {
this.el = obj.el || “body”;
this.data = obj.data || {};
this.lang = obj.data.def || “en”;
this.address = obj.data.address || false;
this.ctx = document.querySelector(this.el);
this.content = this.ctx.textContent;
this.afterContent = this.ctx.textCont

初めてのGraphQL ~特徴・導入・簡単なクエリまで

最近Reactを学びはじめたこともあって同じFacebookが作ったGraphQLにも手を出してみました。
GraphQLの輪郭もわからない時は「NoSQLのクエリの弱さを独自の検索エンジンで全て解決してくれる魔法のクエリ言語」なんて思ってました。(浅はかなり)

> GraphQLを勉強しはじめて2日目で書いた記事なのであやふやなところや間違ってる点など多々あると思います…

## GraphQLとは

実際のところはクエリとレスポンスの構造に対応関係を持たせることができたり、スキーマ設定によりエディタにおける補完や型チェックなどが行えたり、REST APIと違い処理によってGETエンドポイントを分ける必要がなく冗長化を防ぐことができたりと、いわばAPIのフレームワークのような印象を受けました。

イメージ図を作ってみました↓
![GraphQL流れ.png](https://qiita-image-store.s3.ap-northeast-

TSfCM１日目_プログラミング学習初日の初日

#はじめに

2020年3月7日からプログラミングを習い始めました。
　Tech Scool for Change Makers
　https://gs4good.tokyo/
というところに半年間通って勉強します。

html,JavaScript,Pythonなど学ぶ予定です。
プログラミングは全くの初心者です。
Pythonがprintと書くことだけは知っていました。

ここでは自分の復習のため、あとQiita投稿に慣れるため
TSfCMの授業メモと学びを書いていきたいと思います。

3/7の教科書
https://qiita.com/njn0te/private/4523e08aa93672e4dda5?fbclid=IwAR0gfUWGfZ2WIMlyTY0oKXTa0KFnYCpgKJ05q0exVqI01DNt5orguhRGkG4

OSはWindows10

#登場人物など
####ツール
スクリプトを書く　→　GAS（グーグル・アップス・スクリプト）
プログラミングを書く場所（エディター）　→　Visual Studio Code

スクリプトの連携先　→　LIN

GROWI に draw.io 連携機能を PR (Pull Request)して v3.7.0-RC としてリリースされた話

# はじめに

[GROWI](https://growi.org/) に draw.io 連携機能を実装して Pull Request し、無事マージされて、バージョン 3.7.0 RC(Release Candidate) としてリリースされました！ :tada: (今は docker image のみ提供されてます)

[weseek/growi Add draw.io Integration #1685
](https://github.com/weseek/growi/pull/1685)

使い方のドキュメントはこちらです。

[draw.io で様々な図を作成する | GROWI Docs](https://docs.growi.org/ja/guide/features/drawio.html)

この記事では簡単な機能紹介と実装のモチベーション、どうやって実装したかなどをお話しようと思います。

# GROWI って何？

[株式会社 WESEEK](https://weseek.co.jp/) が OSS として開発している Markdown で書ける Wiki で

Firefoxを改造してみようハンズオン

Firefoxの改造を通してコントリビューター（特にN高生）を増やそうという記事です。

今回の改造ではFirefoxに隠しコマンドを追加します。HTMLとJavaScriptを使うので、N予備校のプログラミング入門コースを終えている人が対象です。

何か分からない事があれば、僕にSlack（圧倒的初心者の極み）かTwitter（[u7693](https://twitter.com/u7693)）で聞いてください。

## とりあえずビルドしてみる

改造する前にFirefoxをビルドできるか確認します。
OSによって変わってきますが、大まかな流れは以下の通りです。詳細は[**Building Firefox – Mozilla | MDN**](https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Build_Instructions/Simple_Firefox_build)を見てください。

“`shell
# ソースコードをとってくる
$ hg clone https://hg.mozilla.or

Vuetifyのv-data-tableで階層構造のデータを検索できるようにする

最近はAngularからVue.jsに浮気中の8amjpです。Vue.jsめっちゃ楽しいです。

## v-data-tableコンポーネントを使う

さて、下記のようなデータがあるとします。
（ちなみにこのデータ、[Zabbix](https://www.zabbix.com/) APIで取得できるホスト一覧データから抜粋したものです）

“`json
[
{
“hostid”: “1”,
“host”: “Server 1”,
“description”: “サーバ1号機”,
“parentTemplates”: [
{
“name”: “Windows Servers”,
“templateid”: “1”
},
{
“name”: “Web Servers”,
“templateid”: “2”

ES2019で追加されたflatMap()の使いどころ

## はじめに

ES2019のアップデートで配列のメソッドflatMap()が追加されました。

はじめてflatMap()を見たときは「これはどんなときに使うのだろう」と思いました。
私のようにflatMap()をいつ使うのかピンと来ていない方も多いと思います。

しかし調べていくうちに色々使える事がわかったので、flatMap()の使いどころをご紹介します。

## flat()とは

まず事前知識として同じくES2019で追加されたflat()について説明します。
flat()は配列のメソッドで、自身の配列の次元を1つ下げたものを返します。

“`js:2次元配列を1次元配列に変換
const example1 = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
];

example1.flat();
// 実行結果：[1, 2, 3, 4, 5, 6, 7, 8, 9]

const example2 = [
1, 2, 3,
[4, 5, 6],
[[7], [8], [9]],
];

example2.flat();
/

【Django】axiosを使って自作Like機能を作ってみた

# はじめに
今回はDjangoで作ったWebサイトにaxiosを使っていいね機能が作れないかと調べてみました。
案の定、Ajaxを使うか画面リロード付きいいね機能の作り方しかなかったので、参考サイトを見ながらaxiosでいいね機能を作ってみました。

## 参考サイト
#### いいね機能を実装したサイトのチュートリアルサイト
https://tutorial.djangogirls.org/ja/
#### いいね機能参考

## 本題
記事の順序に従って実装していきます。
この機能が欲しい人はそこそこコードを読めると信じているので簡単な説明は省きました。

### Model.py
PostクラスなどはDjango Girls Tutorialのモデルを参照しています。

“`python

from django.db import models
from django.conf import settings
from django.utils import timez

Amazon Kinesis Video Streams WebRTC で無理やり複数人のビデオチャットを作る

# はじめに

[以前、Amazon Kinesis Video Streams WebRTC（以後 KVS WebRTC）を調べてみましたが、](https://qiita.com/massie_g/items/b6d3513d06a28ba89677)1対1か、1対nを前提にしていて、複数人の双方向ビデオチャットのような仕組みは対象にしていないことが分かりました。
できないと言われるとやりたくなるのが人のサガなので、あえて多人数のビデオチャットを作ってみました。

# KVS WebRTCの通信形態

以前の記事でも書いたように、KVS WebRTCではマスター(Master)1つと、複数のビューワー(Viewer)が通信することができます。図にすると次のような形です。

javascriptで一定時間処理を停止する

## はじめに

初学者による初学者向けの記事となります。

“`
筆者が初学者のため、正しくない記述も含まれているかもしれません。
また、１つ１つの説明を省略しています。
本記事を読んで、その場を乗り切った後、
しっかりと Promise, async / await について勉強することを推奨します。
末尾の参考記事を参照してください。
“`

javascript の Promise, async / await を勉強し始めました。

await の記述方法が直感的でとても気に入ったので、
いつも await で記述したかったのですが、
記述できるときと記述できないときがあります。

本記事では、「一定時間処理を停止する」という具体例をもとに、
知見を共有したいと思います。

※javascriptで処理の停止はできないため、
　正しくは、 **一定時間後にコールバックする** という表現になります。

## まとめ

await を使って一定時間処理を停止したい場合は、
**一定時間処理を停止したい場所がasyncの関数内かどうか**
を確認する。

– [async

for…of文がずれる！？NodeListやHTMLCollectionなどの動的オブジェクトを使うときに知っておかなければならないこと

## TL;DR

– `HTMLCollection`などの動的なイテラブルオブジェクトを回すときには`Array`に変換するべし
– Arrayに変換するにはスプレッド構文と使うか`Array.from()`を使うべし

## `for…of`文を動かしてみる

### 単純なループ

たとえば、次のような構造の`div`要素を作って、その子要素または子ノードの数だけループさせて処理がしたいような状況で次のコードをを実行します。

“`html

“`

“`javascript
const div = (() => {
const node = document.createElement(‘div’);

node.innerHTML = `

[Rails, jQ]インクリメンタルサーチ

#インクリメンタルサーチ
本記事では前回作成した[ユーザーの名前検索機能](https://qiita.com/Masanori_N/items/5065bc59d9dff88d5152)を使用して実装していきます。
以下を使用しています。

– ruby 2.5.1
– rails 5.2.4.1
– gem ‘jquery-rails’
– gem ‘devise’

なお、使用するビューは以下を使用します。

““`erb:index.html.erb
<%= form_with(url: users_searches_path, local: true, method: :get, class: "search_form") do |f| %>
<%= f.text_field :keyword, placeholder: "Name", class: "search_input" %>
<%= f.submit "Search", class: "search_btn" %>

<% @users.each do

gonを使ってJavaScriptへの直書き環境変数を防ぐ

## まず環境変数を設定する
Dotenvを用いて環境変数を設定していきます。

**1 gemのインストール**

“`ruby:Gemfile
gem ‘dotenv-rails’
“`

“`
bundle install
“`

**2 envファイルの作成**
appファイルやcofigファイル、Gemfileがあるルートディレクトリに**「.env」**というファイルを作成して下さい。

私は一瞬迷ったので画像載せておきます。
歯車マークが目印です。

**3 環境変数の設定**

“`|.env|
ACCESS_KEY=’*******’
“`

**4 .gitignoreの編集**
環境変数をGitのトラッキングの対