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

Shikha Dating Services in bangalore


JavaScriptの基礎知識・文法

# 背景
JavaScriptの基礎知識を備忘録として残す。

## よく使う基礎知識・文法
・出力の仕方

“`javascript

console.log(“文字列”or数値);
“`

・コメントアウト
//を最初につける

“`javascript

// コメントアウト
“`

・変数の定義

“`javascript

let 変数名＝値;
“`

・定数の定義

“`javascript

const 定数名＝値;
“`

・テンプレートリテラル（変数展開）
※バッククオーテーションで囲む。

“`javascript

const name=“tanaka”;
console.log(`こんにちは${name}さん`);
“`

・if文の書き方

“`javascript

if (条件式){
処理;
}
“`

・比較演算子

“`javascript

a===b // aとbは等しい
a!==b // aとbは異なる
“`

・else ifとelseの書き方

“`javascript

If (条件式

JavaScriptで四捨五入、切り上げ、切り捨て

## メモ

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil
の、10進補正 (Decimal adjustment) のところを丸ごとコピペする。
※50行目からの使用例をみると使い方がわかる

標準の関数もあるけど（Math.ceil()とか）、やりたい事とマッチしないはず（具体的にどうだったかは忘れたけど。。）

Yandex Translation API を使って翻訳機能を試す

# はじめに
音声認識を試してみたら、翻訳できたら便利だなと思ったので、簡単に使えそうなAPIを探してみた
前回：[Speech Recognition API でブラウザ音声認識を試す](https://qiita.com/yunayunanaka/items/75c1ade41b6156d304d8)

# [YandexTranslation](https://github.com/RytNszn/mylaps-dashboard)

## 概要
– Yandexがロシア版Googleみたいなもので、そのYandexが出してる翻訳API
– APIの使用には無料登録が必要
– 使い方が簡単そうだったの試しに使ってみた

## 準備
### Yandexに登録
[登録画面](https://passport.yandex.com/auth/add?origin=translate&retpath=https%3A%2F%2Ftranslate.yandex.com%2Fdevelopers%2Fkeys)
![1.PNG](https://qiita-image-store.s3

Twitterボタンを設置

#Twitterボタンを設置

Twitter公式のやつ
https://publish.twitter.com/#

上記URLでパラメータとかを設定するとコードを生成してくれる

“`html:TweetButton.html
Tweet

“`

ので、それをコピペするだけ　(scriptタグの記載場所はどこでもOK)

##注意事項
– リダレクトができない環境だと使えない
– リダイレクト禁止するChrome拡張を

【Swift・Objective-C】UIWebView・WKWebViewでJavaScriptを実行する方法

#UIWebViewでのJavaScriptの実行
UIWebViewのViewに対して**stringByEvaluatingJavaScript**という関数を実行する事で、引数に設定されているJavaScriptの関数が実行されます。

“`
//Swift
uiWebView.stringByEvaluatingJavaScript(from: script)

//Objective-C
[self.uiWebView stringByEvaluatingJavaScriptFromString:script];
“`

###サンプルコード
例としてweb側のコードで定義された関数を実行する場合のサンプルコードを以下に記述します。
**HTML + JavaScript(Web側のコード）**

“`
function sum(a, b) {
return a + b;
}
“`
**iOS（ネイティブ側のコード）**

“`
//Swift
var jsScript = “sum(2,4)”

let result = uiWebView.stringByEv

TypeScript の Number のいろいろについて

## Number とは ?
プリミティブな値である `number` のラッパーオブジェクトのこと
number に対する様々な情報・メソッドを提供する

“`ts:生成方法
// ラッパーで Number オブジェクトを生成する
const wrapper = new Number(value);

// これはラッパーオブジェクトではない
// instanceof で Number を比較すると false になる
const unWrapper = Number(value);
“`

## メソッド

“`ts:記述方法
const sample = Number.${method}(value);
// or
const sample = method(value);
“`

### isNan

“`ts:isNaN
Number.isNaN(value);
“`

渡された値が NaN であれば true を返す
このときの NaN な値とは **数字以外、NaN 自身、falsy な値** が該当する

#### 【こんなときに使ってます】

– ダウン

パッケージ管理ツール「npm」を初学者が理解するまでの過程を記録

先日Laravelを導入して、過去にPHPフルスクラッチで作ったサービスをLaravelに移行した。

cssやjs、vue.jsをlaravelで使用する際、その過程で「パッケージ管理ツールのnpm」が登場したが、正直「何のパッケージを管理するの？」「そもそも管理って何をどう管理するの？」「一体何のメリットがあるの？」と意味不明だった。

そこで今回、パッケージ管理ツールである「npm」について、ちゃんと理解したかったので本腰入れて勉強してみた。

この記事はその過程を記録したものです。

※随時更新です。間違った理解がある場合はどうかご指摘お願いします。

##npmとは
一言で言うと、npmはnode.jsの「パッケージ」を管理するツールのことを指すとのこと。
正式名称は「Node Package Manager」

名前の通りだが、 当然分からない。ここでさっそく疑問が２つ。

nodo.jsとパッケージという言葉だ。

###node.jsって何？

node.jsは何かというと、サーバーサイドでjavascriptを実行できるようにしてくれるプラットフォームのような物。

Fetch APIにタイムアウトをつける

#Overview

Fetch APIを当たり前に使うわけですが、これタイムアウトって何秒なんだろう？という疑問からタイムアウトを実装することにしました。
タイムアウトがないとユーザーがブラウザ上でいつまでも応答を受け取れなかったり、クラウド上だとタイムアウトまで終了せずにコストが増大します:scream:
そんなことにならないよう、調査した結果を載せておきます。

#Target reader

– Fetch APIでタイムアウトや中断の方法を知りたい方。

#Prerequisite

– ブラウザはIEを除いた主要ブラウザとする。(IEだとFetch APIがないからpolyfill…)
– Node.jsのバージョンはV10系とする。

#Body

## ブラウザ編

MDNでFetch APIのタイムアウトのオプションを探してみるが見つからない。
そんな中、取得の中止というものが見つかる。
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API#Concepts_and_usage

>取得の中止
ブラウザ

Kinx ライブラリ – Range 追加機能

# Range 追加機能

以前の以下の記事にも同じ内容を追記しました。

* [Range, Enumerable, for-in](https://qiita.com/Kray-G/items/821eeba150a86d93766d)

## 添え字 for String, Binary, Array, and Range

これら 4 種類のオブジェクトに対して、配列インデックス形式の添え字指定に `Range` を使用できるようにしました。下記の説明は、Range for Range 以外は対象が違うだけで **ほとんど同じ** です。

### Range for String

通常の文字列への要素アクセスは、その位置の文字コードを返す。

“`javascript
var str = “abcdefghijklmnopqrstuvwxyz”;
System.println(str[25]); // 122
System.println(*str[25]); // ‘z’
“`

Range オブジェクトを引数に渡した場合、その範囲の部分文字列を返す。`Stri

CORSを使わずに別のサイトのHTMLファイルが読めないか試行錯誤して完全敗北した記録

#Overview

セキュリティ上の観点から、通常別のサイトからのデータは取得できない。
しかし、許可されている別のサイトならデータを取得を可能にするCORSという仕組みがある。
これのおかげでセキュアながら、連携したい部分とは連携できるようになっている。
しかし、全く関係のないサイトにはCORSの設定ができないため、データが取得できないという厳しい制約がある。

いろんなサイトのOGP画像をサーバーを介さずに取得してプレビューを作ろうと考えた。
HTMLファイルの取得で以下のよく見かけるエラーに遭遇。

“`terminal
Access to fetch at ‘‘ from origin ‘http://localhost:3000’ has been blocked by CORS policy:
No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
“`

HTMLファイルだけならどうにか取得する方法あるんじゃないか？
そもそもど

私がどうやってHTML/JavaScript を独学しているか（現在進行中）

# はじめに
以前 HTML とか JavaScript に関する記事をいくつか書いていたのですが、肝心の「HTML/JavaScriptをどうやって勉強しているのか」について書いていないことに気づいたので、この記事で公開したいと思います。**試行錯誤中なので、この記事は随時更新されます**。

# 基本方針
基本方針は単純で、**「技を盗む」**です。もちろん、**CSS のデザインは盗みません**。「この部分は JavaScript で書くとこのように効率化できるんだ」「こういう便利なプラグインがあるんだ」「““の部分はこうすればいいのか」というのを勉強していきます。
## すぐに簡単なHTMLコードを作ってみよう
[以前の記事](https://qiita.com/AlohaTech/items/0d0bca1fa9bed1b22eff)で紹介したHTML変換サイトを使えば、すぐにHTMLコードを生成できるので、MS Word と対比しながらHTMLの書き方が分かります。

– “https://wordtohtml.net/“ (有料の Pro 版もあります

Firebase Authenticationを利用する【Javascript、Vue.js】

# Firebaseとは

Firebaseは、Googleが提供するバックエンドサービスです。いわゆる、**BaaS**(Backend as a Service)です。
Firebaseは、バックエンドのサービスを担ってくれるので、開発者はアプリケーションの開発に専念することができ、バックエンドで動くサービスを作成、管理する必要はありません。
そのため、素早くアプリケーションをリリースるることができます。
Firebaseは、iOS/AndroidアプリからWebサービスまで幅広く使えます。

Firebaseには、以下のような様々な機能が提供されています。

JSで指定行数を越えたら全文が表示されるボタンをつける

JSで指定した行数を越えたら、全文を表示するボタンを出す処理を作っていきたいと思います。

## 指定した行の高さにするには
例えば、5行分の高さにしたくて `height: 5rem;` にしても、5行にはうまいことなりません。行の高さは**`font-size`と`line-height`から計算される**ためです。

## 対処法
そこで今回はCSSの`line-height`の値を取得し、`font-size`と掛け合わせ実際の行の高さを求めます。

注意点としては、JSで取得できる`line-height`は**ピクセルで返ってくる**ので注意が必要です。

[デモ](https://codepen.io/mtoutside/pen/oNjzbyN)

“`html

1行目
2行目
3行目
4行目
5行目
6行目

More

CaptionPopで英語字幕しかない動画でも日本語を表示できるようにしてみた

CaptionPopはYouTubeの字幕を２つ同時に表示できる便利なサイトです。

https://www.captionpop.com/


英語＋日本語など異なる言語の字幕を同時に確認することができます。

ただ、もともと英語字幕しか用意されていない場合は「このビデオの字幕は英語のみ利用可能です。」と表示されて同時表示ができません

英語字幕しかない動画でも日本語を同時に表示する方法を考えてみました。

#方法１：YouTubeのAPIを使用する
もともとYouTubeには字幕を翻訳して表示する機能がついています。

“`
https://www.youtube.com/api/timedtext?lang=en&name=&v=動画のID&tlang=ja
“`

翻訳済みの字幕はAPIを使って簡単に取得することができます。

APIで取得した翻訳済み字幕を英語字幕の下にしてやれば同時に２つの字幕を表示できます

“`javasc

TypeScript: Proxyを使ってオブジェクトのmix-inを実現する方法

TypeScriptで、2つのオブジェクトをmix-inして、オブジェクトの機能を拡張する方法です。

## やりたいこと

たとえば、下記の`Foo`オブジェクトと`Bar`オブジェクトを合成して、どちらのメソッドも持った`FooBar`オブジェクトを作る方法を説明します。

“`typescript
class Foo {
getFoo(): string {
return ‘foo’
}
}

class Bar {
getBar(): string {
return ‘bar’
}
}

const foo = new Foo()
const bar = new Bar()
const fooBar = mixin(foo, bar)
fooBar.getFoo() // Fooのメソッドも
fooBar.getBar() // Barのメソッドも呼べる！
“`

(伝わる人いるか分かりませんが、Scalaの`new Class with Trait`みたいなイメージです)

## 実現方法

JavaScriptの`Proxy`クラスを用い

[別々で動くSkill bar]同一クラスを使って可視領域に入った要素を別々に動作させる方法

##はじめに
スキルバーはネットにいっぱい情報が転がってるけど、

　_1.クリック動作だけとかスクロール設定までされてないもの_
　_2.デザインにこだわりすぎてシンプルじゃないもの_
　_3.ライブラリを使ってるもの_
　_4.なぜか全部一緒に動くようにしてる。←ココが一番気になる_
　_5.シンプルでそれぞれ別々で動くものがない_

というスキルバーが結構あったので、
以下のようなスキルバーを作成すべくコーディング。

上記を解決するために、
__1.シンプルで汎用的なもの__
__2.全部一緒に動かずに別々に動くもの(同じクラスを付与)__
__3.別ライブラリを使わずになるべく再現性や応用ができるもの__

の３つにこだわって作成。
DEMOはこちら。

JS Object 値渡しする方法

“`js
let obj
obj = JSON.parse(JSON.stringify(obj))
“`
※functionはundefinedになります

for…inとfor…ofの違い

#初めに

for…inとfor…ofの違いが曖昧だったのでまとめることにする。
##for…in
###for…inは指定されたれ連想配列（オブジェクト）から要素を取り出して先頭から順に処理する。

“`for_in.js
for( 仮変数 in 連想配列（オブジェクト） ) {
// 処理
}
“`
あくまでも出力されるのは`キー`であり、`バリュー`ではない。
なので、下記のようになる。

“`honda.js
var myTeam = {
name: ‘本田’,
age: ’33’,
birthplace: ‘大阪’
}

for( var item in myTeam){
console.log(item);
}

//name
//age
//birthplace
“`

`バリュー`を出したければ下記のようにする

“`honda2.js

var myTeam = {
name: ‘本田’,
age: ’33’,
birthplace: ‘大阪’
}

CloudantのデータをCSVでダウンロードする方法

#はじめに
IBM Cloud上のCloudantに保存したデータをCSVに変換してダウンロードする方法です。
Cloudantにアクセスして、保存されてるJsonをCSVに変換するプログラムを書くという方法もありますが、ここではCloudantのDesign Document Viewというものを使って、CSVに変換する方法を解説します。

Design Document Viewを使うと、ブラウザーから直接ダウンロードができるようになります。

この内容を元に実施した手順です。

Export Cloudant JSON as CSV, RSS, or iCal

#前提
IBM Cloud上にCloudantを作成する手順は含みません。

– 事前に、「Cloudant-csvtest」というCloudantのインスタンスを作成しています。
![cloudant01.png](https://qiita-image-store.s3.ap-northeast-1.amazon