TanStack TableのReact Tableでリッチなテーブルを実装してみます。
TanStack | High Quality Open-Source Software for Web Developers
あるプロジェクトで脱jQueryの流れがあり、jQueryベースのプラグイン「DataTables」に代わるライブラリを探していて、React Tableにたどり着きました。
本記事の内容は、ほとんど公式サイトのガイド通り、かつ、雑な解説となっておりますが、、初導入時の記憶としてメモを残したいと思います。
ここではユーザ情報ををTableで表示する、シンプルな例を取り上げます。
また、コード量が多くなるので、要点を絞り紹介しています。
npmコマンドを使ってReact Tableをインストールします。
$ npm install @tanstack/react-table
Laravelにデフォルトで組み込まれている「PHPUnit」を使ってユニットテスト（単体テスト）を実施してみます。
今回は、Webアプリケーションに正しくアクセスできているか、HTTPテストを実施します。
公開済みのLaravelプロジェクトを対象とします。
テスト用スクリプトは、サンプル「tests/Feature/ExampleTest.php」が用意されているので、これを複製し、例えば「HelloTest.php」として以下のファイルを作成します。
namespace Tests\Feature;
use Tests\TestCase;
use Illuminate\Foundation\Testing\RefreshDatabase;
class HelloTest extends TestCase
{
public function testBasicTest()
{
$response = $this->get('/');
$response->assertStatus(200);
$response = $this->get('/about');
$response->assertStatus(200);
$response = $this->get('/contact');
$response->assertStatus(200);
...
}
}
このように記述する事で、例えばページ「/about」にリクエストした際に、正常にアクセスできているか、つまりステータスコード200を返しているかどうかテストする事ができます。
コンテンツリストやサイトマップなど仕様書から、全ページ分のコードを記述します。
Laravelサイト内で認証済みユーザのみにAPIを提供する方法です。
以前に、Laravelサイト内外問わず、APIで認証機能を提供するしくみとしてPassportを紹介しました。
LaravelでPassportパッケージ（OAuth2）を使用したAPI認証を構築
今回は、PassportではなくSessionを用いて、Laravelサイト内に限定し、かつ、認証済みのユーザのみにAPIを提供する方法を紹介します。
SPAではないが、パフォーマンス的に部分的にAPIで情報を提供する際に有効です。
まず「config/auth.php」を開き、apiのドライバをwebと同じ「session」にします。
'guards' => [
'web' => [
'driver' => 'session',
'provider' => 'users',
],
'api' => [
'driver' => 'session',
'provider' => 'users',
],
],
GitHub Actionsを使ってレンタルサーバに自動でデプロイします。
これまで、GitHubで管理しているソースをコミット、プッシュした後、その差分を手動FTPでサーバにアップしてましたが、その部分を自動化したいと思います。
GitHub Actionsのドキュメント – GitHub Docs
ここでは、デプロイ対象のGitHubリポジトリとデプロイ先のレンタルサーバは、既存のものを利用します。
GitHub Actionsの動作を設定するワークフローファイルを作成します。
今回は単純に、masterブランチにpushがあったら、ファイルをレンタルサーバにFTPアップロードします。
name: deploy
on:
push:
branches: [master]
jobs:
web-deploy:
runs-on: ubuntu-latest
steps:
- name: get lastest code
uses: actions/checkout@v3
- name: sync files
uses: SamKirkland/FTP-Deploy-Action@4.3.0
with:
server: ${{ secrets.FTP_SERVER }}
username: ${{ secrets.FTP_USERNAME }}
password: ${{ secrets.FTP_PASSWORD }}
「name」は任意です。「runs-on」にはデプロイ環境を指定します。
FTPにはGitHub – SamKirkland/FTP-Deploy-Actionを使用します。
FTPのユーザ名やパスワードなどをコードに書くことはセキュリティ的にリスクがあるので、環境変数を使用します。
Laravelで多次元データから任意のキーのみ取り出す方法です。
例えば、ユーザテーブルから複雑なクエリビルダで以下のデータを取得したとします。
$users = User::get_fukuzatsu(); Log::debug($users);
[
{
"id": 1,
"name": "山田太郎",
"kana": "ヤマダタロウ",
"tel": "11122223333",
"age": 30,
"sex": 1,
"mail": "taro@xxxxx"
"postcode": "1112222",
...
},
{
"id": 2,
"name": "山田花子",
"kana": "ヤマダハナコ",
"tel": "44455556666",
"age": 25,
"sex": 2,
"mail": "hanako@xxxxx"
"postcode": "4445555",
...
},
...
]
このデータの電話番号など一部データを、APIで外部に展開します。ここで、以下の課題があります。
最近、Vue.jsやReactなどを使用したSPA開発がトレンドで、API開発も需要も高まってきてます。
Laravelでは、APIに必要なルートやコントローラを簡単に生成できるしくみが用意されています。
今回はLaravelでAPIの開発を始める際の基礎をみてみます。
ちなみに、Laravel 6.xがインストール済みであることを前提とします。
また、任意の「Sample」データに対してAPIを開発するとします。
以下のコマンドで、APIに必要な関数を含んだコントローラ「app/Http/Controllers/API/SampleController.php」を作成することができます。
$ php artisan make:controller API/SampleController --api
作成されたコントローラの中身は以下のようになってます。
namespace App\Http\Controllers\API;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
class SampleController extends Controller
{
public function index()
{
//
}
public function store(Request $request)
{
//
}
public function show($id)
{
//
}
public function update(Request $request, $id)
{
//
}
public function destroy($id)
{
//
}
}
Laravel×Reactの開発環境構築を構築します。
今回試した環境は以下の通りです。
Laravelはインストール済みの状態から解説します。
初期のLaravel環境に対してReactをインストール場合、laravel/uiパッケージを利用すると便利です。ターミナルから以下のコマンドを実行します。
$ php artisan ui react
または
$ php artisan preset react
Laravelの初期状態はVue.jsがプリセットとなっています。
このコマンドを実行する事で、プリセットがReactに変更され、React開発スタートに必要なファイルが追加、変更されます。
具体的には「resources/js/components/Example.js」などが追加され、「package.json」や「webpack.min.js」などの内容が変更されます。
一方で「resources/js/components/ExampleComponent.vue」などのVue.js関連の初期ファイルは削除されます。
次に「package.json」を元にReactパッケージをインストールします。
$ npm install
基本的にReactのインストールは以上です。
但し、既にLaravelの開発が進行している場合、既存ファイルが自動で変更、削除されると困という場合はこちらの方法はお勧めできません。
とうとうWindows 11デビューしました。
想像していた通り、いくつか環境構築がこれまでのようにうまくいかず。。
「この時間返して。。今後もOSが変わるたびに、この試練を突破しないといけないのかな。。経済損失ってどれぐらいだろう。。」
など考えながら作業しております。
さて、新PCのWindows 11 Homeのセットアップを終え、環境構築の作業に入ろうと思い、PowerShellを起動したら、以下のメッセージが表示されました。
Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved. 新機能と改善のために最新の PowerShell をインストールしてください!https://aka.ms/PSWindows
Windows Updateで最新の状態とかにしてくれないんですかね。
コマンドで現在のバージョンを調べてみると5.1のようです。
PS C:\Users\username> $PSVersionTable
Name Value
---- -----
PSVersion 5.1.22000.653
PSEdition Desktop
PSCompatibleVersions {1.0, 2.0, 3.0, 4.0...}
BuildVersion 10.0.22000.653
CLRVersion 4.0.30319.42000
WSManStackVersion 3.0
PSRemotingProtocolVersion 2.3
SerializationVersion 1.1.0.1
PowerShellのバージョンが古いことで、いくつか実行できないコマンドもあるようです。
Windows 10で、Docker Desktopで使ってるWSL2のプロセス「Vmmem」のメモリ使用量を制限する方法です。
WSL2を使うようになってから、ローカル開発環境にアクセスするのが重く、また、その度に私のロースペックノートPCのファンがフル回転します。。
高負荷の原因はロースペックだと考えていましたが、調べてみるとプロセス「Vmmem」を制御すれば改善しそうです。
ローカル環境で作業中に、タスクマネージャーを確認してみました。
Vmmemにより、メモリが4.5GBほど消費しています。作業を続けているとメモリ使用量は増え続け、時には全体の使用率が95%を超える場面もあります。
Windows 10のプロジェクトにTypeScriptの開発環境を構築してみます。
WindowsにはNode.jsがインストール済みであることを前提とします。
WindowsでNode.js、gulp.jsをインストールして効率よい開発環境を目指す（準備編）
コマンドプロンプトを開き、npmコマンドでTypeScriptをインストールします。
> npm install -g typescript
インストール完了後、以下のコマンドでバージョンが表示されれば、インストール成功です。
> tsc -v Version 4.6.4
任意のTypeScriptファイル「script.ts」を用意します。今回はtsファイルの中身については割愛します。
以下のコマンドを実行すると、tsファイルがコンパイルされ、ファイル「script.js」が出力されます。
> tsc script.ts