Vercel にベーシック認証をサクッとつけて確認URLとして使う

こんにちは。フロントっぽいメモ久しぶり！\
職場ではわからないことが多くぎて泣きそうな2週間を経て、わからないことにだんだん慣れてきてしまっています。イタリアに移住した時に、イタリア語が喋れなくて最初パニックになったけど、何週間かしてそれば普通になったのを思い出してしまいました。イタリア語もプログラミング言語も同じで、毎日その場に身をおいてればなんとかなる！はず！！

## 今回の静的サイト構成
つかっているものたち
- webpack
- JavaScript (TS, React)
- sass
- pug

ディレクトリ構成
- src/ ビルド前の sass, pug, ts
- dist/ ビルド後の css, html, js

みたいな古の静的マークアップ構成でも、Vercel 使ってさくっとベーシック認証かけます。\
今回は Vercel でベーシック認証かけるメモなのでこの辺の build まわりの流れは省略します。

## 前提
つくったプロジェクトを git 経由で vercel に紐づけておきます。設定で適宜 build コマンド（今回は yarn build に上書き）や public フォルダ（今回は dist という名前に上書き）を設定しておきます。

## 0. static-auth と safe-compare をインストール
```
yarn add static-auth safe-compare -D
```

## 1. プロジェクトルートに app.js を設置
```js
const protect = require('static-auth');
const safeCompare = require('safe-compare');

const USER_NAME = process.env.USER_NAME || 'id';
const PASSWORD = process.env.PASSWORD || 'pass';

const app = protect(
  '/',
  (username, password) => safeCompare(username, USER_NAME) && safeCompare(password, PASSWORD),
  {
    directory: `${__dirname}/dist`, // dist 配下のファイルを静的コンテンツとして配信する
    onAuthFailed: (res) => {
      res.end('Authentication failed')
    },
  }
)

module.exports = app
```
`id` と `pass` 箇所を好きなものに変えます。環境変数に入れる場合は vercel の環境変数に設定します。

## 2. プロジェクトルートに vercel.json を設置
```json
{
  "builds": [
    {
      "src": "app.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    { "src": "/.*", "dest": "app.js" }
  ]
}
```
これだけです！

## 参考にしました
まったくもって参考にさせてもらいました。感謝。
- [VercelにホスティングしたウェブサイトにBasic認証を設定する 🔐](https://blog.kimizuka.org/entry/2021/06/09/231526)

Laravel で使われる Redis がわからなかったので調べたメモなだけです。まだよくわかってません。

私だけが知らない単語：Redis

## Redis とは
<img src="/static/laravel-redis.png" alt="Redis" width="80">

[Redis](https://redis.io/) とは、オープンソースで、データの永続化ができる永続化可能なインメモリデータベース（In-memory database）です。Redisはメモリ上で動作するキーバリューストア型のデータベースです。\
🤔\
NoSQL のデータベースなので、RDBよりも処理速度が高速で、且つ JSON 形式でも以下のデータ型が用意されています。
- strings
- hashes
- lists
- sets
- sorted sets
使い所としては、 web アプリケーションのセッション管理、ページのキャッシュ、リアルタイムの更新などで、ページの表示速度を高速化できるようです。
- 参考にしたサイト：[Redisの特徴と基本的な使い方をわかりやすく解説！Redisの用途と活用方法・メリットは？使えるコマンド一覧もご紹介](https://agency-star.co.jp/column/redis/)

## Laravel と Redis
- [公式ドキュメント](https://laravel.com/docs/8.x/redis)
Laravel 8 のテンプレートをインストールした時点で、Redis を使えるようにセットアップはされているようですが、使用には [phpredis](https://github.com/phpredis/phpredis) のインストールが必要です。`predis/predis` を使う場合は composer でインストールします。\
設定ファイルは `config/databese.php` の `Redis Databases` にあります。 

## その他のドキュメント
急に投げやりになっててあれなんですがまだ理解が追いついていないので調べつつこの記事を更新していきたいと思いますので、参考サイトを貼るにとどめます。。
- [Laravel 日本語ドキュメント](https://www.oulub.com/docs/laravel/ja-jp/redis)
- [Qiita LaravelでRedisを操作する](https://qiita.com/toontoon/items/02bd35266dae6c6640ad)


このシリーズは単語レベルでの理解を目標にしているため実践的な内容ではありません。

私だけが知らない単語 AWS：Systems Manager Session Manager (SSM)

こんにちは。就職したとたん早起きできるようになりました。前職ではあんまり早起きできなかったんだけど。。\
純粋に会社が遠いのでデフォルトで最遅な起床時間が6時半で、在宅でも持続していてめっちゃ健康的✨\
この時期は朝とてもいいので30分くらい散歩しています。

## 私だけが知らない
適当に生きてきてしまったため、知らないことが多いんですが、知らないことが多いのは楽しいな〜😊\
逆に私が知ってることって何があるんですかね？\
ということで、今更私が知ったことをメモしていきます。AWS 以外にも単語で知らないものを頭に覚えさせるために記事を書きます。

## 私の AWS 経験
まず AWS で私が使ったことがあるのは、
- S3
- Route53
- CloudFront
- Lambda
- SES

だけで、全部静的サイトのホスティングとか、LPのドメイン管理とドメインメールの設定をしたことがあっただけでした。よって最も一般的である EC2 触ったことがないんですよね・・。

## AWS Systems Manager Session Manager (SSM)
### What
- [公式ドキュメント Systems Manager Session Manager](https://docs.aws.amazon.com/ja_jp/systems-manager/latest/userguide/session-manager.html)

> Session Manager は、AWS Systems Manager のフルマネージド機能で、Amazon Elastic Compute Cloud (Amazon EC2) インスタンス、オンプレミスインスタンス、仮想マシン (VM) を、インタラクティブなワンクリックブラウザベースのシェルまたは AWS Command Line Interface (AWS CLI) を介して管理できます。Session Manager は、受信ポートを開いたり、踏み台ホストを維持したり、SSH キーを管理したりすることなく、安全で監査可能なインスタンス管理を行えます。また、Session Manager により、一方でエンドユーザーには マネージドインスタンスへのクロスプラットフォームアクセスをワンクリックで簡単に行えるようにしながら、他方でインスタンスへのアクセスの制御、厳格なセキュリティプラクティス、およびインスタンスアクセスの詳細を含む完全な監査可能なログを必要とする企業ポリシーへの準拠もできます。 

Systems Manager の中の、Session Manager を使うことによって、社内のメンバーがそれぞれアクセスしているインスタンスの管理を一元化できたり、SSH キーを使わずに、 AWS CLI からインスタンスにアクセスできるようになるため、セキュリティの向上と操作性が上がるようです。

検索してみると、SSH キーを使わずに EC2 インスタンスにアクセスできるためよく使われているようです。

- 22ポートを開放しなくても良くなるのでセキュリティにとって良い
- IAM によるアクセス制御が可能なので、ユーザを管理しやすい
- 各ユーザの接続履歴がログとして残るのが良い

といった利点があるのですね。

## How
設定方法は、[こちら（公式ドキュメント）](https://docs.aws.amazon.com/ja_jp/systems-manager/latest/userguide/session-manager-getting-started.html)。\
現在 AWS は急務ではないため単語の理解に留めています。

## 参考に読ませてもらいました
- [今すぐやめようssh! AWS Session Managerを検証・導入してみた](https://tech.asoview.co.jp/entry/2019/12/17/105929)
- [Session Managerでプライベートネットワークにセキュアにアクセスする環境を構築](https://kenchan0130.github.io/post/2020-12-10-1)

Laravel 入門 1日目 | Route の基本

こんにちは。なんかブログのデザインをちゃんと練り直そうかなと思っています。あと react-markdown よりも MDX のほうがつかいやすそうなので変えようかな〜とか。

## Laravel 8 Route
基本を[公式ドキュメント](https://laravel.com/docs/8.x/routing)から抜粋します。\
`routes/web.php` にルートを定義していきます。

### Hello World
/greeting にアクセスすると、 Hello World 文字列を表示しています。
```php
use Illuminate\Support\Facades\Route; // 最初から読み込まれているので以下は省略

Route::get('/greeting', function () {
    return 'Hello World';
});
```

## Controller を通してのアクセス
最もよく使う？のはこの書き方でしょうか。
```php
// routes/web.php
use App\Http\Controllers\UserController;

Route::get('/user', [UserController::class, 'index']);
```
※ Laravel 7 までは、Controller の呼び出しは下記の書き方だったので注意。8 では、↑の書き方になりました。
```php
// routes/web.php
Route::get('/user', 'UserController@index');
```

## リダイレクト
リダイレクトさせるには下記のように書きます。
```php
Route::redirect('/古いURI', '/リダイレクト先のURI');
```
デフォルトでは、 `Route::redirect` は 302 リダイレクトをします。302 リダイレクトは短期的なリダイレクトで SEO の評価も受け継がないので、301 リダイレクトさせたいときが多いかと思います。そのときは、
```php
Route::redirect('/古いURI', '/リダイレクト先のURI', 301);
// または
Route::permanentRedirect('/古いURI', '/リダイレクト先のURI');
```
のように書きます。

## View を返す
Laravel 初期状態では、トップページは
```php
Route::view('/', 'welcome');
```
のようになって `welcome` view を表示させています。完全な静的ページを返す場合に使うのかな。

view に パラメータを渡す場合は、以下のようにします。
```php
// routes/web.php
Route::get('/passvar/{id}', function ($id) {
    return view('welcome', compact('id'));
});

// resouce/view/welcome.blade.php
{{$id}}
```

上記の場合、パラメータは必須なので、パラメータを入力しない場合エラーになってしまいます。\
パラメータをオプションにするには、下記のようにします。
```php
Route::get('/passvar/{id?}', function ($id = null) {
    return view('welcome', compact('id'));
});
```

## Controller を使って View に変数を渡す
```php
<?php
// HelloController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HelloController extends Controller
{
    public function index() {
        return 'Hello World!';
    }
    public function view() {
        // a. view 変数を用意
        $data = [
            'message' => 'Hello World!!'
        ];
        // b, テンプレートを呼び出す
        return view('hello.view', $data); // hello.view = /resouces/view/hello/view.blade.php を指す。view の部分はアクション名（12行目）と同じにする習わし
    }
}
```
```php
// route/web.php
Route::get('/hello/view', [HelloController::class, 'view']);
```
```php
// resources/views/hello/view.blade.php
<p>{{$message}}</p>
```
上記の例では、/hello/view にアクセスすると Hello World!! が表示される。

## Route Groups
route は同じ階層にグルーピングすることができる。上記のサンプルの hello 配下のルートは、下記のように `prefix` でまとめられる。
```php
// route/web.php
Route::prefix('hello')->group(function () {
    Route::get('/', [HelloController::class, 'index']);
    Route::get('/view', [HelloController::class, 'view']);
    Route::view('/staticpage', 'hello.staticpage'); // 静的なページ
});
```

Shopify アプリ開発の話。詰まったときは Issue を立てろという話。

Issue を立てよう。~ Shopify アプリを app cli で初めて作ったときに立てた Issue を振り返る~

こんにちは。今は2021年8月も終わろうとしていますが、去年の今頃、社内で Shopify アプリを作るプロジェクトを行っていて開発をしていました。\
公開したのが9月だったので、ちょうど1年経つということもあり、また、1年に渡りメインで開発をしていましたが、転職に伴いメインエンジニアをやめることとなったので、何回かに分けて苦労した話とか Tips なんかを共有できたらいいな〜と思っています。\
どっちかっていうとすぐ役に立つコードの共有というよりは、開発のときどう考えて何をしたかということを忘れないように書き留めておくメモのような感じです。

## Shopify App CLI を使った
Shopify アプリを開発するとうことで、3人のチームを結成しましたが、我々は全員フロントエンドの知識しかなかったため、Shopify 公式が出しているアプリ作成テンプレートの [Shopify cli for app](https://shopify.dev/apps/tools/cli) を使って Node.js 製のアプリを作ることにしました。

## Shopify App CLI はすごいスピードでアップデートされている
よくあることですが。開発を始めたときのバージョンはまだ 0系 だったですが、1系を経て、今は 2系になっていますね。1年間で。\
アプデされること自体はいいのですが、開発メンバーが増えるタイミングで CLI が動かない、うまくいかないというトラブルがあったり、バージョンアップの度に何らかしらの問題が起こっていました。

## Issue を立てよう
[開発中に私が立てた Issue](https://github.com/Shopify/shopify-cli/issues?q=is%3Aissue+author%3AShirasuGyoza) は以下でした。

-  new shopify cli 1.0.0 installed but got error #740 
-  Error when connect first time : fetch_with_app': undefined method []' for nil:NilClass (NoMethodError) #763 
-  Shopify connect doesn't show all of my partner organization #1190 
-  ngrok tunnel could not be stopped. Try running killall -9 ngrok #1426 

うち2つは自力で解決して、2つは解消してもらいました。\
実は、エンジニアになってから3年目だったのですが、こういう公式のリポジトリに Issue を立てたのは初めてだったんですよね。（#740のやつ）\
それに対して複数の人が同様のエラーを報告して、バグを直してもらったのでとても嬉しかったとこを覚えています😊
![Screenshot of issue comment](/static/shopify-app-cil-issues-i-created_01.png)

## Issue を立てる前に
Issue が乱立してしまうと本当にもとめている解決策や解消の妨げになることもありますので、すぐに Issue を立てるのではなく、そこそこドキュメントを読んで、コミュニティで同様の質問がないか調べ（もちろん Issue でも同様の質問がないか探します。Closed された Issue もよく探してみます）、試行錯誤し、それでも解決しなかったら立てるようにしています。\
とはいえ、あなたが Issue を立てることで、すぐに解決したり、よりよい解消に向かう可能性が高いので、どんどん Issue を活用していきたいなと思います。\

## Issue タイトルをわかりやすく書く
多くの場合、よくある Issue テンプレートに沿って、起こっている問題・期待される状態・自分の使っている環境の提示などをしますが、タイトルを如何にわかりやすく書くかでいつも悩んでしまいます。\
Issue タイトルには、何が・いつ・どうなっているのかを書いて問題を明確にするべきです。

- 悪い例
    - ooがエラーで動かない
    - ooが止まる
    - ooを改善する
- 良い例
    - xxの時にooコマンドを打つとooエラーが出る
    - vxにバージョンアップしたらooが表示されなくなった
    - xxのときにooになる不具合がある

などが良いのかなと思います。\
これは英語でオープンソースのリポジトリに対して Issue を立てるときだけではなく、普段の業務で自分のリポジトリに Issue を立てる時にも意識したいですね。

## 最後に
Shopify は開発がまさに進行している！というサービスなので、こうやって不具合が結構起こるのですが、それを差し引いても進んでいるという感じがして開発するのはとても楽しかったです。英語のドキュメントを真面目に読んだり、Issue を立てたりすることで、ほんのすこし英語力もあがった気がします👩\
今後は会社でも Shopify アプリに関わりますが、個人でも小さいアプリを開発運用していこうと計画しているので、はやいとこ真面目に着手しようと思います。このブログは読んでいる人いない気がしますが、また情報共有していこうかな。

Laravel に必要なものをインストールした

Laravel 入門 0日目 | Install PHP, mySQL, Laravel, composer and Valet

こんにちは。これは Laravel 入門の Udemy 動画学習のメモです。インド英語も聞き慣れてきたぞ。\
学んだこと、嵌ったときの解決法をメモしていきたいと思います。このブログでのターミナルは zsh です。\
ちなみに zsh ってなんて発音するのか3年くらい保留にして生きてきてしまったのですが、検索したら `ジーシェル` とかが多そうだった。ゼッシュだと思っていたよ？
※複数のコマンドをまとめて記載している場合のみ文頭に `$` をつけて別々のコマンドであることを示しています。

## 1. PHP をインストール（PHP をアップデート）
PHP は入っているものの、古いバージョンだったためアップデートします。
```zsh
brew list
```
または
```zsh
php -v
```
で PHP のバージョンを確認します。私の場合は 7.3 だったので、LTS（Long Time Support）である 7.4 にアップデートしました。
```zsh
brew install php@7.4
```
上記コマンドを叩くと親切に促されるままにパスを通します。
```zsh
$ echo 'export PATH="/usr/local/opt/php@7.4/bin:$PATH"' >> ~/.zshrc
$ echo 'export PATH="/usr/local/opt/php@7.4/sbin:$PATH"' >> ~/.zshrc
```
最後に上記の変更を `source` コマンドで反映させます。
```zsh
source ~/.zshrc
```

## 2. mySQL をインストール
なにはさておき myQSL をインストールします。
```zsh
brew install mysql
```
指示に従ってパスを通して反映させておきます。\
mySQL を起動します。
```zsh
brew services start mysql
```
そして mySQL にログインします。
```zsh
mysql -uroot
```
u は user name ですが、初期値は root なので、これで起動するはずです。初期値のパスワードは無です。\
こんな感じで👇
```zsh
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 17
Server version: 8.0.26 Homebrew

Copyright (c) 2000, 2021, Oracle and/or its affiliates.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
```
ログインしたら mysql コマンドが使えるようになります。
```mysql
mysql> create database my_database;
```
のようにデータベースを作成できるようになっています。
```mysql
mysql> show databases;
```
で作ったデータベースを参照できます。
```mysql
mysql> exit
```
コマンドで mysql を閉じます。
mySQL を止めるには
```zsh
brew services stop mysql
```
を叩きます。

## 3. composer をインストール
[composer](https://getcomposer.org/) の名をはじめて聞いたんですが、PHP を使うならみんな使っている、ライブラリ管理ツールです。\
Laravel も composer でインストールできます。
```zsh
brew insrall composer
```
インストールされたら comporser コマンドが使えるようになっているはずです。
```zsh
composer
```
コマンドのリストが表示されます。

## 4. Laravel をインストール
[Laravel のドキュメントから、composer で Laravel をインストールする箇所](https://laravel.com/docs/8.x/installation#the-laravel-installer)を参照します。#The Laravel Installer という箇所です。\
Laravel をグローバルインストールします。
```zsh
composer global require laravel/installer
```
パスを通して反映します。
```zsh
$ echo 'export PATH="$HOME/.composer/vendor/bin:$PATH"' >> ~/.zshrc
$ source ~/.zshrc
```
これで Laravel コマンドが使えるようになりましたので、ドキュメントにしたがってデモアプリを立ち上げます。
```zsh
$ laravel new example-app
$ cd example-app
$ php artisan serve
```
ローカルホストが立ち上がり、Laravel の表紙が表示されますね。デフォルトのポートは http://127.0.0.1:8000/　です。

## 5. Valet をインストール --option
[Valet](https://laravel.com/docs/8.x/valet#introduction) を使うことによって、複数の Laravel アプリを起動したり開発しているときにローカルホストのアドレスを `.test` のドメインでアクセスできるようになります。
例えば、４で作成したデモアプリは `example-app` という名前だったので、 `example-app.test` というアドレスでアクセスできるようになります。
ドキュメントに従ってインストール後、 `park` コマンドと `link` コマンドでアプリを紐付けます。

これで必要なツールが揃いました🎉\
次回は、Laravel の Routing を学びます。

replace every letter with its position in the alphabet という問題。

codewars | JS で アルファベットを順番の番号に置き換え

## 今回の問題：JS | アルファベットを順番の番号に置き換える
日本語ではまた違う話になりそうですが、アルファベットのテキストを、アルファベットの順番の番号に変換する関数です。
### 問題
In this kata you are required to, given a string, replace every letter with its position in the alphabet.\
If anything in the text isn't a letter, ignore it and don't return it.

### 例
```md
alphabetPosition("The sunset sets at twelve o' clock.")

// "20 8 5 19 21 14 19 5 20 19 5 20 19 1 20 20 23 5 12 22 5 15 3 12 15 3 11"
```

### 私の回答
```js
function alphabetPosition(text) {
  const arr = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
  const textArr = text.toLowerCase().split(''); // 小文字にしてから1文字ずつの配列に
  let result = [];
  textArr.forEach((item, index) => {
    arr.forEach((item2, index2) => {
      if(item2 === item) {
        result.push(index2 + 1)
      }
    })
  })
  result = result.join().replace(/,/g, ' ') // 配列を文字に直してコンマを空白文字に
  return result;
}
```
今回は何も見ずにかけたんですが、、、最初のアルファベットの配列とか絶対無駄なように見えます。でもアルファベットの順番を取り出すメソッドなんて知らないし。。

### Best Practice #1 の回答
```js
function alphabetPosition(text) {
  return text
    .toUpperCase()
    .match(/[a-z]/gi)
    .map( (c) => c.charCodeAt() - 64)
    .join(' ');
}
```
やっぱりアルファベットの配列なんて不要でしたね。`return` に直接書いていますが改行されていて読みやすいですね。
1. `toUpperCase()` : 大文字に変換
2. `match(/[a-z]/gi)` :\
`match` はマッチした文字を配列に入れるので、ここで全ての文字をいれた配列を作れるのですね。\
regex の `gi` の `i` が大事で、小文字と大文字の両方にマッチさせることができます。\
でも、せっかく１で大文字に変換したので、 `match(/[A-Z]/g)` でもいいのでは？
3. `map( (c) => c.charCodeAt() - 64)` :\
`String.prototype.charCodeAt(index)` は、index 位置の文字の UTF-16 で表される数値を返してくれるメソッド。[UTF-16 の一覧](https://asecuritysite.com/coding/asc2)によれば、大文字のアルファベットは 65 番目から始まるので、64 を引いているんですね👀
4. `join(' ')`:\
`join()` は Array を String に変換した文字列を返すメソッドですが、引数に空文字をいれれば、各配列の要素の間にスペースが開くというわけです。\
私の回答の `join().replace(/,/g, ' ')` が `join(' ')` だけで書けるのに無駄なことをしてました。

しかしこの回答は文字以外の、記号などのみの場合、エラーになってしまうので今はテストが通らないようです。\
記号の場合も通らせる場合、
```js
function alphabetPosition5(text) {
  return 
    (text.toUpperCase().match(/[A-Z]/g) || [])
    .map( (c) => c.charCodeAt() - 64)
    .join(' ');
}
```
のようにして空配列を渡す書き方がコメントにありました。スマートですね。可読性はちょっと下がるかもしれないですが、この書き方も勉強になりました。

### Best Practice #2 の回答
```js
function alphabetPosition(text) {
  var result = "";
  for (var i = 0; i < text.length; i++){
    var code = text.toUpperCase().charCodeAt(i)
    if (code > 64 && code < 91) result += (code - 64) + " ";
  }
  return result.slice(0, result.length-1);
}
```
自分の回答と #1 の回答をかけ合わせた感じですね。
配列ではなく文字列に足していくやりかたです。\
人のコードを読むと勉強になるし、自分のループの中にループ入れる書き方を直していきたいと思った日でした。



codewars を始めました。競プロ的な、コードを書いていってレベル上がるやつです。JavaScript の初回は、 Digital Root でした。

codewars | JS で Sum of Digits / Digital Root

こんにちは。このブログを作ったのは8月初旬（つまり2週間前）ですが、その間に就職先が決まりました🎉  
5月末に前職を退職したので、ちょうど丸3ヶ月無職だったわけですが、無事、就職できて嬉しいです。

今後バックエンドをやることになるので、プログラミングの基礎知識を上げていこうと思い、スーパーエンジニアの友達に教えてもらった [Codewars](https://www.codewars.com) を始めました。
競プロのように問題を解いていくやつです。自分の解いたものをメモとともに残しておきます。


## 今回の問題：JS | Sum of Digits / Digital Root
### Digital Root とは
- [Wikipedia Digital root](https://en.wikipedia.org/wiki/Digital_root)

ようするに各数字の和を1の位になるまで足し続けるやつです。

### 問題
Given n, take the sum of the digits of n. If that value has more than one digit, continue reducing in this way until a single-digit number is produced. The input will be a non-negative integer.

### 例
```md
    16  -->  1 + 6 = 7
   942  -->  9 + 4 + 2 = 15  -->  1 + 5 = 6
132189  -->  1 + 3 + 2 + 1 + 8 + 9 = 24  -->  2 + 4 = 6
493193  -->  4 + 9 + 3 + 1 + 9 + 3 = 29  -->  2 + 9 = 11  -->  1 + 1 = 2
```

### 私の回答
```js
function digital_root(n) {
  let sum = n;
  let arr = [];
  
  while(sum > 9) { // 1の位になるまで繰り返す
    arr = sum.toString().split(''); // 整数を文字列にしてから、1文字づつばらして配列に入れる
    sum = arr.reduce((a, b) => parseInt(a) + parseInt(b)); // reduce で回して数値として足し算する
  }
  return sum;
}
```

こちらの記事を参考にさせてもらいました：

- [Solving the Digital Root Algorithm using JavaScript](https://dev.to/isabelxklee/how-to-solve-the-digital-root-algorithm-using-javascript-4jm4)

### Best Practice #1 の回答
```js
function digital_root(n) {
  return (n - 1) % 9 + 1;
}
```
これは、数学の式を知っているなら素直にこう書けるのでしょうね・・・👀

自分は全く知らなかったので目からウロコです🐠

### Best Practice #2 の回答
```js
function digital_root(n) {
  if (n < 10) return n;
  
  return digital_root(
    n.toString().split('').reduce(function(acc, d) { return acc + +d; }, 0));
}
```
自分の回答とだいたい一緒ですが、
```js
{ return acc + +d; }
```
の `+d` ってなんでしょう？

これは、文字列を数値に変換する `+`　、 Unary plus です。

でも、 `acc` は文字列のままなのでは？と思うのですが、`array.reduce()` の `initialValue` の第2引数に、 `0` が入っているから文字列ではなく数値として評価されているようです（第2引数に `0` をいれない場合は、文字列を返している）。

うーん、パット見わからなかったけど勉強になりました。`array.reduce()` の第2引数をあんまり意識したことがなかったので心に留めておきたいと思います。



このブログの構成の話１、ページネーション編

NextJS + Markdown ブログでページネーションを作る

このブログは Next.js で、マークダウンファイルを SSG して Netlify で配信しています。
マークダウンブログにページネーションをつける方法を記します。自分で作ったやつなので、もっとスッキリした書き方があるとは思いますが‥。

## 0. 前提となる構成
ディレクトリ構成はこのようになっています。
```md
├── components
│   ├── CodeBlock.tsx
│   ├── Header.tsx
│   ├── Layout.tsx
│   ├── Pagination.tsx // 1.ページネーションコンポーネントを作成
│   └── PostList.tsx
├── pages
│   ├── _app.tsx
│   ├── index.tsx // 3.投稿リストページにページネーションを設置
│   ├── page
│   │   └── [pagenumber].tsx // 2.ページネーション用の動的ページを作成
│   └── post
│       └── [postname].tsx
```
この記事で書くページネーションに必要なもののみにコメントを付けました。

## 1. ページネーションコンポーネントを作成
/components/Pagination.tsx はこの様になっています。\
※スタイリングは emotion の styled-component でしていますが今回はスタイルの話はしないので省いています。
```tsx
import Link from "next/link";

export default function Pagination({
  totalCount,
  pageLimit,
  currentPage,
}: {
  totalCount: number;
  pageLimit: number;
  currentPage: number;
}) {
  if (totalCount > pageLimit) {
    const range = (start: number, end: number) =>
      [...Array(end - start + 1)].map((_, i) => start + i);

    return (
      <ol>
        {currentPage >= 2 && (
          <Link href={`/page/${currentPage - 1}`}>
            <a>Prev</a>
          </Link>
        )}
        {range(1, Math.ceil(totalCount / pageLimit)).map((number, index) => (
          <li key={index}>
            {currentPage === number ? (
              <span>{number}</span>
            ) : (
              <Link href={number === 1 ? "/" : `/page/${number}`}>
                <a>{number}</a>
              </Link>
            )}
          </li>
        ))}
        {currentPage < Math.ceil(totalCount / pageLimit) && (
          <Link href={`/page/${currentPage + 1}`}>
            <a>Next</a>
          </Link>
        )}
      </ol>
    );
  } else {
    return null;
  }
}
```
1. ページネーションコンポーネントには、
    - totalCount: 全体の投稿数
    - pageLimit: １ページに表示する投稿数
    - currentPage: 現在何ページ目か\
  をもたせています。
2. `totalCount > pageLimit` で、１ページに表示する投稿数よりも全投稿数が多かったときのみページネーションを表示し、そうでない場合は null を返しているのですが、これはページ側でやったほうがいいのかもしれません？
3. ページネーションのページ数 を定義して書き出します。
    ```ts
      const range = (start: number, end: number) =>
        [...Array(end - start + 1)].map((_, i) => start + i);
    ```
    最初に、range 関数をつくっておきます。これは、start と end の数字から、連番を格納した配列を生成する関数です。
    ```tsx
    {range(1, Math.ceil(totalCount / pageLimit)).map((number, index) => (
      <li key={index} current={currentPage === number}>
        <Link href={`/page/${number}`}>
          <a>{number}</a>
        </Link>
      </li>
    ))}
    ```
    start は 常に１で、end は `Math.ceil(totalCount / pageLimit)` で最後のページ数を割り出し、そのページ数分、`href={`/page/${number}`}` に飛ぶようなリンクのリストを生成します。\
    今いるページにカレントを付けたいので、`currentPage === number` だったら span を返すようにしています。
4. Prev/Next リンクを設置
    - Prev: 現在いるページが２ページ目以降だったらレンダーします。
        ```tsx
        {currentPage >= 2 && (
          <Link href={`/page/${currentPage - 1}`}>
            <a>Prev</a>
          </Link>
        )}
        ```
    - Next: 現在いるページが最後のページよりも小さかったらレンダーします。
        ```tsx
        {currentPage < Math.ceil(totalCount / pageLimit) && (
          <Link href={`/page/${currentPage + 1}`}>
            <a>Next</a>
          </Link>
        )}
        ```

## 2. ページネーション用の動的ページを作成
１でつくったページネーションをクリックすると、`/page/2` のようなページに飛びますので、このページを作ります。\
/pages/[pagenumber].tsx はこの様になっています。
```tsx
import PostList from "@components/PostList";
import matter from "gray-matter";
import Layout from "@components/Layout";
import Pagination from "@components/Pagination";

export default function BlogPageId({
  posts,
  pagenumber,
  pageLimit,
}: {
  posts: any;
  pagenumber: number;
  pageLimit: number;
}) {
  return (
    <Layout pageTitle={`${pagenumber}ページ目`} description={`ブログの${pagenumber}ページ目です！`}>
      <PostList
        posts={posts}
        pageStart={(pagenumber - 1) * pageLimit}
        pageLimit={(pagenumber - 1) * pageLimit + pageLimit}
      />
      <Pagination
        totalCount={posts.length}
        pageLimit={pageLimit}
        currentPage={Number(pagenumber)}
      />
    </Layout>
  );
}

// データを取得 
export const getStaticProps = async (ctx: {
  params: { pagenumber: string };
}) => {
  const config = await import(`../../siteconfig.json`);
  const pagenumber = ctx.params.pagenumber;
  const posts = ((context) => {
    const keys = context.keys();
    const values = keys.map(context);

    const data = keys.map((key, index) => {
      let slug = key.replace(/^.*[\\\/]/, "").slice(0, -3);
      const value: any = values[index];
      const document = matter(value.default);
      return {
        frontmatter: document.data,
        markdownBody: document.content,
        slug,
      };
    });
    return data;
  })(require.context("../../posts", true, /\.\/.*\.md$/));

  return {
    props: {
      posts,
      pagenumber,
      pageLimit: config.pageLimit,
    },
  };
};

// 動的なパスを取得
export const getStaticPaths = async () => {
  const config = await import(`../../siteconfig.json`);
  const range = (start: number, end: number) =>　[...Array(end - start + 1)].map((_, i) => start + i);

  const blogLength = ((context) => {return context.keys().length;})(require.context("../../posts", true, /\.md$/)); // 全投稿数を取得
  const paths = range(1, Math.ceil(blogLength / config.pageLimit)).map((repo) => `/page/${repo}`); // 何ページあるか割り出し、動的パスに格納

  return { paths, fallback: false };
};
```
ちょっと長いですが。。。PostList については今回記さないので、PostList 関連は飛ばしていきます。

1. 動的なパスを取得 
    getStaticPaths で動的ページのパスを取得します。ページネーションコンポーネントでも使った range 関数で、１ページから最後が何ページなのかを割り出して、パスにいれます。
2. データを取得
    getStaticProps でページに入れるデータを取得します。ここで　posts（mdファイルの情報）, pagenumber（今いるページのパス）, pageLimit（１ページあたりの最大表示数） を取得しておきます。
3. ページネーションコンポーネントを設置
    ```tsx
    <Pagination
      totalCount={posts.length}
      pageLimit={pageLimit}
      currentPage={Number(pagenumber)}
    />
    ```
    `const pagenumber = ctx.params.pagenumber` でこのページのパス名を返していますが、これは String 型なので Number に変換して使用します。

## 3. 投稿リストページにページネーションを設置
１でページネーションコンポーネントを、２で２ページ目以降などの動的ページをつくったので、これらをつかって投稿一覧ページを作ります。わたしのブログでは、トップページ＝投稿一覧ページなので /pages/index.tsx が投稿一覧になりますが、そうでない場合は /pages/blog.tsx とかになるでしょう。\
/pages/index.tsx はこの様になっています。
```tsx
import matter from "gray-matter";
import Layout from "@components/Layout";
import PostList from "@components/PostList";
import Pagination from "@components/Pagination";

const Index = ({
  posts,
  title,
  description,
  pageLimit,
  ...props
}: {
  posts: any;
  title: string;
  description: string;
  pageLimit: number;
}) => {
  return (
    <Layout pageTitle={title} description={description}>
      <PostList posts={posts} pageStart={0} pageLimit={pageLimit} />
      <Pagination
        totalCount={posts.length}
        pageLimit={pageLimit}
        currentPage={1}
      />
    </Layout>
  );
};

export default Index;

export const getStaticProps = async () => {
  const config = await import(`../siteconfig.json`);

  const posts = ((context) => {
    const keys = context.keys();
    const values = keys.map(context);

    const data = keys.map((key, index) => {
      let slug = key.replace(/^.*[\\\/]/, "").slice(0, -3);
      const value: any = values[index];
      const document = matter(value.default);
      return {
        frontmatter: document.data,
        markdownBody: document.content,
        slug,
      };
    });
    return data;
  })(require.context("../posts", true, /\.\/.*\.md$/));

  return {
    props: {
      posts,
      title: config.default.title,
      description: config.default.description,
      pageLimit: config.pageLimit,
    },
  };
};
```
ここでも２と同じ用に、リスト生成の PostList コンポーネントと、ページネーションの Pagination コンポーネントをおいて、getStaticProps でデータを取得して渡しています。
getStaticProps 箇所は２と重複しているので、まとめて記述できるといいな、、と思っているのですが、今回はこのようにしてページネーションを実装しました。

NextJS で RGBA が HSLA に変換されたせいで linear-gradient に嵌った 🎨

Next.js で SSG すると、いろいろなものが圧縮されて静的ファイルができあがるのですが、CSS で RGBA でカラー指定をしていると、 HSLA に変換されるようです。
それ自体はいいのですが、下記のような問題が発生しました。

## 問題
今回のブログの背景は、青時に白い格子柄のパターンを CSS background-image の  `repeating-linear-gradient` で作っています。

- ビルド前
```css
background-image: repeating-linear-gradient(
  0deg,
  rgba(255, 255, 255, 0.43) 0 1px,
  transparent 1px 20px
  ),
  repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.43) 0 1px,
    transparent 1px 20px
  );
```

- ビルド後
```css
background-image: repeating-linear-gradient(
  0deg,
  hsla(0,0%,100%,.43) 1px, // 0 が抜けている👀
  transparent 1px 20px
  ),
  repeating-linear-gradient(
    90deg,
    hsla(0,0%,100%,.43) 1px,　// 0 が抜けている👀
    transparent 1px 20px
  );
```

0 が省かれている？ためにグラデーションが効かなくなっていました。


## 解決策？
`deg` 指定を、`to <side-or-corner>` に変えたところ、0 が省かれなくなり、グラデーションが表示されました。

- ビルド前
```css
background-image: repeating-linear-gradient(
  to bottom,
    rgba(255, 255, 255, 0.43) 0 1px,
    transparent 1px 20px
  ),
  repeating-linear-gradient(
    to left,
    rgba(255, 255, 255, 0.43) 0 1px,
    transparent 1px 20px
  );
```

- ビルド後
```css
background-image: 
  repeating-linear-gradient(
    180deg,
    hsla(0,0%,100%,.43) 0 1px, // 0 がついている
    transparent 1px 20px
    ),
  repeating-linear-gradient(
    270deg,
    hsla(0,0%,100%,.43) 0 1px, // 0 がついている
    transparent 1px 20px
  );
```

記述を変えたことで解決したのですが、結局 `deg` に変換されるので、なんでなのかなぁという感じでした。



ブログを新しくしました 🎉

こんにちは。求職活動中のShirasuです。
これは、フロントエンドエンジニアの私が、勉強したことや学んだことを日々メモしていくブログです。

今までのブログは、WordPress で、レンタルサーバ上で動いていたんですが、ちょっとレガシーだし、更新もしづらかった（WordPress 自体はいいのですが、怠っていた）ので、マークダウンで更新できるブログを新しく作りました。
旧ブログは今月中に閉鎖するので、古い記事は後々移行しようかなと思っています（大した記事が一個もないけどな）。

このブログは、
- Next.js
- TypeScript

で構成していて、マークダウンでページを動的生成し、SSGされたものを Netlify で配信しています。

とてもシンプルな作りですが、Next もまだまだ知らないことが多いので、このブログでも少しずつ機能について書いていこうと思っています。

JAMstack で、ヘッドレスCMS を使うブログの構築も、案件ではしたことがありますが、CMS を使うのって意外と面倒じゃないですか・・？😅 ブラウザを立ち上げて、ログインして、記事をテキストエディタで書いて、、、もちろん、画像を最適化したりリッチな見た目にしたりする場合は、CMS を使ったほうが便利なことが多いかなとは思います。このブログは学習メモで、文字とコードしか書かない予定なので、マークダウン式にしました。
VSCode を開いて、書いて、git に上げるだけなので日々の業務の一貫？のように更新できるのが良いです。

参考にしたのはこちらの記事です：
- [Building a Markdown blog with Next 9.4 and Netlify](https://www.netlify.com/blog/2020/05/04/building-a-markdown-blog-with-next-9.4-and-netlify/)

※ Netlify 公式のチュートリアル。TS 化と Webpack 5 化で一部詰まったけどとても参考になりました。
- [Next.js(SSG)でページネーションを実装してみよう](https://blog.microcms.io/next-pagination/)

※ microCMS のブログ。microCMS は今回使っていないですが、ページネーションの実装の際に参考にしました。
