はじめに
今回は、Laravelで作成したプロジェクトに、TypeScriptを導入します。
LaravelはLaravel-Mixが使えますので、TypeScriptを導入し使用することができます。
詳しくは公式サイトもご覧ください。
他にも私のブログで、JavaScriptについて解説している記事がありますのでご覧ください。
【紹介】個人開発
私の個人開発ですがQuiphaというサービスを開発しました。(Laravel, Vue3など)
良かったら、会員登録して動作を試してみて下さい。
また、Laravel 9 実践入門という書籍を出版しました。
Kindle Unlimitedを契約している方であれば、読み放題で無料でご覧いただくことができます。
TypeScriptとは
TypeScript はマイクロソフトによって開発され、メンテナンスされているフリーでオープンソースのプログラミング言語である。TypeScriptはJavaScriptに対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えた厳密なスーパーセットとなっている。
https://ja.wikipedia.org/wiki/TypeScript
TypeScriptはJavaScriptの拡張ですので、既存のJavaScriptコードも問題なく動かすことができます。
VS Codeの用意
VS Codeのインストール方法は、以下の記事にまとめましたのでご覧ください。
設定方法は以下を参考にしてください。
Laravelプロジェクトの作成
Laravelのプロジェクトの作成については、以下の記事を参考にしてください。
以下のコマンドでLaravelプロジェクトを作成します。
curl -s https://laravel.build/example-app | bashTypeScriptの導入
NPMコマンドで、TypeScriptをインストールします。
$ sail npm install ts-loader typescript --save-devpackage.jsonに以下が追加されます。
{
..
"devDependencies": {
..
"ts-loader": "^9.2.8",
"typescript": "^4.6.3"
}
}tsconfig.jsonというファイルをプロジェクト直下に作成し、中身を以下のようにします。
{
"compilerOptions": {
"target": "es5",
"module": "es2020",
"moduleResolution": "node",
"baseUrl": "./",
"strict": true, // Enable strict type-checking options
"skipLibCheck": true, // Skip type checking of declaration files
"noImplicitAny": false // Bypass raising errors on `any` type
},
"include": ["resources/js/**/*"] // Frontend paths pattern
}
app.jsの拡張子を変更します。
resources/js/app.js
↓
resources/js/app.tswebpack.mix.jsを以下のように編集します。
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
//mix.js('resources/js/app.js', 'public/js')
mix.ts('resources/js/app.ts', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
TypeScriptでコーディング
試しにコーディングをしてみましょう。
インターフェースを定義してみます。(ユーザを想定)
export declare interface User {
id: number;
name: string;
email: string;
}app.tsを修正します。
import { User } from "./types";
let user = <User>{
id: 1,
name: "chigusa",
email: "chigusa@xxxx",
};
console.log(user);以下のコマンドでビルドしましょう。
$ sail npm run devbladeでapp.jsを読み込みます。bodyタグの最後の方に以下の行を追加します。
..
<script src="{{ mix('js/app.js') }}"></script>
..以下にアクセスして、ブラウザの開発ツールから正常に実行できているか確認します。
（今回はコンソールにログを出力）
http://localhost/
試しに、間違った型を指定してみましょう。
stringで定義しているプロパティに数値を指定すると、エラーが確認できます。
その他
初学者へ
Laravelを初めて触る方へ向け、手順やアドバイスをまとめました。
外部サーバーへ公開
作成したアプリは公開して使ってもらいましょう！
Laravelアプリケーションを外部公開する方法をまとめました。
脆弱性対策
脆弱性を抱えたアプリケーションの場合、攻撃を受ける可能性があり大変危険です。
作成したアプリケーションは、脆弱性対策も意識しましょう。
GitHubと連携
GitHubと連携する方法を解説しました。
プロジェクトの管理はGitHubを活用しましょう。
さいごに
TypeScriptを導入して、JavaScriptの開発効率を上げましょう。
他にも私のブログで、JavaScriptについて解説している記事がありますのでご覧ください。
コメント