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

jQueryでできる基本的なこと(初心者)

# この記事について
progateでjQueryを学習した後にアウトプットの為に書いている記事です。Javascriptに精通している方には参考にならないと思うのでスルーしてください。

# モーダルウィンドウの表示
モーダルウィンドウとは、ウィンドウ内で指定された操作を完了したり、キャンセル操作するまで他の画面にすることが出来ないウィンドウの事です。モーダルウィンドウの表示もjQueryで実装することができます。

```sample.html

Kinx Tips - 実行形式ファイルを作る

# Kinx Tips - 実行形式ファイルを作る

## はじめに

**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。今回は Tips です。

* 参考
* 最初の動機 ... [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)
* 個別記事へのリンクは全てここに集約してあります。
* リポジトリ ... [https://github.com/Kray-G/kinx](https://github.com/Kray-G/kinx)
* Pull Request 等お待ちしております。

皆さん、実行ファイルを作る時どうしてますか？ ...そう、普通は C や C++ で書いてコンパイルしますね。もっと簡単に作れるといいですね。

Kinx は独立した exe を作ることはサポートし

自分への未来のメッセージをプログラムで書いてみる【超初心者向け】

#前置き
[前回](https://qiita.com/guevara-net/items/7b7991d28462e3f961e7)からの続き
未来考えるの大変だから臨機応変にメッセージを組むプログラムを書いてみます。

##基本的な機能
1. とある値を元にメッセージを変化させる
2. とある値を元にメッセージの表示方法を変化させる

この二つの機能を元にメッセージを組んでみます。とある値というのは個人で考えて意味を持つ値にしてください。例えば一年後の目標の達成度や何かの指標を決めておき、その値によってメッセージが変わるようにします。

###とある値を元にメッセージを変化させる
プログラムの基本「if文」を使ってプログラミングをします。
言葉の通り、もし〇〇だったら××を行うという処理を書くことができます。
以下の場合だと「a」という中身が「1」であるかを判定し、「aは１です」と表示されます。

```javascript
let a = 1;
if( a === 1 ){
console.log("aは１です");
} else {
console.log("aは１では

正規表現入門 第三回 数量詞を用いた検索

# 数量詞とは
- 「数量を示す単語または句」のことを言う。
- メタ文字と同様、数量詞もそのものを検索する場合はエスケープが必要です。

## 先頭の文字を検索 "^"
- 文字列の「先頭」を検索するには「^」を使います。
- mオプションを加えると、改行直後の値も対象になります。

``` 3-1(先頭の文字を検索).js
console.log("This is a pen!".match(/^This/));
console.log("This is a pen!".match(/^is/));

console.log("This is a pen!\nThis is a ball!".match(/^This/g));
console.log("This is a pen!\nThis is a ball!".match(/^This/gm));

console.log("This is a pen!".match(/^This\s../));
console.log("This is a pen.This is a ball.".replace(/^This/, "Th

【Nuxt】SSR・SSG・SPAにおける『nuxt build』と『nuxt generate』の実行結果の違いまとめ

NuxtにはSSR（Server Side Rendering）、SSG（Static Site Generator）[^ssg]、SPA（Single Page Application）の3種類のモードが用意されています。

[^ssg]: SSGは『静的化』や『静的ファイル生成』などとも呼ばれることがあります。

また、本番環境でNuxtアプリケーションを実行するにあたり`nuxt build`と`nuxt generate`の2つのコマンドが用意されています。

`nuxt build`はアプリケーションをWebpackでビルドし、JSとCSSをミニファイするコマンド[^command]です。ビルドファイルの出力先は`.nuxt`配下です。

`nuxt generate`は静的ウェブサイトへデプロイする静的ファイルを生成するコマンド[^command]です。静的ファイルの出力先は`dist`配下です。
静的ウェブサイトのホスティングサービスではNetlifyやAmazon S3などが有名です。

[^command]: 【備忘】google apps script でslack通知

# usage

```js
sendSlack("hoge");
```

# 関数

```js

function getSlackURL(){
return "*** slack webhook ***";
}
```

```js
function sendSlack(text){

const channel = "#channel_name";
const data = {
'channel': channel,
'username': 'bot',
'text': text,
'icon_emoji': ':ghost:'
};
const option = {
"method": "post",
"payload": JSON.stringify(data),
"muteHttpExceptions": true
};
UrlFetchApp.fetch(getSlackURL(), opti

Vue.jsで名前の表示/非表示を切り替える

#はじめに

ボタンを押すと画面上にある名前の表示と非表示の切り替えができるプログラムを書いていきます。

##ソースコード
全体のソースコードは以下の通りになります。（headタグやvueの読み込み箇所は省きます。）

HTMLファイルに書くソースコード

```vuejs

クリックしてね

{{name}}

```

jsファイルに書くソースコード

```javascript

var app = new Vue({
el: "#app",
data: {
name: "Naoki",
show: true,
},
methods: {
toggleBtn: function () {
th

vue-youtubeを使用して、複数のモーダル上で動画を再生させる

# 実装結果

## git映像


## 実装サイトURL

https://miwa-vue-youtube.netlify.app/

# 実装コード

- ディレクトリ

```console

src
├── App.vue
├── assets
│ └── scss
│ └── main.scss
├── components
│ ├── MovieButton.vue
│ └── MovieModal.vue
├── main.js
└── plugins
└── vue-youtube.js
```

- バージョン

```
"@vue/cli": "4.4.6",
"vue": "^2.6.11",
"vue-youtube": "^1.4.0"
```

コードの

Vue-CLI 3でnpm run serveが失敗するときの解決方法

## 事象
Dockerコンテナ内の環境にて、`npm run serve`を実行すると、下記のようなエラーが発生していました。

```bash
ERROR Failed to compile with 2 errors

This relative module was not found:

* ./src/main.js in multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.js, multi (webpack)/hot/dev-server.js (webpack)-dev-server/client/index.js ./src/main.js
```

### 環境
- Microsoft Windows 10 Pro
- Docker for Windows
- Visual Studio Code
- node.js : 12.18.2
- npm : 6.14.5

## 原因
筆者の場合、`npm install`を実行しても`package.jso

Deno の公式レジストリの登録方法が手動から自動になりました

Deno の公式レジストリの登録方法が変わりました! 本記事ではその登録方法について解説します。

(この記事は Deno の公式レジストリに自分の書いたモジュールを登録してみたい人向けの記事です。npm にモジュールを登録した経験がある人などが主な対象読者です。)

# Deno の公式レジストリとは

Deno の公式レジストリは https://deno.land/x にあります。(特に固有の名称などはありません。単にレジストリと呼ばれることが多いです。)

これまで、ここに自分の作ったモジュールを登録するには、公式ホームページのレポジトリにある JSON ファイルに PR を出して、
手動でマージしてもらうことが必要でした。

[](https

【javascript】書籍のアウトプット

こちらの記事は以下の書籍を参考にアウトプットとして執筆しました。

[入門JavaScriptプログラミング (日本語) 単行本](https://www.amazon.co.jp/dp/479815864X?tag=shoeishacom-22)

#文字の検索
最初の文字が$かどうかの判断はこう書く

```javascript
if(price[0]=='$'){

}
```
>出典:[入門JavaScriptプログラミング (日本語) 単行本](https://www.amazon.co.jp/dp/479815864X?tag=shoeishacom-22)

最初の3文字の場合はこうかもしれない

```javascript
if(phone.substr(0,3)===user.areaCode){

}
```
##substr
```javascript
str.substr(start[, length])
```
|引数|説明|
|---|---|
|start|最初の文字の位置|
|length|取り出す数|

返り値は、指定された部分が入った新しい文

【JS】空文字判定の注意

#　空文字（""）を判定したい！！

```js

function isEmptyString(str) {
return !Boolean(str);
}

console.log(isEmptyString("")); // => true
console.log(isEmptyString(0)); // => true
console.log(isEmptyString()); // => true
```
空文字でなくても**暗黙的な型変換**が起こってしまう。そのため、`falsy`な値はこの関数で`true`を返してしまう。

#　こうしましょ

```js
function isEmptyString(str) {
// `string`型かつ`length`が0の場合に`true`を返す
return typeof str === "string" && str.length === 0;
}

console.log(isEmptyString("")); // => true
console.log(isEmptyString(0));

聞いたことはあるがよくわからないJavaScript周辺のあれこれ

JavaScriptを学習していると、よくわからない概念やライブラリに出会う機会が多いです。
その中でも特によく耳にするものをざっくりまとめてみました。(ホントにざっくり)
各内容をもっと掘り下げた参考記事も貼っているので気になる方はそちらも読んでみてください。

# ECMAScript
ECMAScriptとはJavaScriptの言語仕様の取り決め。
よく耳にする `ES2015` や `ES6` といった用語はJavaScriptのバージョンを表し、ここで出てくる `ES` がECMAScriptのこと。

[【JavaScript】JavaScript、その前に〜ECMAScriptとは？](https://qiita.com/yukibe/items/acd0bafcf2a10c99d0f6)

# npm
Node Package Manager、すなわちNode.jsのパッケージを管理するもの。
npmのおかげで、 `npm install 〇〇` と打つだけで便利なライブラリを簡単にインストールして利用することができる。

[npmとは](https://qiita.