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

React Reduxには今後Redux Toolkitも使うのがいいと思う

ReactをTypeScriptで始めることが随分楽になったと感じています。Create React Appの以下のコマンドでOKです。

“`zsh
$ npx create-react-app my-app –template typescript
“`
https://create-react-app.dev/docs/adding-typescript/#installation

2020年2月の中頃からReduxのテンプレートが利用可能となり、以下のコマンドで始めることができます。

“`zsh
$ npx create-react-app my-app –template redux
# or
$ npx create-react-app my-app –template redux-typescript
“`

https://github.com/reduxjs/cra-template-redux

このReduxテンプレートにはRedux Toolkitが使われています。https://redux-toolkit.js.org/
本格的に利用してい

Google Apps ScriptでLINE BOTのおうむ返し&スプレッドシートに自動入力

“`コード.js
// LINE developersのメッセージ送受信設定に記載のアクセストークン
const LINE_TOKEN = ‘アクセストークン’; // Messaging API設定の一番下で発行できるLINE Botのアクセストークン（Channel Secretはいらないみたいです。）
const LINE_URL = ‘https://api.line.me/v2/bot/message/reply’;

//postリクエストを受取ったときに発火する関数
function doPost(e) {

// 応答用Tokenを取得
const replyToken = JSON.parse(e.postData.contents).events[0].replyToken;
// メッセージを取得
const userMessage = JSON.parse(e.postData.contents).events[0].message.text;

//メッセージを改行ごとに分割
const all_msg = userMessage.s

Jest+CircleCIなプロジェクトにCodeCov(カバレッジレポート)を導入するまでの手順ハンズオン

# 概要
– テストのコードカバレッジのレポートに**CodeCov**を使いバッジをゲットするまでのハンズオンメモです

## 開発環境と構成

– 開発環境

開発言語	JavaScript(ES6)/Node.js
テストフレームワーク	Jest
Gitホスティング	GitHub
CIツール	CircleCI
カバレッジレポート	CodeCov

– 構成
全体としてはざっくり以下のような構成となります

![image.png](https://

JavaScript で絵文字の文字数をカウントしたかった

JavaScript での絵文字を含む String の文字数カウントは結構ハードだった話。

## 問題の事象

? は直感的には1文字カウントされてほしいが、 `length` プロパティを参照すると以下のような結果になる。

“`javascript
‘hoge’.length // 4
‘ほげ’.length // 2
‘?’.length // 2 …!?
“`

## なぜ？

`length` は単に文字数を返している**わけではない**。
JavaScript の内部では文字列を UTF-16 形式で保持しており、 `lentgh` はこの単位のコード数を返している。
ASCII やひらがなは1つの 16 bit で表されるが、絵文字の多くは [サロゲートペア](https://ja.wikipedia.org/wiki/Unicode#%E3%82%B5%E3%83%AD%E3%82%B2%E3%83%BC%E3%83%88%E3%83%9A%E3%82%A2) を使って2つの 16 bit で表現される。

前述の例は UTF-16 で以下のように表現

【phpbb】javascriptファイルをテンプレートごとに読み込む

##javascriptファイルを特定のテンプレートで読み込みたい#
phpbb3.2.5を使用しています。
ソースを見ると``の直前でjqueryが読み込まれています。
該当ファイルは`./styles/prosilver/template/overall_footer.html`です。
このファイルは基本的にすべてのページのフッター部分で使われています。

で、そのファイルの下の方に`{$SCRIPTS}`という記述があります。

“`./styles/prosilver/template/overall_footer.html

{$SCRIPTS}

“`

テンプレートごとにjavascriptファイルを読み込む場合にここで表示されます。

アワード系のWebサイトで見かける、ゆったりした慣性スクロールの実装

[Awwwards](https://www.awwwards.com)や[FWA](https://thefwa.com)に掲載されているサイトでよく見かける、ゆったりした慣性スクロール。

http://madies.mx
http://www.amandabraga.com
http://56k.studiovoila.com

見覚えがある人もいると思いますが、スクロールの反応が気持ち遅れて来る、自前の慣性スクロールっぽいやつです。これのやり方の参考が少なく実装に手間取ったので、実装例をまとめました。他にも色々なアプローチがありそうですが、参考のひとつとして。

最初に断っておきますが、かなり邪悪な実装なので基本的には非推奨です。ブラウザの本来の機能を上書きする実装の多くは、ユーザーの利益にはならないので、冷静に判断してください。

**デモ**
https://codepen.io/nishinoshake/debug/dyowbyr

# 採用する利点と欠点
明らかに欠点の方が多いので、利点が勝ることは稀だと思います。
採用する場合は、多くのユーザーに害があることを認めた上

Three.jsで筒を作ってみる

## はじめに

Three.jsで筒を作りたいなと思い、挑戦しました。
結果、作ったのは↓の2種類


## 1.CylinderGeometryで筒を作ってみた

#### 1-1.参考

– [CylinderGeometry](https://threejs.org/docs/#api/en/geometries/CylinderGeometry)
– [Three.js　マテリアルのプロパティ（高度な質感表現）](http://gupuru.hatenablog.jp/entry/2013/12/08/215106)

#### 1-2.スクリプト

“`html:CylinderGeometryで筒.html

Select2のtagsの日本語入力のバグ解消方法

# 公式サイトもバグってる

[公式サイト](https://select2.org/tagging)

## 原因はバージョン

原因はバージョンなので、バージョンをダウングレードしましょう。調査したら4.0.2まではバグが発生しないので、バグが発生しない最新バージョンの**4.0.2**を使いましょう！

“`html

Select2の日本語化 「No results found」

Select2の日本語化のCDNを読み込ませると良い。

“`html

【JavaScript】ECMAScriptとかBabelとか

# ECMAScrit仕様

**ECMAScript**とは、JavaScriptの標準規格です。
その仕様に改訂にあたって版(edition)が更新されていきます。
1997年に初版(ECMAScritp First Edition)が公開され、1998年にはES2が1999年にはES3が公開されました。

ES4では、クラスやインターフェースなどを含めた新しい概念がいろいろ追加される予定でしたが、これは破棄されました。
そして、2009年になりようやくECMAScritp Fifth Edition(ES5)として公開されました。strictモードやgetter,setterなどが追加されましたが、ES4で追加予定の多くの機能は実装されず、小規模な改善にとどまりました。

さらに時は流れ、2015年になり、ECMAScript Sixth Edition(ES6)が公開されました。これは、15年間で最初の大きな改訂となります。
let、const、クラス、モジュール、アロー関数、分割代入、などなど多くの新しい機能が追加されました。

そして、ES6は毎年新しいバージョンをリリース

Dart における class とObject の使い方。

# Dartにおける class と object の使い方

[Classes](https://dart.dev/guides/language/language-tour#classes)

#### Creating a class (classを作成)
“`Dart
class Car {
int numberOfWindows = 5;

void drive(){
print(‘wheels start turning’);
}
}
“`

#### Creating an Object from the Class (objectをclassから作成)
“`Dart
Car myCar = Car();
“`

——
## 実際にclassとobjectを使ってCodeを書いてみましょう。
[Practice Here] (https://dartpad.dartlang.org/)

####1.各プロパティに、デフォルト値を設定したclassを作成するパターン

“`Dart
void main(){
// 2. c

【SpecTest GUI – 2】MonacoEditor + Vue.js/Electron

# SpecTest GUI ヘの道（2）

* [前回記事「SpecTest GUI ヘの道（1）」](https://qiita.com/Kray-G/items/445b5cfe8e9c746e2b81) の続きです。
* 今回は、**同期スクロール** とエディタの **コマンド・ショートカット（ツールアイコン）** を追加します。

## 誰向け?

* VSCode で使われている **Monaco Editor** に興味ある人
* **Monaco Editor** で Markdown Editor を **Electron ベースで** 作りたい人
* SpecTest を **応援してくれる** 人

尚、今回の結果も以下にコミットしてあります。また、前回のには tag v0.1.0 をつけてあります。

* [GUI for SpecTest (spectest-gui)](https://github.com/Kray-G/spectest-gui)

## はじめに

[SpecTest](https://github.com/Kray-G/SpecTest

jQuery 基本集①~導入~

#jQuery 基本集①~導入~
**※ Ruby on Rails版です。**
##gemを使用した導入方法
###Gemfileにgemを追加
Gemfileの一番下の行に、

“`ruby
gem ‘jquery-rails’
“`
を追加して、コマンドラインに『bundle install』を入力して、追加したgemをインストール。
直後に『rails s』を入力してサーバーを再起動させること。

###インストールしたgemの読み込み
/app/assets/javascripts/application.jsに次のコードを追加して保存する。

“`js
//= require jquery　
//= require jquery_ujs
//= require_tree .
“`
**※jsコードは上から読み込まれる為、//= require_tree .よりも上に記述すること**

用意はこれだけ:santa:

##公式サイトからダウンロードする方法
以下のリンク先にjQueryを読み込むための記述があるので移動
**[リンク先](https://develop

jQuery 基本集②~DOM操作~

#jQuery 基本集②~DOM操作~

##イベント

###clickイベント
クリックした時に処理が実行される。

“`js
$(‘セレクタ’).click(function(){
//処理
});
“`
###submitイベント
フォームが送信されたときに処理が実行される。
送信ボタンのクリック時のみでなく、「Enter」キーでフォームが送信された場合もイベントが発生する。

“`js
$(‘セレクタ’).submit(function(){
//処理
});
“`

###hoverイベント
マウスをのせた時の処理、 マウスをはずした時の処理を指定。

“`js
$(‘セレクタ’).hover(
function(){
//マウスをのせたとき
},
function(){
//マウスを対象からはずしたとき
});
“`

##HTML/CSSを書き換える
###cssメソッド
CSSを書き換える。

“`js
$(‘セレクタ名’).css(‘プロパティ名’, ‘値’);

//複数のcssをてきようする場合
$(‘セレクタ名’).css({

そのjs、cssで代用できませんか？（件数通知バッジ編）

webアプリケーションエンジニアからフロントエンドエンジニアになって約一年やってきた中で、
どうしたらjsを書く量を減らせるか？みたいな状況を解決した時のtips

# why 件数通知バッジ
皆さん通知バッジ作ってますか？僕は作りました。
脳筋コードで書いたら意外とめんどくさいんですよねあいつ。

* 数字が変わるとなると、疑似要素でやるのがめんどくさいので``とかで作りがち
* 0件になったら消さなきゃいけない

とかやってるとjsがとても汚くなって悲しくなったので、いい感じにcss交えて書くといい感じになったよっていうお話です。

# コード

2000円のガラケーで快適にWebを表示する技術

PWA？SPA？WebAssembly？
うん、そうだね、よかったね。
それで、そのページは携帯で見れるのかい？

以下はAddy Osmani( [Twitter](https://twitter.com/addyosmani) / [GitHub](https://github.com/addyosmani) / [Facebook](https://www.facebook.com/addyosmaniofficial) / [HP](https://addyosmani.com/) )による記事、[Loading web pages fast on a $20 feature phone](https://dev.to/addyosmani/loading-web-pages-fast-on-a-20-feature-phone-8h6)の日本語訳です。
ちなみにこの人はGoogleのエンジニアで、Chromeの開発者のひとりです。

# Loading web pages fast on a $20 feature phone

ヒント：**高速なWeb基盤を構築することが

[自分用] JS基礎

他の言語さわったことあるけど初めてJavaScriptにふれる人の所感とメモ

#Tips

– 関数は実行関数よりも上のscriptタグに書いておかないといけない。
– 大文字、小文字は区別される。
– 文の区切りは; …;…;…;もできる。
– 一般的に変数・関数：camelCase 定数：SNAKE_CASE クラス：PascalClass

#書かないけど面白いと思ったことリスト
– 分割代入・複数の戻り値
– テンプレートリテラル
– falsyな値
– 非同期ロード async
– 論理型への変換 !!
– Symbol型
– RegExpObj
– 不変/Globalオブジェクト
– 変数の巻き上げ
– argumentsオブジェクト・可変長引数
– 名前付き引数・引数のデフォルト値
– Callオブジェクト

#JSの呼び出し

“`html:html





```

#用意したjavascriptファイル
APIを叩くと色々な値が返ってくるのですが、loginというキーがGitHubのIDになっています（console.logをしてあげるとよくわかる）。Fetchは何

Java Script あつめる

#Java Scriptとは

#学習の目的

#ProgateのJavascript(ES6)編で新たに学んだこと
###知っとくとよき
・基本コード末尾に`;`つける。
・定数(const)は変数(let)と異なり、値を更新できない。
しかし、コードが長くなった際、 予期せぬ値の更新を防止できる。

###Ⅰ

######if文

`if (条件式１){true時ここのコードを実行}
else if(条件式２){条件式１がfalse時ここのコードを実行}
else{条件式２がfalse時ここのコードを実行}`
で条件分岐。

######switch文
`switch(条件の値) {
case 値1:
条件の値と値1が等しい時の処理を記述
break;
case 値２:
条件の値と値2が等しい時の処理を記述
break;`
・・・
`default:
上記どの値とも等しくなかった場合の処理を記述
break;
}`

######比較演算子
・`a===b`でaとbが等しいかを調べる。
・`a!==b`でaとbが異なるかを調べる。

(ex)
`const number=1

【TypeScript】よく使う処理を複数のプロジェクトで使い回す

## 環境
- npm: 6.4.1
- typescript: 3.8.3

## 使いどころ

JavaScript(TypeScript)を書いているときに「こういうメソッドがあったら便利なのにな」と感じることがしばしばあると思います。例えば以下のような

```ts:.ts
// 配列の最初の要素を取得(自分で定義しないと使えない)
[1, 2, 4].first() // 1
[].first() // undefined

// 1個次の要素を取得(自分で定義しないと使えない)
[1, 2, 4].nextOf(2) // 4
[1, 2, 4].nextOf(3) // undefined
```

もちろん以下のように`prototype`を操作したりライブラリを導入したりすることで使えるようにはなりますが、

```ts
Array.prototype.first = function(): T | undefined {
const arr = this as Array
return arr.length > 0 ? arr[0]