<h2 id="javascriptオブジェクトとjson">JavaScriptオブジェクトとJSON<a aria-hidden="true" tabindex="-1" href="#javascriptオブジェクトとjson"></a></h2>
JavaScriptオブジェクトは、プロパティ名と値のペアを保持するコンテナです。一方、JSONはデータの構造をテキスト形式で表現するための軽量データ交換形式です。この2つの間でデータを変換することが、Webアプリケーションの中心的な処理となります。
<h2 id="jsonstringify">JSON.stringify()<a aria-hidden="true" tabindex="-1" href="#jsonstringify"></a></h2>
JavaScriptの<code>JSON.stringify()</code>関数は、JavaScriptオブジェクトをJSON形式の文字列に変換します。
この関数は主に、データをサーバーに送信する前にJavaScriptのオブジェクトを文字列に変換するために使用されます。
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">let data = {
 name: "John",
 age: 30,
 city: "New York"
};

let jsonData = JSON.stringify(data);

console.log(jsonData); // '{"name":"John","age":30,"city":"New York"}'
</code></pre></div>
この例では、JavaScriptオブジェクト<code>data</code>がJSON形式の文字列<code>jsonData</code>に変換され、その結果がコンソールに出力されます。
<h2 id="jsonparse">JSON.parse()<a aria-hidden="true" tabindex="-1" href="#jsonparse"></a></h2>
反対に、サーバーから受け取ったJSON形式の文字列データをJavaScriptのオブジェクトに変換するには<code>JSON.parse()</code>関数を使用します。以下にその例を示します：
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">let jsonData = '{"name":"John","age":30,"city":"New York"}';

let data = JSON.parse(jsonData);

console.log(data); // { name: 'John', age: 30, city: 'New York' }
</code></pre></div>
この例では、JSON形式の文字列<code>jsonData</code>がJavaScriptオブジェクト<code>data</code>に変換され、その結果がコンソールに出力されます。
<h2 id="httpレスポンスとjson">HTTPレスポンスとJSON<a aria-hidden="true" tabindex="-1" href="#httpレスポンスとjson"></a></h2>
Next.jsのAPI routes（あるいは他のNode.jsベースのフレームワーク）を使用してHTTPレスポンスを作成する際、以下のようなコードを書くことがよくあります：
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">res.status(200).json(data);
</code></pre></div>
ここで<code>res</code>はHTTPレスポンスオブジェクトで、<code>.json()</code>メソッドはレスポンスのボディをJSON形式で送信します。
そのため、上記のコードはステータスコード200（成功）を持つレスポンスを生成し、そのボディにJavaScriptオブジェクト<code>data</code>をJSON形式で
含めています。
<h2 id="クライアント側でのレスポンスの処理">クライアント側でのレスポンスの処理<a aria-hidden="true" tabindex="-1" href="#クライアント側でのレスポンスの処理"></a></h2>
クライアント側でレスポンスを受け取った後の定番の処理は、以下のように<code>fetch()</code>関数と<code>.json()</code>メソッドを使用することです：
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">const response = await fetch('/api/product');
const data = await response.json();
</code></pre></div>
このコードは、指定したURLから非同期にデータを取得し、その結果をJavaScriptのオブジェクトとして<code>data</code>に格納します。
ここでも、<code>.json()</code>メソッドが使われており、これはレスポンスボディをJSON形式として解析し、結果をJavaScriptのオブジェクトとして返します。
<h2 id="レスポンスデータのデバッグ">レスポンスデータのデバッグ<a aria-hidden="true" tabindex="-1" href="#レスポンスデータのデバッグ"></a></h2>
複雑なオブジェクト構造を持つレスポンスデータをデバッグする際には、<code>console.log()</code>だけでなく、<code>console.dir()</code>や<code>JSON.stringify()</code>を使うこともあります。
<code>console.log()</code>を使うと、一部のブラウザではネストされたオブジェクトの一部しか表示されないことがあります。そのような場合、<code>console.dir()</code>を使うと、ネストされたオブジェクトもすべて展開して表示することができます：
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">console.dir(data, { depth: null });
</code></pre></div>
また、<code>JSON.stringify()</code>を使うと、オブジェクトを整形して表示することもできます。以下のコードでは、<code>JSON.stringify()</code>の第2引数と第3引数を使って、オブジェクトを整形し、インデントを設定しています：
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">console.log(JSON.stringify(data, null, 2));
</code></pre></div>
このコードは、<code>data</code>オブジェクトを整形して（第2引数の<code>null</code>はフィルタリングを行わないことを示し、第3引数の<code>2</code>はインデントのスペース数を指定します）、その結果をコンソールに出力します。
以上、JavaScriptオブジェクトとJSONの変換についてのガイドでした。このガイドがJavaScriptとAPIの組み合わせでの開発をスムーズに進める助けとなることを願っています。
<hr>
<h2 id="要約">要約<a aria-hidden="true" tabindex="-1" href="#要約"></a></h2>
本ガイドでは、JavaScriptとAPIを組み合わせた開発におけるJavaScriptオブジェクトとJSONの変換技術を解説します。また、ネストされたオブジェクト構造を持つレスポンスデータのデバッグについて、<code>console.log()</code>、<code>console.dir()</code>、そして<code>JSON.stringify()</code>を用いた詳細な説明も提供します。これらの知識を通じて、開発者は効率的にデータを操作し、問題を特定できるようになります。

JavaScriptオブジェクトとJSONの変換、APIとデバッグについてのガイド

<h2 id="アーカイブとは">アーカイブとは<a aria-hidden="true" tabindex="-1" href="#アーカイブとは"></a></h2>
複数のファイルやディレクトリがまとめられたものをアーカイブと呼びます。 
また動詞としても使え、まとめることをアーカイブすると言います。
<h2 id="圧縮とは">圧縮とは<a aria-hidden="true" tabindex="-1" href="#圧縮とは"></a></h2>
説明する必要はないですが、ファイルサイズを小さくすることです。 
人に転送したい時、保存したいときはファイルサイズが小さい方が良いです。
<h2 id="アーカイブと圧縮">アーカイブと圧縮<a aria-hidden="true" tabindex="-1" href="#アーカイブと圧縮"></a></h2>
まとめられたファイルは一般的に冗長性があるので、圧縮します。
Windows や Mac OS では一般的に <code>zip</code> を使います。
zip は聞いたことぐらいはあると思います。
zip ファイルは<code>アーカイブと圧縮を同時に行う</code>ことができます。
Linux では <code>tar</code> でアーカイブして <code>gzip</code>で圧縮します。
<h2 id="tarコマンド">tarコマンド<a aria-hidden="true" tabindex="-1" href="#tarコマンド"></a></h2>
tarコマンドは、複数のファイルやディレクトリを1つのアーカイブファイルにまとめるためのコマンドです。
<h3 id="アーカイブ作成">アーカイブ作成<a aria-hidden="true" tabindex="-1" href="#アーカイブ作成"></a></h3>
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">tar -cvf [アーカイブ名.tar] [アーカイブしたいファイルまたはディレクトリ]
</code></pre></div>
例：
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">tar -cvf archive.tar file1 directory1
</code></pre></div>
オプション:
<ul>
<li><code>-c</code>: アーカイブ作成(create)</li>
<li><code>-v</code>: 進行状況表示（verboseモード）</li>
<li><code>-f</code>: アーカイブファイル名指定(file)</li>
</ul>
<h3 id="アーカイブ内容の表示">アーカイブ内容の表示<a aria-hidden="true" tabindex="-1" href="#アーカイブ内容の表示"></a></h3>
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">tar -tvf [アーカイブ名.tar]
</code></pre></div>
例：
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">tar -tvf archive.tar
</code></pre></div>
オプション:
<ul>
<li><code>-t</code>: アーカイブの内容表示</li>
<li><code>-v</code>: 進行状況表示（verboseモード）</li>
<li><code>-f</code>: アーカイブファイル名指定(file)</li>
</ul>
<h3 id="アーカイブの展開">アーカイブの展開<a aria-hidden="true" tabindex="-1" href="#アーカイブの展開"></a></h3>
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">tar -xvf [アーカイブ名.tar]
</code></pre></div>
例：
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">tar -xvf archive.tar
</code></pre></div>
オプション:
<ul>
<li><code>-x</code>: アーカイブ展開(extract)</li>
<li><code>-v</code>: 進行状況表示（verboseモード）</li>
<li><code>-f</code>: アーカイブファイル名指定(file)</li>
</ul>
<h2 id="gzipコマンド">gzipコマンド<a aria-hidden="true" tabindex="-1" href="#gzipコマンド"></a></h2>
gzipコマンドは、ファイルを圧縮・解凍するためのコマンドです。gzipは「GNU zip」の略で、GNUプロジェクトによって開発されました。
<h3 id="ファイルの圧縮">ファイルの圧縮<a aria-hidden="true" tabindex="-1" href="#ファイルの圧縮"></a></h3>
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">gzip [圧縮したいファイル]
</code></pre></div>
例：
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">gzip file1
</code></pre></div>
<h3 id="圧縮したファイルの展開">圧縮したファイルの展開<a aria-hidden="true" tabindex="-1" href="#圧縮したファイルの展開"></a></h3>
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">gunzip [圧縮ファイル名.gz]
</code></pre></div>
例：
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">gunzip file1.gz
</code></pre></div>
<h2 id="tarコマンドによる圧縮展開">tarコマンドによる圧縮・展開<a aria-hidden="true" tabindex="-1" href="#tarコマンドによる圧縮展開"></a></h2>
tarコマンドは、圧縮・展開の機能も持っています。これにより、アーカイブと圧縮を1つのコマンドで行えます。これは、一連の操作を一度に実行できるため効率的であり、アーカイブ作成と圧縮を別々に行う場合に比べて<code>ディスクの使用率を抑えられる</code> 
というメリットがあります。
<h3 id="tarでの圧縮">tarでの圧縮<a aria-hidden="true" tabindex="-1" href="#tarでの圧縮"></a></h3>
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">tar -zcvf [アーカイブ名.tar.gz] [圧縮したいファイルまたはディレクトリ]
</code></pre></div>
例：
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">tar -zcvf archive.tar.gz file1 directory1
</code></pre></div>
オプション:
<ul>
<li><code>-z</code>: gzipによる圧縮・展開を行う</li>
</ul>
<h3 id="tarでのアーカイブ展開">tarでのアーカイブ展開<a aria-hidden="true" tabindex="-1" href="#tarでのアーカイブ展開"></a></h3>
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">tar -zxvf [アーカイブ名.tar.gz]
</code></pre></div>
例：
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">tar -zxvf archive.tar.gz
</code></pre></div>
<h2 id="bzip2コマンド">bzip2コマンド<a aria-hidden="true" tabindex="-1" href="#bzip2コマンド"></a></h2>
bzip2コマンドは、ファイルを圧縮・解凍するための別のコマンドです。一般的にgzipよりも高い圧縮率を実現できますが、圧縮・解凍の速度は遅い傾向にあります。
<h3 id="ファイルの圧縮-1">ファイルの圧縮<a aria-hidden="true" tabindex="-1" href="#ファイルの圧縮-1"></a></h3>
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">bzip2 [圧縮したいファイル]
</code></pre></div>
例：
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">bzip2 file1
</code></pre></div>
<h3 id="圧縮したファイルの展開-1">圧縮したファイルの展開<a aria-hidden="true" tabindex="-1" href="#圧縮したファイルの展開-1"></a></h3>
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">bunzip2 [圧縮ファイル名.bz2]
</code></pre></div>
例：
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">bunzip2 file1.bz2
</code></pre></div>
<h3 id="tarとbzip2の組み合わせ">tarとbzip2の組み合わせ<a aria-hidden="true" tabindex="-1" href="#tarとbzip2の組み合わせ"></a></h3>
tarコマンドとbzip2コマンドを組み合わせて、アーカイブ作成と同時に圧縮を行うことができます。
<h4 id="アーカイブと圧縮-1">アーカイブと圧縮<a aria-hidden="true" tabindex="-1" href="#アーカイブと圧縮-1"></a></h4>
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">tar -jcvf [アーカイブ名.tar.bz2] [圧縮したいファイルまたはディレクトリ]
</code></pre></div>
例：
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">tar -jcvf archive.tar.bz2 file1 directory1
</code></pre></div>
オプション:
<ul>
<li><code>-j</code>: bzip2による圧縮・展開を行う</li>
</ul>
<h4 id="アーカイブ展開">アーカイブ展開<a aria-hidden="true" tabindex="-1" href="#アーカイブ展開"></a></h4>
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">tar -jxvf [アーカイブ名.tar.bz2]
</code></pre></div>
例：
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">tar -jxvf archive.tar.bz2
</code></pre></div>
<h2 id="zipファイル">zipファイル<a aria-hidden="true" tabindex="-1" href="#zipファイル"></a></h2>
zipファイルは、Windows環境でよく使われる圧縮ファイル形式です。Linuxでもzipファイルを作成・解凍することができますが、それには<code>zip</code>と<code>unzip</code>コマンドが必要です。
もし、これらのコマンドがシステムにインストールされていない場合、以下のコマンドでインストールできます（Ubuntuを例に）：
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">sudo apt update
sudo apt install zip unzip
</code></pre></div>
<h3 id="ファイルの圧縮-2">ファイルの圧縮<a aria-hidden="true" tabindex="-1" href="#ファイルの圧縮-2"></a></h3>
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">zip -r [圧縮ファイル名.zip] [圧縮したいファイルまたはディレクトリ]
</code></pre></div>
例：
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">zip -r archive.zip file1 directory1
</code></pre></div>
オプション:
<ul>
<li><code>-r</code>: ディレクトリを再帰的に圧縮する。ないと指定したディレクトリの中身だけが圧縮されるので常につけることが推奨。</li>
</ul>
<h3 id="圧縮したファイルの展開-2">圧縮したファイルの展開<a aria-hidden="true" tabindex="-1" href="#圧縮したファイルの展開-2"></a></h3>
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">unzip [圧縮ファイル名.zip]
</code></pre></div>
例：
<div class="remark-highlight"><pre class="language-bash"><code class="language-bash">unzip archive.zip
</code></pre></div>

Linuxのアーカイブと圧縮について

POSTリクエストの処理後はGETリクエストにリダイレクトさせましょうというお話です。
フロントに Vue.js や React を導入しておらず、バックエンドのみで HTML を返しているアプリケーションがあるとします。
そのようなアプリケーションでPOSTリクエストの処理後にそのままHTMLを返す実装をしたら、POSTリクエスト成功後にブラウザのリロードボタンを押すと、POSTリクエストを再度送信してしまうという問題が発生しました。
私がこの仕事を始めた時にはすでにフロントとバックエンドは別のフレームワークで構築するような時代だったので、非同期処理をしてページ更新をしない、1リクエストに対して1レスポンスを返すというアプリケーションのページ更新は意外と慣れていなかったのでその忘備録です。
ちなみにフレームワークは Django です。ECサイトのカートページを想定します。
<div class="remark-highlight"><pre class="language-python"><code class="language-python">class CartTemplateView(TemplateView):
 def get(self, request, *args, **kwargs):
 # カートの中身を取得
 self.get_cart()

 context = self.get_context_data(**kwargs)

 # HTML を返す
 return self.render_to_response(context=context)

 def post(self, *args, **kwargs):
 # カートの中身を更新
 self.update_cart()

 context = self.get_context_data(**kwargs)

 # HTML を返す
 return self.render_to_response(context=context)
</code></pre></div>
このような実装をしていたのですが、これは良くない例です。
POSTリクエストをうけて HTML レスポンスを受け取るとカートの内容が更新されています。成功のように見えます。
しかし、ブラウザでリロードしてみます。GET リクエストがされてカート内容の取得が行われるでしょうか?
行われません。直近で POST リクエストをしたので、リロードすると POST リクエストが再度送信されてカートの更新が行われてしまいます。
したいことは、カートを更新した後に読み込み直すとカートの内容を取得することです。
つまり、<code>def post</code>では
<div class="remark-highlight"><pre class="language-python"><code class="language-python">def post(self, *args, **kwargs):
 # カートの中身を更新
 self.update_cart()

 context = self.get_context_data(**kwargs)

 # HTML を返すのではなく GET リクエストにリダイレクトさせる
 return redirect("cart:index")
</code></pre></div>
このようにすべきです。
そうするとPOSTリクエストで更新処理をして、そのままGETリクエストでカートの内容を取得してそれをユーザーに表示することができます。
ユーザーは更新されたカート情報をGETリクエストで取得しているので、リロードしてもPOSTリクエストが再度送信されることはありません。
POST リクエストした後に違うページに遷移させる処理なら、そのまま redirect させるのは違和感がないのですが、同じページのHTMLを返すのにリダイレクトさせるのは違和感があったからのような気がします。
特に既存のプロジェクトに入っていったので、そのあたりを意識しないでも周りのコードを見ながら実装を進められたのかもしれません。
<h2 id="まとめ">まとめ<a aria-hidden="true" tabindex="-1" href="#まとめ"></a></h2>
GETリクエストに対してはHTMLを返す。
<div class="remark-highlight"><pre class="language-python"><code class="language-python">return self.render_to_response(context=context)
</code></pre></div>
POSTリクエストに対してはGETリクエストにリダイレクトさせる。
<div class="remark-highlight"><pre class="language-python"><code class="language-python">return redirect("cart:index")
</code></pre></div>

POSTリクエストの処理後はGETリクエストにリダイレクトさせる

<h2 id="linkタグのrel属性">linkタグのrel属性<a aria-hidden="true" tabindex="-1" href="#linkタグのrel属性"></a></h2>
<ol>
<li>
<code>prefetch</code>：
<ul>
<li>使用状況：将来のページ遷移で必要になると予想されるリソースをブラウザに先行して取得させたい場合に使用します。これは通常、アイドリング中のネットワーク時間を活用して、後のナビゲーションのパフォーマンスを向上させるために使用します。</li>
<li>例：ユーザーが次に進むことが高確率で予想されるページのリソースを先取りします。</li>
<li>使用法：
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;link rel="prefetch" href="next-page.js">
</code></pre></div>
</li>
</ul>
</li>
<li>
<code>preload</code>：
<ul>
<li>使用状況：現在のページのレンダリングに必要なリソースを早急に取得したい場合に使用します。これにより、ブラウザがこれらのリソースをダウンロードと解析を待たずに、すぐに取り組むことができます。</li>
<li>例：フォントや重要なスクリプト、CSSなど。</li>
<li>使用法：
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;link rel="preload" href="styles.css" as="style">
&#x3C;link rel="preload" href="script.js" as="script">
</code></pre></div>
</li>
</ul>
</li>
<li>
<code>modulepreload</code>：
<ul>
<li>使用状況：モジュールスクリプトに対して <code>preload</code> のような動作をしたい場合に使用します。<code>modulepreload</code> は、モジュールの依存関係も先行して取得し解析します。</li>
<li>例：JavaScriptモジュールスクリプトとその依存関係</li>
<li>使用法：
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;link rel="modulepreload" href="module.js">
</code></pre></div>
</li>
</ul>
</li>
<li>
<code>preconnect</code>：
<ul>
<li>使用状況：特定のサードパーティとの接続を予め確立しておきたい場合に使用します。これにより、リクエスト発行までのレイテンシを短縮することができます。</li>
<li>例：サードパーティのフォント、APIエンドポイント、外部の画像等。</li>
<li>使用法：
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;link rel="preconnect" href="https://example.com">
</code></pre></div>
</li>
</ul>
</li>
<li>
<code>dns-prefetch</code>：
<ul>
<li>使用状況：リソースを取得するためのDNSルックアップの時間を短縮したい場合に使用します。</li>
<li>例：CDNやサードパーティサイトのURLへのリクエスト</li>
<li>使用法：
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;link rel="dns-prefetch" href="https://example.com">
</code></pre></div>
</li>
</ul>
</li>
</ol>
<h2 id="javascriptではダウンロードをするだけで実行は別途">JavaScriptではダウンロードをするだけで実行は別途<a aria-hidden="true" tabindex="-1" href="#javascriptではダウンロードをするだけで実行は別途"></a></h2>
<code>link</code> タグの <code>rel</code> 属性に <code>preload</code>、<code>prefetch</code>、<code>modulepreload</code> のいずれかを指定した場合、指定されたリソースはダウンロードがされただけでスクリプトは実行されません。
以下のように別途実行させる必要があります。これはダウンロードだけしておき、お好みの時に実行できるということです。
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;head>
 &#x3C;!-- まずJavaScriptをプリロードします -->
 &#x3C;link rel="preload" href="script.js" as="script">
&#x3C;/head>
&#x3C;body>
&#x3C;!-- HTML要素 -->

&#x3C;!-- HTML文書の最後、すなわち&#x3C;body>タグの最後でスクリプトを実行します -->
&#x3C;script src="script.js">&#x3C;/script>
&#x3C;/body>
</code></pre></div>
<h2 id="cssではダウンロードをするが解析は別途">CSSではダウンロードをするが解析は別途<a aria-hidden="true" tabindex="-1" href="#cssではダウンロードをするが解析は別途"></a></h2>
<ul>
<li><code>preload</code>：CSSファイルはダウンロードされますが、ダウンロードされたCSSファイルは自動的に適用されません。その後、同じCSSファイルを指す<code>&#x3C;link rel="stylesheet"></code> 
タグを追加することで、先にダウンロードされたCSSが適用されます。</li>
<li><code>prefetch</code> 
：将来のナビゲーションで必要になる可能性のあるCSSファイルはダウンロードされますが、自動的に適用されません。その後、同じCSSファイルを指す<code>&#x3C;link rel="stylesheet"></code> 
タグを追加することで、先にダウンロードされたCSSが適用されます。</li>
</ul>
したがって、CSSファイルをダウンロードしただけでなく適用したい場合には、その後に<code>&#x3C;link rel="stylesheet"></code>タグを使って適用命令を出す必要があります。
しかし、<code>onload</code>属性を使うことで、CSSファイルのダウンロードが完了したら自動的に適用することができます。
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;head>
 &#x3C;!-- まずCSSをプリロードします -->
 &#x3C;link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">

 &#x3C;!-- その後、通常のリンクタグでCSSを適用します -->
 &#x3C;!-- &#x3C;link rel="stylesheet" href="styles.css"> -->
&#x3C;/head>
</code></pre></div>

linkタグのrel属性でページ読み込みのパフォーマンスを改善する

HTML、CSS、JavaScript を書き始めた頃、「JavaScript は body タグの最下部に書く」のようなことを聞いたことがあるかもしれません。
これは <code>レンダーブロック</code> 対策の一環です。
<h2 id="レンダーブロックとは">レンダーブロックとは<a aria-hidden="true" tabindex="-1" href="#レンダーブロックとは"></a></h2>
ブラウザがHTML文書をサーバーからレスポンスとして受け取ったとき、ブラウザはHTMLをパースしてDOMツリーを構築します。
解析している時に スタイリングの CSS だったり、JavaScript だったりが見つかった場合は、そのファイルを取得して解析、実行をします。
その間、ブラウザはDOMツリーの構築を一時停止します。
この一時停止のことを <code>レンダーブロック</code> と呼びます。
ページの一部または全部の描画がブロックされ、これが結果的にページロード時間の増加やユーザー体験の低下を引き起こします。
<h2 id="レンダーブロックの影響が深刻化する原因">レンダーブロックの影響が深刻化する原因<a aria-hidden="true" tabindex="-1" href="#レンダーブロックの影響が深刻化する原因"></a></h2>
ブラウザがHTMLを解析している間に、大きなCSSファイルやJavaScriptファイルがあると、それらが大きければ大きいほど、レンダーブロックの深刻度が増加します。
<h2 id="レンダーブロックされていると何が表示されるのか">レンダーブロックされていると何が表示されるのか<a aria-hidden="true" tabindex="-1" href="#レンダーブロックされていると何が表示されるのか"></a></h2>
JavaScriptやCSSのダウンロード・解析・実行が完了するまで、それらのスクリプトやスタイルシートに依存する部分の描画が遅延またはブロックされます。
<h3 id="cssのレンダーブロック">CSSのレンダーブロック<a aria-hidden="true" tabindex="-1" href="#cssのレンダーブロック"></a></h3>
CSSはページのレイアウトとスタイルを決定します。つまり、すでに読み込まれている HTML はあるが、そこにあてられるべき CSS 
がまだ読み込まれていなかったら、取得と解析のためにレンダーブロックされている間はブラウザはスタイルやレイアウトが適用されていない文章を表示することがあります。
このようなページを読み込んだ際、スタイルが適用されていない状態が一瞬表示されてしまう現象を<code>FOUC（Flash of unstyled content）</code>といいます。
CSSを head 内に配置すると、ブラウザはスタイリング情報をすべて取得してから、HTMLを解析することになります。なので、<code>FOUC（Flash of unstyled content）</code>を防ぐことができます。
(HTMLの解析の前にスタイリングを読み込んで、スタイリングされていない見た目の表示をさせないというだけで head内で読み込んでいれば、そこでレンダーブロックは起きています。)
<h3 id="javascriptのレンダーブロック">JavaScriptのレンダーブロック<a aria-hidden="true" tabindex="-1" href="#javascriptのレンダーブロック"></a></h3>
JavaScriptは、HTML文書の解析が一時停止され、スクリプトがダウンロードおよび実行されるまで、その後のコンテンツの表示がブロックされることがあります。したがって、JavaScriptファイルがロードされるまで、その下にあるHTMLコンテンツは表示されません。
<h2 id="レンダーブロックの影響を軽減するための指針">レンダーブロックの影響を軽減するための指針<a aria-hidden="true" tabindex="-1" href="#レンダーブロックの影響を軽減するための指針"></a></h2>
上記の説明の通り、レンダーブロックは大きいCSSファイルやJavaScriptファイルの取得と解析・実行によって HTML の解析が停止して、ページの描画の遅延を引き起こします。
つまり、<code>HTML の解析を一時中断させないような実装をすれば良い</code>ことになります。
そのためには、<code>ページの最初の描画に必要な最小限のCSSをインライン化し、JavaScript をページのフッターに移動する</code>ことです。
この JavaScript をフッターに移動させることが冒頭の「JavaScript は body タグの最下部に書く」という部分に繋がってきます。
また埋め込む JavaScript がもし DOM を操作するスクリプトだったら、HTML の解析が終わっていなければ DOM を取得できないので、そういった観点でも下に書く必要があります。
しかし、<code>全ての JavaScript をフッターに移動させれば良いわけではありません</code>。
Google Tag Manager タグの埋め込みスクリプトだったり、メタタグ、CSS、Polyfill などのスクリプトなど、<code>ページのレンダリングの前に必要なものは、head 内に書く必要</code>があります。
<h3 id="余談">余談<a aria-hidden="true" tabindex="-1" href="#余談"></a></h3>
CSSとJavaScriptファイルをHTMLのどこに埋め込むかといった話をしていると、ReactやVue.jsといったモダンなフロントエンドフレームワークを使っている場合は、HTMLに直接書くことがないので関係なさそうです。
しかし、これらのフレームワークを使っていても、最終的にクライアントがブラウザで見るときは HTML になっているので、全く無関係の話ではないです。
<h2 id="レンダーブロックの影響を軽減するための具体的な方法">レンダーブロックの影響を軽減するための具体的な方法<a aria-hidden="true" tabindex="-1" href="#レンダーブロックの影響を軽減するための具体的な方法"></a></h2>
<h3 id="cssのレンダーブロックを軽減する方法">CSSのレンダーブロックを軽減する方法<a aria-hidden="true" tabindex="-1" href="#cssのレンダーブロックを軽減する方法"></a></h3>
CSSは、HTML文書の<code>headタグ内に配置するのが最も一般的</code>です。
これにより、スタイルシートが最初に読み込まれ、ページのレンダリング中に適用されます。
しかし、CSSが大きい場合やネットワーク速度が遅い場合、HTMLの解析が完了する前にCSSの読み込みが終わらない可能性があり、それがレンダリングをブロックする可能性があります。
この場合、以下の3パターンを今回は紹介します。
<ul>
<li>
<code>&#x3C;link rel="preload"></code>を使用する :
<ul>
<li>CSSファイルを予めダウンロードしておくために<link rel="preload">を使用します。これにより、CSSファイルが早期にダウンロードされ、実際に必要になったときにすぐに適用することができます。</li>
<li><code>rel="preload"</code>はダウンロードだけするので、解析用に別途<code>&#x3C;link rel="stylesheet"></code>を使用する必要があります。しかし、<code>onload</code> 
属性を追加してダウンロードして、そのまま適用ができます。</li>
<li>使用方法 :
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;head>
 &#x3C;!-- まずCSSをプリロードします -->
 &#x3C;link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">

 &#x3C;!-- その後、通常のリンクタグでCSSを適用します -->
 &#x3C;!-- &#x3C;link rel="stylesheet" href="styles.css"> -->
&#x3C;/head>
</code></pre></div>
</li>
</ul>
</li>
<li>
ファイルの分割 :
<ul>
<li>大きなCSSファイルはパースと実行に時間がかかり、ページのレンダリングをブロックする可能性があります。 
ファイルを複数の小さなファイルに分割し、必要に応じて読み込むことで、この問題を軽減することができます。</li>
<li>webpackなどのモジュールバンドラーを使用している場合は、CSSをモジュールごとに分割することもできます。</li>
</ul>
</li>
<li>
クリティカルCSSのインライン化 :
<ul>
<li>クリティカルCSSとは、最初のページ表示（ページロード直後の画面）に必要なスタイルのことを指します。 
これをHTML内に直接記述（インライン化）することで、ページロード時にこれらのスタイルがすぐに利用可能になり、ファーストビューのレンダリングが高速化されます。</li>
</ul>
</li>
</ul>
<h3 id="javascriptのレンダーブロックを軽減する方法">JavaScriptのレンダーブロックを軽減する方法<a aria-hidden="true" tabindex="-1" href="#javascriptのレンダーブロックを軽減する方法"></a></h3>
基本的にはレンダリングの前に実行するスクリプトは限られているので、それを除けば、途中でHTML解析を停止させない、またはDOMを操作できるようにするために body 
タグの最下部に書きますが、それ以外にも以下の方法があります。
<ul>
<li>
<code>&#x3C;link rel="preload"></code>を使用する :
<ul>
<li>JavaScriptファイルを予めダウンロードしておくために<code>&#x3C;link rel="preload"></code>を使用します。 これにより、JavaScriptファイルが早期にダウンロードされます。</li>
<li>ダウンロードだけで<code>別途任意のタイミングで実行する必要</code>があります。</li>
<li>任意のタイミングで実行できるのが<code>script タグの async と defer 属性を使った方法との違い</code>です。</li>
<li>使用方法 :
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;head>
 &#x3C;!-- まずJavaScriptをプリロードします -->
 &#x3C;link rel="preload" href="script.js" as="script">
&#x3C;/head>
&#x3C;body>
 &#x3C;!-- HTML要素 -->

 &#x3C;!-- HTML文書の最後、すなわち&#x3C;body>タグの最後でスクリプトを実行します -->
 &#x3C;script src="script.js">&#x3C;/script>
&#x3C;/body>
</code></pre></div>
</li>
</ul>
</li>
<li>
<code>async</code>および<code>defer</code>属性を使用する :
<ul>
<li><code>async属性</code> 
は、JavaScriptのダウンロードとHTMLの解析を並行して行い、スクリプトのダウンロードが完了したらすぐに実行します。ダウンロードされるとすぐに実行されるため、レンダリングをブロックする可能性があります。</li>
<li><code>defer属性</code> 
は、JavaScriptのダウンロードとHTMLの解析を並行して行いe、全てのHTMLの解析が終わった後にスクリプトを実行します。これにより、HTMLの解析がJavaScriptによってブロックされるのを防ぎます。</li>
<li>async属性とdefer属性の<code>両方を同時に書くべきではない</code>です。
<blockquote>
asyncとdeferの両方を使うことはアンチパターンで、defer部分は無視されてasyncが優先されるので避けるべきものです。
</blockquote>
引用元: <a href="https://almanac.httparchive.org/ja/2022/javascript#javascript%E3%81%AF%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%81%95%E3%82%8C%E3%82%8B%E3%81%AE%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F" title="almanac">almanac</a></li>
<li>使用例 :
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;head>
 &#x3C;!-- async属性を使用する -->
 &#x3C;script async src="script.js">&#x3C;/script>

 &#x3C;!-- defer属性を使用する -->
 &#x3C;script defer src="script.js">&#x3C;/script>
&#x3C;/head>
</code></pre></div>
</li>
</ul>
</li>
<li>
スクリプトの分割
大きなJavaScriptファイルもパースと実行に時間がかかり、ページのレンダリングを遅延させます。JavaScriptのコードを複数の小さなファイルに分割し、必要に応じて読み込むことで、この問題を軽減することができます。
</li>
<li>
クリティカルJavaScriptのインライン化
クリティカルなJavaScript（ページの初回描画に必要なJavaScript）をHTML内に直接記述（インライン化）することで、スクリプトがすぐに利用可能になります。これにより、特に重要な機能のレンダリングが高速化されます。
</li>
</ul>
<h2 id="まとめ">まとめ<a aria-hidden="true" tabindex="-1" href="#まとめ"></a></h2>
HTML についての学習はweb開発において初心者の頃にする傾向があると思うので、意外と読み込みの手法については知らない場合があると思います。自分はそのパターンだったので今回まとめました。

レンダーブロックと軽減策

<h2 id="バックアップファイルを作成する">バックアップファイルを作成する<a aria-hidden="true" tabindex="-1" href="#バックアップファイルを作成する"></a></h2>
mysqldumpというユーティリティを使うのが一般的です。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># 指定したテーブルのバックアップをbackup.sqlというファイルに保存。
$ mysqldump -u [username] -p [database] [table] > backup.sql

# ユーザー名がrootで、データベース名がmydatabase、テーブル名がmytableの場合
$ mysqldump -u root -p mydatabase mytable > backup.sql
</code></pre></div>
<h2 id="バックアップファイルを復元する">バックアップファイルを復元する<a aria-hidden="true" tabindex="-1" href="#バックアップファイルを復元する"></a></h2>
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># バックアップファイルを指定して復元
$ mysql -u [username] -p [database] &#x3C; backup.sql
</code></pre></div>
この方法では以下に注意する必要があります。
<ul>
<li>大きなデータベースの場合はディスクスペースが十分にあるか。</li>
<li>セキュリティ上の理由から一時ファイルを作成するべきではないか</li>
</ul>
パイプ | を使ってデータを直接転送することで回避できます。
<h2 id="リモートサーバー上のmysqlデータベースから別のリモートサーバーのmysqlデータベースに転送する">リモートサーバー上のMySQLデータベースから別のリモートサーバーのMySQLデータベースに転送する<a aria-hidden="true" tabindex="-1" href="#リモートサーバー上のmysqlデータベースから別のリモートサーバーのmysqlデータベースに転送する"></a></h2>
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">#!/bin/bash

mysqldump \
 --skip-column-statistics \
 --no-tablespaces \
 --set-gtid-purged=OFF \
 --host=ap-northeast-1.rds.amazonaws.com \
 --user=me \
 --password=$MYSQL_DB_PASSWORD \
 proddb $1 \
 | mysql --host=ap-northeast-1.rds.amazonaws.com \
 --user=me \
 --password=$MYSQL_DB_PASSWORD \
 --database=db
</code></pre></div>
<ul>
<li>
<code>--skip-column-statistics</code>: 列の統計情報のダンプをスキップします。これはMySQL 
8.0以降で必要なオプションで、これがないとmysqldumpがエラーを出す場合があります。
</li>
<li>
<code>--no-tablespaces</code>: テーブルスペース情報のダンプをスキップします。これは、通常、テーブルスペースを使用していない場合や特別な許可なしにテーブルスペースを作成することができない場合に便利です。
</li>
<li>
<code>--set-gtid-purged=OFF</code>: このオプションを使用すると、ダンプファイルからGTIDの設定を削除します。これはレプリケーションなど特定の状況で必要になります。
</li>
<li>
<code>--host=... --user=... --password=...:</code> リモートのMySQLサーバーへの接続情報です。パスワードは環境変数から取得しています。
</li>
<li>
ダンプされたデータはパイプ|を通じて直接mysqlコマンドに渡され、別のデータベースにインポートされます。こちらもホスト、ユーザー、パスワードなどの接続情報が必要です。
</li>
</ul>
<h3 id="踏み台サーバーを経由してリモートサーバーに接続する">踏み台サーバーを経由してリモートサーバーに接続する<a aria-hidden="true" tabindex="-1" href="#踏み台サーバーを経由してリモートサーバーに接続する"></a></h3>
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">#!/bin/bash

ssh user@bastion.example.com "mysqldump \
 --skip-column-statistics \
 --no-tablespaces \
 --set-gtid-purged=OFF \
 --host=ap-northeast-1.rds.amazonaws.com \
 --user=me \
 --password=$MYSQL_DB_PASSWORD \
 proddb $1 \
 | mysql --host=ap-northeast-1.rds.amazonaws.com \
 --user=me \
 --password=$MYSQL_DB_PASSWORD \
 --database=db"
</code></pre></div>

MySQL のバックアップ方法

Shell Script を扱う上で知っておきたい基本事項のまとめです。
if 文や for 文などの制御構文は、他の言語をやっていればどのようなものかわかりますし、ネットにはすでに素晴らしい情報がありますので本記事では扱いません。
<h2 id="変数の定義">変数の定義<a aria-hidden="true" tabindex="-1" href="#変数の定義"></a></h2>
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">#!/bin/bash

# 変数の定義
# 変数名=値
food=pasta

# 変数の参照
# $変数名
echo $food
</code></pre></div>
<ul>
<li>変数名は英数字とアンダースコアのみ使用可能</li>
<li>変数名の先頭は数字は不可</li>
<li>コマンドの引数として認識されるので<code>スペースは使用不可</code> (NG: <code>var = 1</code>, <code>var= 1</code>, <code>var =1</code>)</li>
</ul>
<h2 id="変数の値にスペースを使う">変数の値にスペースを使う<a aria-hidden="true" tabindex="-1" href="#変数の値にスペースを使う"></a></h2>
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">#!/bin/bash
# スペースを含む文字列はシングルクォートまたはダブルクォートで囲む
# 変数名="文字列"
# 変数名='文字列'
address='Tokyo, Japan'
address="Tokyo, Japan"

</code></pre></div>
<h2 id="シングルクォートとダブルクォートの違い">シングルクォートとダブルクォートの違い<a aria-hidden="true" tabindex="-1" href="#シングルクォートとダブルクォートの違い"></a></h2>
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># シングルクォートで囲んだ場合は変数の参照はできない
food='pasta'
single_quote='I ate $food'
echo $single_quote
# => I ate $food

# ダブルクォートで囲んだ場合は変数の参照ができる
food='pasta'
double_quote="I ate $food"
echo $double_quote
# => I ate pasta
</code></pre></div>
<h2 id="変数と文字列の結合">変数と文字列の結合<a aria-hidden="true" tabindex="-1" href="#変数と文字列の結合"></a></h2>
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">#!/bin/bash

# 変数と文字列を連結
# ${変数名}文字列
food=pasta
echo today_${food}
# => today_pasta
</code></pre></div>
<h2 id="コマンドの結果を扱うコマンド置換">コマンドの結果を扱う(コマンド置換)<a aria-hidden="true" tabindex="-1" href="#コマンドの結果を扱うコマンド置換"></a></h2>
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">#!/bin/bash

# コマンドの結果
# $(コマンド)
$(date)
echo today_$(date)
# => today_2021年 6月 9日 水曜日 23時59分48秒 JST
</code></pre></div>
<h2 id="コマンドラインの引数は-1-2-3--で参照できる">コマンドラインの引数は $1, $2, $3, ... で参照できる<a aria-hidden="true" tabindex="-1" href="#コマンドラインの引数は-1-2-3--で参照できる"></a></h2>
<code>コマンドラインの引数</code>は位置パラメーターとして <code>$1</code>, <code>$2</code>, <code>$3</code>, ... という変数に格納されます。
<code>$0</code> は<code>実行したコマンド名</code>が格納されます。
これは位置パラメーターではないので、スクリプト内に関数を作ってその中で <code>$0</code> を参照しても、実行したコマンド名が表示されます。
<ul>
<li>$0 実行したコマンド名</li>
<li>$1 第1引数</li>
<li>$2 第2引数</li>
<li>$3 第3引数</li>
<li>... 続く</li>
</ul>
script.sh を用意する。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">#!/bin/bash

echo $0
echo $1
echo $2
echo $3
echo $4 # あえて渡さないとする
</code></pre></div>
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># 実行
$ ./script.sh arg1 arg2 arg3

# script.sh
# arg1
# arg2
# arg3
# (arg4 は渡されていないので何も表示されない)
</code></pre></div>
<h2 id="コマンドラインの引数の数を取得する">コマンドラインの引数の数を取得する<a aria-hidden="true" tabindex="-1" href="#コマンドラインの引数の数を取得する"></a></h2>
<code>$#</code> で取得できます。
script.sh を用意します。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">#!/bin/bash

echo $#
</code></pre></div>
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># 実行
$ ./script.sh arg1 arg2 arg3

# 3
</code></pre></div>
<h2 id="引数全体を取得する">引数全体を取得する<a aria-hidden="true" tabindex="-1" href="#引数全体を取得する"></a></h2>
<code>$@</code> または <code>$*</code> で取得できます。
<code>$@</code> と <code>$*</code> は出力を見てみると同じです。
しかし、
<ul>
<li><code>$@</code> は引数を分割して取得していて、<code>"$1" "$2" "$3"</code> というように文字列を取得します。</li>
<li><code>$*</code> は引数を分割せずに取得していて、<code>"$1 $2 $3"</code> というように文字列を取得します。</li>
</ul>
そのため for 文で回わせたり使い勝手の良い <code>$@ を使うことが多い</code>です。
<h3 id="クオートなしで実行する">クオートなしで実行する<a aria-hidden="true" tabindex="-1" href="#クオートなしで実行する"></a></h3>
no_quote.sh を用意します。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">#!/bin/bash

echo $@
echo $*
</code></pre></div>
no_quote.sh を実行します。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># 実行
$ ./no_quote.sh arg1 arg2 arg3

# arg1 arg2 arg3
# arg1 arg2 arg3
</code></pre></div>
コマンドライン引数全体をそれぞれ取得しています。
<hr>
<h3 id="ダブルクォートで実行する">ダブルクォートで実行する<a aria-hidden="true" tabindex="-1" href="#ダブルクォートで実行する"></a></h3>
double_quote.sh を用意します。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">#!/bin/bash

echo "\$@ = $@"
echo "\$* = $*"

</code></pre></div>
上記で触れたようにダブルクオートで囲むと変数の参照ができます。
double_quote.sh を実行します。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># 実行
$ ./double_quote.sh arg1 arg2 arg3

# $@ = arg1 arg2 arg3
# $* = arg1 arg2 arg3
</code></pre></div>
コマンドライン引数全体を取得しています。
<hr>
<h3 id="シングルクォートで実行する">シングルクォートで実行する<a aria-hidden="true" tabindex="-1" href="#シングルクォートで実行する"></a></h3>
single_quote.sh を用意する。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">#!/bin/bash

echo '\$@ = $@'
echo '\$* = $*'
</code></pre></div>
single_quote.sh を実行する。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># 実行
$ ./single_quote.sh arg1 arg2 arg3

# \$@ = $@
# \$* = $*
</code></pre></div>
シングルクオートで囲むと変数の参照ができないので、<code>$@</code> と <code>$*</code> がそのまま表示されています。
<h2 id="-は組み込みコマンド">"[" は組み込みコマンド<a aria-hidden="true" tabindex="-1" href="#-は組み込みコマンド"></a></h2>
制御構文は触れないと冒頭で書いたのでそれ自体には触れません。
制御構文を書くときなどに使う <code>[]</code> の部分、例えば以下の例の <code>[ 条件式 ]</code> の部分の <code>[</code> は組み込みコマンドです。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">#!/bin/bash

# if 文
if [ 条件式 ]; then
 # 条件式が真のときの処理
else
 # 条件式が偽のときの処理
fi
</code></pre></div>
<code>[</code> は組み込みコマンドなので、<code>which</code> と <code>type</code> コマンドでパスを確認することができます。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">$ which [
# => /usr/bin/[

$ type [
# => [ is a shell builtin
</code></pre></div>
このことから条件式の部分は <code>[</code> コマンドの引数です。
なので <code>[</code> と <code>]</code> の間にはスペースが必要です。
このように Shell Script は普通に１プログラミング言語として Python や Ruby と同じように書いている感じがしますが、あくまでターミナルでの CLI としての操作になります。
<h2 id="コマンドの終了ステータス">コマンドの終了ステータス<a aria-hidden="true" tabindex="-1" href="#コマンドの終了ステータス"></a></h2>
コマンドの終了ステータスは <code>$?</code> で取得できます。
if 文も ls コマンドも終了ステータスを返しています。
正常終了した時は<code>0</code>、異常終了した時は<code>0以外</code>の値を返します。
status.sh を用意します。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">#!/bin/bash

ls -l /tmp
echo $?

ls -l /tmp/not_found
echo $?
</code></pre></div>
status.sh を実行します。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># 実行
$ ./status.sh

# => /tmp は存在するので正常終了
# => 0
# => ls: /tmp/not_found: No such file or directory
# => 2
</code></pre></div>
<h2 id="最後に">最後に<a aria-hidden="true" tabindex="-1" href="#最後に"></a></h2>
おそらくこれで Shell Script のコードを見た時に、初見ではわからない基本的な部分はだいぶ解消されるはずです。

Shell Script の基本知識

ある Shell Script で書かれたスクリプトがあります。
これを実行する3パターンがあります。
<ul>
<li>シェルの引数にスクリプトを指定して実行する</li>
<li>source コマンドでスクリプトを読み込んで実行する</li>
<li>スクリプトファイルを任意のディレクトリに入れておき、パスを通して cat や less コマンドのように実行する</li>
</ul>
<h2 id="シェルの引数にスクリプトを指定して実行する">シェルの引数にスクリプトを指定して実行する<a aria-hidden="true" tabindex="-1" href="#シェルの引数にスクリプトを指定して実行する"></a></h2>
シェルをコマンドとして実行するとき、引数にスクリプトを渡すとそのスクリプトを実行できます。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">$ /bin/bash script.sh
</code></pre></div>
<h3 id="shebang-シェバン">shebang (シェバン)<a aria-hidden="true" tabindex="-1" href="#shebang-シェバン"></a></h3>
スクリプトの先頭に <code>shebang</code> と呼ばれる記述を書くと、そのスクリプトを実行するときに指定したシェルで実行されます。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">#!/bin/bash

echo 'Hello World'
</code></pre></div>
このスクリプトは、<code>/bin/bash</code> で実行されます。
これはカーネルがそのスクリプトの先頭を確認して、<code>#!</code> から始まる行を見つけると、その行に書かれているシェルを使ってスクリプトを実行してくれるというものです。
これによって、シェル(上の例の場合は <code>/bin/bash</code>)を指定して実行する必要がなくなります。
<code>shebang</code> を書いておけば <code>/bin/bash</code> の入力が不要なので
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">$ ./script.sh
</code></pre></div>
と実行できます。
スクリプトの前に<code>./</code>が必要です。カレントディレクトリにあるファイルを実行するという意味です。
<code>./</code>がないと、<code>cat</code> や <code>less</code> などのコマンドのように <code>$PATH</code> に書かれているディレクトリの中から実行ファイルを探して実行しようとします。
また普段使っているシェル(fish や zsh など)は人によって違う可能性がありますが、スクリプトの実行環境を統一した上で実行できます。
またこの方式で実行するにはそのスクリプトファイルに<code>実行権限が必要</code>です。
注意点として、サブシェル上で実行しているので、使用中のセッションでの独自の設定は利用できません。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">$ chmod +x script.sh
</code></pre></div>
<h2 id="source-コマンドでスクリプトを読み込んで実行する">source コマンドでスクリプトを読み込んで実行する<a aria-hidden="true" tabindex="-1" href="#source-コマンドでスクリプトを読み込んで実行する"></a></h2>
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># ./ は省略しない
$ source ./script.sh
</code></pre></div>
source コマンドで実行すると、<code>シェルの引数として実行する時と挙動が異なります。</code>
source コマンドで実行すると、そのスクリプトの中身をそのままコマンドラインに入力した時の挙動になります。
つまり、今のセッション( Current Shell )の設定を引き継いだまま実行します。
また、ファイルを実行しているというよりは、中身をそのままコマンドラインに入力して実行しているようなものなので、<code>ファイルに実行権限は不要</code>です。
source コマンドによる実行なので <code>shebang</code> は先頭が <code>#</code> から始まるコメントとして扱われ、shebang に書かれているシェルで実行されません。
<h3 id="ファイルを指定するときは--などのパスを指定する">ファイルを指定するときは ./ などのパスを指定する<a aria-hidden="true" tabindex="-1" href="#ファイルを指定するときは--などのパスを指定する"></a></h3>
bash の source コマンドは、<code>スクリプトのパスを指定しなかった場合</code>、<code>$PATH</code> に書かれているディレクトリの中から実行ファイルを探して実行します。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># カレントディレクトリに script.sh がないとする
# パスを指定しないで実行
$ source script.sh
</code></pre></div>
スクリプトがないので失敗します。しかし、もし、この script.sh という名前の実行ファイルのパスが通っていたら、サーチパスが働き実行されます。
これは実行するつもりのないファイルが実行されてしまう可能性があって危険なので<code>パスを指定して実行するのが安全</code>です。
<h3 id="サーチパスを無効にする">サーチパスを無効にする<a aria-hidden="true" tabindex="-1" href="#サーチパスを無効にする"></a></h3>
またこのサーチパスの挙動は、
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">shopt -u sourcepath
</code></pre></div>
として、シェルに設定することで無効にできます。
<h2 id="スクリプトファイルを任意のディレクトリに入れておきパスを通して-cat-や-less-コマンドのように実行する">スクリプトファイルを任意のディレクトリに入れておき、パスを通して cat や less コマンドのように実行する<a aria-hidden="true" tabindex="-1" href="#スクリプトファイルを任意のディレクトリに入れておきパスを通して-cat-や-less-コマンドのように実行する"></a></h2>
上記で、source コマンドによるサーチパスを使って <code>cat</code> や <code>less</code> などのコマンドのように実行するのは安全ではないと書きましたが、<code>cat</code> や <code>less</code> などのコマンドのように実行できたら、楽です。
この場合は任意のディレクトリを作成して、そこにスクリプトファイルを入れておき、そのディレクトリを <code>$PATH</code> に追加すれば可能です。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># $HOME/bin は例なので、任意のディレクトリを作成してください
$ mkdir -p $HOME/bin
$ mv script.sh $HOME/bin
$ export PATH=$HOME/bin:$PATH
</code></pre></div>
と設定し、
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">$ script.sh
</code></pre></div>
で実行します。
当然ですが、パスが通っていることで、source コマンドでパス指定なしで実行するとサーチパスが有効の場合は、意図しない実行が発生する可能性がでます。

Shell Script の実行方法: 3つのパターン

CLI で作業をするときに、どのように情報が入力されて出力をされるかを知っておくと良いです。
<h2 id="標準入出力とは">標準入出力とは<a aria-hidden="true" tabindex="-1" href="#標準入出力とは"></a></h2>
Linuxでは、
<ul>
<li>プログラムがデータを受け取る方法として「標準入力」(stdin)</li>
<li>データを出力する方法として「標準出力」(stdout)</li>
<li>「標準エラー出力」(stderr)</li>
</ul>
があります。これらは以下のような特性を持っています：
<h3 id="stdin">stdin<a aria-hidden="true" tabindex="-1" href="#stdin"></a></h3>
通常はキーボードからの入力を指します。デフォルトでは、ユーザがキーボードで入力したデータはstdinを通じてプログラムに送られます。
<h3 id="stdout">stdout<a aria-hidden="true" tabindex="-1" href="#stdout"></a></h3>
通常は画面（コンソールやターミナル）に出力されるデータを指します。プログラムが処理結果を出力する際には、通常stdoutが使われ、その内容は画面に表示されます。
<h3 id="stderr">stderr<a aria-hidden="true" tabindex="-1" href="#stderr"></a></h3>
通常は画面に出力されるデータを指しますが、stdoutとは別に<code>エラーメッセージ</code>や診断メッセージ専用の出力ストリームです。エラーメッセージは通常、stdoutとは別の出力ストリームであるstderrに出力されます。
<hr>
この３つのチャネルは内部では数値として扱われます。
<table>
<thead>
<tr>
<th align="center">チャネル</th>
<th align="center">数値</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">stdin</td>
<td align="center">0</td>
</tr>
<tr>
<td align="center">stdout</td>
<td align="center">1</td>
</tr>
<tr>
<td align="center">stderr</td>
<td align="center">2</td>
</tr>
</tbody>
</table>
入力にはキーボード、出力にはディスプレイが使われることが多いのですが、それらは変更することができて、正確には<code>標準入力へ入力し、標準出力に出力する。</code>です。
変更先は入力だったらファイルにしたり、出力をプリンターにすることもできます。
stdout と stderr は同じ出力ですが、別れており、別々に扱うことができ便利です。
<h2 id="リダイレクト">リダイレクト<a aria-hidden="true" tabindex="-1" href="#リダイレクト"></a></h2>
リダイレクトはそのまま、<code>標準入力へ入力し、標準出力に出力する。</code>の入力と出力の対象を変更することです。
<h3 id="stdin-の対象を変更する">stdin の対象を変更する<a aria-hidden="true" tabindex="-1" href="#stdin-の対象を変更する"></a></h3>
<code>&#x3C; 入力元</code> で入力元を指定します。
例として、catコマンドのよくある使い方は、ファイル名を引数として受け取り、その内容を表示することです。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># file.txt の内容を表示する
$ cat file.txt
</code></pre></div>
しかし、本来 cat は標準入力された内容をそのまま標準出力に出力するコマンドです。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># 標準入力された内容をそのまま標準出力に出力する
$ cat
入力待機されて入力したものが表示される

# 入力先を指定して file.txt の内容を表示する
$ cat &#x3C; file.txt
</code></pre></div>
<code>cat &#x3C; file.txt</code> の方が自然なコマンドの使い方です。
<h3 id="stdout-の対象を変更する">stdout の対象を変更する<a aria-hidden="true" tabindex="-1" href="#stdout-の対象を変更する"></a></h3>
<code>> 出力先</code> で出力先を指定します。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># すでに file.txt が存在する場合は上書きされる
$ ls > file.txt
</code></pre></div>
<code>ls</code> の出力結果が <code>file.txt</code> に書き込まれます。
事前に出力先のファイルを作成することは<code>不要</code>です。
また、<code>></code> はファイルの内容を上書きします。<code>追記したい場合</code>は <code>>></code> を使います。
<code>>></code> で<code>新規作成もできる</code>ため、誤って以前の内容を消さないようにこちらの方を使うのが良いでしょう。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># すでに file.txt が存在する場合は追記される
$ ls >> file.txt
</code></pre></div>
<h3 id="stderr-の対象を変更する">stderr の対象を変更する<a aria-hidden="true" tabindex="-1" href="#stderr-の対象を変更する"></a></h3>
<code>2> 出力先</code> で出力先を指定します。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># 存在しないディレクトリを指定するとエラーが出力される
$ ls /nonexistent_directory 2> error.txt
</code></pre></div>
<code>ls</code> のエラー結果が <code>error.txt</code> に書き込まれます。
また <code>2>></code> で追記することもできます。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># error.txt が存在しない場合は新規作成され、存在する場合は追記される
$ ls /nonexistent_directory 2>> error.txt
</code></pre></div>
<h2 id="devnull">/dev/null<a aria-hidden="true" tabindex="-1" href="#devnull"></a></h2>
<code>/dev/null</code> は、特殊なファイルで、書き込まれた内容は破棄されます。
<code>/dev/null</code> に書き込むと、何も出力されないので、出力を捨てたい場合に使います。
また入力先に指定しても、何も入力されないので、入力を捨てたい場合にも使います。
<h2 id="スニペット">スニペット<a aria-hidden="true" tabindex="-1" href="#スニペット"></a></h2>
<h3 id="stdoutとstderrで出力先を別々に指定する方法">stdoutとstderrで出力先を別々に指定する方法<a aria-hidden="true" tabindex="-1" href="#stdoutとstderrで出力先を別々に指定する方法"></a></h3>
stdoutとstderrをそれぞれ別のファイルにリダイレクトする。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">command > stdout.txt 2> stderr.txt
</code></pre></div>
<h3 id="stdoutとstderrを同じファイルに出力する方法">stdoutとstderrを同じファイルに出力する方法<a aria-hidden="true" tabindex="-1" href="#stdoutとstderrを同じファイルに出力する方法"></a></h3>
<code>2>&#x26;1</code>で stdout と stderr を同じファイルにリダイレクトする。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">command > output.txt 2>&#x26;1
</code></pre></div>
<code>2>&#x26;1</code> は 2(エラー出力)を1(標準出力)にリダイレクトするという意味になります。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">$ command &#x26;> output.txt
</code></pre></div>
<code>&#x26;></code> は <code>2>&#x26;1</code> と同じ意味になります。
<h3 id="エラーメッセージだけを表示する">エラーメッセージだけを表示する<a aria-hidden="true" tabindex="-1" href="#エラーメッセージだけを表示する"></a></h3>
エラーメッセージだけ表示するには stdout を捨てて、stderrだけを残せば可能です。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># stdout は捨てられるためエラーメッセージだけが表示される
command > /dev/null
</code></pre></div>
<h3 id="stdout-だけを表示する">stdout だけを表示する<a aria-hidden="true" tabindex="-1" href="#stdout-だけを表示する"></a></h3>
エラーメッセージだけを表示するの逆で、stderr を捨てて、stdoutだけを残せば可能です。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># stderr は捨てられるためエラーメッセージだけが表示される
command 2> /dev/null
</code></pre></div>
<h3 id="何も表示させなくする">何も表示させなくする<a aria-hidden="true" tabindex="-1" href="#何も表示させなくする"></a></h3>
stdout と stderr を捨てます。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># stdout と stderr は捨てられるため何も表示されない
command > /dev/null 2>&#x26;1
</code></pre></div>
<h2 id="tip">TIP<a aria-hidden="true" tabindex="-1" href="#tip"></a></h2>
Linux でコマンドを作るとき、ファイルを指定するよりも、標準入力から受け取るようにすると、そのプログラムの汎用性が高まります。

標準入出力とリダイレクトと/dev/null

<h2 id="jobとは">Jobとは<a aria-hidden="true" tabindex="-1" href="#jobとは"></a></h2>
プロセスとはカーネルからみた処理の単位です。
<code>Jobとはシェルからみた処理の単位</code>です。
自分の操作しているターミナル内で実行しているコマンドの単位は Job です。
プロセスはシステム全体で一意ですが、Jobはシェル内で一意です。
シェルを複数開いてそれぞれに適当なコマンドをうつと、PID は重複しませんが、Job は重複することがあります。
また パイプを使って
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># 1つのjob
$ ls | cat | less
</code></pre></div>
のように打った場合、ls と cat と less はそれぞれ別のプロセスですが、シェル内では同じ Job になります。
<h3 id="job-を確認する">Job を確認する<a aria-hidden="true" tabindex="-1" href="#job-を確認する"></a></h3>
現在の Job の一覧を表示するには、<code>jobs</code> コマンドを使います。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">$ jobs
</code></pre></div>
<h2 id="job-操作の基本コマンド">Job 操作の基本コマンド<a aria-hidden="true" tabindex="-1" href="#job-操作の基本コマンド"></a></h2>
<table>
<thead>
<tr>
<th align="left">コマンド</th>
<th align="left">説明</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">ctrl + z</td>
<td align="left">実行中のジョブを一時停止する</td>
</tr>
<tr>
<td align="left">fg</td>
<td align="left">ジョブを前面に移動する</td>
</tr>
<tr>
<td align="left">bg</td>
<td align="left">ジョブをバックグラウンドで実行する</td>
</tr>
</tbody>
</table>
基本的な流れはある処理を実行させて、それを一時停止させて、それを再開させたり、バックグラウンドで実行させたりすることです。
<h3 id="ctrl--z">ctrl + z<a aria-hidden="true" tabindex="-1" href="#ctrl--z"></a></h3>
<code>ctrl + z</code> は実行中のジョブを一時停止させるコマンドです。
例えば適当にコマンドの説明書を <code>man</code> で見てみます。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell">man ls
</code></pre></div>
そうすると閲覧モードが実行中になります。
この状態で <code>ctrl + z</code> を押すと、<code>man</code> が一時停止します。
終了したように見えますが終了ではなく<code>停止</code>です。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># jobs で確認すると
$ jobs
[1] + suspended man ls
</code></pre></div>
<code>man</code> が停止していることが確認できます。
<h3 id="fg-コマンド">fg コマンド<a aria-hidden="true" tabindex="-1" href="#fg-コマンド"></a></h3>
停止した job を再開させるには <code>fg</code> コマンドを使います。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># %ジョブ番号 で指定する
$ fg %1
</code></pre></div>
たとえば less コマンドで長い文章を読んでいてその途中で停止された場合、読んでいた位置から再開できます。
これを利用すれば、<code>何かを読みながら他の処理をしたいときに、それらの作業の切り替えが効率的</code>にできます。
またジョブ番号は省略できます。その場合はカレントジョブ(+マークがついているジョブ)が対象になります。
<h3 id="bg-コマンド">bg コマンド<a aria-hidden="true" tabindex="-1" href="#bg-コマンド"></a></h3>
停止した処理は停止されたままです。<code>長い時間がかかる場合その処理をバックグラウンドで実行させたい</code>場合があります。 
バックグラウンド実行にするためには <code>bg</code> コマンドを使います。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># %ジョブ番号 で指定する
$ bg %1
</code></pre></div>
バックグラウンドで実行されているか確認したいときは <code>jobs</code> コマンドを使います。
実行中のJobのコマンドの後ろに <code>&#x26;</code> がついています。
停止させて、バックグラウンド実行させる手続きが手間の場合はコマンドの後ろに <code>&#x26;</code> をつけると、そのコマンドはバックグラウンドで実行されます。
<div class="remark-highlight"><pre class="language-shell"><code class="language-shell"># 最初からバックグラウンド実行させる
$ cp -r /path/to/src /path/to/dest &#x26;
</code></pre></div>

All Posts