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

Node.js: CPU負荷で3秒かかっていた処理を「Worker Threads」で1秒に時短する

本稿では、Node.jsのWorker Threadsとその基本的な使い方について説明します。

## 本稿で知れること

1. Worker Threadsの概要
– Worker Threadsとは何か？
– それが解決してくれる問題は何か？
2. worker_threadsモジュールの基本的な使い方
– スレッド起動時にデータを渡すにはどうしたらいいか？
– 3秒かかる処理を、並列処理で1秒に短縮する方法。

## Worker Threadsとは？

* CPUがボトルネックになる処理を、別スレッドに負荷分散し、効率的に処理する仕組み。

## Worker Threadsが解決する問題

* Node.jsはシングルプロセス、シングルスレッド。
* シングルプロセス、シングルスレッドは、シンプルさという利点がある。
* 一方で、CPUに高い負荷がかかる処理は、他の処理を止めてしまう欠点があった。
* Worker Threadsは、複数のスレッドを使えるようにすることで、この欠点を解決する。

## Worker Threadsが解決しない問

JavaScriptの勉強用にBookmarkletの作成を勧めてみた話

## はじめに
こんにちは。友人(IT業界勤めではない)から「JavaScript の勉強をしているが、せっかくなので何かつくってみたい」という話を聞きました。そこで僕は **Bookmarklet をつくってみてはどうか** という提案をしてみました。

今日はそんな実際にあった話をもとに記事を書いてみたいとおもいます。

## Bookmarklet ってなに？
そもそもブックマークとはWEBサイトのURLをブラウザに登録しておき、好きなタイミングで登録したURLを呼び出せるようにする機能のことですよね。このあたりは普段インターネットを使っている方はよくご存じかとおもいます。(この記事を見ている時点でインターネットをつかっていますので聞くまでもなかったと書いてからおもったｗ)

これに対し、ブックマークレットですが同じくブックマークの機能を使うことには変わりありません。違うのはURLの代わりに JavaScript で作ったプログラムを登録しておくことです。ブックマークの場合は登録しておいたURLを呼び出すとそこにジャンプしますが、ブックマークレットの場合は登録しておいたプログラム

Next.js 9.3: 新世代の静的サイト生成、Built-in Sassのサポート

本日、[Next.js](https://nextjs.org/) 9.3 がリリースされました。本リリースの特徴は次のものです。

– Static Site Genration のサポート
– プレビューモードのサポート
– ビルトインの Sass サポート
– 404 ページの静的化
– ランタイムの縮小

各トピックごとに簡単に説明します。詳しく知りたい場合は[公式のリリースノート](https://nextjs.org/blog/next-9-3)が公開されているのでご確認ください。

## Static Site Generation のサポート

Next.js では 9.0 から Automatic Static Optimization というコンセプトを打ち出し、`getInitialProps`でデータを取得しない場合はビルド時に HTML ファイルを生成していました。（また、`getInitialProps`でのデータ取得は`next export`で生成した場合であっても、クライアントのルーティング変更時に実行されるため、完璧な静的サイトとは言い難いものでした

WebStormでAirbnbのJavascript style guideベースのESLintを使う

# 概要

以下に関するメモです

– WebStormのESLint連携機能を使う方法（WebStormのJSCS連携機能は使わない)
– ESLintはAirbnbのJavaScript Style Guideをベースにします
– WebStormのコードフォーマッターもこれにあわせ変更します

## 環境

– WebStorm 2019.3
– ES6
– Webpack4
– Babel7

# WebStormでESLint対応する

## WebStormのESLintサポートを有効にする

**File > Settings**で設定画面を開き
**Languages&Frameworks > JavaScript > Code Quality Tools > ESLint**　と進み**Automatic ESLint configuration**を選択する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/6d36e496-5c97-99a3-b6b2-

【JavaScript】canvas上でオブジェクトを動かしてみよう【HTML5/canvas】

#はじめに
前の記事の続編です。
今回は前回のプログラムを拡張します。
ビューの回転、
オブジェクトの操作、追加、削除
ミニマップの追加
と少しアプリっぽくなってきました。

#前の記事との変更点
###ビューを回転できるようにした

###オブジェクトを平行移動、拡大縮小、回転できるようにした

###オブジェクトの種類に画像を追加した
![画像追加.png](http

JavaScriptについて

＃はじめに

『対象とする人』
・html/cssの次の段階に行きたい人
・プログラミングを勉強していきたい
・プログラミングが全くの未経験
・パソコンが好きだよという人。
そんな方のための記事です

#JavaScriptってなに？

一言で言うと、
「ホームページなどで動きをつけることができる言語」です。

フロントエンド言語の一種で、サーバーを通すことなく、
ブラウザだけでプログラミングを実行することができます。

#なにが作られている？

・WEBページの動作
・WEBアプリ開発
・スマホアプリ開発
・ゲーム開発

###webページの動作では、

・写真のスライド
・スクロールに応じて、要素がフワッとした動きをする
・スマホ時のドロワーメニューの作成
・スムーススクロールという動き

などがつけられます。（上記４つは次回説明）

###それ以外では、
LINEやFacebook、TwitterなどのSNSやチャットのような本格的なアプリ開発も行っていくことが出来ます。

これを踏まえ、JavaScriptで何を作りたいのか明確にし、学習を効率よく進めましょう。

アロー関数とは

JavaScriptで出てくるアロー関数についてまとめてみました。

## 関数の宣言
JavaScriptでは、関数を変数や定数に代入することができます。

“`js

const getTriangle = function(base,height){
return base * height / 2;
};
console.log(‘三角形は’ + getTriangle(5,2));//三角形は5

“`

このとき、この書いた関数をアロー関数で省略した形で書くことができます。

“`js

const getTriangle = (base, height) => {
　 return base * height / 2;
};
console.log(‘三角形は’ + getTriangle(5,2));//三角形は5

“`

このように、

“`
(引数) => {関数本体}
“`

で書くことができるのをアロー関数といいます。

## アロー関数の書き方のバリエーション
アロー関数は、状況によって他にも書き方のバリエーションがあります。

### 引

Let’s encryptのバグはRustで実装していたら防げたの？

# はじめに
Let’s encryptのバグの原因はポインタに起因する実装ミスでした。
「Rustはいいぞ」と言うためだけにRustで実装した場合を検証してみます。

## 原因はなんだった？

詳しくは
[https://jovi0608.hatenablog.com/entry/2020/03/09/094737](https://jovi0608.hatenablog.com/entry/2020/03/09/094737)
のステキなまとめを見たほうがいいのですが、

シンプルにすると、このような実装です。

“`go:fail.go
func main() {
var out []*int
for i := 0; i < 3; i++ { out = append(out, &i) } fmt.Println("Values:", *out[0], *out[1], *out[2]) fmt.Println("Addresses:", out[0], out[1], out[2]) } ``` ValuesもAddressesも[0]~[2]で同じ値が表示

JavaScript: DOM操作

idとclassの参照方法。

“`html

“`

ハンズオン：今時のフロントエンド開発の最初の一歩

# はじめに
この記事は、今時のフロントエンド開発の最初の一歩を踏み出すために理解すべきことを理解する、そして、実際にハンズオン形式で最初の一歩を踏み出すところまでを行いながら理解を深める、という目的のハンズオン資料です。

社内勉強会のために作成した物を一般向けに改善したものとなります。

—
## この記事のターゲット

– 今時のフロントエンド開発が昔とどう違うのか知りたい人
– 今時のフロントエンド開発の前提を学びたい人
– 今時のフロントエンド開発を実際にハンズオンで学びたい人

—
# ES6+とは
ECMAScript6以降のこと
IEでは動かない新しい構文を含む
IEでは動かない新しい機能を含む

—
# ES6+の例
“`javascript
// const, デフォルト引数, アロー関数
const maskKey = (key, padString = ‘*’) => {
// const
const sliced = key.slice(-4);
// String.prototype.padStart
return sliced

競プロ等におけるjavascriptの標準入力

普段javascript使っててもわからん。。。

ベース

“`javascript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);

var input_lines = [];
var reader = require(‘readline’).createInterface({
input: process.stdin,
output: process.stdout
});

/* ーーーー入力ーーーー
　
ここに書くコードを変える

　 ーーーー出力ーーーー */
reader.on(‘close’, () => {
console.log(input_lines);
});

“`

—————————————
入力：改行型（行数指定不要。`string`形も同一）

“`javascript
1
2
1
6
1
“`

コード

“`javascript
reader.on(‘line’, (line) => {
input_l

Vue.jsについての基礎(基本構文)

#はじめに
おはようございます。こんにちは。こんばんは。
ワタタクです。
今回はVue.jsにの基本構文ついて見けいけたらいいなと書いています。
Vue.jsに関しては少し触ったことがある程度なので、今後の為にと勉強させていただきますので
もし間違いとかありましたらご教授、アドバイスなんかいただけたら幸いでございます。
では早速参ります。

※この記事は再アップした記事になります。

#基本構文
いろんなファイルが出来ててキョどりますが大丈夫です。
基本的に難しい設定をしなければ、だいたいsrcディレクトリの中のVueファイルだけをいじるだけです。
##v-showディレクティブ
まず最初に要素を表示するかどうかを決める条件付きレンダリングです。

“`vue:HelloWold.vue