2020-08-17

TypeScript スプレッド構文で配列に変換しようとしたらエラーになった

TypeScript JavaScript Tips

TypeScript で [...document.querySelectorAll('meta')] こんな感じにスプレッド構文で NodeList を配列に変換しようとしたらエラーが出てしまいました。

Type 'NodeListOf<HTMLMetaElement>' is not an array type or a string type. Use compiler option '--downlevelIteration' to allow iterating of iterators.

₍ᐢ •̥ ̫ •̥ ᐢ₎‪ なんもわからん

tsconfig の compilerOptions の target が `es5` の時は `downlevelIteration` オプションと `dom.iterable` が必要

{
  "compilerOptions": {
    "target": "es5",
    "downlevelIteration": true, // 追加
    "lib": [
      "dom",
      "dom.iterable",  // 追加
      "esnext",
    ],
   // …
  }
}

target: es6 の時は lib に dom.iterable だけあれば OK っぽい。

₍ ᐢ. ̫ .ᐢ ₎ 俺たちは雰囲気で TS を使っている…

[参考]

実践TypeScript

作者:吉井健文
マイナビ出版

Amazon

まだ積んでる…

2020-08-16

React TypeScript useState に型を設定したい

TypeScript React JavaScript

React の useState で返される state の型を指定したい

useState<型>(initial value) で state に型を強制できる

type IdolType = 'cute' | 'cool' | 'pop' | 'sexy';

const [type, setType] = useState<IdolType>('cute');
setType('foo');
// => Argument of type '"foo"' is not assignable to parameter of type 'SetStateAction<IdolType>'

setType() で IdolType の型以外の値を設定しようとするとエラーになる

Boolean しか入らないような state は直接 <boolean> と書ける

const [isHoshimiya, setIsHoshimiya] = useState<boolean>(true);

おわり

[参考]

実践TypeScript

作者:吉井健文
発売日: 2019/06/26
メディア: Kindle版

Ann Clark Cookie Cutters 恐竜クッキー型3個セット(Tレックス、ブロンドサウルス、トリケラトプス)、レシピ小冊子付き

メディア: ホーム&キッチン

2020-08-14

さくらのレンタルサーバーに直接 Laravel をインストールする

Laravel さくらサーバー PHP Composer

こちらの Laravel の環境をつくる勉強会に参加してしました。localで作った環境をさくらのレンタルサーバーにアップするというものだったので、ssh でサーバーに入って直接環境を作れないか試して見たメモ

ssh でさくらのレンタルサーバーに接続する方法は公式の help などを確認ください。
cf. SSH について – さくらのサポート情報

ssh でさくらのレンタルサーバーに入って Laravel 環境を作成する

/www/laravel に環境を作ります

# ssh でさくらのレンタルサーバーに接続、公開ディレクトリに移動
$ cd www
# composer をインストール
$ curl -sS https://getcomposer.org/installer | php
# composer が使えることを確認
$ php composer.phar --version
# laravel のインストール
$ php composer.phar create-project laravel/laravel laravel　
…
killed

create-project laravel/laravel で laravel アプリを作成しようとしても途中でサーバーで使えるメモリ不足が原因なのか killed になり処理が止まってしまいます。
途中まではインストールできているので、プロジェクトのディレクトリに入り残りのパッケージをインストールしてしまえばOK。

# create-project laravel/laravel で作成されたディレクトリに移動
$ cd laravel
# 残りのパッケージをインストールする
$ php ../composer.phar install

途中で killed になってしまう場合は再度 php ../composer.phar install コマンドを killed になる度にくりかえします。
(npm みたいに composer.json に必要なパッケージが書かれていてインストール状況は composer.lock に記録されているみたいなので、続きからインストールをすることが出来るっぽいです。)

最後まで処理が完了したら key:generate のコマンドを実行

$ php artisan key:generate

この状態で http://XXXXXX.sakura.ne.jp/laralel/public にアクセスして Laravel の welcome ページが表示されていれば OK

データベースとの接続

さくらサーバーの管理画面から Laravel で使用するデータベースを作成してください。
cf. 【新コントロールパネル】データベースの作成・追加・削除・パスワード再設定 – さくらのサポート情報

さくらレンタルサーバーデータベース

/www/laravel/.env ファイルを開いて、データベース設定を下記のように変更して保存

DB_CONNECTION=mysql
DB_HOST=<データベースサーバー>
DB_PORT=3306
DB_DATABASE=<データベース名>
DB_USERNAME=<ユーザー名>
DB_PASSWORD=<接続先パスワード>

ssh で接続しているターミナルでマイグレーションコマンドを実行して問題なくテーブルが作成できれば OK です。

$ php artisan migrate

レンタルサーバーの管理画面から PHPMyAdmin でデータベースの見れるので、そこでテーブルが作成できているか確認することもできます。

所感

Laravel ローカルで作成したファイルを FTP でアップしただけでも動くんだーってのが結構驚きでした。
レンタルサーバーでも大概 PHP は動くので .env だけ設定しておけば後は git で pull で開発進めることができそうなので結構良いかもと思いました。(rails とか express とか AWS とかやっすいレンサバだと難しいので)

おわり。

[参考]