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

カルネージハートとは関係ないJavaScriptでReferrerを書き換える正しい方法

カルネージハート Advent Calendar 2019 9日目の記事です。

今回はカルネージハートとは全く関係ないJavaScriptでReferrerを書き換える正しい方法の話です。

# はじめに

Referrerを書き換える必要なほとんどないと思いますが、サイト内でのリダイレクトのURLによって通知を切り替えるロジックが必要になったので、Referrerを書き換える必要が出てきました。

`/login`から`/home`
`/register`から`/home`
など

## 結論

[Object.defineProperty()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)を使って書き換える

“`js
Object.defineProperty(document, “referrer”, {
value: location.href
});
“`

こんな感じで書き

VBScript互換な自作言語 OpenVBS

# OpenVBSとは？
これはモダンなBASICスクリプトエンジン、自作のJujubeコアを搭載し macOS, Linux, Windows に対応している。VBScriptと互換性があり、モダンな機能達が拡張されている。クラシカルなASPを実行するためのHTTPサーバも提供されており、macOSやLinux上でASPを実行可能である。

## 特徴
* VBScript互換
* 既存スクリプトは無編集で実行可能が目標
* JSONに対応
* 配列:”[]”や連想配列:”{}”を オブジェクト<->文字列 変換可能
* クロージャに対応
* クロージャを用いたオブジェクト表現可能
* 役割別”=”演算子に対応
* “=” // 自動
* “:=” // 常に代入
* “==” // 常に比較
* 関数の引数省略に対応
* デフォルト引数指定により可変個引数可能
* Returnステートメントに対応
* return 123
* エラーハンドリングに対応
* “On Error GoTo Catch”, “On

Service Workerを理解した上で、Workboxを使ってみる

この記事は[ギフティ Advent Calendar 2019 – Qiita](https://qiita.com/advent-calendar/2019/giftee) 8日目の記事です。

今回は、前々から技術的に気になっていたService Workerを触って得られた知見について書いてみたいと思います。

# Service Workerとは
– ブラウザがバックグラウンド(別スレッド)で実行するスクリプト(及びそのための仕組み)。
– メインスレッドで実行するのは、Webページ用の処理(=レンダリングや、ユーザーインタラクションに応じた処理など)。
– 昔々はAppCacheというものがあったそうです(現在は非推奨)。
– AppCacheについては、弊社技術ブログの[こちらの記事](https://blog.giftee.dev/2019-06-25-techbash/)をご覧ください(宣伝)。

## 何ができるのか
– ページからのリクエストをプロキシすることができます。
– メインスレッド上の処理を邪魔することなく何らかの処理を行うことができます。

リーダブルコード 鍵となる考え方

リーダブルコードを読んで、自分にとって必要な箇所（全部ですが）のメモ。
書籍の中でも**鍵となる考え方**として書かれています。

## 読みやすさの基本定理

– コードは理解しやすくなければならない
– コードは他人が最短時間で理解できるように書かなければいけない

## 表面上の改善

– 変数、関数名に情報を詰め込む
– 明確な単語を選ぶ
– 気取った言い回しよりも明確で正確なほうがいい
– 汎用的な名前を避ける（あるいは、使う状況を選ぶ）
– *tmp*,*it*,*retval* のような汎用的な名前を使うときはそれ相応の理由を！
– 抽象的な名前よりも具体的な名前を使う
– 例) *× ServerCanStart()* → *○ CanListenOnPort()*
– 接尾辞や接頭辞を使って情報を追加する
– 例) ミリ秒を表す変数名 *〇〇_ms*
これからエスケープが必要な変数名 *raw_〇〇*
– 名前の長さを決める
– スコープの大

JavaScriptベストプラクティスのまとめ

昔書いて社内共有していた記事です。DOM操作を直接することはなくなっていますが、
なにか参考になることがあれば幸いです。

# 記事リスト
– [【翻訳】JavaScript ベストプラクティス パート1](http://postd.cc/javascript-best-practices-part-1/)
– [【翻訳】JavaScriptベストプラクティス パート2](http://postd.cc/javascript-best-practices-2/)
– [JavaScriptベストプラクティス30選-jsEdu](http://efcl.info/2010/1015/res1985/)

# 理解しやすい変数名にする
変数名や関数名は簡単で理解しやすく短いものにする。
少し長い名前を付ける場合も、動詞＋名詞の組み合わせがいい。

“`js:悪い変数名
// 悪い変数名1
x1 fe2 xbqne

// 悪い変数名2
incrementerForMainLoopWhichSpansFromTenToTwenty
createNewMemberIfAgeOverTwent

React + dat.GUI でササッと入力GUIを実装

最近、ジェネレーティブアートに興味があって
p5.jsとか使ってなにかCGアート作品作りたいなぁと考えています。

そのようなCG作品が沢山投稿されてる[Codepen](https://codepen.io/)っていうサイトがあります
Codepenとか覗いていると、閲覧中によく右上にあるGUIでCGのパラメータを
変更できるパーツがあって、あれって何かなあとずっと疑問に思っていたので調べました。

# dat.GUI とは


https://github.com/dataarts/dat.gui

Googleのデータアート部門の人が作った、Javascript製の
パラメーター変更のためのグラフィカルで軽量なUIです。

簡単な書き方でササッと入力用GUIを追加できるので、CGアート界隈

【初心者用】クイズJavaScript

##はじめに
JavaScript初心者向けのクイズ記事です！

内容は主に、**JavaScript本格入門 モダンスタイルによる基礎から現場での応用まで** を参考にさせていただいています。
[JavaScript本格入門 モダンスタイルによる基礎から現場での応用まで](https://www.amazon.co.jp/%E6%94%B9%E8%A8%82%E6%96%B0%E7%89%88JavaScript%E6%9C%AC%E6%A0%BC%E5%85%A5%E9%96%80-%EF%BD%9E%E3%83%A2%E3%83%80%E3%83%B3%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%AB%E3%82%88%E3%82%8B%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E7%8F%BE%E5%A0%B4%E3%81%A7%E3%81%AE%E5%BF%9C%E7%94%A8%E3%81%BE%E3%81%A7-%E5%B1%B1%E7%94%B0-%E7%A5%A5%E5%AF%9B-ebook/d

【モダン技術習得への道】DockerでのNuxt.js / Vuetify開発環境構築による、迅速かつ効率的なプロジェクト作成

## 概要
– 今回はDockerを利用して、Nuxt.js / Vuetify開発環境を迅速に構築する。
– 下記の2つのフレームワークを利用することで、迅速に効率的におしゃれな画面を作成することができる。
– [Nuxt.js](https://ja.nuxtjs.org/)(Vue.jsのアプリケーションフレームワーク)
– [Vuetify](https://vuetifyjs.com/ja/)(マテリアルデザインフレームワーク)

## 結論
– 下記の2つのコマンドで、Nuxt.js / VuetifyのDocker開発環境が作成・起動され、迅速に開発を始められる。
– `docker-compose build`
– `docker-compose up -d`
– 最終的なフォルダ構成は下記。

“`
.
├── README.md
├── node_modules
├── nuxt.config.js
├── package.json
├── src
└── yarn.lock
└── .dockerignore
└── Docker

タイルサーバーを作りたい

# ドローンの航空写真からタイル画像を作成するサーバーを作りたい

OpenArerial Mapで十分利用可能だが、自分専用のタイルサーバが欲しくなったので、DrronBird専用のタイルサーバを作ってみようと思う。
他にも、オープンデータで公開された自治体の航空写真を取り込むことによりWebでの二次利用ができればと思っています。

## タイル画像とは

ズームレベルごとに地球を分割。各タイルを256x256pixcelに分割しブラウザで地図を見るときの通信量を絞る機能
詳しい内容は、説明URLを参考に [正方形タイルによる地図の表現:TrailNote](https://www.trail-note.net/tech/tile/)

## どうやって作るのか

### QGISを使う場合

QGISのプラグインのQMetaTileツールを使って作成

### GDALツールを使う場合

GDALのgdal2tilesを使って作成 [gdal2tiles](https://gdal.org/programs/gdal2tiles.html)

“`plaintext

gdal2

Chrome Extension で自己満に浸る

# はじめに
今日の東京の最高気温は昨日よりも 4 度ほど高かったそうですが、それでも寒いですね。
例年思いますが、1 月には一体どうなってしまうのか。
すでに私も風邪を引きそうなのですが、なんとなんと、これは執務室になぜか冷房が入っていたからなんです。
入社 1 年目の研修で、いまの職場には私含め数人の新人が 1 週間ほど前から出勤しているのですが、今日の今日まで誰も気づかず！
私は特に寒がりなのでマフラーをしながら作業をしていたのですが、明日からはきっと屋内らしい見た目になりそうです。

さて突然ですが、みなさん TRPG はお好きですか。
私は大好きです。

「毎週セッションがあれば良いのに」

そう思うくらいには好きです。
しかし実際には、多くても月一程度の頻度でしかセッションができていません。
TRPG は複数人で集まってわいわいと遊ぶゲームです。
全員の都合がつくことはなかなかないのです。

現実に誰かの家に集まるなどして TRPG をすることをオフラインセッション（オフセ）と呼びますが、遠方の友達が居たりなどすれば物理的に集合するのは大変です。
そのため、チャットツールな

Slack で真の Markdown を使う

この記事は [Speee Advent Calendar 2019](https://qiita.com/advent-calendar/2019/speee) 11日目の記事です。
Slack で “真の” Markdown を使う方法について解説します。

## 前段

### あんた誰？

**[jsx-slack]** という JavaScript 用オープンソースライブラリを開発している人です。

– **開発の取り組みに関する紹介**
– 入門編: **[Slack Block Kit のメッセージをよりメンテナブルにする jsx-slack のご紹介](https://tech.speee.jp/entry/2019/04/23/094015)**
– 実践編: **[実践 jsx-slack: jsx-slack + Bolt で Slack のモーダルを自在に操ろう](https://tech.speee.jp/entry/2019/10/16/100022)**

#### [jsx-slack] の概説

[jsx-slack] は、 Slack が提供す

縦にたたむtransitionを頑張って再利用しやすい形で作る

# tl;dr
これを作る

– UIアニメーションはユーザに対して付属的な情報を効果的に伝えることができるので、ビシバシ使っていきたい
– 特に頑張ってプレーンなCSSでアプリケーションを作っている人は、transitionを作るのが結構辛かったりする
– transitionを気合い入れて再利用しやすい形で作ると、使うときの心理的障壁を下げることができて、アプリケーションの品質向上に寄与する
– アニメーションによってはDOMのラッパーが必要な場合とかもあるけど、最悪VNode触ることでシンプルな使い勝手を確保できる

# 前提
この記事では縦に折りたたむtransitionをプレーンなCSS(ここではCSSプリプロセッサを使うかどうかは問わず、CSSフレームワークやUIライブラリをベースに構築しない方針を指します

Qiita APIを使って、特定の記事をストックしているユーザーをHTMLで一覧化する　途中

大昔にHTMLとJavaScriptを触って以来、はじめてHTML5とjQueryつかってみた。

# Qiita APIをcUrlで呼び出す

`https://qiita.com/ユーザ名/items/記事ＩＤ`
のストックユーザーを調べたい場合、

`curl “https://qiita.com/api/v2/items/記事ＩＤ/stockers”`

を実行すると、JSON形式の配列が返ってくる。

なお、Windowsでも、最新のWindows10であれば、コマンドプロンプトから`curl`を実行できる。
※事前に`chcp 65001`でコマンドプロンプトのエンコーディングをutf-8にしておくとよい。

# HTMLで整形する

やりかけ：直接JSONの文字列を埋め込んでいるので、そこを上記URLとかから読み出すようにしたい。

“`html:tmp.html

2020年はねずみ年！画面にねずみが侵略してくるブックマークレットを作った！

クソアプリ2カレンダー11日目担当、[@issy_s16](https://twitter.com/issy_s16)です！
自称ほっこり箸休め担当、よろしくお願いします！

# ? ねずみが侵略！ブックマークレット
[](https://gyazo.com/c1d0bdb5062bb4e50273131173f0ac8b)

今年ももう終わりますね、、2020年は**ねずみ年**です。
ということで！今回は **画面にねずみが侵略してくるブックマークレット** を作りました！

# ? 遊び方
##### 1️⃣ 以下の画像の参考にソースコードをURLとしてお気に入りに追加してください！

[](https://gyazo.com/b5c665e9e1f3158327b82c53

Vue CLIでビルドするときに、アセットのパスにダイジェストをつける

Vue CLIでは、ビルド時のオプションなどでアセットファイルにダイジェストをつける設定がありません。

下はVue CLIで作ったプロジェクトをビルドしてできた `dist` ディレクトリの中身です。
各ファイルの拡張子の前についている文字列はダイジェストかと思いきや、何回ビルドしても変わりません。

そこで、 `vue.config.js` に細工します。このファイルは `vue create` した時点では作られないので、自分で作ります。

“`vue.config.js
const uuid = require(‘uuid’)

module.exports = {
assetsDir: `assets/${uuid.v1()}`
}

非Javascriptエンジニアのための「Javascriptの単項演算子」

[前回の記事 – 非Javascriptエンジニアのための「Javascriptの算術演算子」](https://qiita.com/akumachan/items/abb4d31daa31bc2f845b)

ワガハイはITエンジニアのアクマちゃん([@akumachanit](https://twitter.com/akumachanit))デモ！
この記事は[非JavascriptエンジニアのためのJavascript入門　3日遅れのひとり Advent Calendar 2019](https://qiita.com/advent-calendar/2019/js-inst-for-nonjs-engineer)の記事デモ！

今回は[前回](https://qiita.com/akumachan/items/abb4d31daa31bc2f845b)紹介した算術演算子以外の演算子について説明していくデモ！

#単項演算子
ドキュメントに載っている単項演算子の一覧デモ。

– 単項加算 (+)
– 単項負値 (-)
– ビット否定 (~)
– 論理否定 (!)
– delete

【Composition API】StoreパターンでVuexを使わずに状態管理をする

# はじめに
こんにちは。@chan_kakuです！今回は[Vue Advent Calendar 2019](https://qiita.com/advent-calendar/2019/vue) 11日目の記事です。

みなさんComposition API使っていますか??今年のVue Advent CalendarはComposition APIの話がとても多いですね！
ここからみなさんがComposition APIに非常に関心があることがわかります。
今回は来たるVue 3.0で入るComposition APIをつかってVuexを使わずにStoreパターンを利用して簡易状態管理をしてみたいと思います！

## そもそもVuexって何？
今更ですが、初めてみたという方のために説明を入れておきます。
[Vuexの公式ドキュメント](https://vuex.vuejs.org/ja/)をみてると最初にこのように書いてあります
>Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというル

jQueryのmodal メモ

#HTML
“`html:filename.html

Open

モーダルウィンドウ
静的な Web サイトをどうやって速くするか

どうも、源武です。

「[N高等学校 Advent Calender 2019](https://qiita.com/advent-calendar/2019/n-highschool)」の 11 日目を担当します。

今回は、静的な Web サイトの高速化についてのお話です。

# 静的な Web サイトって、なに?
あらゆるアクセスに対し、**一意の内容の Web ページを配信する形式のサイト**です。

要は、htmlファイルなどが、そのまま表示される形式です。

ランディングページや、ポートフォリオなどによく見られます。

# 静的であることのメリット・デメリット
ここまでを踏まえて、静的な Web サイトのメリットを考えましょう。

## メリット
– サーバーへの負担が少ない
– サーバーやクライアントのことを考える必要がない
– シンプル

## デメリット
– サーバーサイドでコンテンツを動的に変更できない

内容次第では、デメリットを気にする必要はないと思います。

# 速度の向上をどのように検討するか
私の Web サイト ([genbu.studio](https

scrollのメモ

#HTML
“`html:filename.html





“`

#CSS
“`css:filename.css
/*scroll-top*/
.scroll-top {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 100;
background-color: #999;
opacity: .8;
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
color: #fff;
}
.scroll-top:hover {
cursor: pointer;
opacity: 0.8;
}
“`

#JavaScript
“`js:filename.js