【Shellscript】データオブジェクトまじで自動で吐いてくれんだけどwwww【Next.js】
はじめに
どうもこんにちは、てるし〜だよ😎
今回で2回目のzennの投稿wwwwww
現在、仕事でiosアプリのwebview部分の開発をNext.jsで行ってたんですよね〜〜〜。
トップを開発専用の画面としてプルダウンにてページを選択し「遷移する」ボタンを押すと各ページに遷移をする仕組みにしてまして〜。
data.tsというファイルが存在し、そこにパスとページIDを格納してたんす。
ふと、開発中に私は思った。
「ページを作ってオブジェクトに手動で追加していくの、めんどくさいんですけどwwwww😟特に一気にページを作った時がwwwwww😇」
ということで遊びで作ってみたwww
今回はShellscriptによる自動生成に関する記事だよんw
あまり汎用性があるものではないし、「何を言っているのかわからないwwww」、「それ、日本語じゃないぞwwww」、「そもそもそこが間違ってるぞwwww」などとツッコミどころが出てくるかもしれないですが、「興味があるぞ！」という人はゆっくりしていっててな😜
完成品
上の画像を覚えておいてねw
では、shellscriptを実行(ぽちっとなw)
onakasuita@yakinikutabetaiMacBook-Pro varify-app-2 % ./test.sh
> varify-app-2@0.1.0 formatter /Users/terashieishion/Desktop/project2/varify-app-2
> prettier --write './src/data/path.ts'
src/data/path.ts 98ms
なんか、data/path.tsというファイルが出来上がってんだけどwwwwww
心配で中身を見てみると、、、
export type pathType = { path: string; pageName: string };
export const data: pathType[] = [
{ path: "/page2", pageName: "Go to page2" },
{ path: "/page4", pageName: "Go to page4" },
{ path: "/page5", pageName: "Go to page5" },
{ path: "/page6", pageName: "Go to page6" },
{ path: "/page2/page3", pageName: "Go to page3" },
];
ちゃんとデータが入ってるじゃん！！！
さらに、心配だからappの配下を確認してみると
ちゃんと全部のページがオブジェクトに格納されてんじゃん！！！
ちなみにXにも投稿したぞwwww
みんな見てねwwww
Next.jsのapp routerについて
app routerで開発をしたことならお分かりかとは思いますがぁー、
appディレクトリの下にフォルダを作成しその下にpage.tsxを作成して描画内容をコーディングすることでパスが出来上がってしまうと、ちょーうけるw
shellscriptとは
うまく説明できないので引用しちゃいます🤪
シェルスクリプト（shell script）とは、OS（オペレーティングシステム）を操作するためのシェル上で実行できる簡易なプログラミング言語（スクリプト言語）。また、そのような言語によって書かれた、複数のOSコマンドや制御文などを組み合わせた簡易なプログラム。一般的にはLinuxなどUNIX系OSのシェルで実行できるものを指す。
自分の言葉で解釈するとshellコマンドを1ファイルにたくさん集めたものと言えば良いでしょうかね🤪
事前準備
最後にprettierを用いてコード整形を行いたいので以下のコマンドを実行しておくぅ〜。
$ pnpm add prettier
そしてpackage.jsonに以下を追記ィ〜〜〜。
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
+ "formatter": "prettier --write './src/data/path.ts'"
},
これで準備OK！！
実際のソースコード
じゃあソースコードを見に行こうぜ！！
values=(
"./src/app/**/page.tsx"
"./src/app/**/**/page.tsx"
)
code="export type pathType={path:string,pageName:string}\n\n export const
data:pathType[]=["
for value in ${values[@]};do
path=`dirname $value | sed -e 's/.\/src\/app\//\//g'`
name=`dirname $value | sed -e 's/.\/src\/app\///g' | sed -e 's/\([a-zA-Z0-9]\)*\///g'`
text="Go to $name"
code+="{path:'$path',pageName:'$text'},"
done
code+="]"
mkdir ./src/data
touch ./src/data/path.ts
echo $code | sed -e 's/,]/]/g' > ./src/data/path.ts
pnpm formatter
順を追ってみていくとしますか〜。
定数を定義ィ〜
values=(
"./src/app/**/page.tsx"
"./src/app/**/**/page.tsx"
)
code="export type pathType={path:string,pageName:string}\n\n export const
data:pathType[]=["
ます、shellscriptでは()は配列らしい。
valueにはpage.tsxまでのパスを格納。 **を用いて任意の文字列が入るようにすると。
codeには型定義の部分とexportから配列のスタート[までを記載した文字列が格納したど。
オブジェクトの骨組みを作るゥ〜
for value in ${values[@]};do
path=`dirname $value | sed -e 's/.\/src\/app\//\//g'`
name=`dirname $value | sed -e 's/.\/src\/app\///g' | sed -e 's/\([a-zA-Z0-9]\)*\///g'`
text="Go to $name"
code+="{path:'$path',pageName:'$text'},"
done
code+="]"
先ほど定義ィ〜した配列をforを用いてをぶん回していくぅ〜。
dirnameはそのファイルがあるフォルダまでのパスを出力してくれるものらしいwwww
sedは
入力されたテキストデータを1行ずつ読み込んで指定した処理を適用して出力を行います。主に文字列の置換や抽出に用いられます。
説明するのがあれで引用しちまったwwww
ルーティングパスの作成ィ〜
path=`dirname $value | sed -e 's/.\/src\/app\//\//g'`
これでルーティングパスが作成できちゃうというねwww
"Go to [ページ名]"を作成ィ
page.tsxがあるフォルダを[ページ名]とするとw
手順は
-
page.tsxのあるフォルダパスを取得 -
./src/appを削除 -
[任意の文字列]/を削除 -
"Go to"とがっちゃんこw
sed1発は難しかったので2発使ったんご。
name=`dirname $value | sed -e 's/.\/src\/app\///g' | sed -e 's/\([a-zA-Z0-9]\)*\///g'`
text="Go to $name"
このコードでできちゃうんだねw
オブジェクトを完成ィ〜
変数codeには元々"export type pathType={path:string,pageName:string}\n\n export const data:pathType[]=["が記載されてるよね！
さっき作った骨組みをここでがっちゃんこさせていくのだ！
code+="{path:'$path',pageName:'$text'},"
そしてforでぶん回し終わったら"]"を追記ィ〜w
code+="]"
仕上げるぅ〜
mkdir ./src/data
touch ./src/data/path.ts
echo $code | sed -e 's/,]/]/g' > ./src/data/path.ts
pnpm formatter
ラストスパートとして
-
mkdirでディレクトリを作成 -
touchでファイルを作成 -
sedで",]"を"]"に変換 -
./src/data/path.tsに保存 - 最後にコードを整形
mkdir ./src/data
touch ./src/data/path.ts
echo $code | sed -e 's/,]/]/g' > ./src/data/path.ts
pnpm formatter
ソースコードの説明は以上だぜぇ〜
せっかくなので、、、
せっかくなら活用しなきゃダメじゃない😚
import { data } from "@/data/path";
import { Button, Heading, UIProvider } from "@yamada-ui/react";
import Link from "next/link";
export default function Home() {
return (
<UIProvider>
<main
style={{
width: "75%",
margin: "auto",
}}
>
<Heading textAlign={"center"}>Next.js検証アプリ</Heading>
<section
style={{
width: "30%",
margin: "auto",
textAlign: "center",
}}
>
<div>
{data.map((item, index) => (
<div
key={index}
style={{
marginTop: 10,
}}
>
<Link href={item.path}>
<Button>{item.pageName}</Button>
</Link>
</div>
))}
</div>
</section>
</main>
</UIProvider>
);
}
import { data } from "@/data/path";
が生成したオブジェクトをimportして、
{data.map((item, index) => (
<div
key={index}
style={{
marginTop: 10,
}}
>
<Link href={item.path}>
<Button>{item.pageName}</Button>
</Link>
</div>
))}
そのオブジェクトを利用してルーティングボタンを作成w
完成したページを見てみようぜ！
できてんじゃんけ〜w
じゃあGo to Page4をぽちっとなw
遷移したぁ〜〜〜〜〜😁
余談
トップのページだけYamada UIを使ってたww
実は自身もYamada UIの開発貢献したことあるんだよね〜😎(耳くそくらいだけど)
多くのコンポーネントやアニメーションなどが実装されているぜ😍
さらに嬉しいことに日本語も対応🥰
ぜひ、使ってみると良いぜよ！！
最後に
最後くらいは真面目にいきます(というか自由すぎるしふざけすぎwww)。
今回は作ってみたものを紹介する記事でした。
Shellscriptって面白いですね🥰
頭の体操になるし、楽しいし、業務効率化にもなるし😎
もっと深掘りをしたくなりました！
みなさんもShellscriptで遊んでみてはいかが？
ということで
最後まで見ていただきありがとうございます🙇🏻♂️
Discussion