🐈

【チームプロジェクトReview1】技術選定理由および学んだ点(SSR,VanillaJS,MyBatis,Indexなど）

2024/02/03に公開

初心者

プロジェクトマネジメント

tech

はじめに

チームプロジェクトの技術とその選定理由につきまして、お話したいと思います。

1. SSR(Thymeleaf) vs CSR(React)

当時、管理者ページとクライアント(ユーザー）ページを企画していたので、膨大なマークアップを効率化するためにはページの作成はReactを活用したいと考えました。
しかし、二つの理由で、Thymeleafを使用しました。

技術の熟練度

チーム全員がSSRに慣れており、CSR、Reactを勉強した人は私しかいませんでしたので、チームバランスを考えたら良くないと判断しました。その上、チーム員2人以外はSpringとJSPしか使ったことがなかった点、Thymeleafの文法を知らない状況、JSONでデーターを交換することをみんな慣れてなかった点を考えば、Reactを導入することはハードルが高いと考えました。
チームプロジェクトの特徴上、コミュニケーションを取ることも含め、まずは皆が慣れているSSRをすることが効率が高いと考えました。

SEO対策

通信販売の特徴上、SEO対策が重要だと考え、CSRよりはSSRにした方が良いと考えました。これはエンジニアよりは自分がWEBマーケティングをした経験があったからこそ、視野に入れた点だと思います。
CSRの場合、SPA方式でページ移動もなく、mobile-firstである通信販売にも似合いますが、SSRは毎度htmlを転送するので、様々なmetaタグを使用し、検索エンジンによく出ることが分かったので、性能よりはビジネス的な点からSSRを採択しました。

head

<head th:fragment="head">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE-edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="HyonHyonKOR" />
    <meta
            name="keywords"
            content="male e-commerce,shopping,male,unique,メンズファッション通販販売,メンズファッション,メンズズボン
    />
    <link rel="icon" href="/images/spartan-helmet.svg" />
    <!--OG (Open Graph Data)-->
    <meta property="og:title" content="HyonHyon" />
    <meta property="og:type" content="Website" />
    <meta property="og:url" content="URL" />
    <meta property="og:image" content="URL" />

add-member

<html lang="ko" xmlns:th="http://www.thymeleaf.org" >
<head>
    <div th:remove="tag" th:replace="~{/fragments/head :: head} "></div>
    <title>PERION - 会員登録</title>
    <meta name="description" content="20代人気No.1メンズ通信販売サイト! 今、会員登録すればお得なイベントと情報をGET">
    <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
    <script src="/js/kakao-address.js"></script>
</head>

2. Vanilla JS vs JQuery

React、Vueが出る前には、JQueryが主に使われるライブラリというのは知っておりましたが、
JavaScriptのfetch,queryselector,getElementById関数で対応でき、性能的にもVanilla JSの方が速いと考えたので、JQueryを使いませんでした。

https://www.quirksmode.org/dom/events/index.html

header

'use strict'

/*headerの検索toggle機能*/
const headerItemSearchLink = document.querySelector('.header__nav-search');

headerItemSearchLink.addEventListener('click',()=>{
    const headerItemSearchContainer = document.querySelector('.nav-search__menus');
    headerItemSearchContainer.classList.toggle('active');
});


/*headerのログアウト機能*/

const memberLogoutLink = document.querySelector('.member__logout');

memberLogoutLink.addEventListener('click',()=>{
    const memberLogoutForm = document.createElement('form');
    memberLogoutForm.setAttribute('method','post');
    memberLogoutForm.setAttribute('action','/members/logout');
    document.body.appendChild(memberLogoutForm);
    memberLogoutForm.submit();
})

3. MyBatis vs JPA

Springのデーターアクセス技術の場合、JPAがトレンドになっておりますが、MyBatisを選定しました。

基本Queryの場合、JPAから簡単に解決できることは知っておりましたが、皆使った経験がなかった点が一番大きな理由でした。メンターさんと相談した結果、JPAの場合、動的クエリ、既存のQueryをしない方法で勉強すべきも多く、Queryを使わないので、ITスクールの学んだ方式とはまったく違う点などが問題でした。

そのため、ITスクールで勉強したMyBatisを使い、JPAを勉強する前にDBの基本機を勉強することがより大事だと考え、正規化、ストアドプロシージャ、Indexが何かのような基礎を固めることに集中することにしました。

DELIMITER $$
CREATE DEFINER=`root`@`localhost` PROCEDURE `generate_notice_test_data`()
BEGIN

    DECLARE i INT DEFAULT 1;
    DECLARE admin_no INT DEFAULT 1; 

    WHILE i <= 200 DO
        INSERT INTO notice (admin_no, notice_title, notice_content)
        VALUES (admin_no, CONCAT('notice test title ', i), CONCAT('notice test context ', i));
        SET i = i + 1;
END WHILE;

END$$
DELIMITER ;

200個のテストデーターを昔の場合、一個ずつ入力しましたが、プロシージャの存在が分かってから、とても効率が上がりました。

また、DB基礎知識を勉強した際にIndexの場合、Unique Keyに指定したカラムに自動生成され、膨大なデーターをすぐ見つかることができるため、Unique Keyの長所を生かす工夫をしました。
MTG中、IDのみならず、携帯番号とメールアドレスもUnique Keyにすることに決めたので、
ID照会/PW再変更機能の場合、メールアドレスと携帯番号のデーターを活用し、Unique keyのindexでデーターを探索するスピードを向上することを考えることができした。