laravel-mixでフロントエンドを開発で、Laravelのプロジェクトにおいてのフロントエンドの開発の流れを説明しました。今回は、その続きとしてnpmから新規のパッケージをプロジェクトに追加する過程を説明します。
訂正（7/17/2022）
最近、読者からの以下のコードの間違いの指摘をいただきましたので修正しました。読んでいただいて、しかも間違いを指摘をしてくれる。大変光栄です。kazooさんありがとう。
...
require('jquery-ui/ui/widgets/dialog.js'); // dialog.jsでなくdatepicker.jsが正しい！
上のコードにおいての、dialog.jsはdatepicker.jsであるべきです。
以降の文中のコードで修正されています。投稿時のL5.8でなく現在の私のL8.xの環境で確認しました。
jquery-uiのパッケージを検索
例として、jquery-uiのdate pickerを使います。会員登録フォームにおいて以下のように誕生日の日付の入力をカレンダーの選択としたいからです。
まず、パッケージとして登録されているかどうか、https://www.npmjs.comのサイトへ行き検索します。画面の検索窓に、jquery-uiと入れます。
検索結果として、774ありますが完全マッチ（exact match）は１つです。オリジナルのパッケージであることを確認してそれを使用します。
次にコマンドラインで、このパッケージをLaravelのプロジェクトにインストールします。
$ npm install jquery-ui --save-dev
これを実行すると、package.jsonが更新されて、以下のようにjquery-uiの行が追加されます。
{
...
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"jquery-ui": "^1.12.1",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
}
}
--save-devの引数を指定したので、上のようにdevのセクションに追加されます。フロントエンドの開発なので開発時にしかパッケージは使用しないためです。
また、node_modulesのディレクトリにjquery-uiのソースがダウンロードされていることは、以下のコマンドの実行で確認できます。
$ npm list --depth=0 ├── axios@0.18.1 ├── bootstrap@4.3.1 ├── cross-env@5.2.1 ├── jquery@3.4.1 ├── jquery-ui@1.12.1 ├── laravel-mix@4.1.4 ├── lodash@4.17.15 ├── popper.js@1.15.0 ├── resolve-url-loader@2.3.2 ├── sass@1.22.12 ├── sass-loader@7.3.1 ├── vue@2.6.10 └── vue-template-compiler@2.6.10
bootstrap.jsの編集
次に、bootstrap.jsに以下の行を追加して、このパッケージをロードします。
...
require('jquery-ui/ui/widgets/datepicker.js');
jquery-uiにはいろいろなウィジットがあるので、他も指定したい場合は以下のように指定します。
...
require('jquery-ui/ui/widgets/datepicker.js');
require('jquery-ui/ui/widgets/dialog.js');
require('jquery-ui/ui/widgets/sortable.js');
require('jquery-ui/ui/widgets/tooltip.js');
app.scssの編集
jquery-uiにはcssの設定も必要です。app.scssを編集します。
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
// jquery -ui
@import '~jquery-ui/themes/base/all.css';
bladeの編集
今度はテンプレートの変更です。ここでは、Laravelのプロジェクトについてくる会員登録ページにお誕生日の項目を追加します。
...
<div class="form-group row">
<label for="birthdate" class="col-md-4 col-form-label text-md-right">お誕生日</label>
<div class="col-md-6">
<input id="birthdate" type="text" class="form-control datepicker @error('birthdate') is-invalid @enderror" name="birthdate" value="{{ old('birthdate') }}" required autocomplete="\
birthdate">
@error('birthdate')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Register') }}
</button>
</div>
</div>
</form>
...
class="form-control datepickerの部分に注意してください。
app.jsの編集
ブレードで使用したクラス名、datepickerとjquery-uiのdatepickerを繋げるために、以下の定義をapp.jsに加えます。
require('./bootstrap');
...
$(".datepicker").datepicker({
dateFormat: 'yy-mm-dd'
});
コンパイル
いろいろなソースファイルの編集を完了して、以下でコンパイルして、all.jsとall.cssを作成します。
$ npm run dev
プロダクションには、
$ npm run prod
これで完了ですが、最後にカレンダーを日本語にしてみましょう。
そのためには、bootstrap.jsにおいて、以下のように日本語版のカレンダーに代えます。
...
//require('jquery-ui/ui/widgets/datepicker.js');
require('jquery-ui/ui/i18n/datepicker-ja.js');
これでコンパイルすると以下のような画面となります。
誕生日の項目なので年も選択できるようにしました。そのためには、app.jsでの定義は以下のようになります。
...
$(".datepicker").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
yearRange: '1901:'
});