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

オープンソースとプライバシー志向の分析ソリューション


##はじめに

こんにちは streampack チームのメディです。
https://cloudpack.jp/service/option/streampack.html

##Objective ・ 目的
Privacy is an important matter.
I would like to present several open source solutions that respect users privacy and will allow you to improve your business.

プライバシーは重要な問題です。
ユーザーのプライバシーを尊重し、ビジネスの改善を可能にするいくつかのオープンソースソリューションを紹介したいと思います。

###Disclaimer ・ 免責事項
A

スマホもPCの一員としてファイル同期したいじゃない？Ⅱ

# おはようございます！

[前回の続きです。](https://qiita.com/ykato/items/74642f7bfd0685f97afc)

前回の

「**Syncthing**に似てる気がするけど知ってる？参考になるかもよー見てみたら？？」

にスマホアプリも追従させてみたよ！って記事です。

### やたらスマホ！

要するにHTTP(S)使ってフォルダを同期してくれる君というやつです。
Syncthing以外にもNearby Shareもあるじゃーんってご指摘あるな。
でも、これ強みとしてはバイナリいっこで動くし、マルチOS対応だし、、

あと今あるプロキシとか**HTTPエコシステム**に乗っかれるのがこのツールの推しポイント

# DE・KI・TA

Chrome翻訳でコードを翻訳させないスクリプトの作り方

# やること

Chromeによって無残にも翻訳されてしまうReactプログラム…

コードが翻訳されてしまうのは、HTMLのcodeタグで囲んでないからです。

今回は、[こちらのサイト](https://create-react-app.dev/docs/getting-started)のコードが記載されてる部分をcodeタグでラップする簡単なJavaScriptを組んで、Chromeデベロッパーツールのconsoleから実行して対策してみようと思います。

JavaScriptの勉強がてら参考にどうぞ?‍♂️

# 実装

### 1. 状況を把握する

F12で検証ツールを開いて中身を覗くと、やっぱりcodeタグで囲まれてないっぽいですね

JavaScript 数値と文字列の相互変換

# JavaScript では 数値 文字列 の変換が複雑

JavaScript の型変換は標準的な機能がいくつかあります。そのいくつかの方法が細かな所で仕様が異なっているので知っておかないと思わぬバグに遭遇します。

というか遭遇したのでまとめておきました。動作確認用のテストコードを含めて記載しています。

細かく動作確認したい人の参考になったらいいなと、思います。

「+文字」とか「文字 – 0」とか「数値 + ”」といった、可読性の低そうでトリッキーなコードは除外します。詳しくは後述します。→[「変な記号でキャストしない」](#変な記号でキャストしない)

# 数値 から 文字列

数値から文字列への変換は必ず変換ができるので比較的楽です。

String(value)「Stringキャスト」か (value).toString()「toStringメソッド」 を使うのがよいです。

“`js
// Stringキャスト
var value = 123;
var text = String(value);

// value.toString()メソッド
var valu

create-react-appでのReact環境構築がつらいので新しい簡易版ツール作った

## create-xxx-app

作った。

* ブログ記事： https://sbfl.net/blog/2020/08/11/create-xxx-app/
* npm： https://www.npmjs.com/package/create-xxx-app

“`
npx create-xxx-app プロジェクト名 –template react
“`

でReact+TypeScriptのプロジェクト作られるはず。
インストールされるボイラープレート部分についてはいろいろ考え中なのでまだ中途半端です。後で大幅に変わる可能性があります。
でも一応動くReactのウェブアプリ作れるよ！

ちなみにxxxという文字の並びには英語圏ではエロい意味があるらしい。後で知った。

## 読みたくないから短くまとめろ

* create-react-appつらい
* 縛りきついから入れた瞬間にejectしたくなる
* eject後のファイルが意味不明すぎて解読するより自分で始めから構築した方が早い
* でもcreate-react-app捨てて生きていけない

Parsing error: The keyword ‘import’ is reserved の解決法

## 解決法
eslintから怒られているので、`.eslintrc`に怒られないようにこちらを追記してください。

“`
{
…
“parserOptions”: {
“ecmaVersion”: 7,
“sourceType”: “module”,
“ecmaFeatures”: {
“jsx”: true
}
}
…
}
“`

参考
https://github.com/yannickcr/eslint-plugin-react/issues/447#issuecomment-208625730

eslintのプロパティについてはこちら
https://eslint.org/docs/user-guide/configuring

javascript 3分カウントダウンタイマー

要件は
１．カウントは03:00からスタートする
２．スタートボタンを押すと1秒ずつカウントが進む
３．カウントが00:00になったら「Time UP!」と表示する
４．ストップボタンを押すとカウントが止まる
５．リセットボタンを押すとカウントが03:00に戻り、カウントが止まる

“`javascript