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

Vue composition-api の テスタビリティを考える

# はじめに

Vue composition-api を触っている人も多くいると思うが、これの利用方法についてテスト容易性の観点から考える。

# View と ロジックを分離するからテストしやすい

単一ファイルコンポーネント (SFC) には、コンポーネントの表示に関するTemplete (HTML) と CSS そして、ロジックに関する Script (Javascript) が含まれている。
これは、興味を1ファイルに閉じ込めることができるため、直感的にわかりやすく、好きな人が多いと思う。

その一方で、ロジック部分をテストするだけでも [vue-test-utils](https://vue-test-utils.vuejs.org/ja/) でコンポーネントをマウントするか、`this` コンテキストを明示して method をコールする必要があった。

“`js:例
import options from “./test-target.vue”

/**
* this.count++ するようなメソッドの試験
*/
const state1 = {
coun

webpack入門して仲良くなりたい～基本編～

#仲良くなりたい

開発をしていて、見て見ぬふりをしていた**webpack**…
仲良くなるために何者なのか知ります。

>At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

引用: https://webpack.js.org/concepts/

英語はわかめなのでGoogleに頼みます。

・・・

要するに、仲良くなると素敵な人です。

##webpackってなに

###モジュールバンドラ

webpackはモジュールバンドラとしての役割を果たします。
モジュールはアプリケーション内のファイル(jsファイルとかcssファイルとか)
バンドラはまと

Knexあれこれ(雑多メモ)

# はじめに(次の見出しまで飛ばしてOK)

最近仕事に対する楽しみ方を意識するようになり、今のつまらない仕事が続くのも嫌だったので、6月で辞めますと退職連絡を済ませてきた。
コーディングしてる最中はプライベートでも仕事でも楽しいので、コードをびっしり書くような会社に転職したいと思ったが、個人での活動実績はない。
とりあえず就活に繋がる作品を何か作ってみようと思い立ちこれ1本で大体何とか済ませちゃうNode.jsの勉強を1週間前に始めた。
が、DB処理があまり好きになれなかった。

適当に買った参考書に書いてたDB処理は以下のようなもの

“`JavaScript:sql.js
connection.query(‘SELECT * FROM hoge ‘, function (error, results, fields) { //取得結果に対する処理 });
“`
新卒配属された闇プロジェクトのシステム構成がこれに近い形式で実装されていたことが大体の原因ではあるが。

# 便利なnpmパッケージ Knex
PHP/Laravelあたりに言語/フレームワークを変更しようかなとこっそ

ジェネレーターで関数モナドとStateモナドを模倣してみた

ジェネレーターを DSL のように使って関数モナドと State モナドを模倣してみました。記述をそれっぽく見せることに重点を置いたため、bind や return を正確に実装したわけではありません。

関数モナド（のようなもの）

See the Pen divに対してconsole.logのようなことをする

CodePen で出力結果を貼るとき、コンソールの代わりに div に出力したかったので簡易的に実装しました。簡易的なので `%d` などのフォーマットは利用できません。

See the Pen
output for

初心者がJavaScriptでAtCoder（初参戦）【AtCoder Beginner Contest 154】

# はじめに

– プログラミング歴半年の素人が書いています。
– 不正確な内容、間違いがあったら申し訳ございません。

# Hello, 競プロ！

初めて競技プログラミングなるものに挑戦してみます。
言語はJavaScriptです。調べたところあまりJSでAtcoderする人はいないようですね。今回参戦したコンテストの提出状況をみても、JSの提出は数える程でした。

それでも、初心者がやってみる分には言語の差なんて大したことないと思いますので、JSで今後もやって行こうと思っています。

なにより、私のように初心者の方にとってはJSはとっつきやすくていいのではないでしょうか。

# 今回の結果

AtCoderのコンテストでは、難易度別に複数の問題が出題されます。
今回参加した【AtCoder Beginner Contest 154】では、A問題〜F問題まで6問出題されました。

今回、私が正解できたのは

– A問題
– B問題
– C問題

の３つでした。

## ABC154A – Remaining Balls

A問題は初歩中の初歩。与えられた文字列が一致しているか

コードの難読化について

# コードの難読化について

## 暗号化との違い
### 暗号化
– ソースコードを完全に読めないものにする

### 暗号化
– ソースコードを読みにくくする

## 難読化の目的
– ソースコードを厳重に管理したい
– 盗難防止のためにソースコードの公開を避けたい
– コードの目的の隠蔽や、リバースエンジニアリングの阻止
– 頭の体操
– など

## 最後に
近年では、多くのWebサービスのJavaScriptやCSSのソースコードで難読化がされています。
フロントエンドでは、JavascriptやCSSを難読化して管理するためにwebpackを用いた方法がよく使われています。

また、「難読化」という言葉も、新人のエンジニアでは聞いたことのない方もいるのではないでしょうか。
実際に使われている場面の多いものだと思うので、難読化という言葉と、どうしてそれが使われるのかをぜひ覚えてみてください。

【JavaScript】編集内容が消えて困るページに離脱前の確認をはさむ

Web ページで何かを編集していて、間違ってブラウザバックしてしまったりタブを閉じてしまうと「あっ」てなりますよね。こんなとき、いくつかのサイトでは以下:arrow_down:のような確認ダイアログが出てきて救われることがあります（Qiita の投稿画面でも出てきますね）。


この実装方法を紹介します。

# コード

離脱前に確認ダイアログを出したいページに、以下の JavaScript を置いてください。

“`javascript
window.addEventListener(‘beforeunload’, function (event) {
event.preventDefault() // (1)
event.returnValue = ” // (2)
})
“

Jestでカスタムイベントのdispatchを検証する方法

Jestでカスタムイベントのdispatchを検証する方法です。
調べてあまり情報出てこなかったのでメモ。

# テスト対象

単純にセレクタと、カスタムイベント名を受け取ってイベントを発行する関数を対象とします。

“`trigger-custom-event.ts
export const triggerCustomEvent = (
selector: string,
eventName: string
): void => {
const target = document.querySelector(selector);
target?.dispatchEvent(new Event(eventName));
};
“`

# テストコード
dispachEventで指定のカスタムイベントが発行されたことを検証するので、対象のDOMのdispachEventをモックに差し替えます。
そして、mockのcallsで発行回数、発行イベント名を検証します。

“`trigger-custom-event.test.ts
import { triggerCust

【JavaScript】手軽に綺麗な「要素を矢印で繋いだグラフ」を描く方法（画像付き）

# 概要
JavaScriptでグラフ（ノードとエッジの集合の方）を作りたい。

JavaScriptでグラフを描画できる[d3-graphviz](https://github.com/magjac/d3-graphviz)の使い方や、色変更などできることを調査した。

# 基本の使い方
1.インストールする
簡単な方法は`npm install d3-graphviz`（yarnでも可）
自分でビルドする場合は以下のコードを実行する。

“`sh
$ git clone https://github.com/magjac/d3-graphviz.git
$ cd d3-graphviz
$ npm install
$ npm run build
“`

また、[unpkg.com](http

【JavaScript】プラグイン「Jump.js」のコードを読んでみた　

# はじめに
スキルアップのためにGithubに公開されているプラグインのコードを読み、そこで学んだことをまとめました。
想定する読者は基本的な構文などを学んだけど次に学習する内容や学習方法に悩んでいる初学者の方になります。
実践的なコードの書き方や学習方法、次に作るもの等の参考にしていただければ幸いです。

読んだコードは[callmecavs](https://github.com/callmecavs)さんの「[Jump.js](https://github.com/callmecavs/jump.js)」というプラグインで、webサイトでスクロールアニメーションを実現できます。

# 基本的な使い方
基本的な使い方から見ていきます。
第一引数にスクロールのターゲットになる要素を指定することで、その要素の位置までスクロールさせることができます。指定する要素はノードかセレクタを渡すことができ、セレクタから複数の要素が見つかった場合は1つ目の要素がターゲットになります。また、数値を渡すことで現在のスクロール位置から相対の位置にスクロールします。

“`javascript
Jump

【GAS】Google Custom Search APIを使って検索順位のチェックツールを作る

普段SEOのコンサルを行う中で、「検索順位を定点観測できるツールは何を使えば良いか？」という質問をよくいただきます。

いつもは無難にGRCやSERPOSCOPEなどのツールをオススメしていますが、それらは有料であったり、順位取得のエラーが頻繁に出たりと気軽に使えるかどうかと言えば、必ずしもそうではありません。

もっと気軽に検索順位のチェックをできないかということで、「Google Apps Script（以下GAS）」と「Google Custom Search API」を使ってスプレッドシートに日次で書き込む方法をご紹介します。

※以下は完成形のイメージです。

#システム概要
だいぶシンプルですが、作成するシステムの全体像になります。

[HowTo]Pay.jpを用いたクレジットカードの登録機能実装について/カスタムフォーム版

某スクールのチーム開発にてpay.jpを活用したクレジットカード登録と商品購入機能実装を担当させていただくことになりました！
色々と苦戦しましたがなんとか実装できましたので、以下にまとめてみたいと思います。
今回はクレジットカード登録機能実装までまとめており、商品購入機能に関しては、準備出来次第、別記事として投稿します！

#そもそもPay.jpとは
シンプルなAPI・多彩な機能、分かりやすい料金形態でクレジットカード決済をかんたんに導入できる決済サービスです。手数料も比較的リーズナブル（２．５９％〜）であることと、導入が簡単ということもあり、スタートアップ企業などに多く採用されているようです。
イメージとしては以下のようになっており、一時的なトークンを作成し、取引をすることで、加盟店はクレジットカード情報などの重要な情報を扱う必要がないまま、取引ができます。

PyWebViewで複数のJavaScriptファイルを読み込む

# PyWebViewで複数のJavaScriptを使いたい

PyWebViewで、ウィンドウにJavaScriptを読み込ませたいときには、`window#evaluate_js()`というメソッドを利用します。

このメソッド、複数回呼び出したときは、それぞれのJavaScriptを別々のファイルと認識して処理します、このため次のようなメソッドを作っておくと、HTML5アプリケーション開発により近い感覚でPyWebViewのGUIを作れます。

“`python
def webview_load_elems(window):
“””
引数で指定した任意のウィンドウに、次のCSS、JSライブラリを読み込む
・bootstrap.css
・bootstrap.js/popper.js/jquery.js
・独自開発用の、index.css/index.js
“””
css = [“index.css”]
js = [“index.js”, “classes.js”]
nm = “node_modules”
dist = nm / “boots

【GAS】V8 runtimeに切り替えるとき、claspの人はマニフェストを手動で書き換えること！

# あらすじ：
– GAS (Google Apps Script) はJavaScript 1.6〜1.8という古い構文だった
– 最近それがV8 runtimeというエンジンに変わってECMAScript準拠のナウい構文になった
– Webのスクリプトエディタを使っている人はRunメニューから切り替えられる
– claspを使っている人はローカルのappsscript.jsonを手動で書き換える必要がある

これでわかった人は読む必要なし。

# 詳細：
GASのランタイムがRhinoというのからV8というのに変更になった。
これまでのGASのJavaScriptは1.6〜1.8とかの古いものだったが、ECMAScript準拠のナウいものになったらしい。
めでたい。

参考記事: https://tonari-it.com/gas-v8-runtime/

上の「隣にIT」さん（いつもお世話になります！）の記事の執筆時点では、本来「実行＞Enable new Apps Script runtime powerd by V8」で変更できるが、まだ「表示＞マニフェストファイルの変更」で

javascript知見

シリーズ

物理・数学・プログラムのページについて

概要

javascriptについてわかったことなどをまとめていこうと思います。
参考

関数について

normalFunc()とarrowFunc1()は全く同じということではなくてthisの振る舞いが異なる点に注意。
参考

“`js
// 普通の関数の書き方1
function normalFunc1(x, y){
return x * y;
}

// 普通の関数の書き方2
const normalFunc2 = function(x, y){
return

【5分で動く】Reactで作るイケてるWEBアプリケーション


# 背景
社内でReactを使ったWEBアプリケーションを開発するにあたって、UIフレームワークの導入から認証までやってくれるようなサンプルが見当たらなかったので、今回作成したものをテンプレっぽくして共有します。
これさえあれば、とりあえず簡単なWEBアプリは作れるのでぜひ活用していただければと思います。

# 概要
https://github.com/tonio0720/React-App

## 起動方法
“`{bash}
git clone https://github.com/tonio0720/React-App

cd React-App

# react 起動
cd frontend
npm i
npm start

# express 起動
cd backend
npm i
npm start
““

## 今回利用した

contenteditableな要素への入力をイベントで検知する

# 結論
changeイベントは発火しないけど、inputイベントは発火しています。

# 例

以下のような要素があったとします。

“`html

“`

これに対する入力がなされたタイミングで処理したい場合があります。
そこで、changeイベントで取れるかな？と思って以下のように書きたくなると思います。

“`js
//ダメな例

let editor = document.getElementById(“editor”);
editor.addEventListener(“change”,function(){
console.log(“change”);
});
“`

しかし、入力してもchangeイベントは発火しません。
contenteditableは、次のようにinputイベントで受け取りましょう。

“`js
//よい例

let editor = document.getElementById(“editor”);
editor.addEventListe

個人的にオススメしたいTech系YouTuberたち

僕は普段から『Qiita』以外にもプログラミングの情報収集を
『YouTube』で行っているので今回は
個人的にオススメしたいTech系YouTuberの方々と彼らの動画ベスト③を
紹介していきたいと思います！(独断と偏見が入っています笑)

##①KENTA / 雑食系エンジニアTV
➡https://www.youtube.com/channel/UC_HLK-ksslL-Z_2wiIZDlMg

– もう既にご存知の方も多いと思いますが、KENTAさんはプログラミングのみならずIT業界(自社開発、受託、SES等)に関しても深い知見があり今まで見てきたTech系YouTuberの中でもダントツに質の高い情報を提供されている方です。彼の動画はどの動画も有益だと思いますが中には忙しい方もいると思います。そこで、個人的に特にオススメしたい彼の動画ベスト③を発表します！

####【第一位】モダンなIT企業を見極める7つの技術的チェックポイント
➡https://www.youtube.com/watch?v=Aw8w9qSdZtY

– 就職される方や転職される方がモダンなIT企業を

動画をパララックスする

写真をパララックスにするプラグインの紹介などは結構あったのですが、動画は意外となかったのでメモ。
動画の埋め込み自体あんまり使うことないんですが、どうしてもやらなきゃいけない＆時間かけられない時にさくっと実装できます。

#動画をパララックスさせたい

１） 下記リンク先 backgroundVideo にアクセス、distフォルダ内のjsのどちらかを読み込ませる。
https://github.com/linnett/backgroundVideo

２） 任意のクラスをVIDEOタグにつけて、以下のようなJavaScriptの記述をする。

“`index.html

“`

３）　高さを上書きしたい場合は、