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

(結局Service Workerってなに…？)とならないための基礎知識

# さ、さーびすわーかー？

PWAについて勉強を始めたときに、まずはじめにいきなり知らない単語が出てきました。それが**Service Worker**でした。

PWAの構築方法、チュートリアルはたくさんあっても、それを支える基礎技術である**Service Worker**についての詳細な解説がWeb上に少ないので、ここにまとめます。一部技術開発の経緯や技術仕様、詳細について誤りがあるかもしれませんが、ご指摘いただけますと幸いです。

# よくある勘違い

というか、僕自身PWAの技術=Googleが開発しているもの、と思っていました…。

PWAで調べると、検索結果の一番上にGoogleの詳細な解説記事があるし、プッシュ通知だってGoogleフレンドリーだったし。

# (1)Service WorkerはW3Cから

PWAの基礎となるService Workerの開発元はW3Cです。Googleではありません。

W3Cとは、World Wide Webの始祖の一人であるティム・バーナーズ・リーが創設したWeb技術の標準化を推進する非営利団体です。

ただ、このSer

12/3にFLASHが終わるって話をしました [PlayCanvasセミナー後日談]

#始まり
2019/12/03 火曜日
私はPlayCanvasのセミナーを行いました。

どんなセミナーだったかと言うと、
「[WordPressのリッチコンテンツを簡単に作れるPlayCanvasセミナー](https://partner.gmocloud.com/seminar/2019/1203.html)」
というWordPressを組み合わせるというものでした。

これの大前提としての話が、「2020年にFlashが終わる」ということ。
Flashが終わるので、その代わりにWebGLコンテンツが作れるPlayCanvasを使おう！みたいなセミナーでした。

ちょっとそのセミナーでは話せなかったFlashについて少しお話をしたいと思います。

#Flashの終わり

かつてFlash黄金時代とも言われた2000年前半。
そのころは2chのFLASH・動画板やおもしろフラッシュ倉庫などが聞いたことがあるかと思います。
紅白フラッシュ合戦やFLASH★BOMBなど大きなイベントもあり盛り上がっていた時代です。

Youtubeやニコニコ動画がで始めた当時もまだFlashの時代でし

PlayCanvasのレイキャストについて知ってみる

#前座
レイキャストと聞いて、
その言葉を知っている人はおそらくUnityや3D関連のコンテンツを作ったことがある人だと思います。

そんな私はWebの平面しか作っていなかったので、その言葉の意味はわからなかったです。
じゃあ、レイキャストってなんだ？って人のためにどんなものかわかる範囲で話をばします

#レイキャストとは
多分、もともとはレイキャスティングというレンダリング方法のことだと思う。
> 視点と物体との位置を計算し、その値をつかってオブジェクトを描画する3Dグラフィックス全般を指す

とのことですが、レンダリング方法の話から掘り下げていくと以下のような感じになる。

> ある視点から発射された光線を追跡し、どれかの物体との衝突を検出。
・視点からスクリーンの各方向へ視線を追跡し、物体との交差を調べる。
→交差していれば、その物体は見えている。
・物体表面の点から光線を逆方向に追跡し、他の物体との交差を調べる。
→交差していれば、その点は影に入っている。

上記はレイキャスティングというレンダリングの話なのですが、
ゲーム分野でのレイキャストは一つ目が当てはまるかと。

>

JavaScriptで演算子オーバーロードしてみる(BabelでAST)

# はじめに
この記事は[JavaScript Advent Calendar 2019](https://qiita.com/advent-calendar/2019/javascript)の８日目の記事になります。

実は前々から思っていたことがありました。
それは**「JavaScriptでも演算子オーバーロードしたい…!」** です。
ということで今回やってみました。

# アプローチ方法
JavaScriptは暗黙的に呼ばれる関数群がいくつかあります(`valueOf`や`toString`など)
ただこれらをどういじっても演算子オーバーロードにはなりません。
そこでタグ付きテンプレートリテラルを頑張って解析するかなぁとか考えていたのですが
あまりにも見栄えが悪かったので最終手段であるASTをいじっていく方法に決めました。
今回はbabelのプラグインとして実装します。

# 制作物
先に作ったものを載せます。
https://github.com/taqm/babel-plugin-operator-overload

npmへ上げたかったのですが
色々とトラブルが重な

Vue3到来記念。Vueのアレって結局なんだっけシリーズ。〜render関数 編〜

## はじめに
こちらは『[DMMグループ ’20卒内定者 Advent Calendar 2019](https://adventar.org/calendars/4156)』8日目の記事になります。

実装のみを見たい方は「render関数でIconコンポーネントを作る（準備編）」からご覧ください。

## 本題：render関数ってなんだっけ？
Vue.jsも少しばかり時間が経ってきたのかな？と思うこの頃ですが、ご存知の方よりも知らない（使ったことない）という方が多いであろう **render関数** についてお話します。

### 1. そもそも
まずrender関数が目に入るのは **main.js**ですが、それがこちら。

“`javascript:main.js
new Vue({
render: h => h(App)
}).$mount(“#app”);
“`

[@vue/cli](https://cli.vuejs.org/)でVueプロジェクトをインストールすると作成されるものになりますが、この中に記述されている **render: h => h(Ap

[Sapper] export で 完全静的サイトを作る [Svelte]

( Sapper のクセの強い Hello World 画面 )

これから来るとか来ないとか、海外ではもう来てるとか言われている web フロントエンド JS のフレームワーク（コンパイラ）の **Svelte**。
今回はその Svelte を Web アプリケーション制作用途に拡張するフレームワーク、**Sapper** のお話。

{参考}

– [最近名前をよく見かけるsvelte/sapperを試してみた ~その1 導入編~](https://qiita.com/inagacky/items/bac20282d44737e9740f)
– [Vue使いなら秒で覚えられるSvelte入門](https://qiita.com/

Twitterのブロック欄でブロックした理由を設定できるユーザースクリプトを書いた話

# はじめに
この記事は東京高専プロコンゼミAdventCalendar② 8日目 の記事です．
①https://adventar.org/calendars/4321/
②https://adventar.org/calendars/4322/

[@ryu4car](https://twitter.com/ryu4car)さんの[記事](https://h2so4.hatenablog.com/entry/2019/12/07/004716)を見て今日のカレンダーが埋まっていないことを知ったので急遽，記事を書くことにしました．

書くことにしたのは良いのですが特にアイデアがなかったので，[@_sotaatos](https://twitter.com/_sotaatos/)の[過去ツイート](https://twitter.com/_sotaatos/status/1113377907525640198)から着想を得て「Twitterのブロック欄でブロックした理由の設定機能」を作ることにしました．

# 何で作るか
最近遊んだのもあって，[Tampermonkey](https:

webpackでTypeScriptをトランスパイルする

webpackを使う代表的なシーンの１つがTypeScriptのトランスパイルではないでしょうか。
ここではその手順を簡単にまとめておきます。

webpackの基本的利用方法は[こちら](https://qiita.com/zaburo/items/710ab1cba98daf85ad9b)をどうぞ。

## 準備

では、準備から。node.jsはインストールされているものとします。

### 作業場所の作成

まず、作業場所の確保。ディレクトリ名は何でもいいです。
package.jsonを使いたいのでnpm init -fしておきます。

“`bash
mkdir ts-webpack
cd ts-webpack

npm init -f
“`

### モジュールのインストール

続いて必要なモジュールのインストール。

“`bash
npm install –save webpack webpack-cli typescript ts-loader
“`

### 必要ファイルの作成

ここで使うファイルを全て生成しておきます。

“`bash
touch i

PDCAを物理的に回すサービスを Vue.js + typescript で作ってみた（RTA）

この記事は [ドワンゴ Advent calender 2019](https://qiita.com/advent-calendar/2019/dwango) の7日目です。（日にち変わってしまった…）

おばんです。ドワンゴジェイピーという音楽配信サイトのバックエンドを保守している者です。
今回は仕事のネタではなく、趣味で作ろうかなと思っていたサービスを、この機会を借りて作ってみた話をします。
作り始めるのがギリギリになってしまったので、RTAだと開き直ります！

# 何を作ったの

弊社の Slack には「経済が回る絵文字」があります。社内オークションチャンネルや、お金の話題をするチャンネルで頻用されます。
シュールさが大好きで HTML で再現してみたいなあと常日頃思っていました。

私は「PDCAが回る」ものを作りました。せっかく PDCA なので、入力できる機能もつけようかなと。
ついでに TypeScript の肩慣らし。

動くものはこちらです: https://irimo.github.io/rolling-pdca/dist/

– 右横の PDCA がスクロ

JavaScriptでボタンの表示を変更

“`

あなたのことが好きです。結婚してください。