Kiamotomonic

ただの戯言

Kiamotomonic

ただの戯言

最近の記事

第17回 Laravel10 環境構築メモ(LaravelのPagenationの戻り値を強烈にカスタマイズしてみる)

はじめに現在、しょぼい一覧画面を鋭意、アップグレード中なのですが、とにもかくにも、LaravelのPagenationの戻り値が使いにくいという事でカスタマイズしてみようというのが今日のやりたいことです。 スネークをキャメルにしたい 不要なデータは削除&受け取りやすく加工してから画面に戻したい というのが今日のGoalです。ちなみに現在、第11回のこの一覧画面を こういう感じにアップグレード中です。 今回は、Pagenationのカスタマイズがメインなので、フロント

    • 第16回 Laravel10 環境構築メモ(Flowbiteを使ってみる)

      はじめに今回は、即終わります。Flowbiteをinstallして動作するところまでを確認したいと思います。FlowbiteはTailwind CSSのユーティリティクラスで実装されたUIコンポーネントのライブラリだそうです。 Flowbiteをinstallnpm install flowbite tailwind.config.jsを修正3行追加します。 tailwind.config.js import defaultTheme from 'tailwindcs

      • 第15回 Laravel10 環境構築メモ(テストコードを書いて動かしてみる)

        はじめに前回、レポジトリパターンを採用してみたのですが、今回が本番です。テストコードを書いてみたいと思います。 準備するテストコードを書く前にいくつか設定を追加する必要がありました。coverageを測定しないなら、そのままでも動きそう。まず初めにphp.iniを修正します。第1回の時に作ったやつですね。こんな感じに修正します。 docker/php/php.ini [Date]date.timezone = "Asia/Tokyo"[mbstring]default_

        • 第14回 Laravel10 環境構築メモ(Repository パターンを使ってみる)

          はじめに前回、登録画面を少しアップグレードさせたのですが、今回は更なるアップグレードという事でレポジトリパターンを使ってみようと思います。レポジトリパターンはググれば沢山説明でてくるものです。 次にテストコードを書こうと思ったのですが、Mockを使いたくて、その為だけに今回、レポジトリパターンを採用してみました。 ちなみに今回はdocはcopilotに書いてもらいました。 Interfaceを作成app/Repositories/Greeting/GreetingRepo

          第13回 Laravel10 環境構築メモ(Laravel+Typescript+React+inertiaでCreateをグレードアップしてみる)

          はじめに前回、登録画面を作成したのですが、今日は、それを少し改造してみます。 FormRequestを使ってValidateする(ChatGPTに聞いたらおすすめされた) 成功して一覧画面に戻った時にFlashメッセージを表示する ReactのTypescriptをしっかりと修正する(Interfaceとか定義してなかった&型指定してなかったので、叱られてた) ちなみに、今更ながらGithub Copilotを使い始めたのですが、若干、生産性が上がった気がします。若干

          第13回 Laravel10 環境構築メモ(Laravel+Typescript+React+inertiaでCreateをグレードアップしてみる)

          第12回 Laravel10 環境構築メモ(Laravel+Typescript+React+inertiaでCreateしてみる)

          はじめに前回、一覧表示はできたので、今回は、データの登録画面を作成してみます。今回から、少しそれっぽい感じの画面にしてますが、php artisan breeze:install react --typescriptを実行した際に作成された、アリもののcomponentを使いまわしているだけです。 Controllerを修正GreetingControllerに処理を追加していきます。前回、オプションに--resourceを付けてmakeした場合は、勝手にcreateとst

          第12回 Laravel10 環境構築メモ(Laravel+Typescript+React+inertiaでCreateしてみる)

          第11回 Laravel10 環境構築メモ(Laravel+Typescript+React+inertiaで一覧表示してみる)

          はじめに前回、データの作成が完了したので、今回はとりあず画面に作成したデータを一覧表示したいと思います。データを取得して、inertiaを使って、Reactに渡すというシンプルながらの基本です。ちなみに、さっと調べたんですが、React+Typescript+inertiaの組み合わせで開発してる人って少ないんですかね?あんまり良い情報が見つからない・・・。 Laravel側に必要なモノを作っていくまず、Controllerを作ります。オプションの--resourceは、リ

          第11回 Laravel10 環境構築メモ(Laravel+Typescript+React+inertiaで一覧表示してみる)

          第10回 Laravel10 環境構築メモ(migrationしてtableを作る&Factoryを使ってseedingをする)

          はじめに前回は、Dockerコンテナの一般ユーザーの作り方の回で話が少しそれたのですが、今回から、何かしらのCRUDを簡単に作りながら、開発の基本を思い出そうという回になります。まずは、テーブル作成してデータを投入しないと始まらないので、migrateとseedingを使ってテーブルの作成とデータの投入をます。第10回まで来ました。特に何回目まででどこまで進めたいというのは全くないです。 Migrationファイルを作成まずは、テーブルを作成する為のmigrationファイ

          第10回 Laravel10 環境構築メモ(migrationしてtableを作る&Factoryを使ってseedingをする)

          第9回 Laravel10 環境構築メモ(一般ユーザーを作ってログインするためにDockerFileとdocker-compose.ymlを修正する)

          はじめに第1回で環境構築を行った際に見落としてた点に気が付きました。PHPのコンテナの中でphp  artisanコマンドを実行するとrootでfileが作成されてしまうのすね。これだと、PhpStormで編集すると権限の問題でエラーになり、保存できなかったりします。なので、今回は一般ユーザーをコンテナ内に作成しつつ、ターミナルから作成したユーザーでログインできるように修正をします。 DockerFileを修正ここから >>から<< ここまでを追加するまでの部分を参考に修正

          第9回 Laravel10 環境構築メモ(一般ユーザーを作ってログインするためにDockerFileとdocker-compose.ymlを修正する)

          第8回 Laravel10 環境構築メモ(ちょっと、いじってみる)

          はじめに前回、Inertiaが何者か、なんとなく分かったので、試しに(本当に試しに)、新しいページを作って、少し動かしてみようかと思います。ちなみに一昨日、iPhone15 Pro Maxを購入したのですが、iPhone11からの久々の買い替えでQOLがアゲアゲになりました。カメラ凄い良くなってるね。。。 新しいページを作ってみるまず、↓の感じで新しいtsxファイル作ります。簡単に何をしているか説明すると、この後、routeの設定の所で、textというフィールドに任意の文字

          第8回 Laravel10 環境構築メモ(ちょっと、いじってみる)

          第7回 Laravel10 環境構築メモ(Inertiaが何かをザックリと理解する)

          はじめにとりあえず、installはしたが、Inertia.jsが何者なのか全く分からなかったので、調べてみました。 Inertiaのサイトを読んでみるちょっと、頭の中で翻訳しながら、気になるところを整理してみる。 Top page 簡単にまとめると、 API作らなくて良い コントローラーとページビューを構築するだけ フレームワークではない フロントエンドとバックエンドをを結び付ける接着剤 バックエンドのルーティングを使用して、React、Vue、および Sv

          第7回 Laravel10 環境構築メモ(Inertiaが何かをザックリと理解する)

          第6回 Laravel10 環境構築メモ(PhpStormでReactのDebug)

          はじめに第5回までで大体準備できたなかと思ったんですが、ついでに、使うかどうか分からないのですが、ReactのデバッグをPhpStormで出来るようにしてみました。 PhpStormの設定をする今回、使用するPhpStormは、PhpStorm 2023.2.3です。特に、PluginをInstallする必要はないです。 実行/デバッグ構成から+をクリックしてJavaScriptデバッグを選択してください。そうすると画像の様な設定ダイアログが表示されます。 名前は適当で

          第6回 Laravel10 環境構築メモ(PhpStormでReactのDebug)

          第5回 Laravel10 環境構築メモ(Eslint+ Prettier②)

          はじめに第4回に続いて、Prettierを導入してみます。ちなみに、Prettierはフォーマッタですね。なぜ、Prettierを使った方が良いかは興味がある人は調べてみると良いかと思います。ちなみに、最近、私、ニトリの肩・首・背中も支える枕という枕を買ってみたんですが、めちゃくちゃ自分の体には合っており、これまで寝起きで首痛い日が良くあったんですが、それがなくなりまた。背中でも体を支える感じでGoodですね。 Prettierの導入Prettierのinstall とり

          第5回 Laravel10 環境構築メモ(Eslint+ Prettier②)

          第4回 Laravel10 環境構築メモ(Eslint+ Prettier①)

          はじめに第3回まででLaravelの起動、データベースへの接続、Xdebugの導入は完了。今回はFrontendをReact + Typescriptで開発してみようという所で、ESlintとPrettierを導入してみます。と、思ったんですが長くなるので、2回に分けてメモ。今回はESlintの導入。 ESlintの導入ESslintのinstall npm install eslint --save-dev ESlintの初期化 この後、色々と聞かれので、選択してい

          第4回 Laravel10 環境構築メモ(Eslint+ Prettier①)

          第3回 Laravel10 環境構築メモ(PhpStrom + Xdebug)

          はじめに第一回、第二回でLaravelの起動、データベースへの接続までは完了しました。今日は、これから開発に必要なPHPのdebugができるようにPhpStormの設定をしたいと思います。ちなみに、私のPCは自作で光ってますが、特に詳しいタイプの人間ではないです。 Xdebugのinstall環境 / enviroment ・Windows11・Docker Desktop 4.19.0・WSL2 - Ubuntu 22.04.2 LTS・PHP 8.2.1・PhpSto

          第3回 Laravel10 環境構築メモ(PhpStrom + Xdebug)

          第2回 Laravel10 環境構築メモ(DB接続)

          はじめに前回の作業でとりあえずLaravelが起動したので、今回のメモはDB接続の設定をしてみた時の自分用のメモ。どうでも良いんですが、最近、無印のアロマディフューザーを使い始めました。朝から、おやすみブレンドのエッセンシャルオイルを使っています。 DBに接続できるように設定するDBの接続確認のために、http://localhost/registerを使います。↓の画面ですね。 修正するのは、プロジェクトフォルダの直下にある.envファイルです。前回の作業の際に作成した

          第2回 Laravel10 環境構築メモ(DB接続)