f@ctor

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

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

宮本さんjest導入 ~Typescript導入~

# Typescript導入
前回の記事 [宮本さん ~jest導入~](https://qiita.com/taichi0514/items/e3037bc21631d4a92008)
今回はテストをTS化するのでGAS依存のTS化の話はしないです。
ていうか対応してない。

## 環境構築

特にしていないです。
とういのもローカルで使用しない + GASではpushした時点でTSをコンパイルしてくれるから
VScode入れたらTSが同時にインストールされるのでダイジョブ
TSのバージョン固定しないと行けない場合はnpmでバージョンしてからインスコ
`tsc –init` すればtsconfigを生成してくれのですが特に指定したいルールがなければ
tsconfigは必要ないです。tsconfigがなくともデフォルトのルールが有るようなので

## 下調べ

TS書くとなっても全然わかってないのでとりあえず型定義の仕方からググりました。

### Type Annotation

“`sample.ts
const x: number = 1;
“`

“`解説.ts
co

元記事を表示

フロントエンドのテストについて考える@2019/12

Webフロントエンドのテストに関して、数年前に比べるとかなり手法が確立されました。そんな中、やはりテストそのものに対する考え方というのはずっと役に立っていると感じます。

この記事では、何をどのようにテストするのか、テストで何を目指すのか。そのようなことを書いてみたいと思います。

## TLDL

全体的に抽象的でポエムっぽい記事となっております！！

## テストは品質をあげない

テストはソフトウェアの品質を測る指標にはなりますが、**テストそれ自体は品質を上げるわけではありません**。

例えば、むやみにカバレッジをあげることはコストを増やしますし、あまり意味もないでしょう。**そのため、テストの目的や種別、それぞれで担保すべき要素を理解しておくことが重要だと考えます**。

## テストの役割とは

テストをすることで、結果的には品質に貢献しますが、あくまでひとつの要素として捉えておくことが必要です。「品質」は思うより大きな言葉で、そもそもの技術的なアーキテクチャはもちろん、技術以外にも多くのステークホルダーが関わっています。

**ソフトウェアにおけるテストの役割は、

元記事を表示

WebAuthn の動作デモをFirebaseで作ってみた

パスワードレス認証の旗手である WebAuthn、早くサービスに普及して欲しいですね。
認証の手間が省けるうえセキュリティ強度も上がるし、ユーザーにとってメリットが多くて良いことづくめです。
Yahoo Japan や GitHub、Backlog などサービスでの導入事例も増えてきていますし、いずれ自分も実装をする機会になるかもしれません。
ただ、WebAuthn の仕組みや解説の情報はあるものの、実際に動作するサンプルとその実装コードの情報とかがあまりないように思えたので、いつ案件が来ても慌てず対応できるように、動作デモを作りながら実装するための仕組みや手順をまとめてみました。

# WebAuthn 動作デモ

以下から実際に動いてるものを確認できます。

動作デモ： https://webauthn-demo.firebaseapp.com/
ソースコード： https://github.com/okamoai/webauthn-demo

**注：**

– このデモではビルドイン認証器のある環境のみで動作検証しています。USB や NFC のいわゆる cross-platf

元記事を表示

js table操作

“`html


title

check id name
1 sample1

Nuxt.js、Google Apps Script、スプレッドシート（DB）を組み合わせて検索アプリケーションを作ってみた

Google Apps Script（GAS）で Nuxt 動かしてみたら面白いのでは？
と思い試していたら動いたので、スプレッドシートをDBにして検索アプリケーションを作ってみました！

Nuxt.js の SPAモードを GAS を使って実際に GAS で Nuxt を動かしているURL
https://script.google.com/macros/s/AKfycbw9rOqkFPqP4Ym3n7goiL0tI4V3cx0UTOjVM8DTHT8FRG3ogjJs/exec

そして Google サイトで上記 URL を埋め込んで完成です。（GAS の 分かりづらい URL を隠すため）
https://sites.google.com/view/nuxt-gas-webapp/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35595/6385ce73-f0b3-a434-5d3a-466755e14517.png)

[DBとしてつかっているスプレッドシート](https

clojurescriptのshadow-cljsについて

# shadow-cljsとは
shadow-cljsはclojurescriptのコードをコンパイルするなど、ビルドするためのツールです。clojurescriptのビルドツールはfigwheel-mainなど他にもいくつかありますが、npmやyarnなど標準のjavascriptの環境と親和性がよいことが特徴で、npmのパッケージが直接利用できることはとても便利です。

shadow-cljsはThomas Hellerによって開発されています。

shadow-cljsに必要な環境は以下の通りです。

– node.js (v6.0.0+, most recent version preferred)
– npm (comes bundled with node.js) or yarn
– Java SDK (Version 8+, Hotspot)

# shadow-cljsのプロジェクト作成
npxをインストールします。npxを用いるとプロジェクト、node_modulesフォルダ内のバイナリをパス指定無しで直接実行出来るようになります。

“`bash
npm ins

Google ColabでJavaScriptしよう

この記事は[ラクス Advent Calendar 2019](https://qiita.com/advent-calendar/2019/rakus)の22日目です。昨日は@miracle-FJSWさんの[【PHP7.4新機能】弱参照(WeakReference）とGCとメモリリークについて整理したよ！](https://qiita.com/miracle-FJSW/items/f35c3e90a5d14eb6eba3)でした。

—

今年は弊社で~~ようやく~~Google Driveが導入されたのでプログラマー必須の追加アプリ[Google Colaboratory](https://colab.research.google.com/notebooks/welcome.ipynb?hl=ja)（以下、Colab）について書いてみようと思います。

ColabはWeb上で完結する計算機環境であるJupyter Notebook[^jupyter]をGoogleDriveに対応させたものです。ColabではGPUの無料枠があるところも人気の一つ。

[^jupyter]:

SkyWay API + Rails6 + Vue でビデオチャットアプリを作る②　複数人同時接続

SkyWayAPIを使って複数人でのビデオチャットアプリに挑戦します!
先週投稿した「[SkyWay API + Rails6 + Vue でビデオチャットアプリを作る①](https://qiita.com/natsukingdom-yamaguchi/items/e996688dad18983d0143)」の続きです。

#目標物
複数人が同時に参加できるビデオチャットアプリの作成。
部屋は既に作られていて、そこに入室したところから開始です。

#注意
前回の回で使ったコードを基本使い回します。
railsのプロジェクトがあること、webpackerがインストールされていることを前提に進めていきます。

#サンプルコードの分析
SkyWayが提供している複数同時接続のパターンのDEMOです。
https://example.webrtc.ecl.ntt.com/room/index.html

そのソースコードです。
パッとみてよくわからない部分があったので、上から順にコメントをつけていきました。

githubリポジトリ
https://github.com/skyway/sky

Svelte3 クリップボードにコピーするボタンを作る

Svelte3でクリップボードにコピーするボタンを作りたい時の実装方法デス。

こちらで動作を検証できます
https://svelte.dev/repl/3194502389af4e22991f8bb0c61d65cf?version=3.16.5

## コピーボタンの表示コンポーネント
“`html


OTHERカテゴリの最新記事