YAGITA Yugo ygkn

フロントエンドの技術選定で考えること

Frontend Study 用

前提: フロントエンドは式年遷宮が有効である

DB を持たないため、表層の技術を交換するだけで済む
- JSON API が実質的な分解点になっている
- 近年ではモバイルアプリのために JSON API が切り離されていることが多く、ここの利用者になるだけでよい
Rails や PHP で ORM ヘルパーにべったりな場合に困難になる(クライアントで同等のバリデーションを再現する必要)

　オレは高校生シェル芸人 sudo 新一。幼馴染で同級生の more 利蘭と遊園地に遊びに行って、黒ずくめの男の怪しげな rm -rf / 現場を目撃した。端末をみるのに夢中になっていた俺は、背後から近づいてきたもう１人の --no-preserve-root オプションに気づかなかった。俺はその男に毒薬を飲まされ、目が覚めたら・・・ OS のプリインストールから除かれてしまっていた！

『 sudo がまだ $PATH に残っていると奴らにバレたら、また命を狙われ、他のコマンドにも危害が及ぶ』

　上田博士の助言で正体を隠すことにした俺は、 which に名前を聞かれて、とっさに『gnuplot』と名乗り、奴らの情報をつかむために、父親がシェル芸人をやっている蘭の $HOME に転がり込んだ。ところが、このおっちゃん・・・とんだヘボシェル芸人で、見かねた俺はおっちゃんになりかわり、持ち前の権限昇格能力で、次々と難タスクを解決してきた。おかげで、おっちゃんは今や世間に名を知られた名エンジニア、俺はといえばシェル芸 bot のおもちゃに逆戻り。クラスメートの convert や ojichatや textimg にお絵かきコマンドと誤解され少年ワンライナーお絵かき団を結成させられる始末。

　ではここで、博士が作ってくれたメカを紹介しよう。最初は時計型麻酔 kill 。ふたについた照準器にあわせてエンターを押せば、麻酔シグナルが飛び出し、プロセスを瞬時に sleep させることができる。次に、蝶ネクタイ型 banner 。裏についているダイヤルを調整すれば、ありとあらゆる大きさのメッセージを標準出力できる。必殺のアイテムなら fork 力増強シューズ。電気と磁力で足を刺激し、 :(){ :|:& };: でプロセステーブ

この○○が金やちやほやされるために技術ブログを書いていると思っているのかァーッ！！

技術ブログを書いていることをアフェリエイト目的とか、PV目的だとか言われた時に。

なるほど完璧な開発プロセスっスねーーーっ不可能だという点に目をつぶればよぉ〜

一見完璧に聞こえるけど、どう考えたって上手く回らない開発プロセスの説明を受けた時に。

理解不能理解不能・・・あ、理解可能

ようやく理解できた時に。

お前は1つの修正が終わったらキチっとコミットしてから次の修正に入るだろう？　誰だってそーする。俺もそーする。

title	author	created_at	updated_at	license
各種yield方式のパフォーマンス計測	syusui_s	2022-07-25	2022-09-07	CC-BY-SA 3.0

	N = 1_000_000
	s = f"N = {N}\nfor i in range(N):\n"
	with open("FizzBuzz.py", mode='w') as f:
	f.write(s)

	for i in range(1, N):
	if i == 1:
	s = f"\tif i == {i}:\n\t\tprint({i})\n"
	elif i % 15 == 0:
	s = f"\telif i == {i}:\n\t\tprint(\"FizzBuzz\")\n"

	// ↓をURLにコピペする
	javascript:{document.querySelector("video").playbackRate = parseFloat(prompt("倍速(小数)").replace(/[０-９．]/g,(s)=>{return String.fromCharCode(s.charCodeAt(0) - 65248)}));}

	// 見やすくするとこんな感じ
	// 全角で「１．７」と入力しても大丈夫
	document.querySelector("video").playbackRate = parseFloat(
	prompt("倍速(小数)").replace(/[０-９．]/g, (s) => {
	return String.fromCharCode(s.charCodeAt(0) - 65248)
	}));

	// ブックマークレット
	// ↓の一行をブックマークのURLにコピペしてね
	javascript:(function(){const grades=[{name:"A+",credit1:0,credit2:0},{name:"A",credit1:0,credit2:0},{name:"B",credit1:0,credit2:0},{name:"C",credit1:0,credit2:0},{name:"F",credit1:0,credit2:0},];const creditsElms=[...document.querySelectorAll("#content>div.result_list>div.result_list>table>tbody>tr>td:nth-child(5)"),];const gradesElms=[...document.querySelectorAll("#content>div.result_list>div.result_list>table>tbody>tr>td:nth-child(6)"),];for(let i=0;i<gradesElms.length;i++){if(creditsElms[i].textContent==="1"){grades.map((grade)=>{if(gradesElms[i].textContent===grade.name)grade.credit1++;});}if(creditsElms[i].textContent==="2"){grades.map((grade)=>{if(gradesElms[i].textContent===grade.name)grade.credit2++;});}}const outs=grades.map((grade)=>{return`${grade.name} 1単位: ${grade.credit1} 2単位: ${grade.credit2}`;});alert(outs.join("\n"));})();

	// 原文
	(function () {
	const grades = [
	{ name: "A+", credit1: 0, credit2: 0 },
	{ name: "A", credit1: 0, credit2: 0 },

	%#!lualatex
	\documentclass{article}
	\usepackage[papersize={100mm,148mm},margin=0cm,
	noheadfoot]{geometry}
	\usepackage{luatexja-fontspec}
	\usepackage{amsmath,tikz,graphicx,xcolor,xparse,pgfmath}
	\usetikzlibrary{calc,positioning}
	\newcommand{\cLet}{\pgfmathsetmacro}
	\newfontface{\fEthi}{NotoSerifEthiopic-Black.ttf}[FakeSlant=0.1]
	\newfontface{\fAleg}{Alegreya-ExtraBoldItalic.otf}

	const plugin = require("tailwindcss/plugin");

	const autoGrid = plugin(
	function ({ matchComponents, theme }) {
	const values = theme("autoGrid.min");

	matchComponents(
	{
	"auto-grid": (value) => ({
	display: "grid",

	<#
	.DESCRIPTION
	sudo command but for Windowsユーザーお嬢様

	.EXAMPLE
	ojosudo.ps1 "notepad C:\Windows\System32\drivers\etc\hosts"
	#>
	param
	(
	[Parameter(Mandatory=$true, ValueFromPipeline=$true, ValueFromPipelineByPropertyName=$false)]