びきニキです 今月ハックツで個人的に学んだことを放出します🐺
💻 エンジニア勉強会
ハックツの技術顧問である@apple_yagi に色々聞く会です。毎週木曜日開催です。
最近社内でAPIのテストツールを選定しているのですが、その中でよく出てきた言葉である「自己署名証明書」「Basic認証」「Cookie認証」あたりの言葉の違いについて質問しました！
自己署名証明書
自分で発行する「自分は安全ですよ～（だからサイトにアクセスさせて！）」という証明書のこと。開発者がテスト環境やローカル環境などで利用することが多い
Basic認証
サイトにアクセスするときに「ID」と「パスワード」を入力する認証方法。
管理画面や社内の情報へのアクセス制御などに利用される。
Cookie認証
ウェブサイトがユーザーの訪問履歴や情報を記録し、認証に使用する仕組み。
ユーザーが初めて訪れたときに一意の識別子をクッキーとして保存し、後でそのクッキーを使用してユーザーを認証する。
別途業務中に「OpenAPI」「Swagger」「StopLight」の違いについても ＠take_cantik と @iden071411 に質問したので、備忘録として書いておきます！
SwaggerとOpenAPI
どちらもREST API を記述するための仕様書。
Swagger は、OpenAPI の最初の実装であり、OpenAPI は、Swagger を基に策定された仕様書である。（途中でプロジェクト名が変わり、命名も変わったらしい）
現在、OpenAPIはREST API を記述するための仕様書を指すことが多く、SwaggerはOpenAPIの支援ツールを指すことが多い。仕様書はyaml形式で書かれるぞ！多分こんな感じ（AIに書かせた）
openapi: 3.0.0
info:
title: Petstore API
version: 1.0.0
paths:
/pets:
get:
operationId: getPets
responses:
200:
description: A list of pets
content:
application/json:
schema:
type: array
items:
$ref: '#/components/schemas/Pet'Stoplight
OpenAPI、手動で書くのはしんどい！…ということでGUIでポチポチしたらいい感じに生成してくれるツールの1種。
また、このBlogをSSRからISRに変更するにあたって「CSR」「SSR」「ISR」「SSG」の違いも聞きました👀
CSR（クライアントサイドレンダリング）
ブラウザ側で読み込みする。
サイトにアクセスしたときにパーツ毎に読み込んでくれる（HTML→CSS→JS）
毎回1から情報を持ってくるので、読み込みに時間はかかるけど、最新の情報をいつも持ってくることができる！
車で表すと、受注生産型！ディアゴスティーニ形式でパーツを持ってきて、車を作るぞ（パーツは毎回取ってくるけど組立ては一気にやるらしい）🦖
SSR（サーバーサイドレンダリング）
サーバー側で読み込みする。
サーバー側で処理をした後、HTMLを構築してクライアント側に送る
CSRの場合はユーザーデバイスのスペックに依存しちゃうけど、SSRの場合はサーバーでHTMLを構築するから影響を受けない！…けど、リクエストごとにサーバー処理し、HTML構築するので時間はかかる
車で表すと、こっちも受注生産型！出来た車に乗って、運送の人がここまで届けてくれるぞ🚙
SSG（スタティックサイトジェネレーション）
SGとも言うらしい
CSR／SSRで問題となった「時間がかかる」を解決するべく生まれたもの（多分）
ビルド時にHTMLを構築・外部APIからのデータフェッチ実行をし、ユーザーリクエスト時には出来ているものを表示します。
サーバーからHTMLを返すのではなく、CDN（なんかいろいろコンテンツおけるとこ）にキャッシュしておくことでユーザーに対して高速にページを表示することができる！だから表示もめっちゃ早い！
でもビルド時にしか情報が取れないので、更新が多いアプリ（SNSなど）には不向きという一面も…。
車で表すと、通常販売型！出来てる車をそのまま届けるぞ！Amazon的な🐟
出来合いのものなのでカスタマイズ性が低いという特徴があるね
ISR（インクリメンタルスタティックリジェネレーション）
getStaticProps()関数のreturn内にrevalidateという項目を作って、任意の値を入れることで、その秒数以降にリクエストがきた時に、サーバー側でフェッチを再度行い、HTMLを再構築する仕組み。
export async function getStaticProps(hoge) {
return {
props: { hoge },
revalidate: 10, // ここを追加
}
}でも、最初のリクエスト時にはキャッシュされたHTMLを返します！
車で表すと、通常販売品定期的改造型！
定期的にマフラーを改造したり、タイヤだけ変えたりするよ
そんな車あってたまるか！出費ヤバそうだね💸
リクエスト時に最新の情報でなくても良いならISR
リクエスト時に最新の情報が出てほしいならSSRかCSRという使い分けができるみたいです👀
🎨 デザイン勉強会
インターン先でデザインQAを行う機会があり、自分の知識のなさを痛感することとなったので勉強会を開いてもらうようお願いしました。突然のお願いにも関わらず快諾してくださった @PINEyuto3 に感謝です！
今回は、私のリクエストにより「いろいろな世の中のデザインを見て感じたことを言語化する会」をやりました！言語化する力が弱すぎて、主語が抜けることが多いと実感したので今後鍛えていきたいです（本当に成人なのか怪しい）
あとは、「デザイン5層」「タスク指向」「オブジェクト指向」について知見を得ました👂
デザイン5層（Jesse James Garrett 氏が考案したUXのモデル）
表層 ： 見た目。私たちが触っているところ
骨格 ： ワイヤーフレームなど、UIの骨組み部分を作る
構造 ： ユーザーの思考や行動を考えて、データやオブジェクトを設計すること
要件 ： ユーザーの思考や行動を考えて、必要な機能を洗い出すこと
戦略 ：「何のための」「誰のための」プロダクトか明確にすること
タスク指向
ユーザーが「やること（タスク）」を選んでから「対象（オブジェクト）」を指定する考え方。（ATMなど）
エラーなく誘導させたい場合はよく使われるけど、ユーザーがイメージしていないような不自然な操作順になってしまうこともあるので、注意が必要です🦊
オブジェクト指向
ユーザーが「対象（オブジェクト）」を選んでから「やること（タスク）」を指定する考え方。（飲食店の注文タブレットなど）
操作の自由度が高く、ユーザーの想定通りの操作が可能な設計のため、状況に合わせやすいよ！
🐶 最近のびきニキ月報
- サービスリポジトリパターンについて、ざっくり教えてもらった
- Goに入門したことで、バックエンドの門だけ叩いた CRUDやらMVCやらについてフワッと知った、バックエンドって難しいね