LaravelでTypeScriptを使う。(1)

javascript
2024.03.24
この記事は約9分で読めます。
記事内に広告が含まれます。

Laravelを使ったウェブ開発では、フロントエンド（ユーザが見る部分）はどのように構築するのでしょうか？

単純なページならば、LaravelのBladeというテンプレートエンジンでHTMLを生成して表示することもありますが、見た目に動きのあるページのほうが魅力的ですよね。ユーザが操作するたびにページが変わるようなサイトは、使っていても楽しいものです。

このような動きを作るには、フロントエンドとバックエンドが連携しています。フロントからバックエンドに必要な情報をリクエストし、その結果を受け取ってから画面を書き換えます。この役割を担うのがJavaScriptです。

一方、LaravelにはBladeというテンプレートがありますが、これはバックエンドがHTMLを生成してブラウザに送ります。つまり、フロントエンドは受け取ったHTMLを表示するだけです。これではユーザが何かをするたびにバックエンドがページ全体を作り直し、通信していることになります。すべての処理がバックエンドで行われてしまいます。

このような方式ではサーバに負担がかかり、通信データの量も増えます。そこで登場するのが、Vue.jsやReactなどのフロントエンドフレームワークです。これらはフロントエンド処理に特化しており、バックエンドに必要な情報をリクエストし、必要な情報だけを受け取ってから画面を更新します。そのため、データのサイズが小さく通信速度が速くなります。また、画面の一部だけを更新するので、全体を書き換えるよりも効率的です。

今回はVue.jsやReactではなく、フロントエンドの言語であるJavaScriptに焦点を当てます。Laravelをバックエンドとし、フロントエンドをTypeScriptで構築します。JavaScriptの経験がある人は多いと思いますので、TypeScriptを使ってJavaScriptの機能を拡張してみましょう。TypeScriptはJavaScriptの上に構築された言語で、型のチェックなどができるため、品質の高いコードを書くことができます。JavaScriptの経験があれば、TypeScriptも取り組みやすいでしょう。

前置きが長くなりましたが

開発のスタート

Dockerが導入済みである前提で進めます。
Windwos11+wsl2で作成しています。Macでも同じ手順で作成できるとおもいます。（未確認）

スポンサーリンク

Laravelのプロジェクトを作成

では早速LaravelのProjectを作成します。laravel-sailを利用してDocker環境にLaravelを作成します。
今回のProject名は「laravel-ts」としました。
laravel-sailを使わない場合も手順はほとんど変わりません、環境に合わせて作ってください。
データベースのMySQLとキャッシュの利用を想定してredisを一緒に入れておきます。（使うかどうかまだわかりません。）

# curl -s "https://laravel.build/[PROJECT名]?with=mysql,redis" | bash
$ curl -s "https://laravel.build/laravel-ts?with=mysql,redis" | bash

このコマンド一発でLaravelの環境を作ってくれます。楽ですね（笑）

初めてのインストールは数分かかります。２回目以降は数秒で終わるでしょう。
順調に進むと最後にDocker利用のマシンのSudoパスワードを聞いてきますので入力入力します。
以上でLaravelセットアップはひとまず完了です。

Please provide your password so we can make some final adjustments to your application's permissions.

[sudo] password for marosuke: [パスワードを入れる]

その他の設定

次に作成したProjectに移動します

$ cd laravel-ts

Dockerコンテナを起動します

$ sail up -d

npmコマンドでtypescriptとsassを導入します

$ sail npm install -D typescript sass

tscコマンドでtsconfig.jsonファイルを作成します

$ sail npx tsc --init

ここまでくると動作させるための環境は既にできています。

エラーが出たとき メモ

インストールしなおした場合にはDatabaseが作成されていない場合があります。
そんな時はデータべースを作成しなおしてください。

$ sail artisan migrate

Dockerの起動と終了方法

Dockerの起動と終了方法です
詳しくはlaravel-sailのマニュアルを参照してください。
https://laravel.com/docs/11.x/sail#executing-php-commands

# Dockerの起動
$ sail up -d

# Dockerの停止や再起動方法
$ sail down # コンテナを停止しVolumeなどを削除する
$ sail stop # コンテナを停止、削除は行わない

vscodeでの編集

これ以降はVSCodeで編集します。

$ code .

基本的なLaravelの設定

環境設定ファイル内（envファイル）の以下の２か所を探しを編集します。
変更内容は言語を日本語、時間帯を日本に設定しています。

...
APP_TIMEZONE=Asia/Tokyo
...
APP_LOCALE=ja
...

プログラムの作成

早速プログラムを書いていきましょう。
とりあえずTypescriptがコンパイルされてJavascriptとして実行されているかを確認します。

ルーティングを作成

localhostが呼ばれた際にindex.blade.phpファイルが呼ばれる設定です。

<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
    return view('index'); // indexに変更
});

テンプレートファイルを作成

ここは普通のHTMLファイルです。Viteを使ってコンパイルするファイルを指定しています。
@vite(***)はTypeScriptで作成されたエントリポイントを追加するものです。

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Typescript TEST</title>
        @vite(['resources/ts/index.ts','resources/scss/index.scss'])
    </head>
    <body>
    <div id="app"></div>
    </body>
</html>

以上でLaravelでTypesscriptを実行する準備ができました。続いてTypescriptファイルを作成していきます。

TypeScriptファイルを作成

resourcesフォルダ内にtsフォルダを作成し、index.tsファイルを作成します。
TypeScriptファイルの拡張子は.tsとなります。

function hello(name: string): void {
    let hello = "Hello " + name + "!";
    document.getElementById("app")!.textContent = hello; // id='app'のエレメントに変数helloを表示
}

hello("JavaScript");

scssファイルを作成

resourcesフォルダにscssフォルダを作成し、index.scssファイルを作成します。
scssファイルの拡張子は.scssになります。

#app {
    font-size: 1em;
}

Viteの設定ファイルを編集

vite.config.jsファイルを編集します。

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/scss/index.scss", "resources/ts/index.ts"],
            refresh: true,
        }),
    ],
});

実行と編集

ファイルを保存したらこのindex.tsファイルをコンパイルしてindex.jsファイルを作成する必要があります。方法はvscodeのメニューから「　表示　＞　ターミナル　」を選びます。すると画面の下のほうにターミナル画面が表示されますので以下のように入力します。
これはViteというプログラムに開発環境用の実行を指示しています。Viteはプログラムコードの監視を行い、修正されたらすぐにコンパイルしなおしてくれます。

$ sail npm run dev

VITE v5.2.4  ready in 125 ms

 ➜  Local:   http://localhost:5173/
 ➜  Network: http://172.20.0.4:5173/
 ➜  press h + enter to show help

 LARAVEL v11.0.8  plugin v1.0.2

 ➜  APP_URL: http://localhost

このように表示されればコンパイルは成功しています。
エラーが表示される場合はメッセージを確認してコードを修正します。

※Viteが起動状態であればコードを修正すると即座にコンパイルが実行され常に最新の状態になります。終了する時は「 CTRL ＋C 」で終了します。

コンパイルは成功したらブラウザで確認してみましょう。


このように表示されればTypeScriptは正しく実行されていることが確認できました。

index.tsファイルのhello("JavaScript")をhello("TypeScript")`に変更してみてください。
ViteがTypeScriptのコードを監視していますのでindex.tsファイルを修正すると即座に修正が反映されるのがわかると思います。

今回はTypeScriptで作成したプログラムから適当な文字を表示するだけですが、Laravelの環境にTypeScriptを導入し、TypeScriptで作成されたコードをコンパイルしてJavaScriptに変換しブラウザ上で実行できるまでの流れを順に実行しました。

以上でLaravelでTypeScriptを利用する手順の説明は終わります。
次回バックエンドから情報を取得してフロントに表示するサイトを作りたいと思います。

タイトルとURLをコピーしました