1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

bashで取得した複数のファイル名をJavaScriptの配列に書き出す簡単な方法

Last updated at Posted at 2020-05-24

目的

  • JavaScriptに複数のファイル名を渡したいです。
  • bashでサクッと作りたい

環境

  • MacOS/bash5.0
  • centOS7/bash4.24

方法

  1. bashで複数ファイル(例えばpng)をfindで取得し整形する。
  2. hoge.jsというテンプレートの変数宣言の場所に1.の結果を入れる
  3. JavaScriptの配列定義はfoo = ["a.png", "b.png"]というフォーマットに合わせます。

コード


# 結果が何もない場合に備えて空文字を入れておく。
$ lst_png="" ; touch a.png b.png C.png;

# ファイル名で検索する。念のためソートしておく。改行を,に変えて文字列にする。
$ lst_png=$( find . -name "*.png" -printf "\"%f\"\n" | sort | sed -z 's|\n|,|g' ); echo ${lst_png}
"C.png","a.png","b.png",

# JavaScript用に最後の1文字を消して、テンプレートに置換する
$ sed -e "s|%1|${lst_png/%?/}|" hoge.js > tmp.js
  • 説明です。
  • bashのfindで -printfで出力フォーマットを整えています。"%f"はファイル名単体を取得します。その前後に"を加えるためにエスケープシーケンスを加えて\"としています。
  • =$()はコマンド実行して標準出力文字列を変数定義するいつもの方法ですね。
  • findはソート機能がないので必要に応じてsortでソートします。その他も改行単位でゴニョゴニョできます。ソートが必要ないならこの時点で文字列にしてもいいでしょう。-printf "\"%f\","となるのではないかと思います。
  • sed/を使わず|を使っているのは、コード再利用で万が一変数にディレクトリの文字列/が混じったときに誤動作しないようにです。
# 最終文字を取る書き方
$ echo ${lst_png/%?/}
"C.png","a.png","b.png"
  • テンプレート(hoge.js)にある%1を3つ目のsedlst_pngを置換しています。ここで一番最後にあるデリミタ文字,を消したいのでbashの機能を使います。それが/%?/です。知っていれば簡単ですね。最後から検索して1文字を示す?で削除しています。

確認です

$ cat hoge.js
...
const lst_png = [ %1 ];
...

$ cat tmp.js
...
const let_png = [ "C.png","a.png","b.png" ];
...
  • どなたかのお役に立てれば嬉しいです(コメント歓迎)。

リファレンス

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?