【チームプロジェクトReview1】技術選定理由および学んだ点(SSR,VanillaJS,MyBatis,Indexなど）
はじめに
チームプロジェクトの技術とその選定理由につきまして、お話したいと思います。
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 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" />
<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
'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でデーターを探索するスピードを向上することを考えることができした。
Discussion