Laravelでブログサイトを作りました。

公開: 2023-09-30

更新: 2023-10-04

はじめに

このブログサイトは、Laravel (10.x)で開発しました。独学でプログラミングの勉強をしてきましたが、実際に一つのアプリを開発することで理解を深めたかったこと、学習のアウトプットができる自分専用の場が欲しかったことから当ブログ開発に至りました。

開発環境

MacBook Air (M1, 2020)
PHP: 8.2.x
Laravel: 10.x
Docker: 20.10.x
HTML・CSS(Sass)、JavaScript

機能紹介・工夫した点

主な機能や工夫した点の概要を説明します。

Search（Ajax検索）

JavaScriptを使って非同期処理でリアルタイムに検索結果を表示するようにしました。UI/UXの観点からこの機能は必須です。

検索範囲を「タイトル」「記事内」「全範囲（タイトル+記事内）」の3パターンから選べます。個人的に「あの記事、何てタイトルだっけ？」ということを防ぎます。

PC操作の場合「⌘ + K」のショートカットキーで検索ウィンドウを開くようにしました。脱マウスガチ勢ではありませんが、出来る限りキーボードショートカットで作業効率化しています。

Filter（条件絞り込み）

気に入った検索条件をブックマークしたりURLシェア出来るように、絞り込み処理はクエリパラメータを使いました。

JavaScriptでフォーム送信して条件変更する度に結果を反映させています。「条件を沢山選んで検索ボタンを押したら結果が0だった。」というストレスを回避します。

PCは右カラムに固定して常に見えますが、スマホはモーダル画面でフィルターを表示します。その為、スマホの場合は条件変更の度にフォーム送信すると画面が閉じてしまい複数条件選択の操作性が悪くなってしまいます。対策として、条件変更の度に検索結果の件数だけを非同期で取得・表示し、ボタンクリックでフォーム送信するようにしました。

URLの永続化

URLの階層にカテゴリを含めるブログサイトも多いような気がしますが、当ブログの場合は今後の勉強内容や記事執筆状況によってカテゴリ名やスラッグを変える可能性もあると思いました。そのため、URLの永続化を考えてカテゴリをクエリパラメータでの絞り込みにしました。（タグも然り）

タグによる横断的な分類

LaravelとかPHPというキーワードで階層的に記事分類をしようとすると、いわゆる「こうもり問題」が発生してフォルダ分けの沼から抜けられなくなります。そこで、技術キーワードはタグによって細かく横断的に分類して、カテゴリはかなり大きな括りでまとめることにしました。

タグのOR検索とAND検索

例えば、「ざっくりフロントエンドの技術について見たい」というときは「HTML or CSS or JavaScript」みたいなタグのOR検索が役立ちます。

また、「Laravel and JavaScript」などのAND検索をすれば、フロントとバックエンドをクロスで見ることができ、「LaravelとJavaScriptによる非同期処理」なんて記事を見つけられるかもしれません。

管理者側の機能

記事執筆はマークダウン形式で、投稿時にHTMLに変換して出力しています。

不特定多数のユーザーが使用するプラットフォーム型のブログであれば、wysiwygエディタなんかが必要になると思います。しかし、自分の場合は普段Obsidianというメモアプリを使ってマークダウン形式でメモをとっており、「Obsidianでメモ -> コピペで投稿」という作業フローが出来るため、エディタは用意せずinput txtareaにベタ書きです。

使用技術・工夫した点

かなりアバウトですが、今回の開発で個人的に初めて使った技術や工夫した点を、箇条書きでキーワード列挙します。

dockerでの環境構築
docker環境化でViteのホットリロード機能を使うためのポートマッピング
Mermaid記法でER図を作成
EloquentのScope機能
FormRequestによるバリデーション
env -> configへルパ経由で環境変数を使用
認証機能の実装、middlewareでルーティングの保護
ルートモデルバインディング
Traitで同一処理の共通化
JavaScriptを使って非同期処理
bladeのx-slotで再利用性
CSS設計はOOCSSやFLOCSを参考に（結局は自己流になったが設計思想の一部を利用）

おわりに

当面はPHP/Laravel関連がメインになると思いますが、その他にも色々な技術に触れて随時アウトプットしていきます。

初投稿は以上、ありがとうございました！