概要

独学でちょい勉強して未経験エンジニアとしてスタートで、まだ働き始めて1年経たないですが、初めて新規での開発(バックエンド部分メイン)を担当したのでその感想として、利用したライブラリや概念などを紹介したいと思います。
1ヶ月ちょっととかで大体終わらせる感じだったのであまりライブラリ選定であったり設計にかける時間も取れない中だったのですが、少しでも参考になればと思います。

Formatなど記述や構造で注意したとこ

ディレクトリ構造

並列でポンポンフォルダ置くことは避けました。
特に名前が2単語3単語のファイルが出てくるときには、ディレクトリでカテゴリ作って綺麗にできるように工夫しています。特にモデルをlaravel内でのファイル名からのテーブル名識別に頼らずに積極的にリレーション系列はまとめて下層において分かりやすくしました。
例えばusersテーブルに対する、user_prefilesテーブルだったら

Models----User.php
        |
        |-User----Profile.php

作っているときに「これじゃやっぱわかりづれぇわ」なんてことは山ほどあったのでその度に何回も何回もディレクトリ構造変更していました😩

Routing

Route::get('/')->name('home')->uses('HomeController');

ルーティングのフォーマットもnameをつけて全て指定したかったので、
nameがパッと見わかりやすいようなフォーマットで統一。

多分、見やすい...タブンネ......😔

Relation定義

public function keywords()
{
    return $this->hasMany(Keyword::class);
}

よくStringとしてシングルクオーテーション使って定義しているの見ますけど、
PHPStorm使っている身としてはリレーション定義見たらジャンプして秒速でクラスの確認まで飛べたら嬉しい😋
ってことで直接クラスを書いてのリレーション定義しています、この書き方できると知った時は感動しました😢

Transformer

一言で言うとデータベースなどの一塊のデータセットを使用したい形に変更してあげる機能のこと、例えば生年月日が『年』『月』『日』で別れてDBにあるならこれをDBから引き出す時には『年/月/日』にまとめてあげようとかそんな感じです。
モデルめちゃくちゃ使うPHP開発においては覚えて損はない最強の概念だと思っています、これを定義したおかげで秒速でコーティングが終わった部分も多く存在します👍
私が執筆した記事があるのでよかったらそちらを参照してください。

私の行った開発においてはリスト表示で使いたい配列を返すTransformerと、
詳細表示で使いたい配列を返すTransformerをそれぞれ二つ用意したりしました。
あとUser登録とUser情報編集など複数ページで似たようなデータ扱う兼ね合いもあり、Request用にもTransformer作ったりしてます。

scopeクエリ

whereで検索する際nullが混入してしまうと、うまく検索できなくなるためissetやis_nullで弾いてwhereに通さない処理を加えるのをよくみます、ただあまりにメソッドが冗長になって気持ち悪いのでscopeでカスタムしたwhereを作成しました。

public function scopeCustomWhere($query, string $column, string $param = null)
{
    if (is_null($param) || $param == '') return;

    return $query->where($column, $param);
}

チェーンして繋げることもできるので楽です、traitとしていろんなモデルに入れて、
customWhereとして利用しました。
なんかnull弾いてwhereするメソッドってありそうですけど私が見つけてないんですかね？
にしてもいつまでもいい命名が出来ずに仮置きしたクソネームメソッドのままリリースしてしまった

使用したライブラリ

マークダウン - SimpleMDE

マークダウンエディタを組み込むときに選んだのがこちらです。
導入がとても簡単ですが、奥が深く内部コードをしっかりと読み込んでカスタマイズしなければやや手に余ります。画像の追加機能などをカスタムしました。
ホントはvue.jsに色々あるので先にそちらを導入してみたのですが、こちらのsimplemdeの場合は普通のhtml上のtextareaを拡張してそのまま利用できるため、submitしたときtextareaに指定したname属性でsubmitされたり、取り回しが楽そうなのでこちらに変更しました。

フォーマッター - Cleave.js

郵便番号や電話番号にハイフンを強制したかったために導入しました。
(入力データの検索かけるときにハイフンなしとありが混在すると面倒、inputのtype="number"などで数字入力を強制するのもありだと思ったけど個人的にはハイフンありの方がみやすいし入力ユーザー的にはハイフンが強制された方がいいのかなと。。。)
導入も簡単な上とっても使いやすくて幸せになれました😻

住所の自動入力 - yubinbango

クラス指定での導入だったためJS知らなくても楽にぶち込めちゃいます！
なんかajaxzipとかわかりづらくてもっと簡単なのないかなぁと思ってまして...笑
特によかったポイントが都道府県をプルダウン形式のセレクトでも
自動で入力する機能が備わっていたこと！
下の方にセレクトの場合とか書いています。
https://www.whizz-tech.co.jp/1843/

ドラッグ&ドロップ - VueDraggable

ドラッグ&ドロップ機能を実装してから、仕事に対する現実逃避に
適当に作った項目の順番を数時間並べ換えていたのはここだけの話です
わかりやすいけどcssとかテーブルで融通が聞かなくてちょっと困った
多分私の勉強不足でしょうけど、とりあえずテーブルのヘッドだけ別途で作成したりして誤魔化しました。
vue.jsはstyleにSassが書けるのでデザイン変更したい時もやりやすい！
ちなみにこいつ自体には順番を保持する機能がなさげなのでv-forのindexを
inputしたいデータにうまいことバインドさせてDBまで連れてってあげる必要があります。

ちょっとしたUI変更にて使用 element-ui

デザインが結構好み
ただし、レスポンシブ対応がびみょいので他の選択肢を探した方がいいかもしれない。
私は使いたいcomponentが少しだけだったのでcss軽くいじってflexで誤魔化しました。
使いたかったのがこのtransferと呼ばれる左右にリスト表示させて
選択と非選択をわかりやすく見せるUIを作成したかったために導入、

最後に

経験数的にもまだまだ未熟ですしもっと良いライブラリ選定ができたり、設計技法が使えたろうなぁとは思っています。他にもライブラリ導入などで開発スピードを上げられた部分や保守運用を楽にできた場面も数多くあるでしょうし、今後も精進していきます。