🖌️

Laravelを始めるまでの準備の記録

2024/07/10に公開

Laravel

PHP

TypeScript

tech

Laravel 11に入門したときの内容を記録しておきます。
準備だけの話なので、実際にコードを書くという内容にはなっておりません。ご了承ください。

Laravelの話を振られそうなので、自分への備忘録として残します。

開始

app-nameという名前でlaravelプロジェクトを開始

$ composer create-project laravel/laravel app-name

Larastan (PHPStan) でコードチェック

$ composer require nunomaduro/larastan --dev

phpstan.dist.neonに全体設定を
phpstan.neonに個人設定を記述する

そのためphpstan.neonは.gitignoreで除外する。

Levelは最高9まで設定できる。5くらいから始めるのがいいと言われている。

phpstan.dist.neon

includes:
    - vendor/larastan/larastan/extension.neon

parameters:

    paths:
        - app/

    # Level 9 is the highest level
    level: 5

#    ignoreErrors:
#        - '#PHPDoc tag @var#'
#
#    excludePaths:
#        - ./*/*/FileToBeExcluded.php
#
#    checkMissingIterableValueType: false

.gitignore

+phpstan.neon

$ ./vendor/bin/phpstan analyse --memory-limit=2G

composer scriptで実行するようにするのもあり

composer.json

     "scripts": {
     ...(中略)...
+        "analyse": [
+            "vendor/bin/phpstan analyse --memory-limit=2G"
+        ]
     },

$ composer run analyse

PHPはLaravel pintで整形

pintはデフォルトで入っているらしいのでインストールする必要はないのだけど、一応

$ composer require laravel/pint --dev

pint.json

{
    "preset": "laravel",
    "rules": {
        "declare_strict_types": true
    }
}

$ ./vendor/bin/pint --test // 確認だけdry-run
$ ./vendor/bin/pint // 実行

BladeとCSSはprettierで整形

Bladeの整形は@shufo/prettier-plugin-bladeを使います。

$ npm install -D prettier @shufo/prettier-plugin-blade

HTML(Blade)とCSSのインデントは2スペースとしています。

.prettierrc.json

{
  "trailingComma": "es5",
  "printWidth": 140,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "endOfLine": "lf",
  "plugins": ["@shufo/prettier-plugin-blade"],
  "overrides": [
    {
      "files": ["composer.json", "pint.json"],
      "options": {
        "tabWidth": 4
      }
    },
    {
      "files": ["*.blade.php"],
      "options": {
        "parser": "blade",
        "tabWidth": 2
      }
    }
  ]
}

$ npx prettier resources/views/**/*.blade.php resources/css/**/*.css --write

JavaScriptからTypeScriptへ

特にTypeScriptにする必要はないかもしれませんが、一応今後のことを考えてやってみます。Viteでビルドすればいいでしょう。

近年のLaravelはViteがデフォルトでインストールされるらしいので、Viteをインストールする手間は省けます。

$ npm install -D typescript

tsconfig.jsonの設定が一番難しかったです。Viteとtscを組み合わせる場合、Viteのドキュメントを読みます。
https://ja.vitejs.dev/guide/features

tsconfig.json

{
  "compilerOptions": {
    /* Language and Environment */
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "jsx": "react-jsx", // tsxをjsに
    "useDefineForClassFields": true, // Vite用

    /* Modules */
    "module": "ESNext", // Vite用
    "moduleResolution": "bundler", // Vite用
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,

    /* JavaScript Support */
    "allowJs": false,

    /* Emit */
    "noEmit": true, // tscではコンパイルせずに型チェックのみ

    /* Interop Constraints */
    "isolatedModules": true, // Viteではtrue
    "allowSyntheticDefaultImports": false, // esModuleInteropと併せて
    "esModuleInterop": false, // CommonJS形式のファイルをインポートするか(状況で変更する)
    "forceConsistentCasingInFileNames": true, // ファイル名の小文字大文字をチェックする

    /* Type Checking */
    "strict": true,
    "noUnusedLocals": true, // 必要に応じて変更
    "noUnusedParameters": true, // 必要に応じて変更
    "noImplicitReturns": true, // 必要に応じて変更
    "noFallthroughCasesInSwitch": true, // breakが無いswitch〜caseをエラーにする

    /* Completeness */
    "skipLibCheck": false // *.d.tsの型チェックをスキップするか
  },
  "include": ["resources"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    // "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "strict": true
  },
  "include": ["vite.config.ts"]
}

vite.config.jsをvite.config.tsへリネームしている。内容はほぼ同じ

vite.config.ts

 import { defineConfig } from 'vite';
 import laravel from 'laravel-vite-plugin';

 export default defineConfig({
   plugins: [
     laravel({
-      input: ['resources/css/app.css', 'resources/js/app.js'],
+      input: ['resources/css/app.css', 'resources/ts/app.ts'],
       refresh: true,
     }),
   ],
 });

resources/js/app.jsをresources/ts/app.tsへリネーム
resources/js/bootstrap.jsをresources/ts/bootstrap.tsへリネーム

ここまでやる必要はないかもしれない。resources/jsディレクトリは削除する。

そのままだとaxiosでエラーになるので下記のようにしてみた。(多分、axiosを使わないならこれは必要ないかも)

resorces/ts/bootstrap.ts

import type { Axios } from 'axios';
import axios from 'axios';

declare global {
  interface Window {
    axios: Axios;
  }
}

window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

buildスクリプトを変更

package.json

   "scripts": {
     "dev": "vite",
-    "build": "vite build"
+    "build": "tsc && vite build"
   },

$ npm run build

TypeScriptとは直接関係ないけど、Vite+Laravelの機能でBladeのhead内に@vite()を記述すれば自動で読み込まれるし、$ npm run devでも自動で変更が読み込まれる。便利！

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
  <meta charset="utf-8">
  <title>@yield('title')</title>
  @vite(['resources/css/app.css', 'resources/ts/app.ts'])
</head>

TypeScriptはBiomeで整形

$ npm install -D @biomejs/biome

biome.json

{
  "$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 120,
    "lineEnding": "lf",
    "ignore": []
  },
  "javascript": {
    "formatter": {
      "enabled": true,
      "quoteStyle": "single"
    }
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "style": {
        "noNonNullAssertion": "off"
      },
      "correctness": {
        "noUnusedVariables": "error"
      }
    }
  },
  "overrides": [
    {
      "include": ["composer.json", "pint.json"],
      "formatter": {
        "indentWidth": 4
      }
    }
  ]
}

daisyUI (Tailwind CSS)

daisyUIを使う場合。

$ npm install -D daisyui@latest tailwindcss postcss autoprefixer

以下のコマンドでtailwind.config.jsとpostcss.config.jsを生成

$ npx tailwindcss init -p

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./resources/**/*.{blade.php,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [require('daisyui')],
};

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

resources/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

バリデーションなどの日本語化

Laravel-Langを使う

$ composer require laravel-lang/common --dev
$ php artisan lang:add ja

lang/jaというディレクトリが出来るので丸ごとgit addする
あと公式ドキュメントにpost-update-cmdに@php artisan lang:updateを追記するのがオススメとあったので一応。