JavaScript では、文字列を数値に変換する方法がたくさんあります。それぞれコードではどのように書くのでしょうか？

この記事では、文字列を数値に変換する 11 の方法を紹介します。

こちらは、JavaScript で文字列を数値に変換する方法を示すインタラクティブなスクリーンです:

JavaScript で文字列を数値に変換する方法: Number() 関数を使用する

文字列を数値に変換する方法の一つは、Number() 関数を使用することです。

この例では、quantity という名前の文字列があり、その値は "12" です。

const quantity = "12";

typeof 演算子を quantity に使用すると、その型は string として返されます。

console.log(typeof quantity);

Number 関数を使って、quantity を次のように数値に変換できます:

Number(quantity)

再び typeof 演算子を使用して、それが数値になったことを確認できます。

console.log(typeof Number(quantity));

数値に変換できない値を渡そうとすると、返り値は NaN「Not a Number」になります。

console.log(Number("awesome"));

JavaScript で文字列を数値に変換する方法: parseInt() 関数を使用する

文字列を数値に変換するもう一つの方法は、parseInt() 関数を使用することです。この関数は文字列とオプションの基数 (radix) を受け取ります。

基数は、記数法の底を表す 2 から 36 の間の数値です。例えば、基数が 2 の場合は 2 進数を表し、基数が 10 の場合は 10 進数を表します。

先ほどの quantity 変数を使用して、その文字列を数値に変換することができます。

const quantity = "12";

console.log(parseInt(quantity, 10));

quantity 変数を "12.99" に変更した場合、parseInt() を使用して得られる結果は数値の 12.99 になるでしょうか？

ご覧のとおり、結果は丸められた整数になります。浮動小数点数を返したい場合は、parseFloat() を使用する必要があります。

JavaScript で文字列を数値に変換する方法: parseFloat() 関数を使用する

parseFloat() 関数は値を受け取り、浮動小数点数を返します。浮動小数点数の例としては、12.99 や 3.14 などがあります。

以前の例を修正して parseFloat() を使用すると、結果は浮動小数点数の 12.99 になります。

const quantity = "12.99";

console.log(parseFloat(quantity));

文字列に先頭または末尾の空白が含まれていても、parseFloat() はその文字列を浮動小数点数に変換します。

const quantity = "   12.99    ";

console.log(parseFloat(quantity));

文字列の最初の文字が数値に変換できない場合、parseFloat() は NaN を返します。

const quantity = "F12.99";

console.log(parseFloat(quantity));

JavaScript で文字列を数値に変換する方法: 単項プラス演算子 (+) を使用する

単項プラス演算子 (+) を使用すると、文字列を数値に変換できます。この演算子はオペランドの前に置かれます。

const quantity = "12";

console.log(+quantity);

単項プラス演算子 (+) を使用して、文字列を浮動小数点数に変換することもできます。

const quantity = "12.99";

console.log(+quantity);

文字列の値が数値に変換できない場合、結果は NaN になります。

const quantity = "awesome";

console.log(+quantity);

JavaScript で文字列を数値に変換する方法: 文字列を数値の 1 と掛け算する

文字列を数値に変換する別の方法は、基本的な数学演算を使用することです。文字列の値に 1 を掛けると、数値が返されます。

const quantity = "12";

console.log(quantity * 1);

ご覧のとおり、quantity の値に 1 を掛けると、数値の 12 が返されます。しかし、これはどのように機能するのでしょうか？

この例では、JavaScript は文字列の値を数値に変換し、その後に数学演算を実行しています。文字列が数値に変換できない場合、数学演算は機能せず、NaN が返されます。

const quantity = "awesome";

console.log(quantity * 1);

この方法は浮動小数点数にも適用できます。

const quantity = "10.5";

console.log(quantity * 1);

JavaScript で文字列を数値に変換する方法: 文字列を数値の 1 で割る

1 を掛ける代わりに、文字列を 1 で割ることもできます。JavaScript は文字列の値を数値に変換し、その後に数学演算を実行します。

const quantity = "10.5";

console.log(quantity / 1);

JavaScript で文字列を数値に変換する方法: 文字列から数値の 0 を引く

別の方法として、文字列から 0 を引くこともできます。この場合も同様に、JavaScript は文字列の値を数値に変換し、その後に数学演算を実行します。

const quantity = "19";

console.log(quantity - 0);

JavaScript で文字列を数値に変換する方法: ビット単位の NOT 演算子 (~) を使用する

ビット単位の NOT 演算子 (~) はオペランドのビットを反転させ、その値を 32 ビット符号付き整数に変換します。32 ビット符号付き整数は、32 ビット (または 4 バイト) で表される整数値です。

数値に対して 1 つのビット単位の NOT 演算子 (~) を使用すると、以下の操作が実行されます: -(x + 1)

console.log(~19);

しかし、ビット単位の NOT 演算子 (~) を 2 回使用すると、文字列を数値に変換することができます。

const quantity = "19";

console.log(~~quantity);

この方法は浮動小数点数には適用できません。結果は整数になるためです。

const quantity = "19.99";

console.log(~~quantity);

この方法を数値以外の文字に対して使用した場合、結果はゼロになります。

const quantity = "awesome";

console.log(~~quantity);

この方法には制限があり、非常に大きな値の場合には動作が不安定になることがあります。数値が 32 ビット符号付き整数の範囲内に収まっていることを確認することが重要です。

const quantity = "2700000000";

console.log(~~quantity);

ビット単位の NOT 演算子 (~) について詳しく知りたい場合は、ドキュメントを参照してください。

JavaScript で文字列を数値に変換する方法: Math.floor() 関数を使用する

文字列を数値に変換する方法として、他には Math.floor() 関数も使用できます。この関数は数値を最も近い整数に切り捨てます。

const quantity = "13.4";

console.log(Math.floor(quantity));

以前の例と同様に、数値以外の文字を使用しようとすると、結果は NaN になります。

const quantity = "awesome";

console.log(Math.floor(quantity));

JavaScript で文字列を数値に変換する方法: Math.floor() 関数を使用する

Math.ceil() 関数は、数値を最も近い整数に切り上げます。

const quantity = "7.18";

console.log(Math.ceil(quantity));

JavaScript で文字列を数値に変換する方法: Math.round() 関数を使用する

Math.round() 関数は、数値を最も近い整数に丸めます。

例えば、値が 6.3 の場合、Math.round() は 6 を返します。

const quantity = "6.3";

console.log(Math.round(quantity));

しかし、その値を 6.5 に変更すると、Math.round() は 7 を返します。

const quantity = "6.5";

console.log(Math.round(quantity));

結論

この記事では、JavaScript を使用して文字列を数値に変換する 11 の方法を紹介しました。

この記事で説明した 11 の方法は以下の通りです。

• Number() 関数を使用する
• parseInt() 関数を使用する
• parseFloat() 関数を使用する
• 単項プラス演算子 (+) を使用する
• 文字列に数値の 1 を掛ける
• 文字列を数値の 1 で割る
• 文字列から数値の 0 を引く
• ビット単位の NOT 演算子 (~) を使用する
• Math.floor() 関数を使用する
• Math.ceil() 関数を使用する
• Math.round() 関数を使用する

この記事を楽しんでいただけたなら幸いです。JavaScript の学習、頑張ってください！

JavaScript は、動的でインタラクティブなウェブアプリケーションを作成するための多用途なプログラミング言語です。ウェブ開発における一般的なタスクの一つに、ページのコンテンツを更新したり特定のアクションをトリガーするための、ウェブページのリフレッシュ (再読み込み) があります。

この記事では、JavaScript でページをリフレッシュするさまざまな方法を探り、それぞれのアプローチの長所と短所を理解します。

JavaScript でページをリフレッシュする理由

ウェブページをリフレッシュすることは、さまざまなシナリオで役立ちます。例えば:

1. コンテンツ更新: ウェブページのコンテンツが動的で頻繁に変わる場合、最新のデータや情報を表示するためにページをリフレッシュする必要があるかもしれません。これはニュースサイト、株式市場のトラッカー、天気アプリなどでよく見られます。
2. フォーム送信: ウェブページでフォームを送信した後、成功メッセージを表示したり、新しい送信のためにフォームをリセットするためにページをリフレッシュしたくなるかもしれません。
3. 状態リセット: 場合によっては、ウェブページの状態をリセットしたり、特定のデータをクリアして再スタートしたいことがあります。ページをリフレッシュすることでこれを達成できます。

それでは、JavaScript でページをリフレッシュするさまざまな方法を探ってみましょう。

方法 1: location.reload() を使用してページをリフレッシュする方法

JavaScript でページをリフレッシュする最も簡単な方法は、location.reload() メソッドを使用することです。このメソッドは、現在のウェブページをサーバーから再読み込みし、現在のコンテンツを破棄して最新のコンテンツを読み込みます。

// Refresh the page
location.reload();

location.reload() を使用する利点

• シンプルで使いやすい。
• サーバーからページ全体を再読み込みするため、最新のコンテンツを取得できる。

location.reload() を使用する欠点

• ページの現在のコンテンツが破棄されるため、ユーザーの入力やデータが失われる可能性がある。
• ページが再読み込みされる際にちらつきが発生し、ユーザーエクスペリエンスに影響を与えることがある。

方法 2: location.replace() を使用してページをリフレッシュする方法

JavaScript でページをリフレッシュする別の方法として、location.replace() メソッドを使用する方法があります。このメソッドは現在のウェブページの URL を新しい URL で置き換えることで、新しいコンテンツでページを再読み込みします。

このコードをコンソールで試すと、現在の URL が表示されることに気付くでしょう。

console.log(location.href)

これは、location.replace() メソッドを使用して現在のウェブページの URL を新しい URL (同じ URL) で置き換えると、ページがリフレッシュされることを意味します。

// Refresh the page by replacing the URL with itself
location.replace(location.href);

location.replace() を使用する利点

• 新しいコンテンツでページを迅速にリロードする方法である。
• 現在のページのコンテンツを保持し、URL のみを置き換えるため、ユーザーの入力やデータの損失を回避できる。

location.replace() を使用する欠点

• ページの URL 全体を置き換えるため、現在のブラウジング履歴が失われる可能性がある。
• ウェブページが新しいウィンドウやタブで開かれている場合など、一部のシナリオで機能しないことがある。

方法 3: location.reload(true) を使用してページをリフレッシュする方法

location.reload() メソッドは、forceGet というブール型パラメータも受け入れます。これを true に設定すると、ページがキャッシュされていてもサーバーから強制的に再読み込みされます。

これは、ページがキャッシュされていても最新のコンテンツを確実に取得したい場合に便利です。

// Refresh the page and bypass the cache
location.reload(true);

location.reload(true) を使用する利点

• ページがキャッシュされていても、最新のコンテンツをサーバーから確実に取得できる。

location.reload(true) を使用する欠点

• ページの現在のコンテンツが破棄されるため、ユーザーの入力やデータが失われる可能性がある。
• ページが再読み込みされる際にちらつきが発生し、ユーザーエクスペリエンスに影響を与えることがある。

方法 4: location.href を使用してページをリフレッシュする方法

JavaScript でページをリフレッシュするもう 1 つの方法として、location.href プロパティを使用してウェブページの URL を同じ URL に再設定する方法があります。これにより、ページが新しい URL で再読み込みされ、ページのリフレッシュがトリガーされます。

// Refresh the page by setting the URL to itself
location.href = location.href;

location.href を使用する利点

• ページをリフレッシュするためのシンプルで効果的な方法である。
• 現在のページのコンテンツを保持し、URL のみを更新するため、ユーザーの入力やデータの損失を回避できる。

location.href を使用する欠点

• ページの URL 全体を置き換えるため、現在のブラウジング履歴が失われる可能性がある。
• ウェブページが新しいウィンドウやタブで開かれている場合など、一部のシナリオで機能しないことがある。

方法 5: location.reload() を遅延させてページをリフレッシュする方法

ページをリフレッシュする前に遅延を追加したい場合は、setTimeout() 関数を location.reload() メソッドと組み合わせて使うことができます。

これにより、ページがリロードされる前の遅延時間をミリ秒単位で指定でき、リフレッシュのタイミングを制御することができます。

// Refresh the page after a delay of 3 seconds
setTimeout(function(){
    location.reload();
}, 3000); // 3000 milliseconds = 3 seconds

location.reload() を遅延させて使用する利点

• 遅延を追加することでページリフレッシュのタイミングを制御できる。
• 特定のイベントやアクションの後にページをリフレッシュしたい場合に柔軟に対応できる。

location.reload() を遅延させて使用する欠点

• ページリフレッシュに遅延が発生するため、ユーザーエクスペリエンスに影響を与えることがある。
• 不安定なまたは遅いネットワーク接続のシナリオでは期待通りに動作しないことがある。

まとめ

この記事では、JavaScript でページをリフレッシュするさまざまな方法を学びました。それぞれの方法には利点と欠点があり、それらを考慮してウェブ開発プロジェクトに最適な方法を選ぶことができるようになりましたね。

ページをリフレッシュする際には、ユーザーエクスペリエンスやデータの損失、ブラウジング履歴への影響を考慮することが重要です。

この記事が JavaScript でウェブページをリロードする方法を理解し、特定のユースケースに適した方法を選ぶ手助けになれば幸いです。

Happy coding!

そしてさらなる学習の旅に出かけましょう！私のブログでも他の記事をご覧いただけます。

Linux では、プロセスの自動化は shell スクリプトに大きく依存しています。shell スクリプトとは、一連のコマンドを含むファイルを作成し、まとめて実行できるようにすることを意味します。

この記事では、変数、コマンド、入力 / 出力、およびデバッグを含む bash スクリプトの基本から説明します。それぞれの例もあわせて見ていきます。

それでは始めましょう。🚀

目次

1. 事前準備
2. はじめに

• Bash スクリプトの定義
• Bash スクリプトの利点
• Bash shell とコマンドラインインターフェースの概要

3. Bash スクリプトの始め方

• コマンドラインから Bash コマンドを実行する方法
• Bash スクリプトの作成と実行方法

4. Bash スクリプトの基本

• Bash スクリプトでのコメント
• Bash における変数とデータ型
• 入力と出力に関する Bash スクリプト
• 基本的な Bash コマンド (echo、read など)
• 条件文 (if / else)

5. Bash におけるループと分岐

• While ループ
• For ループ
• Case 文

6. cron を使用したスクリプトのスケジュール設定方法
7. Bash スクリプトのデバッグとトラブルシューティング方法
8. 結論

• Bash スクリプトに関するさらなる学習リソース

事前準備

このチュートリアルに従うには、次のアクセス権が必要です:

• コマンドラインにアクセスできる、実行可能な Linux のバージョン。

Linux をインストールしていない場合や、まだ始めたばかりの場合は、Replit を介して簡単に Linux コマンドラインにアクセスできます。Replit はブラウザベースの IDE であり、数分で bash シェルにアクセスできます。

Windows システム上に Linux をインストールする方法として、WSL (Windows Subsystem for Linux) を使用することもできます。そのためのチュートリアルはこちらです。

はじめに

Bash スクリプトの定義

Bash スクリプトとは、bash プログラムによって一行ずつ実行されるコマンドのシーケンスを含むファイルのことです。これにより、特定のディレクトリへの移動、フォルダの作成、コマンドラインを使用したプロセスの起動など、一連の操作を実行することができます。

これらのコマンドをスクリプトに保存することにより、スクリプトを実行するだけで、同じ手順を何度も繰り返すことができます。

Bash スクリプトの利点

Bash スクリプトは、システム管理タスクの自動化、システムリソースの管理、および Unix / Linux システムでのその他のルーチンタスクを実行するための強力で多用途なツールです。シェルスクリプトの利点には以下のものがあります:

• 自動化: シェルスクリプトは繰り返しのタスクやプロセスを自動化でき、手動実行によるエラーのリスクを減らしながら時間を節約できます。
• 移植性: シェルスクリプトは Unix、Linux、macOS、さらにはエミュレーターや仮想マシンを使えば Windows でも実行可能です。
• 柔軟性: シェルスクリプトはカスタマイズ性が非常に高く、特定の要件に合わせて簡単に修正できます。他のプログラミング言語やユーティリティと組み合わせて、より強力なスクリプトを作成することも可能です。
• アクセシビリティ: シェルスクリプトは簡単に書ける上、特別なツールやソフトウェアを必要としません。どのテキストエディタでも編集でき、大部分のオペレーティングシステムには標準でシェルインタープリターが搭載されています。
• 統合性: シェルスクリプトはデータベース、ウェブサーバー、クラウドサービスなど、他のツールやアプリケーションと統合でき、より複雑な自動化やシステム管理タスクを実行することができます。
• デバッグ: シェルスクリプトはデバッグが容易で、ほとんどのシェルにはデバッグおよびエラーレポートツールが内蔵されており、問題を迅速に特定して修正するのに役立ちます。

Bash シェルとコマンドラインインターフェースの概要

「シェル」と「bash」という用語は同じように使われることがありますが、二つの間には微妙な違いがあります。

「シェル」という用語は、オペレーティングシステムと対話するためのコマンドラインインターフェースを提供するプログラムを指します。Bash (Bourne-Again SHell) は最も一般的に使用される Unix / Linux シェルの一つで、多くの Linux ディストリビューションでデフォルトのシェルとなっています。

シェルやコマンドラインインターフェースは次のような見た目をしています:

上記の出力例では、zaira@Zaira がシェルプロンプトです。シェルが対話的に使用される場合、ユーザーからのコマンドを待っているときに $ が表示されます。

シェルが root (管理権限を持つユーザー) として実行されている場合、プロンプトは # に変わります。スーパーユーザーのシェルプロンプトは次のような見た目です:

[root@host ~]#

Bash はシェルの一種ですが、他にも Korn シェル (ksh)、C シェル (csh)、Z シェル (zsh) などのシェルがあります。各シェルにはそれぞれ独自の構文と機能がありますが、いずれもオペレーティングシステムと対話するためのコマンドラインインターフェースを提供するという共通の目的を持っています。

ps コマンドを使用して、自分のシェルの種類を確認することができます:

ps

私の環境では、以下のように出力結果されます:

要約すると、「シェル (shell)」はコマンドラインインターフェースを提供する任意のプログラムを指す広義の用語であり、「Bash」は Unix / Linux システムで広く使用されている特定の種類のシェルです。

注意: このチュートリアルでは「bash」シェルを使用します。

Bash スクリプトの始め方

コマンドラインから Bash コマンドを実行する方法

前述の通り、シェルプロンプトは以下のように表示されます:

[username@host ~]$

$ マークの後に任意のコマンドを入力し、その出力をターミナルで確認できます。

一般的に、コマンドは以下の構文に従います:

command [OPTIONS] arguments

基本的な Bash コマンドについていくつか説明しながら、その出力を見てみましょう。一緒に試しながら進めてください :)

• date: 現在の日付を表示します。

zaira@Zaira:~/shell-tutorial$ date
Tue Mar 14 13:08:57 PKT 2023

• pwd: 現在の作業ディレクトリを表示します。

zaira@Zaira:~/shell-tutorial$ pwd
/home/zaira/shell-tutorial

• ls: 現在のディレクトリの内容を一覧表示します。

zaira@Zaira:~/shell-tutorial$ ls
check_plaindrome.sh  count_odd.sh  env  log  temp

• echo: テキスト文字列や変数の値をターミナルに表示します。

zaira@Zaira:~/shell-tutorial$ echo "Hello bash"
Hello bash

コマンドのマニュアルは man コマンドでいつでも参照できます。

例えば、ls のマニュアルは以下のように表示されます:

Bash スクリプトの作成と実行方法

スクリプトの命名規則

命名規則によれば、Bash スクリプトは .sh で終わります。ただし、sh の拡張子なしでも Bash スクリプトは正常に実行できます。

Shebang の追加

Bash スクリプトは「シバン」shebang で始まります。Shebang は、hash # と bang ! に続いて bash シェルのパスが書かれたものです。これはスクリプトの最初の行に書かれます。Shebang はシェルに対して、このスクリプトを bash シェルで実行するよう指示します。Shebang は単に bash インタープリターの絶対パスです。

以下は shebang ステートメントの例です:

#!/bin/bash

次のコマンドを使用して、お使いの bash シェルのパス (上記の例とは異なる場合があります) を見つけることができます:

which bash

最初の Bash スクリプトを作成する

これから作成するスクリプトでは、ユーザーにパスの入力を促します。そして結果として、そのパスの内容を一覧表示します。

まず、vi コマンドを使用して、run_all.sh という名前のファイルを作成してください。他の任意のエディタを使用しても構いません。

vi run_all.sh

ファイルに以下のコマンドを追加して保存してください:

#!/bin/bash
echo "Today is " `date`

echo -e "\nenter the path to directory"
read the_path

echo -e "\n you path has the following files and folders: "
ls $the_path

スクリプトを行ごとに詳しく見てみましょう。同じスクリプトを、行番号付きで以下に示します。

  1 #!/bin/bash
  2 echo "Today is " `date`
  3
  4 echo -e "\nenter the path to directory"
  5 read the_path
  6
  7 echo -e "\n you path has the following files and folders: "
  8 ls $the_path

• 1 行目: シバン (#!/bin/bash) は Bash シェルのパスを指します。
• 2 行目: echo コマンドはバッククォートで囲まれた date を使用して、現在の日付と時刻をターミナルに表示します。
• 4 行目: ユーザーに有効なパスを入力してもらいます。
• 5 行目: read コマンドは入力を読み取り、変数 the_path に格納します。
• 8 行目: ls コマンドは変数に格納されたパスを取り、現在のファイルやフォルダを表示します。

Bash スクリプトを実行する

スクリプトを実行可能にするために、次のコマンドでユーザーに実行権限を付与します:

chmod u+x run_all.sh

ここでは、

• chmod は現在のユーザー u のファイルの所有権を変更します。
• +x は現在のユーザーに実行権限を追加します。これにより、ファイルの所有者であるユーザーがスクリプトを実行できるようになります。
• run_all.sh は実行可能にしたいファイルです。

以下の方法でスクリプトを実行できます:

• sh run_all.sh
• bash run_all.sh
• ./run_all.sh

それでは実際に動作する様子を見てみましょう🚀

Bash スクリプトの基本

Bash スクリプトでのコメント

Bash スクリプトのコメントは # から始まります。つまり、# で始まる行はコメントであり、インタープリターに無視されます。

コメントはコードのドキュメント化に非常に役立ち、他の人がコードを理解しやすくするためにも、コメントを追加するのは良い習慣です。

以下はコメントの例です:

# This is an example comment
# Both of these lines will be ignored by the interpreter

Bash における変数とデータ型

変数を使用するとデータを保存できます。変数を使ってスクリプトのあらゆる場所でデータを読み取り、アクセスし、操作することができます。

Bash にはデータ型がありません。Bash では、変数は数値、個々の文字、または文字列を保存することができます。

Bash では、変数の値を以下のように使用および設定できます:

1. 直接値を割り当てる例:

country=Pakistan

2. コマンド置換を使用して、プログラムやコマンドの出力に基づいて値を割り当てる例。既存の変数の値にアクセスするには $ が必要です。

same_country=$country

変数の値にアクセスするには、変数名の頭に $ を付け加えます。

zaira@Zaira:~$ country=Pakistan
zaira@Zaira:~$ echo $country
Pakistan
zaira@Zaira:~$ new_country=$country
zaira@Zaira:~$ echo $new_country
Pakistan

変数の命名規則

Bash スクリプティングにおける変数の命名規則は以下の通りです:

1. 変数名は文字またはアンダースコア (_) で始める必要があります。
2. 変数名には文字、数字、アンダースコア (_) を含めることができます。
3. 変数名は大文字と小文字を区別します。
4. 変数名にはスペースや特殊文字を含めることはできません。
5. 変数の目的を反映した説明的な名前を使用します。
6. if、then、else、fi などの予約キーワードを変数名として使用することは避けます。

以下は Bash で有効な変数名の例です:

name
count
_var
myVar
MY_VAR

以下は Bash で無効な変数名の例です:

2ndvar (variable name starts with a number)
my var (variable name contains a space)
my-var (variable name contains a hyphen)

これらの命名規則に従うことは、Bash スクリプトをより読みやすく、メンテナンスしやすくするのに役立ちます。

入力と出力に関する Bash スクリプト

入力の収集

このセクションでは、スクリプトに入力を提供するいくつかの方法について説明します。

1. ユーザーの入力を読み取り、変数に格納する方法

read コマンドを使用してユーザーの入力を読み取ることができます。

#!/bin/bash 

echo "What's your name?" 

read entered_name 

echo -e "\nWelcome to bash tutorial" $entered_name

2. ファイルから読み取る方法

このコードは、input.txt という名前のファイルから各行を読み取り、それをターミナルに出力します。while ループについては後ほど学びます。

while read line
do
  echo $line
done < input.txt

3. コマンドライン引数を使う方法

Bash スクリプトや関数では、$1 は渡された最初の引数、$2 は 2 番目の引数を表します。その後の数字も同様です。

下記のスクリプトは、コマンドライン引数として名前を受け取り、個別の挨拶メッセージを表示します。

echo "Hello, $1!"

スクリプトに引数として Zaira を渡してみます。

#!/bin/bash
echo "Hello, $1!"

出力:

出力の表示

ここでは、スクリプトから出力を受け取るいくつかの方法について説明します。

1. ターミナルへの出力:

echo "Hello, World!"

これは、ターミナルに「Hello, World!」というテキストを表示します。

2. ファイルへの書き込み:

echo "This is some text." > output.txt

これは、「This is some text.」というテキストを output.txt という名前のファイルに書き込みます。なお、> 演算子はファイルに既に内容がある場合、それを上書きします。

3. ファイルへの追記:

echo "More text." >> output.txt

これは、「More text.」というテキストを output.txt ファイルの末尾に追記します。

4. 出力のリダイレクト:

ls > files.txt

これは、現在のディレクトリ内のファイルを一覧表示し、その出力を files.txt という名前のファイルに書き込みます。この方法で任意のコマンドの出力をファイルにリダイレクトできます。

基本的な Bash コマンド (echo、read など)

以下は、最もよく使われる Bash コマンドのリストです:

1. cd: ディレクトリを別の場所に変更します。
2. ls: 現在のディレクトリの内容を一覧表示します。
3. mkdir: 新しいディレクトリを作成します。
4. touch: 新しいファイルを作成します。
5. rm: ファイルまたはディレクトリを削除します。
6. cp: ファイルまたはディレクトリをコピーします。
7. mv: ファイルまたはディレクトリを移動または名前を変更します。
8. echo: テキストをターミナルに表示します。
9. cat: ファイルの内容を連結して表示します。
10. grep: ファイル内のパターンを検索します。
11. chmod: ファイルまたはディレクトリの権限を変更します。
12. sudo: 管理者権限でコマンドを実行します。
13. df: 使用可能なディスク容量を表示します。
14. history: 以前に実行したコマンドのリストを表示します。
15. ps: 実行中のプロセスに関する情報を表示します。

条件文 (if / else)

条件を評価してブール値 (true または false) を返す式は、条件と呼ばれます。条件を評価する方法には、if、if-else、if-elif-else、およびネストした条件分岐があります。

構文:

if [[ condition ]];
then
	statement
elif [[ condition ]]; then
	statement 
else
	do this by default
fi

論理演算子、AND -a および OR -o、を使用して、より詳細な比較を行うことができます。

if [ $a -gt 60 -a $b -lt 100 ]

ここでは、ユーザーが入力した数値が正、負、またはゼロのいずれかを判定するために、if、if-else、および if-elif-else 文を使用する Bash スクリプトの例を見てみましょう。

#!/bin/bash

echo "Please enter a number: "
read num

if [ $num -gt 0 ]; then
  echo "$num is positive"
elif [ $num -lt 0 ]; then
  echo "$num is negative"
else
  echo "$num is zero"
fi

最初に、スクリプトはユーザーに数値の入力を促します。次に、その数値が 0 より大きいかどうかを if 文でチェックします。もし数値が 0 より大きければ、スクリプトは数値が正であると出力します。当てはまらない場合、スクリプトは次の if-elif 文に進みます。ここで、スクリプトは数値が 0 より小さいかどうかをチェックします。もし数値が 0 より小さければ、スクリプトは数値が負であると出力します。最後に、もし数値が 0 より大きくも小さくもなければ、スクリプトは else 文を使用して数値がゼロであることを出力します。

実際に動作を見てみましょう🚀

Bash におけるループと分岐

While ループ

While ループは条件を確認し、条件が true の間ループします。ループの実行を制御するために、カウンター文を提供する必要があります。

以下の例では、(( i += 1 )) がカウンター文であり、i の値を増やします。このループはちょうど 10 回実行されます。

#!/bin/bash
i=1
while [[ $i -le 10 ]] ; do
   echo "$i"
  (( i += 1 ))
done

For ループ

for ループも、while ループと同様に、特定の回数だけステートメントを実行することができます。それぞれのループは構文と使用方法が異なります。

以下の例では、ループは 5 回繰り返されます。

#!/bin/bash

for i in {1..5}
do
    echo $i
done

Case 文

Bash では、case 文を使用して、与えられた値をパターンのリストと比較し、最初にマッチしたパターンに基づいてコードブロックを実行することができます。Bash における case 文の構文は以下の通りです:

case expression in
    pattern1)
        # code to execute if expression matches pattern1
        ;;
    pattern2)
        # code to execute if expression matches pattern2
        ;;
    pattern3)
        # code to execute if expression matches pattern3
        ;;
    *)
        # code to execute if none of the above patterns match expression
        ;;
esac

ここでは、「expression」は比較したい値であり、「pattern1」、「pattern2」、「pattern3」などが比較対象にしたいパターンです。

二重のセミコロン ";;" は、各パターンに対して実行するコードブロックを区切ります。アスタリスク "*" はデフォルトのケースを表し、指定されたパターンのどれも一致しない場合に実行されます。

例を見てみましょう。

fruit="apple"

case $fruit in
    "apple")
        echo "This is a red fruit."
        ;;
    "banana")
        echo "This is a yellow fruit."
        ;;
    "orange")
        echo "This is an orange fruit."
        ;;
    *)
        echo "Unknown fruit."
        ;;
esac

この例では、「fruit」の値が「apple」であるため、最初のパターンが一致し、「This is a red fruit.」と出力するコードブロックが実行されます。もし "fruit" の値が代わりに "banana" であれば、2 番目のパターンが一致し、「This is a yellow fruit.」と出力するコードブロックが実行されます。そして、「fruit」の値が指定されたどのパターンにも一致しない場合は、デフォルトのケースが実行され、「Unknown fruit.」と出力されます。

cron を使用したスクリプトのスケジュール設定方法

Cron は、Unix 系オペレーティングシステムで利用可能なジョブスケジューリングの強力なユーティリティです。cron を設定することで、日次、週次、月次、または特定の時間ベースで自動ジョブを設定することができます。cron が提供する自動化機能は、Linux システム管理において重要な役割を果たします。

以下は cron をスケジュールするための構文です:

# Cron job example
* * * * * sh /path/to/script.sh

この * は、それぞれ分、時、日、月、曜日を表します。

以下は cron ジョブをスケジュールするいくつかの例です。

crontab を使用する

crontab ユーティリティは、cron ジョブを追加および編集するために使用されます。

crontab -l は特定のユーザーに予定されているスクリプトのリストを表示します。

crontab -e を使用して cron を追加および編集できます。

他の記事で cron ジョブについて詳しく読むことができます。

Bash スクリプトのデバッグとトラブルシューティング方法

デバッグとトラブルシューティングは、どんな Bash スクリプトの作成者にとっても重要なスキルです。Bash スクリプトは非常にパワフルですが、エラーや予期しない動作が発生することもあります。このセクションでは、Bash スクリプトのデバッグとトラブルシューティングのためのいくつかのヒントやテクニックについて説明します。

set -x オプションを設定する

Bash スクリプトをデバッグするための最も有用なテクニックの 1 つは、スクリプトの先頭で set -x オプションを設定することです。このオプションを設定すると、Bash はデバッグモードが有効になり、実行する各コマンドの先頭に + 記号を付けて端末に出力します。これは、スクリプト内でどこでエラーが発生しているかを特定するのに非常に役立ちます。

#!/bin/bash

set -x

# Your script goes here

終了コードを確認する

Bash がエラーに遭遇すると、そのエラーの性質を示す終了コードが設定されます。直近で実行したコマンドの終了コードは、$? 変数を使用して確認できます。値が 0 の場合、成功を示し、それ以外の値はエラーを示します。

#!/bin/bash

# Your script goes here

if [ $? -ne 0 ]; then
    echo "Error occurred."
fi

echo 文を使用する

Bash スクリプトをデバッグする別の有用なテクニックは、コード全体に echo 文を挿入することです。これにより、どこでエラーが発生しているかや変数に渡されている値を特定するのに役立ちます。

#!/bin/bash

# Your script goes here

echo "Value of variable x is: $x"

# More code goes here

set -e オプションを使用する

スクリプト内の任意のコマンドが失敗した場合にスクリプトを直ちに終了させたい場合は、set -e オプションを使用できます。このオプションにより、スクリプト内のどのコマンドが失敗しても Bash はエラーで終了し、スクリプト内のエラーを特定して修正することが容易になります。

#!/bin/bash

set -e

# Your script goes here

ログを確認して cron のトラブルシューティングを行う

ログファイルを使用して cron のトラブルシューティングを行うことができます。スケジュールされたすべてのジョブについて、ログが保持されています。特定のジョブが意図通りに実行されたかどうか、ログを確認して検証することができます。

Ubuntu や Debian の場合、cron ログは次の場所にあります:

/var/log/syslog

他のディストリビューションでは場所が異なる場合があります。

cron ジョブのログファイルは次のようになっているでしょう:

2022-03-11 00:00:01 Task started
2022-03-11 00:00:02 Running script /path/to/script.sh
2022-03-11 00:00:03 Script completed successfully
2022-03-11 00:05:01 Task started
2022-03-11 00:05:02 Running script /path/to/script.sh
2022-03-11 00:05:03 Error: unable to connect to database
2022-03-11 00:05:03 Script exited with error code 1
2022-03-11 00:10:01 Task started
2022-03-11 00:10:02 Running script /path/to/script.sh
2022-03-11 00:10:03 Script completed successfully

結論

この記事では、まずターミナルへのアクセス方法といくつかの基本的な Bash コマンドの実行方法を説明しました。また、Bash シェルの概要についても学びました。ループや条件分岐を使用したコードの分岐についても簡単に見てきました。最後に、cron を使用したスクリプトの自動化とそのトラブルシューティング手法についても述べました。

Bash スクリプトに関するさらなる学習リソース

Bash スクリプティングの世界をさらに深く掘り下げたい場合は、freeCodeCamp による Linux に関する 6 時間の動画講座をお勧めします。

このチュートリアルで学んだ中で一番好きなことは何ですか？また、このプラットフォームで私とつながることもできます。📧

次のチュートリアルでお会いしましょう。楽しいコーディングを😁

バナー画像のクレジット: Freepik による画像

Node は、JavaScript コードをブラウザの外、サーバーサイドで実行するためのランタイム環境です。

一方、NPM は JavaScript パッケージ (または Node モジュールとも呼ばれます) を npm レジストリに公開するためのパッケージマネージャーです。また、アプリケーションにパッケージをインストールするためにも使われます。

Node をインストールするには、Node.js のウェブサイトにアクセスしてインストーラーをダウンロードする必要があります。ダウンロードしたら、インストーラーを実行し、手順に従い、利用規約に同意してデバイスにインストーラーを入れます。

Node をインストールすると、アプリケーション内のパッケージを管理するために使用できる npm CLI も取得できます。

ただし、Node と NPM はそれぞれ個別に最新バージョンに更新できます。この記事では、その方法を説明します。

Node を更新する方法

1. NPM を使用して Node のバージョンを更新する場合

NPM を使用して Node を更新するには、デバイス上で Node のバージョンを対話形式で管理するための n パッケージをインストールします。

以下がその手順です:

NPM のキャッシュをクリアする

依存関係をインストールすると、次回のダウンロードの速度を向上させるため、いくつかのモジュールがキャッシュされます。そのため、まず NPM のキャッシュをクリアする必要があります。

n パッケージをインストールする

npm install -g n

このパッケージをグローバルにインストールする必要があります。これは、ルートで Node のバージョンを管理します。

新しいバージョンの Node をインストールする

n lts
n latest

上記の二つのコマンドは、Node の長期サポート版と最新版をインストールします。

以前にインストールされたバージョンを削除する

n prune

このコマンドは、以前にインストールされたバージョンのキャッシュされたバージョンを削除し、最後にインストールされたバージョンのみを保持します。

2. NVM を使用して Node のバージョンを更新する場合

NVM は Node Version Manager の略であり、その名前が示すように、Node のバージョンを管理するのに役立ちます。NVM を使用すると、Node のバージョンを複数インストールし、プロジェクトが使用する Node のバージョンを指定することができます。

NVM を使用すると、さまざまな Node のバージョンでプロジェクトをテストすることが簡単になります。

NVM を使用して Node のバージョンを更新するには、まず NVM をインストールする必要があります。

NVM のインストールガイドはこちらです。

インストール後、次のコマンドでパッケージをインストールできます:

nvm install [version]

最新バージョンをインストールするには、次のコマンドを使用します:

nvm install node

他のバージョンをアンインストールするには、次のコマンドを使用します:

nvm uninstall [version]

多くのバージョンがインストールされている場合、特定の時点で使用するバージョンを指定することもあります。これを行う方法の一つは、次のようにデフォルトのエイリアスを設定することです:

nvm alias default [version]

このようにすると、Node の実行は指定されたバージョンで実行されます。

3. 更新された Node のバイナリをダウンロードする場合

また、Node.js のウェブサイトから最新バージョンを入手することもできます。そこでは、デバイスに最適な最新バージョンと長期サポートバージョンを見つけることができます。

最新バージョンをダウンロードすると、NPM の最新バージョンも入手できます。

NPM の更新方法

パッケージを更新するために NPM を使用するのと同様に、NPM で NPM 自体を更新することもできます。そのコマンドは以下の通りです:

npm install -g npm@latest

このコマンドは、最新バージョンの NPM をグローバルにインストールします。

Mac では、NPM の前に sudo コマンドを渡す必要があるかもしれません。これは、NPM をデバイスのルートにインストールするために特権が必要なためです。

結論

この記事では、Node と NPM を最新バージョンに更新する方法を見てきました。

繰り返しますが、Node をインストールすると自動的に NPM もインストールされます。また、ウェブサイトからバイナリをインストールして Node を更新すると、更新された NPM が取得できます。

また、デバイス全体で Node と NPM を更新する他の方法も学びました。

JSON、または JavaScript Object Notation は、私たちの身の回りにあります。ウェブアプリを使用したことがあれば、そのウェブアプリがデータを構造化したり、保存したり、サーバーとデバイス間で送信したりするために JSON を使用している可能性が非常に高いでしょう。

この記事では、まず JSON と JavaScript の違いについて簡単に説明し、次にブラウザと Node.js プロジェクトで JSON を解析するさまざまな方法について説明します。

JSON と JavaScript の違い

JSON は通常の JavaScript のように見えますが、JSON はテキストファイルと同様のデータ形式と考える方が良いでしょう。JSON は JavaScript の構文を基にしているため、非常に似ています。

JSON オブジェクトと JSON 配列を見て、それらを JavaScript の物と比較してみましょう。

JSON オブジェクトと JavaScript オブジェクトリテラルの違い

まず、こちらが JSON オブジェクトです:

{
  "name": "Jane Doe",
  "favorite-game": "Stardew Valley",
  "subscriber": false
}

JSON オブジェクトと通常の JavaScript オブジェクト (オブジェクトリテラルとも呼ばれます) の主な違いは、引用符に関係しています。JSON オブジェクトのすべてのキーと文字列型の値は、ダブルクォーテーション (") で囲まれている必要があります。

JavaScript のオブジェクトリテラルはもう少し柔軟です。オブジェクトリテラルでは、キーや文字列を必ずしもダブルクォーテーションで囲む必要はありません。代わりに、シングルクォーテーション (') を使用するか、キーに関しては引用符を使用しないことも可能です。

上記のコードを JavaScript のオブジェクトリテラルとして表すと、次のように書くことができます:

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

キー 'favorite-game' がシングルクォーテーションで囲まれていることに注意してください。オブジェクトリテラルでは、単語がダッシュ (-) で区切られているキーは引用符で囲む必要があります。

引用符を避けたい場合は、キーをキャメルケース (favoriteGame) に書き直すか、単語をアンダースコアで区切る (favorite_game) ことができます。

JSON 配列と JavaScript 配列の違い

JSON 配列は、JavaScript の配列とほぼ同じように動作し、文字列、ブール値、数値、および他の JSON オブジェクトを含むことができます。たとえば次のような配列があるとします:

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

これを素の JavaScript で書き直した例がこちらです:

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

文字列としての JSON

JSON にオブジェクトと配列があるのなら、それらをプログラム内で通常の JavaScript のオブジェクトリテラルや配列のように使用できるのではないかと思っているかもしれません。

それができない理由は、JSON は実際には単なる文字列であるからです。

たとえば、上記の jane-profile.json や profiles.json のように、JSON を別のファイルに書き込むと、そのファイルは実際には JSON オブジェクトや配列の形をしたテキストを含んでいます。その形式がたまたま JavaScript のように見えるだけです。

そして、API にリクエストを送信すると、次のようなものが返ってきます:

{"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}

テキストファイルの場合と同様に、プロジェクトで JSON を使用したい場合は、これを解析して、プログラミング言語が理解できる形式に変更する必要があります。たとえば、Python で JSON オブジェクトを解析すると、辞書型のデータが作成されます。

その理解をもとに、JavaScript で JSON を解析するさまざまな方法を見てみましょう。

ブラウザで JSON を解析する方法

ブラウザで JSON を扱う場合、たいていは API を介してデータを受信または送信します。

いくつかの例を見てみましょう。

fetch を使用して JSON を解析する方法

API からデータを取得する最も簡単な方法は、fetch を使用することです。fetch には .json() メソッドが含まれており、JSON レスポンスを使用可能な JavaScript オブジェクトリテラルや配列へと簡単に解析できます。

以下は、Chuck Norris Jokes API から開発者向けのジョークを取得するために、fetch を使用して GET リクエストを行うコードです:

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

ブラウザでそのコードを実行すると、コンソールに次のような内容がログされます:

{
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
}

これは JSON オブジェクトのように見えますが、実際には JavaScript のオブジェクトリテラルであり、プログラム内で自由に使用できます。

JSON.stringify() を使用して JSON を文字列に変換する方法

しかし、API にデータを送信したい場合はどうすれば良いでしょうか？

たとえば、他の人が後で読めるように Chuck Norris のジョークを Chuck Norris Jokes API に送信したいとします。

まず、ジョークを JavaScript のオブジェクトリテラルとして書きます:

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

API にデータを送信するので、newJoke オブジェクトリテラルを JSON 文字列に変換する必要があります。

幸いにも、JavaScript にはそのための非常に役立つメソッド、JSON.stringify() が含まれています:

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

console.log(JSON.stringify(newJoke)); // {"categories":["dev"],"value":"Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."}

console.log(typeof JSON.stringify(newJoke)); // string

この例では、オブジェクトリテラルを JSON 文字列に変換していますが、JSON.stringify() は配列にも使えます。

あとは、JSON 文字列化されたジョークを POST リクエストで API に送信するだけです。

Chuck Norris Jokes API には実際にはこの機能はありません。しかし、もしこの機能があるとしたら、コードは次のようになるでしょう:

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

fetch('https://api.chucknorris.io/jokes/submit', { // fake API endpoint
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(newJoke), // turn the JS object literal into a JSON string
})
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => {
    console.error(err);
  });

これで、fetch を使用して受信した JSON を解析し、JSON.stringify() を使用して JavaScript のオブジェクトリテラルを JSON 文字列に変換できました。

ブラウザでローカル JSON ファイルを操作する方法

残念ながら、ブラウザでローカルの JSON ファイルをロードすることはできません (またはお勧めしません)。

fetch は、ローカルファイルを読み込もうとするとエラーをスローします。たとえば、いくつかのジョークが含まれている JSON ファイルがあるとします:

[
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
  },
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "ae-78cogr-cb6x9hluwqtw",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
    "value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
  }
]

そして、それを解析して、シンプルな HTML ページ上にジョークのリストを作成したいとします。

以下のようなページを作成して、ブラウザで開くとします:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <title>Fetch Local JSON</title>
  </head>
  <script>
    fetch("./jokes.json", { mode: "no-cors" }) // disable CORS because path does not contain http(s)
      .then((res) => res.json())
      .then((data) => console.log(data));
  </script>
</html>

コンソールには、次のように表示されます:

Fetch API cannot load file://<path>/jokes.json. URL scheme "file" is not supported

デフォルトでは、ブラウザはセキュリティ上の理由からローカルファイルへのアクセスを許可しません。これは良いことであり、この動作を迂回しようとしてはいけません。

代わりに、最善の方法はローカル JSON ファイルを JavaScript に変換することです。幸いなことに、JSON の構文は JavaScript と非常に似ているため、簡単に変換できます。

必要なのは新しいファイルを作成し、JSON を変数として宣言することだけです:

const jokes = [
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
  },
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "ae-78cogr-cb6x9hluwqtw",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
    "value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
  }
]

そして、それを別個のスクリプトとしてページに追加します:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <title>Fetch Local JSON</title>
  </head>
  <script src="jokes.js"></script>
  <script>
    console.log(jokes);
  </script>
</html>

これで、jokes 配列をコードで自由に使用できるようになります。

または JavaScript モジュールを使用することもできますが、これはこの記事の範囲外です。

では、Node.js を使用してローカル JSON ファイルを操作したい場合はどうすれば良いでしょうか？それを見てみましょう。

Node.js で JSON を解析する方法

Node.js は、ブラウザの外で JavaScript を実行することができる JavaScript ランタイムです。Node.js についてはこちらで詳しく説明されています。

Node.js を使用してローカルのコンピューター上でコードを実行するか、サーバー上で完全な Web アプリケーションを実行するかに関わらず、JSON を操作する方法を知っておくと良いでしょう。

以下の例でも、同じ jokes.json ファイルを使用します:

[
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
  },
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "ae-78cogr-cb6x9hluwqtw",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
    "value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
  }
]

require() を使用して JSON ファイルを解析する方法

最も簡単な方法から始めましょう。

ローカルの JSON ファイルがある場合、require() を使用して、他の Node.js モジュールと同様にロードするだけで使用できます:

const jokes = require('./jokes.json');

JSON ファイルは自動的に解析され、プロジェクトで使用できるようになります:

const jokes = require('./jokes.json');

console.log(jokes[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."

これは同期的な方法であることに注意してください。つまり、プログラムは続行する前にファイル全体を解析し終わるまで停止します。非常に大きな JSON ファイルはプログラムの遅延を引き起こす可能性があるため、注意が必要です。

また、この方法で JSON を解析すると、全体がメモリに読み込まれるため、この方法は静的な JSON ファイルに使用するのが最適です。プログラムが実行中に JSON ファイルが変更されると、プログラムを再起動して更新された JSON ファイルを解析するまで、それらの変更にアクセスできません。

fs.readFileSync() と JSON.parse() を使用して JSON ファイルを解析する方法

これは、Node.js プロジェクトで JSON ファイルを解析するどちらかというと古典的な方法 (他に適切な言い方がないので) です。ファイルを fs (ファイルシステム) モジュールで読み取り、次に JSON.parse() で解析します。

fs.readFileSync() メソッドの使い方を見てみましょう。まず、プロジェクトに fs モジュールを追加します:

const fs = require('fs');

次に、jokes.json ファイルの出力を保存する新しい変数を作成し、それに fs.readFileSync() を割り当てます:

const fs = require('fs');
const jokesFile = fs.readFileSync();

fs.readFileSync() にはいくつかの引数があります。最初の引数は読み込みたいファイルへのパスです:

const fs = require('fs');
const jokesFile = fs.readFileSync('./jokes.json');

しかし、この状態で jokesFile をコンソールにログ出力すると、次のようになります:

<Buffer 5b 0a 20 20 7b 0a 20 20 20 20 22 63 61 74 65 67 6f 72 69 65 73 22 3a 20 5b 22 64 65 76 22 5d 2c 0a 20 20 20 20 22 63 72 65 61 74 65 64 5f 61 74 22 3a ... 788 more bytes>

これは、fs モジュールがファイルを読み取っているものの、ファイルのエンコーディングや形式がわかっていないことを意味します。fs は JSON のようなテキストベースのファイルだけでなく、ほとんどのファイルを読み込むために使用できるため、ファイルがどのようにエンコードされているかを指定する必要があります。

テキストベースのファイルの場合、エンコーディングは通常 utf8 です:

const fs = require('fs');
const jokesFile = fs.readFileSync('./jokes.json', 'utf8');

今度は jokesFile をコンソールにログ出力すると、ファイルの内容が表示されます。

しかし、これまでのところ、単にファイルを読み取っているだけで、それはまだ文字列です。jokesFile を使用可能な JavaScript オブジェクトや配列に解析するために、別のメソッドを使用する必要があります。

そのために、JSON.parse() を使用します:

const fs = require('fs');
const jokesFile = fs.readFileSync('./jokes.json', 'utf8');
const jokes = JSON.parse(jokesFile);

console.log(jokes[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."

その名前が示すように、JSON.parse() は JSON 文字列を受け取り、JavaScript のオブジェクトリテラルまたは配列に解析します。

require メソッドと同様に、fs.readFileSync() は同期メソッドであり、JSON でも他の種類のファイルでも、大きなファイルを読み込む場合、プログラムを遅くする可能性があります。

また、それはファイルを 1 回読み取り、メモリに読み込みます。ファイルが変更された場合、いずれかの時点でファイルを再度読み込む必要があります。この処理を簡単にするために、ファイルを読み込むための簡単な関数を作成すると良いでしょう。

次のようになります:

const fs = require('fs');
const readFile = path => fs.readFileSync(path, 'utf8');

const jokesFile1 = readFile('./jokes.json');
const jokes1 = JSON.parse(jokesFile1);

console.log(jokes1[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."

// the jokes.json file changes at some point

const jokesFile2 = readFile('./jokes.json');
const jokes2 = JSON.parse(jokesFile2);

console.log(jokes2[0].value); // "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."

fs.readFile() と JSON.parse() を使用して JSON を解析する方法

fs.readFile() メソッドは fs.readFileSync() に非常に似ていますが、非同期で動作します。これは、読み取るべき大きなファイルがあり、その処理が他のコードをブロックするのを避けたい場合に便利です。

基本的な例を以下に示します:

const fs = require('fs');

fs.readFile('./jokes.json', 'utf8');

これまでのところ、fs.readFileSync() と似ていますが、jokesFile のような変数には割り当てていません。非同期なので、fs.readFile() の後のコードはファイルの読み取りが完了する前に実行されます。

代わりに、コールバック関数を使用して、その内部で JSON を解析します:

const fs = require('fs');

fs.readFile('./jokes.json', 'utf8', (err, data) => {
  if (err) console.error(err);
  const jokes = JSON.parse(data);

  console.log(jokes[0].value);
});

console.log("This will run first!");

これにより、次のようにコンソールに出力されます:

This will run first!
Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris.

fs.readFileSync() と同様に、fs.readFile() もファイルをメモリに読み込みます。つまり、ファイルが変更された場合は、ファイルを再度読み込む必要があります。

また、fs.readFile() は非同期ですが、最終的には読み込んでいるファイル全体をメモリに読み込みます。巨大なファイルの場合は、Node.js のストリームを検討する方が良いかもしれません。

Node.js で JSON.stringify() を使用して JSON を文字列に変換する方法

最後に、Node.js で JSON を解析する場合、API の応答として JSON を返す必要があるかもしれません。

幸いなことに、これはブラウザと同じように機能します。JavaScript のオブジェクトリテラルや配列を JSON 文字列に変換するには、単に JSON.stringify() を使用します:

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

console.log(JSON.stringify(newJoke)); // {"categories":["dev"],"value":"Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."}

以上です！ブラウザと Node.js プロジェクトで JSON を操作する際に知っておくべきことについて、ほぼすべて説明しました。

さあ、思うままに JSON を解析したり文字列に変換したりしてください。

この記事に不足している点を見つけましたか？あなたのプロジェクトではどのように JSON を解析していますか？Twitter で教えてください。

ほとんどのネットワーク構成では、デフォルトでルーターの DHCP サーバーが IP アドレスを動的に割り当てます。システムの IP アドレスを常に同じにしたい場合には、静的 IP を使用するように強制することができます。

この記事でその方法を学びましょう。Ubuntu で静的 IP を設定する方法を二つ説明します。

静的 IP アドレスは、次のような状況で使用されます:

• ポートフォワーディングの設定
• FTP サーバー、ウェブサーバー、またはメディアサーバーなど、システムをサーバーとして設定する場合

前提条件:

このチュートリアルに従うためには、次のものが必要です:

• Ubuntu のインストール、できれば GUI が使用できること
• システム構成ファイルを変更するための sudo 権限

コマンドラインで静的 IP を設定する方法

このセクションでは、静的 IP を設定するために必要なすべてのステップを詳しく見ていきます。

ステップ 1: 端末を起動する

ショートカット Ctrl + Shift + t を使用して端末を起動できます。

ステップ 2: 現在のネットワークに関する情報をメモする

設定に適切な変更を加えるために、現在の IP アドレス、サブネットマスク、およびネットワークアダプター名が必要です。

利用可能なアダプターとそれぞれの IP 情報の詳細を見つけるために、以下のコマンドを使用してください。

ip a

出力は以下のようになります:

私のネットワークでは、現在のアダプターは eth0 です。ただし、あなたのシステムでは異なる場合があります。

• 現在のネットワークアダプター名をメモする

現在のアダプターが eth0 であるため、以下の詳細が関連しています。

6: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc mq state UP group default qlen 1000
    link/ether 00:15:5d:df:c3:ad brd ff:ff:ff:ff:ff:ff
    inet 172.23.199.129/20 brd 172.23.207.255 scope global eth0
       valid_lft forever preferred_lft forever
    inet6 fe80::215:5dff:fedf:c3ad/64 scope link
       valid_lft forever preferred_lft forever

現在の IP アドレス 172.23.199.129 は動的に割り当てられていることを思い出しましょう。ネットマスクには 20 ビットが予約されています。ブロードキャストアドレスは 172.23.207.255 です。

• サブネットをメモする

サブネットマスクの詳細は、以下のコマンドを使用して見つけることができます。

ifconfig -a

あなたのアダプターに対する出力を探して、注意深く読んでください。

クラスとサブネットマスクに基づくと、私のネットワークの使用可能なホスト IP 範囲は、172.23.192.1 から 172.23.207.254 までです。

サブネット分割は広範なトピックです。サブネット化や使用可能な IP 範囲に関する詳細は、この記事を参照してください。

ステップ 3: 設定変更を行う

Netplan は、最新の Ubuntu バージョンのデフォルトのネットワーク管理ツールです。Netplan の設定ファイルは YAML を使用して書かれ、拡張子は .yaml で終わります。

注意: 構成ファイル内のスペースに注意してください。これらは構文の一部です。適切なインデントがないと、ファイルが正しく読み取られません。

• /etc/netplan にある netplan ディレクトリに移動する

ls で /etc/netplan ディレクトリの中身を確認します。

ファイルが見当たらない場合は、作成することができます。名前は何でもかまいませんが、慣例としては 01- から始まり .yaml で終わるようにします。数字は、複数の設定ファイルがある場合に優先度を設定します。

ファイル名 01-network-manager-all.yaml を作成しましょう。

ファイルにこれらの行を追加しましょう。ここから段階的にファイルを構築します。

network:
 version: 2

Netplan 構成ファイルの最上位ノードは、version: 2 を含む network: マッピングです (これはネットワーク定義バージョン 2 を使用していることを意味します)。

次に、全体のネットワークを制御する renderer を追加します。デフォルトでは renderer は systemd-networkd ですが、私たちは NetworkManager に設定します。

私たちのファイルは次のようになります:

network:
 version: 2
 renderer: NetworkManager

次に、ethernets を追加し、先ほどステップ 2 で調べたネットワークアダプター名を参照します。他にも modems:、wifis:、または bridges: などのデバイスタイプがサポートされています。

network:
 version: 2
 renderer: NetworkManager
 ethernets:
   eth0:

静的 IP を設定しようとしているので、このネットワークアダプターには IP アドレスを動的に割り当てたくありません。よって、dhcp4 を no に設定しましょう。

network:
 version: 2
 renderer: NetworkManager
 ethernets:
   eth0:
     dhcp4: no

次に、ステップ 2 でメモした特定の静的 IP を、私たちのサブネットと使用可能な IP 範囲に基づいて指定します。それは 172.23.207.254 でした。

次に、ゲートウェイを指定します。これは IP アドレスを割り当てるルーターまたはネットワークデバイスです。私の場合は 192.168.1.1 です。

network:
 version: 2
 renderer: NetworkManager
 ethernets:
   eth0:
     dhcp4: no
     addresses: [172.23.207.254/20]
     gateway4: 192.168.1.1

次に、nameservers を定義します。ここに DNS サーバーやセカンダリ DNS サーバーを定義します。ここでは、第 1 の値は Google のプライマリ DNS サーバーである 8.8.8.8、第 2 の値は Google のセカンダリ DNS サーバーである 8.8.4.4 にします。これらの値は、あなたの要件に応じて異なる場合があります。

network:
 version: 2
 renderer: NetworkManager
 ethernets:
   eth0:
     dhcp4: no
     addresses: [172.23.207.254/20]
     gateway4: 192.168.1.1
     nameservers:
         addresses: [8.8.8.8,8.8.8.4]

ステップ 4: 変更を適用してテストする

変更を永続的に適用する前に、まず変更をテストすることができます。次のコマンドを使用します:

sudo netplan try

エラーがなければ、この設定を適用するかどうか尋ねられます。

最後に、コマンド ip a を使用して変更をテストします。そうすると、静的 IP が適用されていることがわかります。

GUI を使用して静的 IP を設定する方法

Ubuntu の GUI / デスクトップを介して静的 IP を設定するのは非常に簡単です。以下が手順です:

• settings を検索する
• 変更したいインターフェースに応じて、Network または Wi-Fi タブをクリックする
• インターフェース名の横にある歯車アイコンをクリックしてインターフェースの設定を開く
• IPV4 タブで「Manual (手動)」を選択し、静的 IP アドレス、ネットマスク、ゲートウェイを入力する
• Apply ボタンをクリックする

• コマンド ip a を使用して確認する

結論

この記事では、Ubuntu で静的 IP を設定する 2 つの方法をカバーしました。この記事が役立つことを願っています。

このチュートリアルから学んだ中でお気に入りのことは何ですか？X / Twitter で教えてください！

他の投稿はこちらで読むことができます。

PHP の explode() 関数は文字列を配列に変換します。文字列の各文字には 0 から始まるインデックスが付けられます。組み込みの implode() 関数と同様に、explode() 関数はデータ (文字列) を変更しません。

explode() 関数の構文

explode() 関数は三つのパラメータを取ります。

• 区切り文字「seperator」
• 配列に変更する文字列「string」
• 上限「limit」

全体の構文は以下のようになります。

explode(seperator, string, limit)

implode() 関数は区切り文字が指定されていなくても動作しますが、explode() 関数は区切り文字がないと動作しません。ですから、文字列を配列に分割する場合、区切り文字が必要です。limit パラメータには、期待される配列の要素数を指定することができます。これは任意のパラメータです。

implode() の例

この例で、文字列が「Hello World」とします。もし、この文字列を explode() 関数に入力した場合、Hello には 0 のインデックスが付けられて、World には 1 のインデックスが付けられます。配列はゼロベースのインデックス付けであることを忘れないでください。

$str = "Hello world";
$newStr = explode(" ", $str);

// 配列を出力するので、print_r() を使うことができます。
print_r($newStr); 

もし explode() 関数の上限を指定したら、インデックスは上限に指定された数を超えることはありません。例えば、もし 2 を指定したら、全ての文字列が表示されますが、インデックスは 2 を超えません。

$str = "CSS, HTML, PHP, Java, JavaScript";
$newStr = explode(" ", $str, 2);

// 配列を出力するので、print_r() を使うことができます。
print_r($newStr); 

最初の要素はインデックス 0 を取り、残りのコンマで区切られた要素は 1 を取ります。インデックスは、指定された 2 の上限を超えることはありません。

下記の explode() 関数は、文字列内のスペースを見て、文字列を配列に分割します。もし異なる二つの単語を繋げて入力した場合、それらは一つとして扱われます。

$str = "CSS HTMLPHP Java JavaScript";
$newStr = explode(" ", $str);

// 配列を出力するので、print_r() を使うことができます。
print_r($newStr); 

HTML と PHP が一緒に出力されたのは、その間にスペースがなかったためです。

結論

この記事では、PHP の explode() 関数の使い方を学びました。

区切り文字がなくても動作する implode() とは異なり、explode() では区切り文字が非常に重要です。区切り文字を指定しないと、explode() は期待通りに動作しませんので、注意してください。

$str = "CSS, HTML, PHP, Java, JavaScript";
$newStr = explode($str, 2);

// 配列を出力するので、print_r() を使うことができます。
print_r($newStr); 

もし区切り文字が空の文字列だった場合、エラーが発生します。

お読みいただき、ありがとうございました。