Laravelで業務システム

Laravel関連の記事掲載してます

新規登録画面に登録済データを呼び出しセットする機能をつけてみる2

前回、どのような機能を実装するか説明しました。今回実際に開発はじめるわけですが、まず手始めとして、Bladeのコンポーネントについて学びたいと思います。

コンポーネントをまず作って、そこにロジックを足していきたいと思います。

1. コンポーネントファイルを作成する。


コンポーネント作る上でやりやすいのはArtisanを使うことです。以下のようにコマンドをタイプするとコンポーネントファイルが作成されます。

#php artisan make:component ModalList

今回、コンポーネント名は"ModalList"としました。

コンポーネントとなるBladeファイルは"views/components"の中に生成されます。

そして、同時に、コンポーネントクラスファイルが"app/View/Components"に生成されます。

コンポーネントクラスファイル経由でコンポーネントのBladeファイルを呼び出すイメージです。

2. コンポーネントのBladeファイルを編集する


今回はコンポーネントをまず理解するため、"こんにちは!"という文字を表示するのみでとどめたいと思います。

以下のようにコンポーネントのBladeファイルを編集します。

<div>
<h1>こんにちは!</h1>
</div>

3. メインのBladeファイルにコンポーネントを記述する


最後にコンポーネントを実装したいメインのBladeファイルにコンポーネントの記述をします。

コンポーネントは、新規登録画面に実装しますので、"mst_customer_create.blade.php"のcard-body内に以下のように記述します。

<x-modal-list />

すると、新規登録画面を開くと"こんにちは!"という文字が表示されたと思います。 コンポーネントを呼び出すには上記のようにHTMLタグのように記述し、タグ名はコンポーネント名の頭に"x-"をつけます。

Reactのコンポーネントを彷彿とさせますね。

4. まとめ


コンポーネントの大まかな仕組みがわかりましたので、次回から、具体的にロジックを組んでいきたいと思います。

Linuxとの出会いについて

今ではサーバーOSとして欠かせないLinuxですが、思えば、Linuxを使い始めてもう24年になるんだと改めて思いました。

今回はLinuxを使うきっかけとなったお話をしたいと思います。

さかのぼること25年前、大学生なり立ての小生はお金がなくPCも買える状態でありませんでした。PC購入必須でなくてよかったと今思うと思います。

正直このころのPCは信じられないくらい高かったです。まあ、安くなり始めてはいたと思いますが。

そのころ、授業で解析やらプログラミングの授業やらで、C言語を使うことが多く、PCがないととてもついていけないということで、どうしようかなあーと思っていました。

そんな時、ラッキーなことに、大学で廃棄予定のPCあるからといって、それを譲り受けました。それが”Solaris OS”の乗ったPCでした。

当時はPCが手に入るだけで浮かれてました。恐ろしい話が、皆がよく知るWindows95というOSが当時主流だったので、その違いも分かっていない状態でした。

その後、SolarisUnix系OSであることがわかるわけですが、プログラミングできるまでにかなり苦労した記憶あります。そもそもコマンドがわからんし、情報量があまりにも当時少なかったです。ワークステーション用にカスタマイズされていたのも要因なのですが、ネットワークに接続しない状態で起動させると、いたるところでエラーがでて、うまく起動しなかったりしました。

それでも、いろいろ勉強できて楽しかったなーと思います。

ちなみに Solarisはオラクル社に買収されたサン・マイクロシステムズ社が開発したOSです。

当時、技術書等は、英語で書かれているものとかが多く、翻訳するのも一苦労でした。

ここで、標準のUnixの知識がつきました。

その後、お金を貯めて、自作マシーンをつくり、当時の雑誌についていた、LinuxDebian OSをインストールしたのが最初のLinuxです。

※1か月くらいで自作PCの電源のコンデンサーが破裂したのも今では懐かしい。当時の自作PC事情もどこかでお話しましょう。

ここから、Linuxでいろいろやっていくのですが、何するにも、ソースを編集してコンパイルするってのが当たり前で、今のように簡単にインストールしたり、デバイスの操作もできる状態でなかったです。

それでも、今思うといい経験だったと思います。

今日はここまで。

新規登録画面に登録済データを呼び出しセットする機能をつけてみる1

今回から、新規登録画面に登録済データを呼び出しセットする機能を何回かに分けて開発していきたいと思います。

過去データを参照してセットするという機能はユーザビリティーの面からも有効なものです。ただ、後で説明しますが、すでに開発済みの顧客マスタの新規登録画面にこの機能をつけるのはあまり意味ありません。

1. 開発する内容の説明


今回は、小生の言語能力で説明することは困難なため、どんなことをやりたいか、以下に完成イメージ交えながら説明し終わりたいと思います。

1. 新規登録画面の顧客名入力ボックス横に登録済みデータ呼び出しボタンをつける。

f:id:pgslit:20210919223133j:plain
登録済データ呼び出しボタン

2. ボタンをクリックすると、登録済みデータを呼ぶ出すモーダル画面を表示させる。上部のボックスに検索したい顧客名(曖昧検索対応)を入力し"検索"ボタンをクリックすると、Ajaxで該当データを呼び出す。データ呼び出し中はローディングイメージを表示させる。

f:id:pgslit:20210919223244j:plain
登録済データ呼び出し画面

3. 呼び出したデータのいずれかの行をクリックすると、その行のデータが新規登録画面にセットされる。

f:id:pgslit:20210919223328j:plain
登録済データを呼び出した状態の画面

4. 以下がセットされたイメージ

f:id:pgslit:20210919223350j:plain
登録済みデータがセットされた画面イメージ

2. まとめ


上記の通り、このレベルのデータセットなら、メイン画面に、複写新規ボタンを設けるなどで十分で、わざわざjavascript使う必要もないです。もしやるなら、もっと情報量の多い顧客マスタで、本社情報を参照して子会社情報を登録するだとか、販売管理システム等の画面に顧客情報を展開するとかそういったものに使うのが有意義です。

尚、こういった機能は、再利用できるようにしとくと何かと便利なので、Bladeのコンポーネント化もやってみようと思います。というより、分けないとBladeが見難くなります。

今日はここまで。

Laravelでテストデータをデータベースに入れてみる

テストデータについては、Excel等でデータ作成してphpMyAdminからインサートする形で十分かなと思ってましたが、FakerPHPというダミーデータを生成するPHPライブラリを使うと簡単にダミーデータが作れるようなので、今後のことも考え使ってみたいと思います。

0. イントロダクション


FakerPHPはLaravelでは標準で入ってますので、インストール不要です。小生はインストールしようとしてました・・・。

FakerPHPだけでは、指定した、ダミー値を返すクラスですので、大量のデータを生成してDBにインサートすることはできません。

Laravelではモデルファクトリクラスに必要なFakerのプロパティーやメソッドを記述し、シーディングクラスでモデルファクトリで定義したデータを指定数生成し、データベースにインサートします。

ではこのプロセスを順を追ってみてみましょう。

1. Fakerのロケールを日本にする

なんと、Fakerで生成されるデータは日本語にもできるようで、"config/app.php"の"faker_locale"を以下のように変更するだけでいいようです。

'faker_locale' => 'ja_JP',

2. モデルファクトリクラスファイルの作成


Customerテーブルにダミーデータをインサートしますので、Customerモデルのモデルファクトリファイルを作成する形になります。モデルファクトリクラスは以下のようにArtisanで作成できます。

#php artisan make:factory CustomerFactory

ファクトリ名の頭をデータベースのモデル名にしとくと、ファイル内のモデル名等もそれに合わせてくれるようです。

作成したファクトリに生成するダミー値を以下のようにdefinition関数に記述をします。

public function definition()
{
    return [
        'customer_id' => $this->faker->numberBetween(1000000000,2147483647),
        'customer_nm' => $this->faker->company,
        'customer_addr' => $this->faker->streetAddress,
        'customer_tel' => $this->faker->phoneNumber,
        'customer_fax' => $this->faker->phoneNumber,
        'status' => 1,
    ];
}

fakerを使うと上記のようにいろいろなダミー値が作成できます。ほかにもいろいろとバリエーションがありますので、ググってみてください。"status"は変動させる必要ありませんので固定値にしてます。

3. シーディングファイルを作成する


シーディングファイルは以下Artisanで作成することができます。

#php artisan make:seeder CustomerSeeder

作成したシーディングファイルのrun関数に以下を記述をします。

\App\Models\Customer::factory()->count(50)->create();

上記では、データが50レコード作成されます。

4. ダミーデータを生成する。


最後に以下Aritsanでダミーデータがデータベースにインサートされます。

#php artisan db:seed --class=CustomerSeeder

5. まとめ


今回、あまり複雑な手順は取りませんでしたが、結構つかえそうです。しかしFakerどんな仕組みになっているのでしょうね。こういうの考える人すごいと思います。

TypeScriptは勉強すべきか

Reactを勉強していると、TypeScriptに関する情報がよくはいってくる。

TypeScriptはマイクロソフトによって開発され、メンテナンスされているフリーでオープンソースプログラミング言語で、ECMAScript 2015の厳密な上位互換らしいです。

やっぱマイクロソフトはすごいよ。

ES6を勉強しているところなのだが、TypeScriptはいろいろ利点もあり、主流となるならば、やっぱ覚えたほうがいいのかなーと思う今日この頃です。

Reactで作られたフリーのコンポーネントを業務で利用できないか、いろいろあさっているのですが、結構、TypeScriptベースで記述されているものがいがいに多いことに驚かされてます。

経験則上なのですが、これからjavascriptをがっつり業務で使いたい方はTypeScript勉強しといたほうがいいかもしれないですね。