JavaScriptの実践編！関数とメソッドについても解説！

【iOSショートカットで学ぶ！プログラミング教室】これまで3回に渡って解説してきたJavaScript編もいよいよクライマックスです！

今回は、実際にJavaScriptでコードを書いて実行し、補足として「関数」と「メソッド」についても解説していきます。

これまでの内容をフル活用&新しい知識を習得していくので、もし過去の記事を見ていない方がいらっしゃれば、先にそちらをご覧ください！

それでは、Let’s プログラミング！

ショートカットを作成しよう！

それでは、JavaScriptを使ってショートカットを作成していきましょう！

今回作るショートカットは、「Webページの見出しの内容を取得する」ショートカットです！

JavaScriptのコードを書くのは後回しにして、ショートカットの雛形だけ先に作っておきましょう！

① 新規ショートカットの作成画面から「アクションを追加」を選択し、検索欄に「WebページでJavaScriptを実行」と入力しアクションを追加します。

② 「”Webページ”に対してJavaScriptを実行」の”Webページ”をタップし、「ショートカットの入力」を選択します。

③ 「”指定なし”から”任意”の入力を受け取る」の”指定なし”をタップし、「共有シートに表示」をオンにする。

④ 検索欄に「クイックルック」と入力しアクションを追加します。

⑤ 最後のアクションが「”JavaScript”の結果をQuick Lookで表示」となっているのを確認し、ショートカットの名前とアイコンを設定します。

これで、ショートカットの雛形はできました！

JavaScriptのコードを設定しよう！

続いて、「WebページでJavaScriptを実行」アクションにデフォルトで入っているコードを書き換えていきましょう！

① まずは、「WebページでJavaScriptを実行」アクションにデフォルトで入っているコードを削除してください。

② 続いて、以下のコードをコピーしてください。

var result = [];

// ページ内の見出しを取得
var elements = document.querySelectorAll("h2");
if (elements.length < 30) {

for (var element of elements) {
result.push(element.innerText);
}

} else {
var message = "要素が多すぎます";
result.push(message);
}

// completionを呼び出して終了
completion(result);

③ コピーしたコードを、「WebページでJavaScriptを実行」アクション内にペーストします。

これで、JavaScriptのコードの準備も完了です！

コードをざっと見ただけでも、これまで学習してきた内容が組み合わさっているのが分かるのではないでしょうか？

とはいえ、知らないこともたくさん出てきていると思います。

コードの解説は後ほど詳しくしていきますので、現段階では
「これは変数で…これはfor文か…」
みたいな感じで軽く目を通しておいていただければ大丈夫です！

ショートカットを実行してみよう！

では、ショートカットを実行してみましょう！

① Safariで適当なWebページを開き、「共有」ボタンをタップします。

② 下にスクロールし、先ほど作成したショートカットをタップしてください。

③ アクセス許可画面ができるので、「許可」をタップします。

④ 開いているWebページの見出しが出るor”要素が多すぎます”と出ていれば成功です。

もし、上手くいかない場合は以下からショートカットをダウンロードしてみてください！

「Webページの見出しの内容を取得する」ショートカット

また、ショートカットでJavaScriptを実行する設定をしていない方は第6回の記事をご参照くださいませ！

コードの解説

では、このショートカットで使ったコードの解説をしていきます。

var result = [];

// ページ内の見出しを取得
var elements = document.querySelectorAll("h2");
if (elements.length < 30) {

for (var element of elements) {
result.push(element.innerText);
}

} else {
var message = "要素が多すぎます";
result.push(message);
}

// completionを呼び出して終了
completion(result);

上から順番に解説していきます。

1行目

var result = [];
これは「result」という名前の配列を設定しています。

配列については第7回で詳しく説明したので、ここは問題ないかと思います。

2行目

// ページ内の見出しを取得

「めちゃめちゃ日本語書いてある…」
と驚いたかもしれません。

文章の前に「//」がありますよね。

これは「この行はプログラムとして認識しなくてOKです！」という印です。

コードの説明を書く際によく利用します。

このように「//」を使って、プログラムとして認識させないようにすることを「コメントアウト」と言います。

コメントアウトを使えると、自分の書いたコードを読みやすくしたり、時間が経って見直した時に思い出しやすくなったりするので便利です。

コメントアウト、ぜひ覚えておきましょう！

3行目

var elements = document.querySelectorAll("h2");

これは一瞬理解に苦しむと思います。

特に右側ですよね。
document.querySelectorAll("h2")

ここでは、JavaScriptに元々備わっている機能を使ってWebページ上から見出しの要素を取得しています。

色々と説明したいところではあるのですが、今は「お決まりの書き方」として捉えていただければと思います。

そして、右側で取得した要素を「elements」という名前の配列として設定しているというわけです。

※ document.querySelectorAll(“h2”) は 複数の値が取得されるので、変数ではなく「配列」として設定できます。

4行目-13行目 if文

if (elements.length < 30) {

for (var element of elements) {
result.push(element.innerText);
}

} else {
var message = "要素が多すぎます";
result.push(message);
}

ここでは、if文とfor文が組み合わさっています。

一旦、if文の中身は無視して考えると、こうなります。
if (elements.length < 30) {
処理A
} else {
処理B
}

if文の条件に「elements.length < 30」とあります。

「配列名.length」とすると、その配列のデータ数が取得できます。

今回の場合は、elementsという名前の配列のデータ数を取得し「Webページから取得された見出しが何個あるのか」判断しようとしています。

そして、

もし取得される見出しが30個より少なければ、処理Aを実行
その他の場合（取得される見出しが30個以上の場合）は処理Bを実行

と条件分岐するように設定したわけです。

4行目-13行目 if文 処理A for文

if (elements.length < 30) {

for (var element of elements) {
result.push(element.innerText);
}

}

コードから「取得される見出しが30個より少ない場合」で条件分岐した部分を切り出すと、以上のようになります。

中身は「for文」で書かれていますね。
for (var element of elements) {
result.push(element.innerText);
}

「elements」という配列の中から、データを「element」という変数として取り出し、その1つ1つに対して繰り返しをしています。

result.push(element.innerText);

ここでは、取り出した1つ1つの見出しのテキストを「result」という名前の配列に追加しています。

「配列名.push(データ)」とすることで、その配列に( )内のデータを追加することができるのです。

そして、「element.innerText」の箇所ですが、「取り出した要素.innerText」とすることで、要素のテキストをデータとして設定できます。

ただし、これは、
2行目のdocument.querySelectorAll(“h2”) で取った要素だからできることです。

詳しく説明するとかえって分かりにくくなってしまうので、今は「へー、そんなこともできるんだ〜」ぐらいに思っていただけると幸いです。

4行目-13行目 if文 処理B

else {
var message = "要素が多すぎます";
result.push(message);
}

if文の「その他の場合（取得される見出しが30個以上の場合）」の処理を抜き出すと、このようになります。

この箇所は、これまでの内容で説明できますね。
var message = "要素が多すぎます";
で「message」という名前の変数に「”要素が多すぎます”」という文字列データを設定し、

result.push(message);
という箇所で、「result」配列に変数messageのデータを入れています。

最後の部分

// completionを呼び出して終了
completion(result);

1行目は、コメントアウトをしてコードの説明をしていますね。

completion(result);
これは、ショートカットでJavaScriptを実行して何を結果として出力するのかを決めています。

ショートカット作成時に「JavaScriptの結果」という変数がありましたね。

completion( )の( )内に入れたデータが「JavaScriptの結果」になります。

ですので、completion(result)とすることで、「result」配列を「JavaScriptの結果」として出力するよう設定できたわけです。

ちなみに、ショートカットで「JavaScriptの結果」を利用しない場合も、「completion( )」というように() 内を空白にして、コードの最後に記述しなければならないので注意です。

補足：関数とメソッドについて

今回ショートカットで使ったコードの意味が理解できましたでしょうか？

ここで、軽く補足させてください。

「配列名.push()」

「取得した要素.innerText」

など、今回「〇〇.××」という形のものが多く出ました。

「何をしているのか、よくわからなかった…」
という方も多いはずです。

「.××」の部分は「メソッド」という言葉で説明できます。

メソッドとは、「○○」の箇所の特定の形式（変数, 配列など）に紐づいた「関数」のことです。

「関数」とは、簡単に言うと処理をひとまとめにしたものです。

例えば、

・Aという配列を定義する
・Aのデータを全て大文字にする

という処理を記述した複数行のコードを「upperA」という名前の「関数」として設定すれば、「upperA」と書くだけで簡単に以上の処理を行えるようになります。

JavaScriptには、事前に用意されている関数がたくさんあります。

そのうち、「〇〇.××」と言う形式で呼び出せる「××」（という関数）が「メソッド」というわけです。

メソッドや関数がどういったものが理解できたでしょうか？

今回は分かりやすさを重視した説明になっていますので、枝葉となるような情報は省いています。

とりあえず雰囲気を掴んでいただけたら幸いです。

終わりに

今回の記事では、

• ショートカットでJavaScriptを書いて実行
• メソッドと関数について説明

といったことをしました。

実践もしつつ、新しいこともたくさん学習しましたので、かなりボリューミーな内容だったと思います。

これで、【iOSショートカットで学ぶ！ショートカット教室】のJavaScript編は終了です。

本当にお疲れ様でした。

ここまで読み進められた方は、JavaScriptの基礎部分は理解できていると言って良いでしょう。

もし、「もっと本気で学びたい！」という方が多数いれば、より詳細な解説記事を出すことも検討します！

次回から、【iOSショートカットで学ぶ！ショートカット教室】Web API編に突入します。

「Web API」を理解し、実際に使うところまで丁寧に解説していきます。

お楽しみに！

次回の記事はこちら！

プログラミング教室の記事一覧