Huskyを使って、コミット前にESLintを実行すると便利なのでメモ。

[husky 設定](https://typicode.github.io/husky/#/)

## インストール
```bash
yarn add -D husky
yarn husky -v
6.0.0
```

## 設定

`lint-staged`を使わなくても良くなった。

```bash
yarn husky init
yarn husky install
yarn husky add .husky/pre-commit "yarn lint"
```

`pre-commit`

```bash
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn lint
```

ディレクトリ

```bash
.husky
├── _
│   └── husky.sh
└── pre-commit
```

`package.json`。`prepare`を書いておくと、新規の人も自動で実行されるようになると思う。

```json
"scripts": {
  "lint": "eslint --ext js,jsx --fix .",
  "prepare": "husky install"　
}
```


NodeJS

Husky v6でESLint実行をHookさせる

WEB技術

最低限、セミコロンやクウォートなどを整理したいケースが多いのでメモ。

## インストール

```bash
yarn add -D eslint eslint-plugin-react
```

## 設定

`.eslintrc.js`を作成

```js
module.exports = {
  root: true,
  env: {
    node: true,
    es6: true,
  },
  parserOptions: {
    // Parsing error: 'import' and 'export' may appear only with 'sourceType: module' 対策
    sourceType: 'module',
    // eslint Parsing error: Unexpected token function with async 対策
    ecmaVersion: 8
  },
  plugins: [
    'react'
  ],
  ignorePatterns: [
    'node_modules/*',
    '.next/*',
    'out/*',
  ],
  extends: [
    'eslint:recommended',
    'plugin:react/recommended'
  ],
  // https://eslint.org/docs/rules/　を参照
  rules: {
    'semi': ['error', 'never'],
    'react/react-in-jsx-scope': 'off', // めっちゃエラー出るので
    'react/prop-types': 'off' // めっちゃエラー出るので
  }
}
```

## 実行

`package.json`

```json
"scripts": {
  "lint": "eslint --ext js,jsx --fix ."
}
```

実行

```bash
yarn lint
```

## VSCode設定

```json
// .vscode/settings.json
{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
```

Vercel

Next.jsにほぼESLintだけ入れる

[Font Size](https://tailwindcss.com/docs/font-size)

## 設定

`tailwind.config.js`

```js
module.exports = {
  theme: {
    fontSize: {
      'xs': '.75rem',
      'sm': '.875rem', 
      'base': '1rem',
      'lg': '1.125rem',
      'xl': '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem',
      'mobile-input': '16px', // 追記
    },
  }
}
```

1つ定義すると、それしか見なくなるようなので、全部定義した。
lineHeightもやった方がいいかも。。

## 使い方

```sass
sm:text-lg text-mobile-input
```


TailwindCSS

TailwindCSSでmobileのinput系を16pxにする

[iamvishnusankar/next-sitemap](https://github.com/iamvishnusankar/next-sitemap)を使う。

## インストール
```bash
yarn add next-sitemap -D
```

## next-sitemap.js作成
`next-sitemap.js`をプロジェクトルートに配置する。
staticサイトの場合、`out`に吐き出されるので、`outDir: './out'`に設定する。
([Static HTML Export](https://nextjs.org/docs/advanced-features/static-html-export)で確認)

```js
module.exports = {
  siteUrl: 'https://example.com',
  generateRobotsTxt: true,
  sitemapSize: 7000,
  outDir: './out'
}
```

## build設定
`package.json`を変更する。

```json
...
"scripts": {
  "build": "next build && next export",
  "postbuild": "next-sitemap" // 追記
} 
...
```

Next.jsでsitemap.xmlを作る

## DNSサーバ
Host名やDomain名とIPアドレスの情報を関連付けている。

## プロキシサーバ
> プロキシサーバーは社内LANと外部インターネットの間に設置し、URLをフィルタリングしたり匿名性を確保したりします。

直接マシンにアクセスするのではなく、プロキシサーバをかましてアクセスさせることで使用を制限する。

## CloudflareのAレコードの例
Cloudflareには、プロキシステータスとして **「DNSのみ」** **「プロキシ済」** があるが、「DNSのみ」にした場合、解放していれば、`3000`や`4000`ポートにもアクセスできる。一方、「プロキシ済」の場合、指定しているポートしかアクセスできない。もしサーバ内で複数ポートでアプリを動かしている場合、注意が必要。

## 注釈
- **Proxy**: 代理,代理人の意味
- **Aレコード**: A(Address)レコードは、IPｖ4でホスト名とIPアドレスの関連づけを定義するレコードのこと。

シェルスクリプトに関する記事

シェルスクリプト

DNSサーバとプロキシサーバについて

## コード

```js
const func = new Function("const name = 'キルア'; console.log(name);");
func();
// キルア
```

JavaScript

文字列で渡したJavaScriptを実行する

## 環境

- vue: ^2.6.11
- agora-rtc-sdk-ng: ^4.3.0

## ミュート処理(localAudioTrackの非活性化)

`setEnabled()`を使い、`localAudioTrack`の`mute`,`unmute`を実現する。
`localAudioTrack._enabled`プロパティを確認し、切り替えさせる。

```js
async toggleMuteLocalAudioTrack () {
  if (this.rtc.localAudioTrack && this.rtc.localAudioTrack._enabled) {
    await this.rtc.localAudioTrack.setEnabled(false)
  } else {
    await this.rtc.localAudioTrack.setEnabled(true)
  }
}
```

## close createの注意点

`if`条件式で、`localAudioTrack`の有無を確認していたが、`close()`した場合、`localAudioTrack`は使えなくなるが、オブジェクトが残るので、`if`条件式を消す。

### localAudioTrack作成の処理

変更前

```js
if (!this.rtc.localAudioTrack) {
  this.rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack()
}
```

変更後

```js
this.rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack()
```

### localAudioTrackを閉じる処理

> ローカルトラックを閉じて、占有しているオーディオおよびビデオリソースを解放します。
> ローカルトラックを閉じると、それを再利用することはできなくなります。

```js
if (this.rtc.localAudioTrack) {
  this.rtc.localAudioTrack.close()
}
```

## 参加しているユーザーの状態を取得したい時

1.チャネルに入った時
2.自分がミュートにした時
3.自分がミュートを解除した時
4.他の人がミュートのした時
5.他の人がミュートを解除のした時

### リモートユーザーの状態が取得できるイベント・プロパティ

- `user-published`
- `user-unpublished`
- `user-info-update`
- `rtc.client.remoteUsers`

`_audio_enabled_`、`_audio_muted_`という値が音声状態を表しているので、ここを見る。

## 参考
- [AgoraWebSDK NG API Docs](https://agoraio-community.github.io/AgoraWebSDK-NG/api/en/index.html#core-methods)
- [Interface IMicrophoneAudioTrack](https://agoraio-community.github.io/AgoraWebSDK-NG/api/en/interfaces/imicrophoneaudiotrack.html#setdevice)
- [setEnabled](https://agoraio-community.github.io/AgoraWebSDK-NG/api/en/interfaces/imicrophoneaudiotrack.html#setenabled)

Agora

AgoraWebSDK-NGで音声のミュート機能を作る

ノスタルジック！

<iframe width="560" height="315" src="https://www.youtube.com/embed/0HXg57z4VDA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Funky!

Merge - You're My Everything

音楽

## 動機

1.GitHubからNode.jsのPackageをforkし、

2.ローカルで開発する

という流れを作って、OSSにPRを送ってみたい。

## ①forkしてgit cloneする

1.GitHubでforkし

2.`git clone url`を実行する。

### Couldn't find the binary git

Dockerコンテナ内(`node14.15.3-alpine`)で実行していたら、上記のエラーが出たので、gitをインストールする。`Dockerfile`にも記載しておく。

```bash
apk add git
```

## ②package.jsonを確認する

[package.json](https://docs.npmjs.com/cli/v7/configuring-npm/package-json)

- **main**: 一番最初に実行されるファイル。ここを真っ先に確認すると良さそう。設定されていない場合は、デフォルトでパッケージのルートディレクトリ`index.js`が設定される。

```js
const modules = require("modules") // CommonJS

// ES modules
import Foo from "modules" // 1つ
import { Foo } from "modules"　// 複数ある場合
import { Foo as MyFoo } from "modules" // 名前をつけて
import { default as MyFoos } from 'modules'; // default exportの場合
import { * as MyFoos } from 'modules'; // まとめて
// ※あまり詳しくないので、これから勉強
```

を実行した場合、`index.js`に記載されている`exports`のオブジェクトが返ってくる。

```json
{
  "main": "dist/index.js"
}
```

- **name**: パッケージ名。
- **version**: バージョン。nameと共に、一意になることが想定されている。
- **scripts**: ShellScriptを実行するaliasを貼る。
- **repository**: ソースコードの管理場所を指定する。
- **private**: trueの場合、モジュールの公開ができない。エンドユーザアプリなどは基本、falseになると思う。

※結構出てくる`esm`はES modules`cjs`はCommonJSをだいたい意味する。

## ③installとbuild

`npm install`した際に、`package.json`に`install`の記述がない場合、`node-gyp rebuild`が実行されるみたい。

だが、Docker内で実行したら、`dist/`が生成されなかったので、`npm install`した後に、`npm run build`を実行し、`dist/`の生成を確認。（`scripts`に`dist/`に吐き出す設定は書いてある。）

### ex) install ライフサイクル

- preinstall
- install
- postinstall
- prepublish
- preprepare
- prepare
- postprepare

の順番で実行される。実際にログを見るとこの順番で実行されている。

## ④ローカルリポジトリにmodulesをインストール

`fork_modules`というディレクトリを作り、forkしてきたリポジトリを置いてみた。

```bash
mkdir fork_modules
cd fork_modules
npm install
npm run build
```

`dist/index.js`ができていることを確認する。

プロジェクトに戻り、

```bash
yarn add ./fork_modules/{modules}
```

`package.json`にはこのような形で、記載された。

```json
{
  "dependencies": {
    "modules": "./fork_modules/modules/"
  }
}
```

※プロジェクトに`yarn`を使っていて、moduleのビルドに`npm`を使っています。

## forkしたGitHubリポジトリからインストール

`"modules": "git+{https://github.com/username/リポジトリ名}"`で指定する。

ブランチ・タグ・コミットハッシュ値を指定する場合は、`#`で指定する。

```json
{
"dependencies": {
  "modules": "git+https://github.com/username/リポジトリ名.git"
}
```

上記が完了したら、`npm install`を実行する。

## そのまま相対パスでimportする

冷静に考えて、毎回ファイルを変更する度に、`npm run build`した後に、`yarn install`するのも面倒くさいので、そのまま相対パスで読み込むことにした。

### ex) ビルド前

ビルド前のソースコードは`src/`にあったので、そのまま読み込む。

```js
import { Foo as Bar } from '../fork_modules/modules/src/index'
```

### ex) ビルド済 dist/

```js
import { Foo as Bar } from '../fork_modules/modules/dist/index'
```

実際の`scripts`は以下のような形。

```json
"scripts": {
  "build": "npm run build:cjs && npm run build:esm && webpack",
  "build:cjs": "BABEL_ENV=cjs babel src --out-dir ./dist/cjs",
  "build:esm": "BABEL_ENV=esm babel src --out-dir ./dist/esm"
}
```

## そして...

そしてよく見てみたら、開発サーバーの起動もありましたw
読みづらいなあと思っていたが、webpackのbundle済ファイルでした。ちゃんと読みやすかった。

```json
"dev": "webpack-dev-server --hot --inline"
```

```bash
npm run dev
```

## 注釈

- **npm**: Node Package Manager。Node.jsのPackageを管理する。
- **Node.js Package**: modulesとほぼ同義で扱われる。インストールしたmodulesは`node_modules`に配置される。
- **Modules**: ある一定の機能を持ったコード群。[JavaScript Modules: From IIFEs to CommonJS to ES6 Modules](https://dev.to/tylermcginnis/javascript-modules-from-iifes-to-commonjs-to-es6-modules-33p1)この投稿が良いかも。
- **ES modules**: ES2015で決められたJavaScriptファイルから別のJavaScriptファイルを読み込む仕組みのこと(`export`, `import`, etc)
- **CommonJS**: ES2015より前に決められたAPIの仕様(`module.exports`, `require()`, etc)
- **Webpack**: Module Bundlers。コードをまとめる。色々なサポート機能がある。(ex) 開発サーバ)
- **babel**: JavaScriptコンパイラ。
> 現在および古いブラウザまたは環境でECMAScript2015 +コードを下位互換性のあるバージョンのJavaScriptに変換するために主に使用されるツールチェーンです。
- **トランスパイル**: ある言語で書かれたコードを元に別の言語のコードを生成すること。
- **Polyfill**: 古いブラウザでは実現できないAPIを、古いブラウザでも同等の機能を使用できるように補うための小さなライブラリのようなもの。

## 参考

- [Modules: Packages](https://nodejs.org/api/packages.html)
- [package.json](https://docs.npmjs.com/cli/v7/configuring-npm/package-json)
- [scripts](https://docs.npmjs.com/cli/v7/using-npm/scripts)
- [JavaScript Modules: From IIFEs to CommonJS to ES6 Modules](https://dev.to/tylermcginnis/javascript-modules-from-iifes-to-commonjs-to-es6-modules-33p1)
- [Babel is a JavaScript compiler](https://babeljs.io/docs/en/)
- [Webpack DevServer](https://webpack.js.org/configuration/dev-server/)

npmパッケージを開発したい

[Absolute Imports and Module path aliases](https://nextjs.org/docs/advanced-features/module-path-aliases)に記載してありました。

## 1. jsconfig.json または tsconfig.jsonに設定する

```json
// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}
```

## 2. import文を変更してみる

```js
import Pagination from '@/components/pagination'
```

## 3. devサーバの再起動

devサーバの再起動しないと、`jsconfig.json`が読み込まれないようです。

## 自分のもの

```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/lib/*": ["lib/*"],
      "@/styles/*": ["styles/*"]
    }
  },
}
```

Next.js コンポーネントのimportで相対パスを使う

## ケース: Pタグからcodeタグがはみ出してしまうケース

```js
<p><code>some...</code></p>
```

```css
overflow-wrap: break-word;
```

## TailwindCSS

```css
p {
  @apply break-words;
}
```

- [Word Break](https://tailwindcss.com/docs/word-break#class-reference)

overflow-wrap

Operational Transformation(操作変換)アルゴリズムを使用し、共同編集の実装をしている。
また、OTのバージョンが異なるので、バージョンに注意する。

```bash
npm run build # コンパイル済ファイルの生成
node dist/index.js # 実行
```

フロントエンド: [https://github.com/Operational-Transformation/ot.js/tree/master/dist](https://github.com/Operational-Transformation/ot.js/tree/master/dist)の`ot-min.js`を使用する。
バックエンドは、SocketIOのバージョン周りが古いので、書き換える。

## 参考

- [DocBaseの同時編集機能を実現しているアルゴリズム](https://kray.jp/blog/algorithm-operational-transformation/)
- [Operational-Transformation/ot.js](https://github.com/Operational-Transformation/ot.js)

otの共同編集機能を見ていく

## 動機

元々このサイトはNuxtJSで構築していたが、TaiwindCSSのHeadlessUIが使いたいので、NextJSでブログを構築してみる。（NuxtJSのVue3対応は楽しみ。）あと、NextJSはTypeScriptのサポートや最近のAPIサービスのチュートリアルが充実しているので楽しみ。
\
また、CSSの独自実装が増えると管理が大変だったので、極力Tailwind一本にしたい。デザイン(CSSを含む)の知識がない中で、悩みながら実装するとかなり時間がかかるし、汚いコードが生成される。諦めてCSS Framworkに任せて、本当に実装したいデザインなどは腰を据えて取り組んだ方が良さそう。

## やること

- Contentfulと統合
- TailwindCSSと統合
- Google Analyticsと統合
- Vercelにデプロイ

※TypeScriptとテスト関連も後々入れてみたい。

## Pagesの構成

- `/index.js`
- `/page/[page].js`
- `/tag/[slug]/index.js`
- `/tag/[slug]/page/[page].js`
- `/category/[slug].index.js`
- `/category/[slug]/page/[page].js`
- `/[slug].js`

## NextJSとContentfulの統合

- [Next.jsとContentfulを統合する](https://www.netlify.com/blog/2020/08/17/integrate-next.js-contentful/)

`@/lib/contentful.js`

```js
const contentful = require("contentful")
const config = {
  space: process.env.CONTENTFUL_SPACE,
  accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
}
const client = contentful.createClient(config)
export default client
```

```js
import client from '@/lib/contentful'

export async function getStaticProps() {
  await client.getEntries({
    content_type: 'post'
  })
  ...
}
```

- [Getting Started with Contentful and JavaScript](https://www.contentful.com/developers/docs/javascript/tutorials/using-js-cda-sdk/)

## next/linkを使う

```js
import Link from 'next/link'

function Home() {
  return (
    <Link href={article.slug}>
    　　<a>Home</a>
    </Link>
  )
}
```

- [next/link](https://nextjs.org/docs/api-reference/next/link)

## getStaticPaths()

Pre Rendering(SSG)で生成する必要のあるページはこの関数を使用する。ビルド時に実行される。

```js
export async function getStaticPaths() {
}
```

## getStaticProps()

こちらもビルド時に実行される。おそらく`getStaticPaths`で取得したPATHからparamsをどんどん取得していくんだと思う。

```js
export async function getStaticProps() {
}
```

## Objects are not valid as a React child

`Objects are not valid as a React child`

下記のような形でobjectを表示しようとしていたら、エラーが発生した。ちゃんと`article .fields.title`で表示したら直った。

```js
function Article({ article }) {
  return (
    <div>{article}</div>
  )
}
```

- [Next.jsを使用したMarkdown / MDX](https://nextjs.org/blog/markdown)

## NextJS markdown

[remarkjs/react-markdown](https://github.com/remarkjs/react-markdown)を使用する。[Dynamic Routes](https://nextjs.org/learn/basics/dynamic-routes/render-markdown)も参考にした。

```js
/* Use `…/dist/cjs/…` if you’re not in ESM! */
// import {dark} from 'react-syntax-highlighter/dist/esm/styles/prism'
import {dark} from 'react-syntax-highlighter/dist/cjs/styles/prism'
```

`react-syntax-highlighter/dist/cjs/styles/prism`を覗くとめちゃめちゃあった。`node_modules/react-syntax-highlighter/dist/cjs/styles/prism/index.js`にexportが記載されているので、色々importしてみる。

`ex) vscDarkPlus`

- [PrismJS  examples](https://prismjs.com/examples.html)

### お気に入りPrismJSテーマのメモ

自分で設定してみても面白そう。

- nord
- materialOceanic
- materialLight: darkmodeの場合など
- materialDark
- dracula
- coldarkDark: かなり見やすい
- coldarkCold
- atomDark
- tomorrow

あと、コピー、行数、ファイル名、タブも実装してみたい。

## `<></>`

コンポーネントのルートの要素に困ったときに使っている。

```js
function SomePage() {
  return (
    <>
    </>
  )
}
```

## Sassの導入

[sass-support](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support)

```bash
npm install sass
```

`next.config.js`にsassコンパイラの設定を書く。

## ESLintとPrettierのインストール

- [Setting up ESLint and Prettier For Your Next.js Project](https://xenox.dev/setting-up-eslint-and-prettier-for-next-js-project/)

## モバイルのレスポンシブ

- width100% + paddingの部分が適用されるのでかくつく

## remについて

HTMLタグのfont-sizeを基準として動く。

## 可愛いサイトを見つけた

- [frendly](https://frendly.dev/)

## NetlifyにGoogle Analyticsしたままだったら。。。

Google検索で表示されなかった。スマホだと表示されていた。Netlifyのサイトを消したら表示できた。

## 感想

TailwindCSS使ったら実装早くなる。あと　Next.js×Vercel早いし、楽ちんやで。


Next.jsとContentfulを統合する

## dateでよく使う値

```php
$today = date('Y-m-d'); // 今日の日付を取得する
$fromDate = date("Y-m-01"); // 月初の取得
$toDate = date("Y-m-t"); // 月末の取得
```

## Y-m-01からY-m-tのレコードを取得する

```php
$any = SomeTable::where('user_id', $userId)
    ->whereDate('from_date', '>=', $fromDate)
    ->whereDate('to_date', '<=', $toDate)
    ->get();
```

レコード数の取得

```php
count();
```

## 条件式

```php
$fromDate <= $date && $date <= $toDate
```

## whereNull whereNotNull

```php
$query->whereNull('判定対象カラム名');
$query->whereNotNull('判定対象カラム名');
```

## exists()

カラムの有無を確認する

```php
where(...)->exists()
```

Laravel

Laravel(PHP)で月初や月末でレコードの操作をする

認証/認可の基盤がしっかり構築できると、アプリケーションの機能開発がスムーズにできるようになります。他にも決済や通知系(運用やユーザーテスト)なども同様です。

## 認証(Authentication)

OAuth認証がよく使われています。

- Google OAuth 2.0 (Google Identity)
- GitHub OAuth
- Firebase
- Auth0

などよく使用します。

フロントエンドでOAuthを呼び出し、成功すると、

- username
- email
- provider_id
- provider_name

などのデータが返ってきます。これらをバックエンドのDBに保存し、サービスのユーザーとして紐づけることで誰か特定できるようにします。独自の認証の場合は、パスワードを入力し、生成されたユニークなユーザーIDで識別しますが、OAuthの場合は、DBに登録したprovider_idやprovider_nameを使い識別します。

## 認証と認可の違い

- 認証(Authentication)とは、相手の身元を確認すること。通信の相手が誰 (何) であるかを確認すること
- 認可(Authorization)とは、権限を与えること。とある特定の条件に対して、リソースアクセスの権限を与えること。

## HTTPステータス

- 401 Unauthorized
> 認証の失敗 (お前誰だよ。)
- 403 Forbidden
> 認可の不足 (理解した。だが断る。)

## API or JWT認証

API Token or JWTを生成し、API利用(サービス利用)ができるかサーバーサイドで確認します。

①OAuthを使い、サービスにログイン(認証)
②API Token or JWTを生成し、基本的なサービスを利用できるようにする(認可)

このような形でしょうか。
\
細かいサービス利用権限はバックエンドで設定します。

## 暗号化/ハッシュ化

また、SHA256など、ユーザーのデータやtokenは暗号化やハッシュ化の対応が必要です。

## 参考

- [よりよくわかる認証と認可](https://dev.classmethod.jp/articles/authentication-and-authorization-again/)
- [GitHub Authorizing OAuth Apps](https://docs.github.com/en/developers/apps/authorizing-oauth-apps)
- [Using OAuth 2.0 to Access Google APIs](https://developers.google.com/identity/protocols/oauth2)
- [Laravel API Authentication](https://laravel.com/docs/5.8/api-authentication)
- [jwt.io](https://jwt.io/)


認証

認証/認可まとめ

## URLの切り取り

SHA256が入ってくるイメージ。

```js
const paragraph = '/invite/77/example';
const regex = /^\/invite\/\d+\/[A-Za-z0-9]+/;
const found = paragraph.match(regex);

console.log(found);
// => Array['/invite/77/example']
console.log(regex.test(paragraph))
// => true
```

先頭の`/`を空にする。

```js
let url = found[0]
url = url.replace(/^\//, '')
// => 'invite/77/example'
```

- `^` 行の先頭にマッチする
- `+` 直前の文字の１文字以上の繰り返しにマッチする
- `\d` 数値

### オプション

- `/g`: 全体を検索するか。ない場合、一度マッチしたら終了する。

```js
const regex = /^\/invite\/\d+\/[A-Za-z0-9]+/g;
```
### SHA256

- 16進数で64桁の値を返す。
- 256bitのデータ量
- 0~9+A~Fまでの16種類の文字列をハッシュとして返す

## 参考

[JavaScript 正規表現まとめ](https://qiita.com/iLLviA/items/b6bf680cd2408edd050f)

JS正規表現まとめ

VueJSとvue-i18nを使って実装を進めている多言語対応に、引数を渡して表示できるようにしたい。

## JSON

以下のようなjsonがある場合のケースです。
\
ja.json

```json
{
  "LIMIT_MINUTES": "あと%{minutes}分で制限されます。"
}
```

en.json

```json
{
  "LIMIT_MINUTES": "limited to %{minutes} more minutes.",
}
```

## 引数の渡し方

`%{value}`で定義し、第二引数に`{ value: value }`で渡す。

```js
this.$t('LIMIT_MINUTES', { minutes: 6 })
// => あと6分で制限されます。
```

Vue.js

vue-i18nで引数を渡す方法

## 意図

何かの動作時に音を出してユーザーに認識して欲しいケースがあります。
ex)ビデオチャット,Push通知etc

## Audio()

JavaScriptのAudio APIを使います。

```js
const audio = new Audio('example.mp3');
audio.play();
```

## VueJSで鳴らす

```js
  data: () => ({
    audio: new Audio(require('@/assets/sounds/example.mp3'))
  }),
  created () {
    this.audio.currentTime = 0 // 連続で鳴らせるように
    this.audio.play() // 鳴らす
  }
```

ポイントとしては、VueJSのscriptsでassetsファイルを扱う場合、`require('@/assets/sounds/example.mp3')`のようにするところです。
[otologic.jp](https://otologic.jp/)がよかったです。

## 参考

- [Audio()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement/Audio)

VueJSで効果音を鳴らす

## Lambdaを作成する。

追加するとzip形式でデプロイされる。
ECRで動かす場合、コンテナイメージを選択する。

## S3をトリガー

色んなサービスからトリガーできるみたい。

## Lambdaの権限の追加

「関数の詳細」→「アクセス権限」→「ポリシーの追加」から追加できる。
S3やCloudWatch Logs実行する必要がある場合、追加する。
ex)AmazonS3FullAccess
\
また、「実行ロール」→ポリシーのアタッチからでもいける。

## Lambdaの環境変数の設定

「関数の詳細」→「アクセス権限」→「環境変数」から追加できる。

## Elastic Container Registryを使ってみる

LambdaでESRを実行できるようなので、使ってみる。

ログインをしようとしたが、エラーが発生した。一応、`.aws/credentials`はあったが、ログインできなかったので設定してみる。

```bash
aws configure
```

```bash
aws ecr get-login-password
# => successed
```

profileについては、[名前付きプロファイル](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-configure-profiles.html)に詳しく記載されていた。


Lambda

AWS Lambda使ってみた

## .gitignoreで特定のディレクトリの特定のファイルは許可する

`example.js`以外の`/example/*`のファイルを全て管理対象から外す。
※正規表現を使用すること。

```bash
/example/*
# /example/ではない
!/example/example.js
```

example.jsは通す server.jsも通す /example.js/* は通さない！

## ファイル名で除外する

`/example/*`のファイルを全て管理対象から外す。

```bash
/example/*.js
```

## 参考

- [gitignore Documentation - Git](https://git-scm.com/docs/gitignore)