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

!での評価方法

## !での評価方法について
判定式の**「！」**を使う時、後から読む場合わかりにくいことがあります…
変数の名前を肯定系で書き、否定したい場合に**「！」**を使うと読みやすいコードになると思います。

!を変数の前につけるとbooleanが返却されるます。

“`js
const isOpen = true
!isOpen // オープンではないと意味がわかりやすい

// 下のように書くと、何がいいたいのか理解するのに時間がかかる
const isNotOpen = false
!isNotOpen　//
“`

[JavaScript,Rails]Uncaught TypeError: Cannot read property ‘length’ of undefined のエラー解決例

#1.エラーの状況とそのエラーに関係したファイル(Railsの中のJavaScriptのエラー)

＜エラー文＞

＜エラーに関連したファイル＞

“`js:app/asset/javascripts/users.js

$(function() {
function addUser(user) {
let html = `

${user.name}

嫁氏が作ったフレームワークでJavaScript初心者の私がオセロゲームを作る話。その１・状態を作る

~~彼~~嫁氏こと[ジョニー氏](https://qiita.com/johnny-shaman )がJavaScriptで自作フレームワーク**「dsand」**を作ったことと、
**「dsand」**の使い方を紹介する記事がまだ無いという事なのでJavaScript初心者の筆者が何か記事を作成しようと思い筆を執りました。

※プログラミングの理解度について、筆者はJavaScriptは初心者ですが
　昔若干職業プログラマーやってたのでJavaとかVBは少し覚えている程度
　という前提を踏まえつつ読んでいただけると幸いです。
　（普段ははんだ付けとかやってる人だよ！~~ぶっちゃけプログラミング苦手だよ！~~）

自身の備忘録的な役割込みなのと
初めてのQiita記事なので生暖かい目で読んでください（笑

**「dsand」**のリンクはこちら↓から
https://www.npmjs.com/package/dsand

# 「dsand」とは
ジョニー氏が基底ライブラリ含め**2000行**くらいで作ったフレームワーク。
**2000行くらい**で作ったフレームワーク。
大事なので

忘年会のために作った昔のテレビみたいに画面遷移するJavaScript

僭越ながら、[エヌシーアイ総合システム Advent Calendar 2019](https://qiita.com/advent-calendar/2019/nci) 20日目を担当させていただきます。
（投稿が1月中旬になってしまった…）
忘年会のために作ったJavaScriptについて書きます。
ちなみに全体が完成したのは忘年会前日深夜3時でした。

## どんな感じで画面遷移するの？


こんな感じで動きます。
遷移前と遷移後で同じページのように見えますが、別のページに飛んでいます
今や見る影もないブラウン管テレビってこんな感じだった気がします。

大まかな中身としては
　**フェードアウトのアニメーション
　ページ移動
　フェードインのアニメーション**
の流れになります。

## フェードインのアニメーショ

テストしやすい「純粋」な関数とは？

## とある日の弊社にて

ハスケル子「やめ太郎さん、今日は何してるんですか？」

ワイ「おお、今日はな」
ワイ「**お正月判定関数**を書いてんねん」

ハスケル子「お正月判定関数・・・」

ワイ「せや」
ワイ「**株式会社ブラック**はんから、こんな依頼をもらったからな」

> お世話になっております。
> 株式会社ブラックの暗井 暗人（くらい・あんと）です。
> **2020年の元日**に弊社Webサービスのメンテナンスを行いますので、
> 元日の間のみ画面上に「ただいまメンテナンス中です」と表示する機能を実装していただきたいです。
> 予算は800万円までに抑えていただけると幸いです。

ワイ「システムのメンテナンス作業自体は、ブラックはんの方でするみたいなんやけど」
ワイ「**お正月判定関数**だけが**どうしても作られへん**らしく、弊社に依頼が来たという経緯や」

社長「（相変わらず**設定メチャクチャ**やな・・・）」

ハスケル子「よく分かりませんが、その**お正月判定関数**とやらは書けたんですか？」

ワイ「おお、書けたで」
ワイ「一ヶ月かけて書いた力作や」
ワイ

[Angular]Routing単位でcode splittingする

## 背景

– Angular初心者です
– Angularでアプリを作っていますが規模が大きくなってくると初回ロード時のファイルサイズが気になってきました
– code splittingして必要なコードを必要な時に取得するようにすると良いと聞いたことがあったので調べて試してみました

## やったこと

– Routerで設定しているページの単位にJSファイルを出力するようにしました
– ページ遷移の都度そのページの表示に必要なコードだけ取得するイメージですね

## やり方

– code splittingする場合としない場合の差分を見た方がわかりやすいと思うので比較してみます
– HomeとAboutの2つのルーティングを持ったアプリを例とします
– コードの差分だけ見たければこちらをご覧ください
– https://github.com/ozaki25/ng-code-splitting-sample/compare/before…after

### サンプルアプリの作成

– AngularCLIで雛形とコンポーネントを作ります

“`zsh
# サンプ

[Github Actions]githubのリリースの公開に合わせてtwitterで通知

前回の記事[(webサイトの更新の表示をgithubのreleaseで管理)](https://qiita.com/mugi111/items/dd71305a001a67c8a24a)の中で書いたgithubのreleaseに合わせてツイートをするGithub Actionsについて書きます。

# 概要
githubの任意のリポジトリのreleaseが公開されたタイミングでツイートをするGithub Actionsを作っていきます。

GitHub Marketplace
https://github.com/marketplace/actions/tweet-trigger-publish-release

リポジトリ
https://github.com/mugi111/tweet-trigger-release

# 作り方
↓↓↓作り方の参考にしたページです↓↓↓
[LGTMすると現場猫が「ヨシ!」してくれるGitHub Actionsをつくった + Tips](https://qiita.com/redshoga/items/986c07abb6d38766588b)

便利ページ：データURLを生成する

「[便利ページ：Javascriptでちょっとした便利な機能を作ってみた](https://qiita.com/poruruba/items/6c67c7eef34ed302feb3 )」のシリーズものです。

HTMLでは、スキームが先頭についた URL で、コンテンツ制作者は小さなファイルをインラインで文書に埋め込むことができる「データURL」というのがよく使われています。

こんな感じです。

“`
data:[][;base64],
“`

(参考) データURL : MDN
https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

（たいしたことはやってませんが）[便利ページ](https://qiita.com/poruruba/items/6c67c7eef34ed302feb3 ) に追加しておきました。

いつもの通りGitHubにも上げてあります。
　https://github.com/poruruba/utilities

参考までに、

【Angular】画面真っ白。Failed to load module script: The server responded with a non-JavaScript MIME type of “text/html” がコンソールに表示

#### 1. エラー詳細
Angularアプリをherokuでデプロイして、`Build succeeded!`されたけど
実際開いてみたら画面真っ白。
そして、コンソールにエラーメッセージが表示されていました。

>Failed to load module script: The server responded with a non-JavaScript MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec.

*モジュール読み込み失敗。サーバーはJavaScriptじゃない”text/html”のMIME型を返却。*

#### 2. 環境

“`
macOS Mojave 10.14.6

Angular CLI: 8.3.22
Node: 12.10.0
Angular: 8.2.14
“`
“`json:tsconfig.json

“compilerOptions”: {
//JavaScirptのバージョン

graphql clientはApolloよりfetchでやった方がいいのではないかという件

# リポジトリ
https://github.com/gqlkit-repos/gqlkit-store
graphql client storeプラグインです。
これを、各フレームワークのcontextに突っ込んでやろうという魂胆
reduxはreact、vuexはvueという感じですが
クロスフレームワークでかつgraphqlの為の
client&storeというのを作ってみました。
nuxt.jsでは検証済

# resolverファーストアーキテクチャのgraphql client設計
“`
.
├── index.js
└── resolvers
├── Mutation
│   ├── createStaff.js
│   └── deleteStaff.js
├── Query
│   └── staffs.js
├── cache.js
└── client.js
“`
たったのこれだけ
と言いたいところですが
これを例えば、nuxtで使うなら、nuxtのpluginsディレクトリに突っ込むので
一見、まぁまぁ

Firebase 静的サイト（html CSS JavaScript)をデプロイ

##Firebaseにてデプロイの記録##

【使用環境】
html
CSS
JavaScript
macbook

＜次回の時短の為に記録＞

—

##Firebaseにて登録、 （googleアカウント必要）ログイン##

https://firebase.google.com/

新しいプロジェクトフォルダをFirebase　HP内で作成する。

—

ここからターミナルで

###今回は下記②の設定のために　public ディレクトリ　配下にデプロイアプリ（html CSS JavaScript　img等)を配置###

URL　＞　ルートパスの為

—

デプロイにGitHubは必須ではないが、
git add

DOMにおける「Illegal Invocation」エラーの一例とその原因・対処法

DOMに関わるプログラムを書いていると、「Illegal Invocation」エラーに遭遇することがあります。例えば、次のようにすると`q`の呼び出しでエラーが発生します。

“`js
const q = document.querySelector;
q(“body”); // Uncaught TypeError: Illegal invocation
“`

ちなみに、「Illegal Invocation」とはGoogle Chromeのエラーメッセージであり、Firefoxは次のようにもうちょっと親切なエラーメッセージを出力します。エラーメッセージというのは基本的に仕様で定められておらず処理系の裁量があるところですから、エラーの意味が分からなくて詰まったら別のブラウザで試してみるのもひとつの手です。

“`
TypeError: ‘querySelector’ called on an object that does not implement interface Document.
“`

Google Chromeの「Illegal Invocation」はい

Javascript + CSS で複数行テキストを省略する

## 実現したいこと
jQueryを使わずに複数行テキスト末尾に「…」をつけたい。
よくある処理なのに忘れがちなので備忘録。

## TL;DR
https://playcode.io/484998

##参考
クラスメソッドさんの記事を土台にVanilla JSに書き換えました。
クラスメソッドさん、いつもありがとうございます。

文字列を省略して「…」を付与する方法 – CSS/jQuery

## コード
“`html:index.html

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られた

初心者による jQuery 基礎

#jQueryの基本的な構文
jQueryで行われる処理の流れは、

“`
1. $()関数で命令の対象となるHTML要素をjQueryオブジェクトに変換
2. そのjQueryオブジェクトに対して独自メソッドを呼び出して変更を加える
“`
jQueryの基本的な構文は、

“`javascript:sample.js
//jQueryオブジェクト.変更する命令
$(HTML要素).メソッド(‘引数’, ‘引数’)
“`
また、HTMLを最後まで読み込んだ時点で実行するために、jQueryは以下のようになる。

“`javascript:sample.js
$(function){
//HTMLがロードされたのちに実行する処理
}
“`
#onメソッド
onメソッド構文は次のように書く

“`javascript:sample.js
on(‘イベントタイプ’, ‘イベントハンドラ’)
“`

ちなみに、thisプロパティは「onメソッドに指定してあるイベントが発生した要素」が格納される。
thisを使うことで、

“`
1. 処理のパフォーマンスが上がる
2. コー

初心者による JavaScriptの基礎

#概要
JavaScriptの基本的な書き方や特徴をメモとして箇条書きのように書いていく。なにかあれば順次追加していく

###文のルール
javascriptの文のルールとして、

1. 文の末尾にセミコロンをつけることを推奨している。
2. 大文字/小文字は厳密に区別される。

###文字リテラル
文字リテラルは(‘)や(“)で囲む必要があるが、ふたつ使いたい場合は、

“`javascript:sample.js
‘He’s a doctor!’ -> 悪い例
“He’s a doctor!” -> よい例
“`
ただしエスケープ処理をすれば、大丈夫である。

“`javascript:sample.js
‘He\’s a doctor’
“`
###テンプレート文字列
テンプレート文字列を利用することで、以下のような文字列表現が可能になる。

1. 文字列への変数の埋め込み
2. 複数行にまたがる文字列

“`javascript:sample.js
let name = ‘斉藤’
let str = `こんにちは${name}さん。今日も天気いいですね！`
con

ExpoアプリでのStripe決済を整理+Paymentsを使ってみる

# はじめに

直近の記事でWebViewを使用することによってExpoアプリをEjectせずにStripeを導入する方法を確認しました。
ここではもう一つの選択肢として、iOSにおいてEjectが必須である[Payments](https://docs.expo.io/versions/latest/sdk/payments/) APIの方をまとめてみます。

# Compatibilityを整理

なかなかややこしいので、まずはWebViewでの実装を含めて、各OS、機能で何ができて何ができないのかを整理しておきます。

## checkout.js in WebView

Expoでの動作 → iOS/Android共に❌
サーバー側実装 → **不要**
動的な金額設定 → **可**
PSD2 → 不明(未準拠？)

Stripeの`checkout.js`は、カード入力フォームをWebページ上にモーダルで表示させて決済を導入できるライブラリです。
現在はレガシー扱いになっていて、下記のドキュメントのようにStri

初心者による Array/Map/Setオブジェクト

#Arrayオブジェクト
Arrayオブジェクトは、配列型の値を扱うためのオブジェクトで、配列に対して要素の追加/削除、結合、並べ替えを行うための機能を提供する。配列を生成するには原則、配列リテラルを利用する。

“`javascript:sample.js
let array = []
“`
のように定義する。

##Arrayオブジェクトの主なメンバー
Arrayオブジェクトで利用できるメンバーは以下のようなものがある。

“`javascript
length : 配列のサイズ
isArray(obj) : 指定したオブジェクトが配列にあるか
toString() : 「要素 , 要素 , …」の形式で文字列に変換
toLocaleString() : 配列を文字列に変換(区切り文字はロケールによって変化)
indexOf(elem[, index]) : 指定した要素に合致した最初の要素のキーを取得(indexは検索開始位置)
lastIndexOf(elem[, index]) : 指定した要素に合致した最後の要素のキーを取得(indexは検索開始位置)
entri

クライアントサイドだけで日本語PDFを出力したときの文字化け・改行不具合をpdfmake最新版で再ビルドして直した話

# はじめに
– 常用文字にサブセット化を行ったものを id:naoa_yさんが作ってくれているのでそれを使っても良い
– ビルド後のファイル(vfs_fonts.js)で 5MB -> 2.3MBぐらいに減ってる
– ただしbuildが5年前なのでpdfmakeのバージョンが0.1.20と古い
– 最新は0.1.63 (released this on 11 Dec 2019)
– 上記のpdfmake@0.1.20だと日本語化したときの文字改行(word wrap)が適切にうごかない＆改行されたとき文字化けする不具合があった
– 私の場合、可変長の文字を動的に組み込む必要があり、自動改行はどうしても必要だった。1行に収まる短文のみであれば問題ないかと
– 最新だとなおるかもしれないと、pdfmakeを最新にして使いたかったので、buildし直した。結論、治った！
– Vueと書いてるけど、フォント差し替えるまでは共通だとおもう
– @watameさんの記事を参考にしました。ありがとうございます。

# TL;DR
– このリポジトリにある、“bui

じゃんけんプログラムを改変してた

#前回のあらすじ
・if文とSwitch文を使ってじゃんけんプログラムを組んだ
#今日やったこと
・関数定義して、ソースコードをスッキリさせた
・While文を使って、連勝している間はじゃんけんが続き、最終的にレコードが出るように改変した。
（今回の教科書『いちばんやさしいJavaScriptの教本』）
#今回のエラー
・改変前プログラムをコピペしてて、関数名を古いままにしてたのでエラーが起こった
#感想
関数って、ソースコードがスッキリするし１つ１つの部分がわかりやすくなるし、すごく便利な存在なんだな～と思った。
#次回の目標
HTMLとCSSとJSを結びつけて活用できるようになるぞ

Node.js の基礎とそのフレームワーク Express

## Node.js とは何なのか

Node.js とは、簡単にいうと JavaScript をサーバーサイドで実行させてくれる存在です。フロントエンドも、バックエンドも1つの言語で実行でき、WEBサービス、スマートフォンアプリ、IoT関連の開発にも使用することができるみたいです。

## インストール

まず Node.jsをインストールしていない人は、[Node.js公式サイト]（https://nodejs.org/en/) から、LTS版をダウンロードしてインストール。

## 『node』 でJavaScriptを実行させる

コマンドラインでindex.jsが格納されているフォルダにpwdで移動し、そのフォルダ内のindex.jsを実行する。

“`
node index.js
“`

nodeだけでEnter押すと、JavaScriptコンソールで色々なコードを試せるようになるみたい。やめるときは .exit と入力するか、control + C を2回押すと終了します。

## Node.js のいろんなAPI

Node.jsには様々な機能があり、そ