Spring(Spring Boot)の開発

前回の記事
https://qiita.com/Takatsuna/items/31af8b007a44f2c3a900

では、CSSを当てずに簡易メモアプリを作成しました。

CSSを少し学んだので、アウトプットのためにアプリケーションにスタイルを追加していく形にしようと思います。

作ったもの

メモアプリ
リポジトリ: https://github.com/takatsuna113/spring-memo-app

※ Home画面と詳細画面のみ

使用技術

Spring Boot 2.7.12
Java 11
Maven(ビルドツール)
MySQL(DB)
Mybatis(O/Rマッパー)

テーブル定義

前回の記事を参照ください。

成果物(画面)

Home画面

1画面に収まるようにした。
メモのタイトル右側にある「詳細」を押すと画面右側に詳細を表示する

詳細画面

こちらも画面に収まるように以下の情報を表示

タイトル
内容
作成日
更新日
詳細の非表示

機能

前回の記事を参照ください。

こだわった箇所

自画面遷移
spring bootでの開発において、リンククリック時の自画面遷移の方法がいまいちわからなかったのでSPA"風"にすることで実装をした。
その際、2つのControllerの戻り値を同じhtmlに渡して表示をするのが少し苦労しましたが、なんとかそれっぽい感じになりました。
css・javascriptを使った動的なスタイリング
メモの詳細をクリックしたときにクリックしたメモだけ背景色を当てるスタイルを実装しました。
しかし、思っていたより上手くいかず調べながら最終的に上手くいったのでとても嬉しかったです。

html

    <!-- サイドバー -->
    <div class="sidebar">
      <div class="sidebar-items" th:each="memo : ${memoList}" th:object="${memo}">
        <div class="memo-title">
          <p th:text="*{title}"></p>
        </div>
        <div class="memo-action">
          <a class="detail-memo" th:href="@{/memo/detail/{id}(id=${memo.id})}">詳細</a>
          <a class="edit-memo" th:href="@{/memo/edit/{id}(id=${memo.id})}">編集</a>
          <a class="delete-memo" th:href="@{/memo/delete/{id}(id=${memo.id})}">削除</a>
        </div>
      </div>
    </div>

javascript

/** サイドバーのフォーカス切り替え */
window.onload = function () {
  const currentUrl = location.href;
  // activeクラスを追加するクラスを取得
  const sidebar = document.querySelectorAll('.sidebar-items');

  sidebar.forEach((link) => {
    // 各コンテンツの詳細リンクのhref属性を取得
    const activeUrl = link.children[1].children[0].href;
    // 開いているURLと詳細リンクを押したコンテンツが一致している場合、activeクラスを追加
    if (currentUrl === activeUrl) {
      link.classList.add('active');
    }
  });

}

現時点での反省点

スタイリングの不十分さ
ページ全体のレイアウトを自身のPCに合わせて適用しているので、
レスポンシブ？なにそれ美味しいの？状態...
レスポンシブ対応も随時行っていきたい。
そもそもモバイルファーストでの開発をできていないので、今後意識していく。

これから

Spring Boot自体あまり触れていなかったのにもかかわらず、フロントエンド周りしかほぼ触っていないのでバックエンドも触れるように既存のスタイリングだけでなく、簡単なアプリを0から作る機会を設けないといけないですね。