ついに、Web APIを使ってショートカットを作る実践編に突入しました。

前回の記事では、「知識編」として

• Web APIとは何か
• ショートカットでWeb APIを使う方法の概要

について解説しました。

まだ見ていない方は先にこちらの記事をご覧ください！

あわせて読みたい

Web APIって何？iPhoneショートカットで活用する方法！ みなさん、「Web API」って知っていますか？ 全く知らない、聞いたことがあるけど使ったことがない、という人が多いのではないでしょうか？ Web APIを使いこなすことが…

今回は、Web APIの実践編として、
「YouTubeの急上昇の1位の動画タイトルと再生数を取得する」ショートカットを作成していきます。

ついに、【iOSショートカットで学ぶ！プログラミング教室】シリーズも最終回となりました。

これまで学習してきた内容もフル活用していきますので、今回はフィナーレにふさわしい回になると思います。

ぜひ、最後までご覧ください！

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

今回のショートカットを作成する流れ

まずは、「YouTubeの急上昇の1位の動画タイトルと再生数を取得する」ショートカットを作成する流れをざっくりと掴んでいただきます。

ショートカットでWeb APIを使う方法は以下の通りでした。

1. Web APIを探す
2. 「URLの内容を取得アクション」でデータを取得する
3. 「辞書の値を取得」アクションでデータを取り出す

前回の記事では、それぞれのステップでやることをざっくりと説明しましたね。

今回も以上の３ステップに沿ってショートカットを作成していきます。

また、今回のショートカット作りには、パソコンを併用することが望ましいです。

特に、Web APIを探すのに使う「Rakuten Rapid API」というサイトは、モバイル表示すると非常に見にくくなってしまいます。

ですので、「Rakuten Rapid API」というサイトはパソコンで開いていただいて、ショートカット作りはモバイル（もしくはMac）で行ってもらうのが良いと思います。

それでは、Web APIを登録していくところから始めましょう！

Web APIの登録

Rakuten Rapid APIの会員登録

まずは、「Rakuten Rapid API」というサイトの会員登録をしていきましょう！

① https://api.rakuten.net/ を開き、「新規登録」をタップします。

② 必須項目を入力し、完了

「Youtube Search and Download」の登録

それでは、「Youtube Search and Download」というWeb APIを登録していきます！

① 検索窓に「Youtube Search and Download」と入力し検索し、一番上のWeb APIを選択します。

② 「登録してテスト」をタップします。

③ Basicのプランを選択して完了です。

これでWeb APIの登録は完了です。

すごく簡単ですよね！

ただ、1つWeb APIを使う上で、注意点があります。

それは、使う量に応じて料金がとられることです！

今回登録した「Youtube Search and Download」では、無料枠だと1日あたり500回しか使えないように制限されています。

ですので、使用回数が500回を越えると自動で使えなくなります。

しかし、そういった使用制限をせず、

「はい、10回以上使ったから1000円ね！」

みたいな課金形態のWeb APIもあるので注意です。

Web APIを選定する際には、自分で料金プランや作成者が信頼できるかどうかを見極めることが重要です。

怪しいWeb APIも多く存在するので、よく調べてから使うようにしましょう！

「URLの内容を取得」アクションでデータを取得

それでは、ショートカットの作成に移ります。
※ 「Rakuten Rapid API」はまだ使うので、閉じないでおきましょう。

「Youtube Search and Download」からYouTube急上昇動画のデータを取得していきましょう！

全部で9ステップです！

詳しい説明は後ほどします！

① 新規ショートカットを作成し、「URLの内容を取得」アクションを追加します。

② Rakuten Rapid APIの「Youtube Search and Download」ページの「エンドポイント」の場所に移動します。

③ 左バーにある、「GET Trending」をクリックし、右側の「（Node.js）Unirest」というドロップダウンをタップし、「JavaScript」>「fetch」を選択します。

④ 真ん中の列「オプションパラメータ」の「type」を”mu”から”n”に、「hl」を”en”から”ja”に、「gl」の”US”を”JP”に変更する。

⑤ 右側のコードスニペット内の”https://youtube-search-and-download.p….”と、「x-rapidapi-key」「x-rapidapi-host」それぞれの値をコピー（メモアプリなどで保存）する。

⑥ ショートカットの「URLの内容を取得」アクションの”URL”の部分に”https://youtube-search-download.p…”をペーストする。

⑦ URLの内容を取得」アクションのヘッダを開き、2つ新規ヘッダを追加して画像のようにして「x-rapidapi-key」「x-rapidapi-host」の値を先をほどコピーしたものに設定する。

⑧ 画面右下の実行ボタンを押して、以下のように出力されれば成功です！

解説

「とりあえず出来たけど、理解ができなかった」という方が多いのではないでしょうか？

あまり詳細には踏み込みませんが、「Web APIを使えるようになる」ということを目的としてざっくりと解説します！

おそらく理解しにくかったのは、以下の「コードスニペット」の部分ですよね。

③ で、「（Node.js）Unirest」から「JavaScript」>「(JavaScript) fetch」に変更しましたよね。

「Node.jsとは何か」「fetchとは何か」という難しいことは置いておいて、
「ショートカットでWeb APIを使う時は”(JavaScript) fetch”にする！」と覚えてしまいましょう。

そうして設定された「コードスニペット」の内容は、ショートカットの「URLから内容を取得」アクションの設定項目と対応します。

以下の二つの画像を見比べてみてください。

この事実さえ知っていれば、他のWeb APIを使う時も同様の手順で使えるようになります。

「辞書の値を取得」アクションでデータを取り出す

「URLを取得」アクションでWeb APIからYouTube動画のデータを取ってくることができました。

前回の記事でも説明したように、Web APIから取り出したデータは「辞書」の形式になっています。

Rakuten Rapid APIの「Youtube Search and Download」ページ右側の「返信例」というところを見てみましょう。

ここでは、Web APIから取り出したデータがどのようなものかを見ることができます。

データを全て開いてみると、以下のようになっています。

何がなんだか分からないと思いますが、既に「辞書」の使い方を理解した皆さんであれば、解読することが可能です。

Web APIのデータは「辞書の形式」と言いましたが、辞書の形式をコードで書くと先ほどの画像のようになるのです。

コードで書くと「{  }」で囲われているのが「辞書」の印になり、
「{キー ： 値}」という書き方になります。

それを踏まえて、今回Web APIから取得したデータを解読していきましょう！

・全体のデータが「辞書①」（{  }で囲われている）である。
・「辞書①」の中に、キーが”contents”で、値が「配列A」となっているデータがある。
・「配列A」のインデックスが”0”の値に「辞書②」のデータがある。
・「辞書②」の中に、キーが”video”で値が「辞書③」のデータがある。
・「辞書③」の中に、様々なキーで動画の情報が入っている。

「配列A」の中にはインデックスが”0”から”14”まで、それぞれの値に辞書入っています。

配列Aのインデックスが”0”の値である辞書には、YouTube急上昇1位のデータが
配列Aのインデックスが”1”の値である辞書には、YouTube急上昇2位のデータが
配列Aのインデックスが”2”の値である辞書には、YouTube急上昇3位のデータが

入っています。

言葉で言われてもイメージがつきにくいと思うので、

以上の説明を画像やご自身のパソコンでコードを見ながら順に理解していただきたいです。

ポイントは、「辞書①」の中に、キーが”contents”で、値が「配列A」のデータがあるということ。

そして、「配列A」のインデックスが”0”の値が「辞書②」のデータであるということです。

「配列..?インデックス？」と忘れてしまった方は、第5回や第7回の内容を復習してみてください！

なんとなくイメージがついたところで、急上昇動画のタイトルと再生回数をショートカットで取り出していきましょう！

前回の記事で、ショートカットで「辞書の中にある辞書の値を取り出す方法」については解説していますので、もし忘れた方は復習してみてください！

たった２ステップで完了です。

① 「辞書の値を取得」アクションを追加し、「”URLの内容”内の”contents.1.video.title”の値を取得」となるよう設定します。

② 「辞書の値を取得」アクションを追加し、「”URLの内容”内の”contents.1.video.viewCountText”の値を取得」となるよう設定します。

これでYouTubeの急上昇1位の動画のタイトルと再生回数を取得することができました！

ここで補足説明ですが、
辞書の値となっている配列の中からデータを取り出すときは、キーにその配列のインデックスを指定することで取り出すことができます！

図解すると以下の通りです。

そして、ショートカットの「辞書の値を取得」アクション内で
”contents.1.video.title”の箇所を”contents.0.video.title”としないのは、ショートカットのリスト（配列）のインデックスが「1から」だからですよね！

ショートカットを完成させよう！

さて、あとは取得したデータを表示させるだけです！

もうひと頑張りやっていきましょう！

① 「テキスト」アクションを追加し、内容を以下の画像のように設定する。

② 「クイックルック」アクションを追加し、「”テキスト”をQuick Lookで表示する」となるように調整する。

これでショートカットの作成は終了です！

実行し、以下のように表示されれば成功です！！

終わりに

今回の『Web API』実践編で、【iOSショートカットで学ぶ！ショートカット教室】もフィナーレです！

特にこの「Web API」編はこれまでの総まとめ的な内容だったので、非常に難しかったと思います。

ここまで全ての記事を読んだあなたは、プログラミングの知識が周りの人から頭ひとつ抜けていることは間違いありません。

【iOSショートカットで学ぶ！ショートカット教室】シリーズは全11回で、およそ4万5000文字もあります。

それを読み切ったこと自体に自信を持っていただきたいです。

むしろ、私の稚拙な説明をここまで読み理解できたのは、あなたに「プログラミングの素養があるから」なのかもしれません。

もし少しでも「プログラミングって面白い！」と思っていただける方が１人でもいたら、このシリーズを書いてよかったと心から思えます。

最後までお読みいただき、本当にありがとうございました！

もしかすると、今後より詳しい内容を発信するシリーズを開始するかもしれませんので、お楽しみに！

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

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

The post 実践！iPhoneショートカットでWeb APIを使いこなそう！ first appeared on オートクック！.

みなさん、「Web API」って知っていますか？

全く知らない、聞いたことがあるけど使ったことがない、という人が多いのではないでしょうか？

Web APIを使いこなすことができれば、ショートカットで出来ることが一気に広がります。

例えば、

・Amazonの価格を調べるツールの作成
・YouTubeの急上昇の動画をすぐに取得
・ぐるなびの検索機能をショートカット内に組み込む

などです。

本記事では

• そもそもWeb APIとは何か
• iOSショートカットでWebAPIを使う流れ
• WebAPIを使うのに必要な重要アクション

について解説していきます！

【iOSショートカットで学ぶ！プログラミング教室】今回で最終回…と言いたいところだったのですが、「Web API」編は「知識編」と「実践編」の2部構成にすることにしました！

「Web API」編はプログラミングの初心者さんには理解が難しいところが多くなってしまうかもしれません。

しかし、「Web APIを使える」ということを目的として、なるべく分かりやすく専門用語は使わない方針で進めていきますので、ぜひ最後までご覧ください！

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

Web APIとは

まずは、Web APIとは何かを解説していきます。

Web APIとは、すごく簡単に言うと「画面のないアプリ」のことです。

普通のアプリだったら、画面がありますよね？

画面の中にあるボタンなどをタップしたり、フォーム内にテキストを入力したりすることで、
・検索
・投稿
・いいね
などのアプリの機能が使えるわけです。

一方で、Web APIでは画面をタップしたりテキスト入力したりすることなく、これらの機能が使えます。

私たち人間がアプリの画面上でタップやテキスト入力などをする代わりに、コンピューターが自動でアプリの機能を使ってくれるイメージです。

ショートカットでは、リマインダーやLINEなどのアプリ画面を開くことなく「アクション」を使ってアプリの機能を使うことができますよね。

Web APIを使っても、同じように「アプリの画面を開かず、アプリの機能を使える」ということができます。

人間が1からアプリの画面を操作したりするよりも、コンピューターが自動で操作してくれた方が楽ですし早いですよね。

そのため実は、YouTubeやLINEなどの「画面があるアプリ」も、コンピューターが自動で操作するための「画面のないアプリ」（Web API）が用意されていることが多いです。

「画面がない、コンピューター用のアプリ」が「Web API」と考えていただければと思います。

※イメージです。

ショートカットでWeb APIを使う方法

Web APIがどのようなものか、ざっくりと理解できましたでしょうか？

使い慣れて初めて分かる部分もあると思いますので、とりあえず先に進みながら理解を深めていきましょう。

ここでは、ショートカットでWeb APIを使う方法を解説します。

おおまかな流れは以下の通りです。

1. Web APIを探す
2. 「URLの内容を取得アクション」でデータを取得する
3. 「辞書の値を取得」アクションでデータを取り出す

Web APIを探す

まずは、使いたいWeb APIを探しましょう。

Web APIを探せるサイトは沢山ありますが、ここでは最もポピュラーな「Rakuten Rapid API」で探していきましょう。

以下のように「Rakuten Rapid API」では無料で便利なWeb APIがたくさん使えるようになっています。

使いたいWeb APIをクリックしてみると、以下のような画面になります。

Web APIの使い方や料金などがこの画面で確認でき、登録することが可能です！

詳しい画面の見方や手順は次回の実践編で解説しますが、もし興味がある方は色々物色してみてください！

「URLの内容を取得」アクションでデータを取得する

使いたいWeb APIが決まったら、ショートカットの作成を始めます。

まず使うのが「URLの内容を取得」アクションです。

「URLの内容を取得」アクションをショートカット内に追加し、アクションの中身を開いてみましょう。

このアクションを使って、Web APIに接続しデータを取得していきます。

詳しくは次回の実践編で手を動かしながら理解していきますが、Web APIからデータを取得する流れをざっくりと説明しておきます。

1. 「”URL”の内容を取得」の”URL”の部分に、使いたいWeb APIのURLを入れる。
2. アクション内2行目の「方法」を決める。（GET? POST?…）
3. アクション内3行目の「ヘッダ」などに色々なデータを入れる。

今は全くイメージが掴めないと思いますが、問題ありません。

とりあえず、「URLの内容を取得」というアクションを使ってWeb APIからデータを取ってくるということだけ覚えておいてください！

「辞書の値を取得」アクションでデータを取り出す

「URLの内容を取得」アクションを使ってWeb APIから取得したデータは「辞書」形式のデータになっています。

そこで「辞書の値を取得」アクションを使い、取得したデータをショートカット内で活用していきます。

「まず、”辞書の形式のデータ”が分からないのですが…」

という方も多いと思います。

そこで、まずは「辞書」形式のデータについて解説しておきましょう。

「辞書」形式のデータとは？

「辞書」形式のデータとは、”キー”と”値”がセットで保存されているデータのことです。

「“キー”と”値”がセット」と言われてもよく分からないですよね。

ここで思い出して欲しいのが「変数」です。

変数は、箱に名前をつけて値（データ）を保存していましたね。

“変数の名前”と”値”をセットで保存していたわけです。

“キー”とは、変数で言うと「変数の名前」
“値”とは、変数で言うと「変数の中に入れる値（データ）」
と言えるでしょう。

そして、「辞書」は”キー”と”値”がセットで保存されるデータを複数保存できます。

変数が辞書の中に複数保存されるイメージです。

辞書の中に入っているデータは、”キー”指定すれば取り出すことができます。

以下のような辞書が用意されていた場合、

辞書から“名前”というキーを指定すれば「山田」、

“住所”というキーを指定すれば「東京」、

“職業”と言うキーを指定すれば「学生」というデータが取れます。

「変数のようなものを複数保存できるのが辞書だ」と覚えてもらって差し支えないでしょう。

ショートカットで辞書の値を取り出す

ショートカットで「辞書」形式のデータを取り出すには、「辞書の値を取得」アクションを使います。

データを取り出す具体例を見てみましょう。

「辞書の値を取得」アクションで、キーの部分に”名前”と指定することで、上の辞書から「山田」と言うデータを取得することができました。

一見難しそうに感じる辞書ですが、使い慣れると簡単に扱うことができます。

辞書の入れ子

また、「辞書の値に新たに辞書を入れ込むことができる」ということも覚えておきましょう。

まずは、こちらのイメージ図を見ていただきたいです。

「辞書1」の”キーA”とセットになっている値が「辞書2」になっていることが分かります。

「辞書1」の”キーA”を指定することで、「辞書2」全体（”キー”と”値”がセットになっている複数のデータ）を取り出すことが出来るというわけです。

では、このように辞書が入れ子になっている状態でデータを取り出すにはどうすれば良いのでしょうか？

こちらも具体例で考えます。

以下のような「辞書」を事例として考えます。

「辞書1」の”名前”というキーとセットになっている値が「辞書2」になっていて、「辞書2」の中には「日本人：山田」「アメリカ人：マイケル」という”キー”と”値”がセットになった複数のデータが辞書として格納されています。

ショートカットでこのような「辞書」を再現すると、以下のようになります。

ここで、辞書2から「マイケル」という値を取り出したいとしましょう。

「辞書の値を取得」アクションを追加し、以下のように設定します。

キーのところに「名前.アメリカ人」と設定していますね。

これで辞書2の中の「マイケル」という値を取り出すことができました。

このように「.」でキーを繋げてあげることによって、辞書内にある辞書の値を取り出すことができるのです。

辞書が入れ子状態になっている時の値の取り出し方はざっくりと理解できましたでしょうか？

Web APIから取得したデータは、「辞書が入れ子」状態になっているデータがほとんどです。

最初は辞書を扱うのに苦労すると思いますが、この苦労を乗り越えた先に待っている景色は素晴らしいものです。

この「辞書の値を取得」アクションを使ってデータを適切に取り出せるようになることで、「Web API」を最大限活用できるようになるからです。

これで、「ショートカットでWeb APIを使う方法」概要の説明を終わります！

終わりに

今回は、

• Web APIとは何か
• 「ショートカットでWeb APIを使う方法」の概要

について解説してきました。

知らない単語が多く出てきて困ってしまった方も多いと思います。

もし今回の内容が全て理解できていなくても、落ち込まないでください。

知らないことを身につけようと思った時は、必ず相応の時間がかかるものです。

ゆっくりと時間をかけて、知識を習得していきましょう！

次回、実践編で「Web API」を使ってショートカットを実際に作成していきます。

ついに【iOSショートカットで学ぶ！プログラミング教室】最終回です…！

手を動かす中で今回の内容が頭に入ることも多いと思いますので、ぜひチャレンジしてみてください！

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

The post Web APIって何？iPhoneショートカットで活用する方法！ first appeared on オートクック！.

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

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

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

あわせて読みたい

「JavaScript」とは？iPhoneショートカットで実行する方法を徹底解説！ iOSやMacで使えるショートカットアプリは、JavaScriptを実行できる。 そのようなことを聞いても 「なんとなく凄いのは分かるけど、イマイチ何ができるのか分からない…」…

あわせて読みたい

JavaScriptで「変数」と「配列」を扱う方法を学習しよう！ JavaScriptなどのプログラミング言語を0から学ぼうとすると、とても大変です。 知らない概念が多く、新しく覚えなければならないことが沢山あるからです。 しかし、【iO…

あわせて読みたい

「条件分岐」「繰り返し」をJavaScriptで行う方法を理解しよう！ 【iOSショートカットで学ぶ！プログラミング教室】の第8回となった今回は、 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」を理解し、実際に使うところまで丁寧に解説していきます。

お楽しみに！

次回の記事はこちら！

あわせて読みたい

Web APIって何？iPhoneショートカットで活用する方法！ みなさん、「Web API」って知っていますか？ 全く知らない、聞いたことがあるけど使ったことがない、という人が多いのではないでしょうか？ Web APIを使いこなすことが…

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

The post JavaScriptの実践編！関数とメソッドについても解説！ first appeared on オートクック！.

【iOSショートカットで学ぶ！プログラミング教室】の第8回となった今回は、

JavaScriptで「条件分岐」「繰り返し」を行う方法を学習していきます。

プログラミングの基本3要素は「順次」「条件分岐」「繰り返し」でしたね。

もし、それぞれの意味を忘れてしまった方は、第2回の記事で復習してみてください！

あわせて読みたい

iPhoneショートカットの「スクリプティング」とは？プログラミングの基本3要素を理解しよう！ iOSショートカットを作成する時に、アクションの追加画面には「スクリプティング」項目が出てきますよね。ショートカットを作ったことがある方なら、一度は見たことがあ…

そして第4回、第5回では、ショートカットで「条件分岐」「繰り返し」をショートカットで使いこなす方法を理解しました。

すでに、皆さんはその本質を理解していると言って良いと思います。

今回はこれまでに習得してきた知識をフル活用して、
ショートカットとJavaScriptとで一致している点と異なっている点を意識しながら学習していきましょう！

きっと理解が深まっていくのを感じるはずです。

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

JavaScriptで条件分岐をする方法

まずは条件分岐から学習していきましょう。

ショートカットで条件分岐をするとき、何のアクションを使っていたか覚えていますか？

「if文」でしたよね。

この「if文」はJavaScriptで条件分岐をする時も使います。

実はJavaScriptで条件分岐をする方法は「if文」以外にも多々あるのですが、最もよく使用されるのはif文です。

そのため、今回は「if文」に焦点を当てて解説していきます。

if文の書き方

まずは、if文をJavaScriptでどのように書くのかを見てみましょう。

if (条件) {
なんらかの処理
}

上のように記述すると、「条件」が正しい時に{ }内に書かれた処理をおこなうように設定できます。

「ショートカットだったら、”その他の場合”みたいなのなかった？」
と思われた方もいると思います。

「その他の場合」というのは設定した条件に合致しない時におこなうアクションを決めたい時に使いましたね。

ショートカットで言う「その他の場合」は、JavaScriptで言うと「else」になります。

実際に見た方が分かりやすいと思いますので、以下のコードを見てみましょう。

if (条件式) {
処理A
} else {
処理B
}

ショートカットのif文の画像と見比べてみると、構造が一緒だということが分かるでしょう。

なんとなくJavaScriptでif文を使うイメージが掴めたのではないでしょうか？

if文を複数使う

ショートカットでは「ネスト」するなどして、if文を複数使い条件分岐することができましたね。

以上のようにショートカットでif文をネストさせた時は、

このようになります。

JavaScriptでも「ネスト」は可能です。

先ほどの状態を、JavaScriptで「ネスト」したif文で再現すると以下のようになります。

if (条件A) {
処理A
} else {
if(条件B) {
処理B
} else {
処理C
}
}

※「アクション」を処理と言い換えています。

しかし、上のような記述は少し読みにくいですよね。

実はJavaScriptのif文には、複数の条件を設定した時も読みやすくなるような書き方が用意されています。

先ほどの記述を分かりやすい書き方に直すと、以下のようになります。

if (条件A) {
処理A
} else if (条件B) {
処理B
} else {
処理C
}

非常に分かりやすくなりました。

ポイントは、「else if (条件B)」の箇所でしょう。

「else if」で、ショートカットで言う”その他の場合”に細かい条件をプラスできたイメージです。

このように記述によって、

条件Aに合致する
→処理Aを実行

条件Aに合致せず、条件Bに当てはまる
→処理Bを実行

条件Aに合致せず、条件Bにも当てはまらない
→処理Cを実行

という複雑な条件分岐が簡単に記述することができました。

条件の設定方法

JavaScriptのif文では、条件を( )内に記述します。

if (条件) {
処理
}

条件部分にどんなことを書くかを具体例で見てみましょう。

var number = 10;

if (number >= 5) {
処理A
} else if (number == 2){
処理B
} else {
処理C
}

上のプログラムを解読すると、以下のようになります。

最初に「number」という変数（箱）に、10というデータを入れました。
そして、その「number」が5以上の時は、処理Aを実行します。
もし、「number」が5以上ではなく、2だった場合は処理Bを実行します。
もし、「number」が5以上ではなく、2でない場合は処理Cを実行します。

条件部分に「>=」や「==」などの記号が使われていますよね。

これを「比較演算子」と言います。

if文の条件の設定方法は様々ですが、「比較演算子」が最もよく使われます。

比較演算子を使うことで、左の値と比べて右の値が大きいのか、小さいのか、同じなのかを判断してくれます。

比較演算子の一覧と、使用例を図にしてみました。

注意すべきは最初の２つです。

“10”というのは、文字列として認識されます。

“山田”や”鈴木”などと同じです。

しかし、中身の数字としては10ですよね。

これは、10と同じと言えるのか、違うのか。

このように「文字としての数値」を判別するために、「==」「===」の2種類のイコールが用意されています。

「==」は”10”という文字列であっても中身の10という数字を見て判定してくれます。
なので、10 == “10” は条件として正しいと判断されます。

「===」では”10”という文字列は、あくまでも文字として扱われるので数字として認識されません。
それゆえ、10 === “10”は条件として誤りだと判断されるわけです。

比較演算子を使った条件設定の方法をだいたい理解できましたでしょうか？

これで、if文における条件設定の基礎はとりあえずOKです。

JavaScriptで繰り返しをする方法

条件分岐に続いて、JavaScriptで”繰り返し”をする方法について解説していきます。

ショートカットでは、「繰り返し」「各項目を繰り返す」などのアクションを使って”繰り返し”を行い、「リスト」が”繰り返し”において重要な役割を果たしていました。

ショートカットの「繰り返し」「各項目を繰り返す」などのアクションは、JavaScriptの「for文」に対応します。

そして、前回でも説明したようにショートカットの「リスト」は、JavaScriptの「配列」に相当します。

つまり、JavaScriptでは「for文」と「配列」を上手く使えれば、”繰り返し”をすることができるというわけです。

シンプルな繰り返し

まずは、「決められた回数同じ処理をおこなう」方法を知りましょう。

ショートカットでいうと、「繰り返し」アクションを使うものですね。

JavaScriptでは「for文」を使って、以下のように記述します。

for (var number = 0; number < 3; number++) {
繰り返したい処理
}

最初は何をしているのかよく分からないと思います。

特に、 (var number = 0; number < 3; number++) の部分ですね。

for文の( )内には３つ設定すべき項目があります。

「初期化式」「条件式」「増減式」です。

初期化式では、数字をデータとした変数を設定します。
上の例で言う、「var number = 0;」の部分です。

条件式では、初期化式で設定した変数の数字がどういった状態になるまで繰り返すかを設定します。
上の例で言うと、「number < 3」の箇所です。

増減式では、for文の{ }内で繰り返したい処理が1回終わるごとに、初期化式で設定した変数の数字にどれほどの増減をもたらすか、ということを設定します。
上の例で言うと、「number++」の部分になります。

number++というのは、変数numberの数字に1をプラスするという意味です。

「何だか、よく分からなくなってきた…」
と思っている方も多いと思います。

for (var number = 0; number < 3; number++) {
繰り返したい処理
}

ここで、こちらのプログラムを実行すると、どのような動きとなるか詳しく見てみましょう。

1. 「number」という名前で中身のデータが0の変数が定義されます。
2. 今、numberの値は0なので、条件式「number < 3」を満たします。
3. 繰り返したい処理を1回おこないます。
4. 処理が終わったら増減式の通りにnumberの値に1を足します。
5. 今、numberの値は1なので、条件式「number < 3」を満たします。
6. 繰り返したい処理をもう1回おこないます。
7. 処理が終わったら増減式の通りにnumberの値に1を足します。
8. 今、numberの値は2なので、条件式「number < 3」を満たします。
9. 繰り返したい処理をもう1回おこないます。
10. 処理が終わったら増減式の通りにnumberの値に1を足します。
11. 今、numberの値は3なので、条件式「number < 3」を満たしません。
12. 繰り返したい処理はせず、実行を停止します。

大体イメージがついたでしょうか？

for文の( )内に「初期化式」「条件式」「増減式」の3つを設定することで、{ }内の処理を繰り返す回数を決めることができるのです。

自分で1から初期化式や増減式を考えると大変ですが、

基本的に、

「初期化式」には、変数名 = 0;
「条件式」には、変数名 < 繰り返したい回数 – 1;
「増減式」には、変数名++

というように記述すれば、思い通りの回数を指定できます。

一見難しそうなfor文ですが、
このパターンに当てはめて作れば簡単に繰り返しをすることできます！

配列を使った繰り返し

「JavaScriptで繰り返しするのって難しいんだな…」と感じた方に朗報です。

実は初心者にとっては配列を使った繰り返し処理の方が、回数を指定する繰り返しよりも簡単に感じる場合が多いのです。

今回は、最初に書き方のパターンを紹介します。

for (var 変数名 of 配列名) {
処理
}

（var 変数名 of 配列名) という部分では、

ある配列から1つ1つデータを取り出し、それを新しい変数に入れているイメージです。

ショートカットで「リスト」から「各項目を繰り返す」アクションを使い「Rpeat Item（繰り返し項目）」としてリストのデータ1つ1つを取り出しているのと同じです。

ここで具体例を見てみましょう。

var nameList = [“山田”, “佐藤”, “鈴木”]

for (var name of nameList) {
処理
}

最初に3つの名前が入っている「nameList」という配列を定義しています。

そこから「for文」で、nameListの値の1つ1つを「name」という名前の変数に入れ、処理を繰り返しおこなっています。

1回目の処理では、nameに”山田”というデータが入り、
2回目の処理では、nameに”佐藤”というデータが入り、
3回目の処理では、nameに”鈴木”というデータが入る。

という流れです。

シンプルに回数を決めて繰り返しをおこなうよりも、はるかに簡単ですよね。

しかも、使う頻度でいうと配列を使った繰り返しの方が多いです。

次回の実践編でも、配列を使った繰り返しを使っていきますので、今回の説明で理解できない部分があれば何度か復習しておいてください！

終わりに

今回の記事では、

JavaScriptで「条件分岐・繰り返し」をする方法を解説しました。

なかなかボリューミーな内容だったと思います。

次回の実践編では、前回の第6回と今回の第7回の内容の総復習として、実際にJavaScriptのコードを書いてSafariで実行していきます！

JavaScript編のクライマックスとなりますので、どうぞお楽しみに！

次回の記事はこちら！

あわせて読みたい

JavaScriptの実践編！関数とメソッドについても解説！ 【iOSショートカットで学ぶ！プログラミング教室】これまで3回に渡って解説してきたJavaScript編もいよいよクライマックスです！ 今回は、実際にJavaScriptでコードを書…

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

The post 「条件分岐」「繰り返し」をJavaScriptで行う方法を理解しよう！ first appeared on オートクック！.

JavaScriptなどのプログラミング言語を0から学ぼうとすると、とても大変です。

知らない概念が多く、新しく覚えなければならないことが沢山あるからです。

しかし、【iOSショートカットで学ぶ！プログラミング教室】シリーズで、プログラミングの基本を身につけた皆さんであれば、他の方よりもはるかにプログラミング言語の学習効率が良くなります。

「これって、ショートカットのアレと同じか…」
と対比できれば、0から新しいことを学ぶよりも理解しやすいからです。

これから3回にわたって、これまでの【iOSショートカットで学ぶ！プログラミング教室】の内容を元に、JavaScriptの”超基本”を学習していきます！

厳密性や正確性にはこだわりすぎず、プログラミング初学者の方が理解しやすいように解説していきたいと考えています。

最後の実践編では、JavaScriptのコードを自分で書くところまでやっていきます。

今回はその助走段階として

• 変数の設定と呼び出し方
• 配列の使い方

について学んでいきます！

今後の内容すべての土台となりますので、時間をかけてしっかりと理解していきましょう！

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

変数の設定と呼び出し方

まずは、JavaScriptで変数を設定する方法を解説します。

「変数ってなんだっけ？」
と思われた方は第３回の記事で詳しく解説していますので、復習しておきましょう。

あわせて読みたい

【徹底解説！】「変数」って何？iPhoneショートカットを作りながらマスターしよう！ iOSショートカットの作成において、「変数」は非常に重要です。 「変数」を制すものがショートカットを制す、と言っても過言ではないでしょう。 しかし、ショートカット…

「変数はデータを入れる箱」でしたね。

ショートカットでは「変数を設定」アクションや「マジック変数」などを使って、変数を利用していました。

JavaScriptにおいても、変数は必要不可欠な要素になりますので、その設定方法は理解しておかなければなりません。

JavaScriptで変数を設定するには、以下のようなコードを書きます。

var name = “山田”;

このように記述することで、以下のような”箱”が用意されます。

宣言（var）とは

JavaScriptでは、変数を使うときに「宣言」をします。

「これは変数です！」と”宣言”するわけです。

その宣言が「var」の部分です。

var name = “山田”;

宣言の仕方は、「var」以外にも「let」や「const」などあり、宣言の仕方によって変数の性質が変わってきます。

ここでは一旦、「宣言＝var」とだけ覚えておきましょう。

変数名とデータ

var name = “山田”;
宣言が済んだら、「name」の箇所で変数名を決め、「= ”山田”」という箇所でデータを設定します。

変数名は自分の好きなように決められますので、nameでもNameでもnamaeでも、なんでも構いません。

ただ、注意点としては、「大文字と小文字は区別される」ということです。

例えば、nameとNameは違う変数として認識されるということです。

そして、データには数字や文字列など様々なものを設定することができます。

var name = “山田”;

以上の例では、山田を「””」を囲っていますよね。

これは「『山田』は文字列です！」とコンピューターに認識させています。

つまり、変数のデータに文字列を設定したい場合は、「””」で囲ってあげる必要があるということです。

逆に数字などは「””」で囲う必要はありません。
var number = 1;

ここまでの情報を図にすると以下のようになります。

「なんか文末に変なのついてるけど、あれは何?」
と気になった方もいると思います。

「;」はセミコロンと呼び、「これでこの文は終わりですよ！」とコンピューターに知らせるものになります。

「;」は必要な場合と不必要な場合があるのですが、変数の設定する際にはとりあえず書いておけば間違いないと考えておけば大丈夫です。

変数の呼び出し方

これで、変数を設定することができましたが、設定しただけでは意味がありません。

変数は呼び出して、中身のデータを加工したり表示したりしてこそ価値が生まれます。

「変数の呼び出し」と聞くと難しそうに感じるかもしれませんが、実はとても簡単です。

変数を呼び出すには、変数名を書くだけでOKです。

例えば、
var name = “山田”;
というように変数を設定したのであれば、「name」と書くだけで「山田」というデータを呼び出すことができるのです。

これでJavaScriptにおける変数の基本（超入門者向け）はOKです。

より詳しい内容は必要となった時に覚えていけば大丈夫です！

配列（リスト）

続いて、「配列」について解説していきます。

変数は1つにつき1つのデータしか扱うことができないので、複数のデータを扱うために「配列」というものが用意されています。

これは、ショートカットで言う「リスト」だと考えてください。

「リスト」では、複数のデータを扱うことができましたね。
詳しい解説は第５回でしていますので、忘れてしまった方は復習してみてください。

あわせて読みたい

「繰り返す」や「リスト」をiPhoneショートカットで使いこなそう！ 「繰り返す」「リスト」といったアクションは、「便利そうだけど、使い方がよく分からない…」と思っている方が多いと思います。 しかし、実際には難しいことはなく、正…

配列の設定方法

では、JavaScriptの「配列」はどのように設定すれば良いのでしょうか？

「複数のデータを扱うってことは、変数より難しい文を書くことになりそう…」
と思うかもしれませんが、

実は、「配列」の設定方法は、ほとんど変数と同じです。
以下の図を見てください。

「var」で”宣言”し、名前をつけ、データを設定する。

この流れは変数の設定方法と全く一緒ですよね！

変数の場合と違うのは、設定するデータの形です。

配列は、複数のデータを[ ]で囲みます。

そして、[ ]内の値と値との間をカンマ「,」で区切ります。

以上の点を押さえておけば、配列の設定方法は大丈夫です。

一応、具体例を見て理解を深めておきましょう。

var nameList = [“山田”, “鈴木”, “佐藤”];
var number = [1, 2, 3, 4]

配列の呼び出し方

変数と同様に、配列も呼び出し方を知っておく必要があります。

変数は呼び出したい変数の名前を書くだけで中身のデータを取り出し加工したりすることができましたね。

変数と同様にして、配列も呼び出したい配列の名前を書くと中身のデータを取り出すことができます。

しかし、配列は変数とは違って、複数のデータを持っています。

配列のデータ全てに対して変更を加えたりするときは、配列の名前を書くだけで十分なのですが、配列の個々のデータを取り出したいときなどは呼び出し方を変えなければなりません。

と言ってもイメージが湧きづらいと思いますので、それぞれの具体例を紹介しておきます。

配列のデータ全てに対して変更を加える時の例は以下の通りです。
・配列のデータ”全てを”削除する。
・配列の中身の文字列を”全て”大文字にする。

配列の個々のデータにを取り出し変更を加える時の例は以下の通りです。
・配列の”2つ目のデータだけ”削除する。
・配列の”3つ目の文字列だけ”大文字にする。

後者の配列の個々のデータを呼び出す方法は少々特殊なので、順を追って解説していきます。

まず、以下のような配列を用意したとします。
var nameList = [“山田”, “鈴木”, “佐藤”];

このnameListという配列から「山田」という文字列を取り出したい時は以下のように記述します。

nameList[0]

続いて、「鈴木」という文字列を取り出したい時は以下のように記述します。

nameList[1]

最後に、「佐藤」という文字列を取り出したい時は以下のように記述します。

nameList[2]

つまり、配列から個々のデータを取り出すには、
配列名[取り出すデータが○番目かを示す番号]
というように記述すれば良いというわけです。

しかし、
「いや、”山田”は1番目だし”佐藤”は2番目のデータなんだから、さっきの呼び出し方はおかしくない？」
と思った方が多いはずです。

先ほど、nameListという配列の1番目のデータである「山田」を取り出す時、
nameList[0]
と記述しました。

実は、ややこしいことに配列の番号は「0番目, 1番目, 2番目, …」と数えていく決まりがあるのです。

配列の番号は、ショートカットの「繰り返し」の「Repeat Index」に相当するものですが、この数え方に違いがあるのです。
（「Repeat Index」は1番目、2番目…と数えます）

プログラミング言語で番号を扱うときは、一般的に「1」からではなく「0」から数えます。

この数え方は慣れないうちは違和感があると思うので注意です。

終わりに

今回は、JavaScriptにおける

• 変数の設定と呼び出し方
• 配列の使い方

について解説しました。

これまでの記事で既に触れた内容が多く理解しやすかったのではないでしょうか？

一方で、プログラミング言語を扱うことに抵抗を感じた方もいらっしゃると思います。

プログラミング言語を使ってコードを書くのは、「慣れ」が非常に重要な要素となるので、ぜひ自分で書いてみて理解を深めていただきたいです。

次回は、JavaScriptを使った「条件分岐」「繰り返し」の方法について解説していきます。

こちらもショートカットと同じところ、違うところを明確にしながら説明していきますので、お楽しみに！

次回の記事はこちら！

あわせて読みたい

「条件分岐」「繰り返し」をJavaScriptで行う方法を理解しよう！ 【iOSショートカットで学ぶ！プログラミング教室】の第8回となった今回は、 JavaScriptで「条件分岐」「繰り返し」を行う方法を学習していきます。 プログラミングの基…

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

The post JavaScriptで「変数」と「配列」を扱う方法を学習しよう！ first appeared on オートクック！.

iOSやMacで使えるショートカットアプリは、JavaScriptを実行できる。

そのようなことを聞いても

「なんとなく凄いのは分かるけど、イマイチ何ができるのか分からない…」

という方が多いと思います。

本記事では、

• JavaScriptとは何か
• ショートカットと「JavaScript」で出来ること

などについて解説していきます！

最後には、実践編としてショートカットでJavaScriptを実行していきますので、お楽しみに！

「iOSショートカットで学ぶ！プログラミング教室」全５回にわたる初級編が終わり、ついに上級編に突入します。

ショートカット作りでプログラミングの基礎を身につけた皆さんであれば、「JavaScript」などのプログラミング言語も理解し使いこなすことができるハズです。

さらなる高みを目指していきましょう。

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

JavaScriptって何？

そもそもJavaScirptとは何かを解説していきます。

JavaScirptはプログラミング言語の一つです。

「プログラミング言語って何？」
と思う方も多いでしょう。

プログラミング言語は、”コード”を書くために必要なものです。

“コード” とは皆さんが「プログラミング」と聞くと、まず最初に思いつくあの難しそうな文章のことです。

ショートカットでプログラミングをするときは、”コード”と呼ばれる難しい文章を書く必要はありません。

ショートカットがノーコードと呼ばれるツールであるからです。

しかし、より機能の優れたショートカットを作ろうと思うと、”コード”を書いてショートカットで実行する必要があります。

プログラミングと「ショートカット」アプリの関係や、ノーコードについての説明は第1回の記事で詳しく解説しているので、そちらをご覧ください。

あわせて読みたい

【超簡単】iPhoneの「ショートカット」アプリでプログラミング学習を始めよう！ みなさん、iOSの「ショートカット」アプリ使ってますか？ iPhoneやiPadだけでなく、Macでもショートカットアプリが使えるようになり、自動化・効率化に大活躍ですね。 …

JavaScriptは数あるプログラミング言語の中でも世界的に人気で様々な場面で使われています。

皆さんも意識的ではないにしろJavaScriptで作られたものに触れているはずです。

その汎用性の広さから、プログラミング初学者の方には最初にJavaScriptを学習することが勧められるケースが多いです。

JavaScriptを学んでおけば、Webページの見た目を整えたり・アプリを開発したり・自動化ツールを開発することなど、様々なことが出来るようになるからです。

また、ショートカットアプリで実行できるプログラミング言語はJavaScriptだけになっています。

あのAppleも他のプログラミング言語ではなくJavaScriptを選んでいるという点からも、将来性が予想できますよね。

・JavaScriptはプログラミング言語の一つ
・ショートカットで使えるプログラミング言語はJavaScriptだけ
・JavaScriptは機能面と将来性の点からプログラミング初学者にお勧め

ショートカットで「JavaScriptを実行」すると何ができる？

JavaScriptには非常に多くの機能があります。

特にショートカットと関連性が深いのは「Webページの操作」ができる機能です。

「Webページの操作」とは、スマホやパソコンのブラウザ（SafariやChromeなど）で表示しているWebページの要素を操作することです。

「Webページの要素を操作？なんだか難しそう…」と思うかもしれませんが、そんなことはありません。

なぜなら、皆さんがいつもブラウザ上でやっていることだからです。

例えば、

・あるボタンをクリックする
・ページのタイトルをコピーする
・フォームの内容を入力する
・ページをスクロールする

といったことです。

これらの操作をJavaScriptで実行することができるので
ショートカットでJavaScriptを実行すると、

・SNSの「いいね」ボタンをクリック
・ニュースサイトのタイトルを抜き出す
・いつも使うアプリのフォームに自動入力する
・読書する際、自動で速さを調節してくれる

といったことが可能になるのです。

もともとのショートカットの機能と組み合わせれば、より便利なツールを作れること間違いなしです。

夢が広がりますね。

【実践編】ショートカットで実行してみよう！

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

事前準備

① 「設定」アプリを開いて、「ショートカット」を選択します。

②「詳細」をタップします。

③ 「スクリプトの実行を許可」をオンにします。

これで事前準備は終了です！

続いて、実行するショートカットを作成していきましょう！

ショートカットの作成

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

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

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

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

⑤ 「クイックルックアクション」が「”JavaScriptの結果”を QuickLookで表示」となっているのを確認したら、任意の名前をつけて完了。

これでショートカットの作成が完了しました！

いざ、実行してみましょう！

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

① 好きなWebサイトを”Safariで”開き、「共有」ボタンをタップします。

② 共有画面をしたスクロールして、先ほど作ったショートカットをタップします。

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

④ 開いているサイトに貼ってある全てのURLとURL先のタイトルが表示されれば成功です！

今回は、「WebページでJavaScriptを実行」アクションにデフォルトで設定されているものを使って実行してみました！

中身に書いてあるコードは今の段階では意味不明だとは思いますが、まずは実行できるようになることが重要です。

次回以降で「JavaScriptの基本」について解説していきます。

最終的には、簡単なコードは理解できるようになると思います。どうぞお楽しみに！

終わりに

「iOSショートカットで学ぶ！プログラミング教室」上級編の初回となった本記事では、

• JavaScriptとは何か
• ショートカットと「JavaScript」で出来ること

などについて解説しました！

プログラミング言語を使えるようになった瞬間、見える世界が一気に広がっていくのを感じていただけたと思います。

「あんなこともできるし….こんなこともできるかも…」
と妄想を膨らませながら、次回に準備して欲しいです！

次回の記事はこちら！

あわせて読みたい

JavaScriptで「変数」と「配列」を扱う方法を学習しよう！ JavaScriptなどのプログラミング言語を0から学ぼうとすると、とても大変です。 知らない概念が多く、新しく覚えなければならないことが沢山あるからです。 しかし、【iO…

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

The post 「JavaScript」とは？iPhoneショートカットで実行する方法を徹底解説！ first appeared on オートクック！.

これまで、iPhoneショートカットを通じてプログラミングの基礎を学習してきました。

「プログラミングって思ったより簡単で面白い！」と感じていただいた方も多いのではないでしょうか？

なかには、プログラミングの基礎を学び「これが少しでも仕事になれば嬉しいな…」と思っている人もいると思います。

ただ厳しいことを言うと、プログラミングの副業で仕事をしていくのは、基礎を理解したばかりの今の段階では難しいです。

しかし、方法がないわけではありません。

今回は、プログラミングの基礎を理解したあと、副業で仕事を受ける３つの方法をご紹介します！

プログラミング副業で稼げるようになった私自身の経験談も混ぜながら解説していきますので、ぜひ最後までご覧ください！

副業で稼ぐ方法その1： とりあえずココナラで出品してみる

おすすめの方法の一つ目は、ココナラでとりあえずサービスを出品してみることです。
サービスとは例えば以下のようなものです。

今の段階でそんなことできるの？
と不安になるかもしれませんが安心してください。

ココナラにはプログラミングのカテゴリの中に「作業自動化・効率化」という項目があります。

プログラミングの基礎を理解し、自分の好きなiPhoneショートカットを作れるようになった皆さんであれば、この「作業自動化・効率化」の分野でサービスを提供することが可能でしょう。

現状、GAS（Google Apps Script）やExcelマクロなどのサービスが多いですが、それらの”iPhoneショートカット版”を作れば一定のニーズはあるかなと思います。

とりあえず、ココナラにはどんなサービスがあるのか検索してみるのがオススメです。
特に「作業自動化・効率化」の箇所を重点的にチェックしてみてください！

この方法のデメリット

一方で、この方法には１つデメリットがあります。

それは、最初の案件を受注する難易度が高いことです。

ココナラにはサービスの評価制度があるので、良いサービスを提供している人には良い評価がついていき、そのような人に案件が集中します。

つまり、新規で参入し評価が0の状態で戦っていくには難易度が高いのです。

ただ、ショートカットという競合の少ないサービスで戦えば勝算はあります。もし、そのジャンルで１位になれれば一気に案件を獲得できるようになるからです。

副業で稼ぐ方法その2：GASを勉強する

プログラミングの基礎を理解したあと副業で稼ぐための２つ目の方法は、GASを勉強することです。

GASはGoogle Apps Scriptの略で、Googleが提供する自動化ツールです。

GASでは、１からプログラミングせずとも数行のコードを書くだけで簡単にアプリやツールが作れます。
特にスプレッドシートの転機作業や、Gmailの自動転送などGooleアプリの自動化が得意なので、GASができる人のニーズはかなり多いです。

そして、GASは「JavaScript」というプログラミング言語で記述できます。
iPhoneショートカットにはJavaScriptを実行できるアクションがありますので、GASを学べば自然と作成できるショートカットの幅も広がります。

ココナラでもサービスの出品が多く、それを求める人の数も多いので案件を獲得できる可能性は高いです。

実際、私もココナラで実際に評価０の状態からGASの案件を受注し、そこから業務委託で仕事を継続的にいただいていました。
かなり再現性が高い方法だと思います。

勉強方法は、以下のサイトの内容を一通りこなし、自分の作りたいものを作ればOKです。
【保存版】初心者向け実務で使えるGoogle Apps Script完全マニュアル

３ヶ月もあれば案件を受注できるレベルになるでしょう。

この方法のデメリット

こちらの方法では「案件の単価が低くなってしまう」ことがデメリットとして挙げられます。

ココナラの自動化分野では価格競争が起こっているので、特に始めたての時は「既に評価が高く価格が低い出品者に勝つために、自分のサービスの価格をさらに下げる」というようなことをしなければならない場合があります。

実体験として、私は一番最初はココナラでGAS案件を2000円で受注しました。時給で言うと300円ほどになり、かなり悲しい思いをしました。

しかし、ココナラで案件受注→直契約できた時に単価が一気に上がり、3万円のツールを1日で納品するコスパの良い案件も受けられるようになりました。直契約の誘いがあるまでは辛抱する必要があるのが難点です。

副業で稼ぐ方法その3：スクールで実力をつける

案件の単価を上げたり受注数を増やそうとすると、自然と求められるスキルは高くなります。

単価の高い案件とは、
・Webサービス開発
・スマホアプリ開発
・業務システム開発
などです。

プログラミングのことを全く知らない初心者が、これらの案件を獲得し納品できるほどの実力を手に入れるのはそう簡単ではありません。

たとえ、プログラミングスクールに通ったとしても、長期間通わなければならず費用がかかったり、なんとなくプログラミングの基礎を理解して終了してしまう可能性が高いです。

しかし、皆さんは既にプログラミングの基礎を理解しています。
そういった人こそ、スクールに通う価値があります。

理由は２つあります。

理由1：基礎的なカリキュラムは短期間で終わらせることができ、メンター付きの”実践”に時間を費やせる

私は、プログラミングの基礎を理解したのち、単価を上げるためオンラインのプログラミングスクールにいくことを決断しました。独学での限界を感じていたからです。

当時、既にプログラミングの基礎は理解していたので、基本的なカリキュラムを速攻で終わらせて基礎を再度固め直し、Webアプリケーションをメンターさんに質問しながら開発する実践に時間を費やせました。
そのおかげもあって、自分でアプリを開発できるようになり高単価の案件を獲得できるようになりました。

理由2：コストを抑えることができる

ただ、振り返ると失敗がありました。

それは、買い切り型のスクールを選んでしまったことです。

私が通っていたスクールは、2ヶ月で20万円と非常に高額でした。

しかし、最初の1ヶ月でカリキュラムは全部終わってしまい、残りの1ヶ月は自分で開発をしつつ、週に1度メンターさんに1時間のビデオ会議で質問するだけでした。特に質問がない週は、ただ1時間雑談をして終わりました。

非常に勿体無いことです。

この私の失敗から、みなさんには、
サブスクリプション型のプログラミングスクールをオススメしたいです。

つまり月額でお金を支払う方式で、不要になったらいつでも解約できるスクールです。

プログラミングの基礎を理解している皆さんであれば、カリキュラムを通常の方よりも早く終わらせることができ、
結果的に買い切り型のスクールよりも、はるかに安い価格でスクールに通うことができるわけです。

そして、選ぶスクールの条件に「無料体験や説明会がある」というのも重要です。

・そのスクールを卒業した先に手にいられるものは何か？
・メンターの人は面倒見の良い人か？
・顧客対応の早さはどうか？
など、スクールの無料体験や説明会を受講して検討してから、通うスクールを決断するのが良いでしょう。

プログラミングスクール、多すぎ問題

『サブスク型&無料体験or説明会があるスクール』

これだけ条件を絞っても
「スクールが多すぎて選べない！」という方も多いと思います。

実際、当時の私もプログラミングスクールを検索してその数に驚きました。
こんなに膨大な数のスクールの中から、自分に合ったスクールを見つけ出すのは至難の技かもしれません。

しかし、ここで朗報なのですが、こんなサービスを見つけました。

かしこく、失敗しないスクール選びなら【スクマド】

完全無料で１００個以上あるプログラミングスクールのプランから料金や学習内容、アフターサポートまで明確に比較し、自分にあったスクールをヒアリングしながら一緒に決めてくれるそうです。

こんなサービスができたのかと驚きました…。
せっかく無料なので、ここでカウンセリングをしてもらいつつ、自分で無料説明会などを実際に聞いたりして最終的に自分で決断するのが現在の最適解かもしれません。

個人的にオススメのスクール

以下では個人的に「過去の自分に教えてあげたい…」と感じた『サブスク型&無料体験or説明会がある』プログラミングスクールをご紹介します。

ただ、その前に一つ注意点があります。

無料体験や説明会に参加するのを少し面倒に感じて「もうここで良いや！」と適当に決めてしまう人が非常に多いのです。（かつての私です…）

しかし、過去の私のように金銭的にも時間的にも損をしないために、無料体験や説明会に参加することをお勧めします！

Freeks（フリークス）

・受講料：月額9800円–
・学習言語（JavaScript, PHPなど）選び放題！
・模擬プロジェクトで要件定義→基本設計…納品までの一連の流れを経験できる！
→稼げるエンジニアに！

個人的にオススメなのはFreeksというスクールです。
ググりまくって「これは…！」と思ったのでご紹介します。

私の通っていたプログラミングスクールは、実務については何も教えてくれませんでした。

そのため実際に仕事を受注しようと思ったときは不安で、『プログラミングはできるが、仕事が受けれない』というカオスな状態に陥ってしまいました。

「模擬プロジェクト」、良いシステムだと思います。

プログラミングは仕事をすることがゴールと考えると、絶対に必要な体験ですよね。

もし、今自分が過去に戻ったら、ここに行くのではないかと思います。

終わりに

今回は、プログラミングの基礎を理解した人が、副業で稼げるようになるための３つの方法をご紹介しました。

プログラミングは今の時代、出来て当たり前なものになりつつあります。
時代に乗り遅れないためにもプログラミング学習は必須でしょう。

また、副業でお金が稼げるようになると、人生の自由度が大きく上がります
iPhoneショートカットの作成に留まらず、多くの人にそのプログラミングスキルを提供して欲しいです！

本記事で紹介した方法で、1人でも多くの方が目標を達成できることを願っております！
最後まで読んでいただいてありがとうございました！

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

The post 【経験談あり】プログラミングの基礎を理解した後、副業で稼ぐ３つの方法を解説！ first appeared on オートクック！.

「繰り返す」「リスト」といったアクションは、
「便利そうだけど、使い方がよく分からない…」
と思っている方が多いと思います。

しかし、実際には難しいことはなく、正しい理解と少しの実践があれば誰でも簡単に使いこなすことができます。

【iOSショートカットで学ぶ！プログラミング教室】シリーズ 第２回では、プログラミングの基本要素「反復」について学びました。

あわせて読みたい

iPhoneショートカットの「スクリプティング」とは？プログラミングの基本3要素を理解しよう！ iOSショートカットを作成する時に、アクションの追加画面には「スクリプティング」項目が出てきますよね。ショートカットを作ったことがある方なら、一度は見たことがあ…

ついに初級編の最終回となった第５回の本記事では、

• 「反復」とは何か？（復習）
• 「反復」を可能にするアクション３つ
• 無限ループ

について解説していきます！

また、最後にショートカットを作りながらアウトプットする実践編では、
本記事で学ぶ「繰り返す」系のアクションに加えて「if文」「メニューから選択」アクションも使います。

もし、「if文」「メニューから選択」アクションの使い方がよく分からない方は、前回の記事をご覧ください！

あわせて読みたい

【if文をマスターする！】iPhoneショートカットで条件分岐を完全理解しよう！ iOSでショートカットを作っているとき、「if文」というアクションをよく見かけると思います。 「なんだか難しそう…」と多くの方が思っていることでしょう。 しかし、慣…

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

「反復」とは？

第２回で既に学んだ方は復習になりますが、念の為もう一度解説しておきます。

「反復」とは、ある特定の処理を繰り返すことです。

「反復」はプログラミングの基本３要素のうちの一つで、ショートカット作り（＝プログラミング）をする上で、必要不可欠なものになります。

プログラミングと聞くと、難しく感じる方も多いかもしれません。

ただ、日常生活においても「反復」はよく起きていることなのです。

例えば、
「スクワットを10回する」
というのも立派な反復です。

そう考えると、理解しやすいのではないでしょうか？

「反復」をするためのアクション３つ

この特定の処理を繰り返す「反復」を行うために、ショートカットには大きく３つのアクションが用意されています。

一つ一つ解説していきます。

1つ目のアクション：「繰り返す」

まずは基本中の基本である「繰り返す」アクションです。

「繰り返す」アクションは、繰り返したい処理を決められた回数実行してくれます。

実際のショートカット作成画面で見てみましょう。

↓ 「繰り返す」アクションを置いただけの状態

↓ 繰り返したい処理を入れてみた状態

このショートカットを実行すると、「”アラートです！”と表示する」処理を５回繰り返すことになります。

このように「繰り返す」アクションを使えば、任意の処理を好きな回数実行することができるのです。

もちろん、「5回」という回数を「10回」「20回」と増やすこともできます。

何度も同じ処理をしたい時には便利なアクションです。

2つ目のアクション：「リスト」

続いて、「リスト」アクションを解説します。

ショートカットの作成画面で、「リスト」アクションを置いてみると以下のようになります。

デフォルトでは「1件」「2件」とデータが２つ入っていますが、その内容や数は自由に調整できます。

「変数を追加」というアクションを覚えていますか？
第3回の記事で説明したものです。

あわせて読みたい

【徹底解説！】「変数」って何？iPhoneショートカットを作りながらマスターしよう！ iOSショートカットの作成において、「変数」は非常に重要です。 「変数」を制すものがショートカットを制す、と言っても過言ではないでしょう。 しかし、ショートカット…

設定された変数に新しいデータを追加し、複数のデータを１つの変数の中に入れることができるアクションでした。

複数のデータが１つの変数の中には入っているという状態、これはリストと全く同じ働きをしています。

「じゃあ、リストではなく変数で良いのは？」

と思った方もいると思います。

しかし、「できれば変数を使うことは避けたい」です。

これはApple公式の「ショートカット ユーザーガイト」にも書いてあることですが、変数を使うとプログラムが長くなり読みにくくなってしまうからです。

変数で「リスト」と同じ機能を再現しようとすると、
・「変数を設定」
・「変数を追加」
という２つのアクションが必要になってしまいます。

「リスト」はたった１つのアクションで、変数の２つのアクションの機能を、ほぼ代替できてしまうのです。

基本的にプログラミングをする際は、簡潔なプログラムを作ることが重要です。
ミスの原因が特定しやすくなりますし、他の人にプログラムを見せた時に理解してもらいやすくなるからです。

以上のような点から、リストと変数のどちらを使うか迷った時は「リスト」を選択すべきだと言えるわけです。

３つ目のアクション：「各項目を繰り返す」

最後に「各項目を繰り返す」アクションを解説します。

「各項目を繰り返す」アクションは指定したリスト内の項目を一つ一つ取り出して、指定した処理を実行することができます。

ショートカット作成画面で「各項目を繰り返す」アクションを追加した状態を見てみましょう。

「”項目”の各項目を繰り返す」の”項目”にはリストを設定します。
「リスト」アクションを追加し、”項目”の箇所に設定すると以下のようになります。

そして、「テキスト」アクションを「”リスト”の各項目を繰り返す」の下に追加し、テキスト内で「変数を選択」をタップしてみましょう。

すると、「”リスト”の各項目を繰り返す」アクションの下に「Repeat Index」と「Repeat Item」という項目が出てきます。

• 「Repeat Item（繰り返し項目）」はリストから取り出された各項目のデータの内容
• 「Repeat Index（繰り返し番号）」はリストから取り出した各項目が何番目のデータか

ということを表しています。

図にすると以下のようなイメージです。

では、先ほどまでのショートカットのテキストアクション内に「”Repeat Index”番目の人は”Repeat Item”です」と設定してみましょう。

そしてショートカットを実行してみると、「1番目の人は太郎です」と出力され、結果画面を右にスワイプすると「2番目の人は花子です」「3番目の人はマイケルです」と出力されているのが分かります。

このように、「各項目を繰り返す」アクションでは「Repeat Index」「Repeat Item」を使ってリスト内の項目を処理できるのです。

“リスト”は「リスト」アクション以外でも作れる！

先ほどは「各項目を繰り返す」アクションの入力（「”項目”の各項目を繰り返す」の”項目”）部分に、事前に「リスト」アクションで作ったものを設定しました。

しかし、「各項目を繰り返す」アクションの入力には、「リスト」アクション以外の”リスト”も設定することができます。

「何を言っているんだ？」

と感じる方も多いと思います。

実は、そもそも「”リスト”＝複数のデータを持つもの」であり、“リスト”は「リスト」アクションを使わなくても作ることができるのです。

例えば、
「リマインダーを検索」というアクションでは、特定の条件と一致するリマインダーを検索し、条件と一致する複数のリマインダーを”リスト”として出力します。

このように、「リスト」アクション以外にも、複数のデータを持つことになるアクションは結果として”リスト”を出力します。

すなわち、「各項目を繰り返す」アクションは入力に「リスト」アクションで作った”リスト”（複数のデータを持つもの）以外にも、他のアクションの結果（複数のデータを持つもの＝”リスト”）を受け取ることができるということです。

ちなみに、
「繰り返す」「各項目を繰り返す」アクションの結果を出力した「繰り返しの結果」も”リスト”です。

リストに繰り返し処理が行われ、結果のリストが出力されるまでのイメージは以下のような具合です。

“リスト”は「リスト」アクション以外でも作れるというイメージを掴んでいただけたでしょうか？

【実践編】今日が期限のリマインダーを表示するショートカット

これまで、「反復」を実現するアクションについて解説してきました。

いよいよ実践編です。

作るのは「今日が期限となっているリマインダーを表示する」ショートカットです。

「if文」「メニューから選択」などを使い、前回の内容の復習にもなっていますので、少し難易度は高くなっていますが一緒に作って理解を深めていきましょう！

作成するショートカットの大まかな流れです。

1. 期限が今日になっているリマインダーを検索する。
2. 検索結果のリマインダーの各項目で「何番目のリマインダー」で「内容は何か」をテキストに設定する。
3. もし、リマインダーを検索して値があれば、アラートで上のテキストを表示する。
4. もし、リマインダーを検索しても値がない場合には、「もう一度検索するorしない」を尋ねる。
　 →検索する場合は、ショートカットを再実行する

かなり複雑でイメージしにくいと思いますので、以下のリンクからダウンロードして使ってみてください！

https://www.icloud.com/shortcuts/b21af084ce0c49279346b7766422b5f7

イメージを掴めたら、実際に作っていきましょう！

① 新規ショートカットの作成画面から「アクションを追加」を選択し、検索欄に「リマインダーを検索」と入力しアクションを追加します。

② 追加したアクションの「フィルタを追加」をタップし、フィルタ内の”リスト”をタップし”期限”に変える。そして”次に完全一致”をタップし”今日である”に変える。

③ 「各項目を繰り返す」アクションを追加し、「”リマインダー”の各項目を繰り返す」となっていることを確認する。

④ 「テキスト」アクションを「”リマインダー”の各項目を繰り返す」の下に配置し、テキストの中が「”繰り返しインデックス（Repeat Index）”番目は”繰り返し項目（Repeat Item）”」となるよう設定する。

⑤ 「繰り返しの終了」の下に「if文」アクションを追加し、「もし”繰り返し項目”が”任意の値”ならば」となるよう設定する。

⑥ 「もし”繰り返し項目”が”任意の値”ならば」の下に「アラートを表示」アクションを追加し、「アラート”テキスト”を表示」となるように設定する。

⑦ 「その他の場合」の下に「メニューから選択」アクションを追加し、メッセージを「見つかりませんでした、再検索しますか？”」に、選択肢を「はい」と「いいえ」に設定。

⑧ 「はい」の下に「ショートカットを実行」アクションを追加し、現在のショートカットを実行するように設定する。

作成完了です！

初級編の最終回にふさわしい、難易度の高いショートカットですね…。

これだけのものが独力で作れたら、プログラミングの基本が身についている証拠だと思います。

最後に「無限ループ」の補足をさせてください！

無限ループとは？

あるショートカットAの中で「ショートカットAを実行」することで、何度もショートカットAの実行を繰り返すことを、無限ループと言います。

無限ループの状態になると、そのショートカットを停止するまで、ショートカット内のアクションが最初から最後まで繰り返し実行されることになります。

先ほどショートカットを作成する時、⑧で

「はい」の下に「ショートカットを実行」アクションを追加し、現在のショートカットを実行するように設定する。

ということをしたと思います。

「再検索しますか？」という質問に対して「はい」を選択すると、もう一度最初からショートカットを実行するようにしたわけです。

しかし、再検索をしたとしても「リマインダーの検索結果」は変わらず「値がない」ままですよね。

つまり、「再検索しますか？」という質問に対して「はい」を選択し続けると無限にショートカットが実行され、「いいえ」を選ぶと無限ループから抜けられる状況を作ったということです。

「何のためにそんなことを？」

と思っている方も多いでしょう。

今回作ったショートカットの場合は、特に意味はなく「無限ループ」の解説のためにあえて作りました。

しかし、「ショートカットを実行」アクションを使って「無限ループ」にすることで、実現できることが増えるのは確かです。

使う場面は少ないですが、「こんなこともできる」と知っておくと必ず役に立つ知識ですのでご紹介させていただきました。

終わりに

「iOSショートカットで学ぶ！プログラミング教室」第５回となった本記事では、

• 「反復」とは何か？（復習）
• 「反復」を可能にするアクション３つ
• 無限ループ

などについて解説しました！

今回の内容もかなりボリューミーだったと思いますが、何度も読み返して理解を深めていただければ幸いです。

ついに「iOSショートカットで学ぶ！プログラミング教室」初級編が終了しました。

ここまでの内容を理解できた方は、プログラミングの基礎は十分身についたと自信を持って良いと思います。

ついに次回より上級編に突入します。
専門用語が増えるので理解が難しいところもあるかもしれませんが、なるべく分かりやすく噛み砕いて解説していきますので、お楽しみに！

次回の記事はこちら！

あわせて読みたい

「JavaScript」とは？iPhoneショートカットで実行する方法を徹底解説！ iOSやMacで使えるショートカットアプリは、JavaScriptを実行できる。 そのようなことを聞いても 「なんとなく凄いのは分かるけど、イマイチ何ができるのか分からない…」…

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

The post 「繰り返す」や「リスト」をiPhoneショートカットで使いこなそう！ first appeared on オートクック！.

iOSでショートカットを作っているとき、「if文」というアクションをよく見かけると思います。

「なんだか難しそう…」と多くの方が思っていることでしょう。

しかし、慣れてしまえば「if文」は簡単に扱うことができます。

「if文」は”条件分岐”というプログラミングの基本３要素の一つです。

そして、”ショートカット作り＝プログラミング” なので、プログラミングの基本要素である「条件分岐」をマスターすることは、iOSショートカット作り上達のためには絶対に必要となります。

「ショートカット作り＝プログラミング」
「プログラミングの基本３要素」

以上の２点については【iOSショートカットで学ぶ！プログラミング教室】シリーズ 第１回、第２回の記事で詳しく解説していますので、先にそちらをご覧いただけると理解が深まると思います。

あわせて読みたい

【超簡単】iPhoneの「ショートカット」アプリでプログラミング学習を始めよう！ みなさん、iOSの「ショートカット」アプリ使ってますか？ iPhoneやiPadだけでなく、Macでもショートカットアプリが使えるようになり、自動化・効率化に大活躍ですね。 …

あわせて読みたい

iPhoneショートカットの「スクリプティング」とは？プログラミングの基本3要素を理解しよう！ iOSショートカットを作成する時に、アクションの追加画面には「スクリプティング」項目が出てきますよね。ショートカットを作ったことがある方なら、一度は見たことがあ…

【iOSショートカットで学ぶ！プログラミング教室】第４回の本記事では、ショートカットを実際に作りながら「条件分岐」をマスターしていきます！

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

条件分岐って何？

条件分岐については【iOSショートカットで学ぶ！プログラミング教室】第２回の記事でも説明しましたが、復習もかねて説明していきます。

「条件分岐」というのは、設定した特定の条件によって実行するプログラム（アクション）を変更することです。

条件によって実行するアクションを分岐するから、条件分岐と呼びます。

「もし〇〇だったら、〜〜する」
「もし××が—の時は、△△する」

これが条件分岐の基本になります。

ショートカットを作っているときに、特定の条件でアクションを使い分けたい時はよくありますよね。

例えば、
・Bluetoothがオンのときはイヤホンを自動接続
→Bluetoothがオフのときは「Bluetoothがオフです」とテキストを表示
というような時ですね。

以上のような条件分岐を可能にするために、iOSショートカットには条件分岐をするためのアクションが用意されているのです。

条件分岐で使う２つのアクション

条件分岐を可能にするためのアクションを２つ紹介します。

ここで各々の特徴を理解していただいて、実践編に挑戦して欲しいです。

１つ目のアクション：if文

まずは「if文」アクションです。

以下が「if文」アクション追加後の初期状態です。

ここで公式の「if文」についての説明を見てみましょう。

条件が真かどうかテストし、真の場合は内部のアクションを実行します。

真でない場合は”その他の場合”の下のアクションが実行されます。

「条件が真」は「設定した条件と合致している（正しい、true）」
「条件が真でない」は「設定した条件と合致していない（誤っている、false）」
「テスト」は「判断すること」

なので、公式の説明を分かりやすくすると、

設定した条件と一致しているか判断し、もし条件と合致している場合は内部のアクションを実行する。

もし設定した条件と合致していない場合は”その他の場合”の下のアクションが実行される。

というようになります。

ここまでの内容でif文の基本は十分ですが、ここで押さえておいてほしい特徴があります。

それは「if文の中にif文を入れることができる」ということです。

以下が「if文の中にif文を入れた」状態です。

状況が少し分かりづらいので、図にしてみました。

この「if文をif文の中に入れること」を「ネスト」と言います。

「ネスト」の上限回数は決められていないので、何度もif文の中にif文を入れることができます。

ただ、「ネスト」しすぎるとプログラムが読みにくくなってしまうので注意です。

２つ目：メニューから選択

続いて「メニューから選択」アクションです。

以下が「メニューから選択」アクション追加後の初期状態です。

このまま実行してみると、以下のようになります。

「メニューから選択」アクションではその名の通り、
ショートカット実行時に設定したメニューを出し、選ばれた項目によって特定のアクションを実行できます。

すなわち、メニューから選択してアクションを”条件分岐”できるわけです。

「if文とは何が違うの？」と思われるかもしれません。

「メニューから選択」アクションは、
・条件がif文より細かく設定できない
・多くの条件を設定するときに、プログラムが読みやすい
という点で「if文」と異なります。

if文との違い１つ目：条件がif文より細かく設定できない

「メニューから選択」はあくまで「メニュー内の項目がタップされたとき」という条件しか持つことができません。

また、if文は自動で条件分岐できますが、
「メニューから選択」は、あくまで手動での条件分岐しかできません。

つまり、if文では自動で「Bluetoothの状態を取得し、オンかオフか判定する」ということができましたが、そのようなことが「メニューから選択」ではできないということです。

if文との違い２つ目：多くの条件を設定するときに、プログラムが読みやすい

if文は「ネスト」すれば複数の条件でアクションを分岐させることが可能です。

しかし、すでに述べたようにネストしてしまうと、プログラムが非常に読みづらくなってしまいます。

「メニューから選択」を使った方がプログラムが見やすく、直感的に作業できるのが分かると思います。

ただ、先ほど述べたように「メニューから選択」はif文のように細かい設定の条件分岐はできません。

「if文」と「メニューから選択」の違いを理解し、上手く使い分けることが重要です。

ここまで条件分岐をするためのアクションを解説してきました。

もしかすると理解できない部分もあったかもしれません。

ただ、「習うより慣れろ」と言いますから、
早速実践でショートカットを作って理解を深めましょう！

【実践編1】現在地の天気が雨か判定するショートカット

まずは、「if文」を使って現在地の天気が雨かどうか判定し表示してくれるショートカットを作ってみましょう。

アクションの大まかな流れは以下の通りです。

1.「天気アプリ」で現在地の天気を取得
2.「if文」で条件分岐
3. 雨の時は「傘を持っていって！」と表示
4. その他の時（晴れや曇りなど）は「傘は入りません」と表示

では、作っていきましょう！

① 新規ショートカットの作成画面から「アクションを追加」を選択し、検索欄に「現在の天気を取得」と入力し追加します。すると自動で「”現在地”の天気を取得」アクションが追加されます。

② 検索欄に「if文」と入力し「if文」アクションを追加します。
以下の画像と同じ状態になればOKです。

③ if文アクションの「もし気象状況が”条件”ならば」の「気象情報」をタップします。

④「種類」という項目をタップします。

⑤ 下にスクロールして「テキスト」の項目を選びます。

⑥ if文アクションの「もし気象状況が”条件”ならば」の”条件”をタップし、「次を含む」を選択。

⑦ if文アクションの「もし気象状況が次を含む”テキスト”ならば」の”テキスト”部分に”雨”と入力。

⑧「アラートを表示」アクションを二つ追加して、「もし気象状況が次を含む”雨”ならば」の下と「その他の場合」の下に配置。

⑨ 一つ目のアラートの内容を”傘を持っていって！”、二つ目のアラートの内容を”傘はいらないよ”と入力する。

これで作成完了です！

if文を使ったショートカットを作成することができました！

ポイントは、④〜⑦です！

初期設定されている、「もし〇〇が××ならば」の〇〇の部分の種類を変更しないと、
××の箇所に設定できる条件が「任意の値（値がある）」「値がない」という2択になってしまいます。

これだと、天気が「雨」かどうかの判別ができません。

そこで、〇〇の箇所の種類をテキストにして、それが「”雨”というテキストを含むかどうか」でif文を作ったわけです。

「もし〇〇が××ならば」の〇〇の部分の種類を変更することで、××の箇所で様々な条件が使えるようになりますので、ぜひ色々と試してみてください！

【実践編2】メニュー選択で電話をかけるショートカット

続いて、「メニューから選択」アクションを使って、メニュー選択した相手に電話をかけるショートカットを作成してみましょう！

① 新規ショートカットの作成画面から「アクションを追加」を選択し、検索欄に「メニューから追加」と入力しアクションを追加します。

② メニュー内の項目に適当な名前を入力。「新規項目を追加」を押すと、項目が増やせます。

③ 「電話番号アクション」をメニューの項目の数だけ追加します。

④ 追加した「電話番号アクション」を、メニューの各項目の下に配置する。

⑤ メニューの各項目に対応する電話番号を「電話番号アクション」に入力する。

⑥ 新たに「発信」アクションを追加し、「メニューの終了」の下に配置する。発信アクションが「”メニューの結果”に発信」となっていない場合は、マジック変数の選択から「メニューの結果」を選ぶ。

これで作成完了です！

実行してみると、メニューが表れて選択した項目の電話番号に発信できると思います！

今回のポイントは、２点あります！

・メニューの各項目の下のアクションが実行される（④）
・”メニューの結果”からメニューの各項目内の変数が参照できる（⑥）

メニューの結果で何を参照するかは、「メニューの結果」をタップして「種類」という箇所から変更できますので参考までに！

終わりに

「iOSショートカットで学ぶ！プログラミング教室」第４回となった本記事では、以下の２点について詳しく解説しました。

• 条件分岐とは何か
• 「if文」「メニューから選択」アクションの使い方

実践でショートカットを２つも作成したこともあり、かなりボリューミーな内容だったと思います。
本当にお疲れ様でした。

おそらく、条件分岐のやり方はかなり理解できたのではないでしょうか？

もし理解できないところがあれば、本記事やこれまでの記事を復習しつつ、色々とショートカットを自分で作ると勉強になると思います！

最後までお読みいただきありがとうございました！

次回の記事はこちら！

あわせて読みたい

「繰り返す」や「リスト」をiPhoneショートカットで使いこなそう！ 「繰り返す」「リスト」といったアクションは、「便利そうだけど、使い方がよく分からない…」と思っている方が多いと思います。 しかし、実際には難しいことはなく、正…

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

The post 【if文をマスターする！】iPhoneショートカットで条件分岐を完全理解しよう！ first appeared on オートクック！.

iOSショートカットの作成において、「変数」は非常に重要です。

「変数」を制すものがショートカットを制す、と言っても過言ではないでしょう。

しかし、
ショートカットを作成しているときも「変数」という言葉は頻繁に出てきますが、実際に変数がどういったものかを理解し活用できている人は少ないと思います。

そこで今回の記事では、

• 変数とは何か？
• iOSショートカットで使う２つの変数

という２点について、解説していきます！

これまで「iOSショートカットで学ぶ！プログラミング教室」シリーズの第１回と第２回で、ショートカットとプログラミングの関係や、プログラミングの基本3要素について学習してきました。

あわせて読みたい

【超簡単】iPhoneの「ショートカット」アプリでプログラミング学習を始めよう！ みなさん、iOSの「ショートカット」アプリ使ってますか？ iPhoneやiPadだけでなく、Macでもショートカットアプリが使えるようになり、自動化・効率化に大活躍ですね。 …

あわせて読みたい

iPhoneショートカットの「スクリプティング」とは？プログラミングの基本3要素を理解しよう！ iOSショートカットを作成する時に、アクションの追加画面には「スクリプティング」項目が出てきますよね。ショートカットを作ったことがある方なら、一度は見たことがあ…

「変数」はプログラミングするときには絶対に必要な存在ですので、第３回となる今回は「ショートカット作り」「プログラミング学習」という２点において、特に非常に重要な回となります。

プログラミング初学者の方でも分かりやすいよう具体例を用いて解説していきますので、もし１度目で理解できなかったとしても、本記事を何度も読み返して理解していただきたいです。

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

そもそも変数って何?

まず、「変数」とは何かを説明します。

簡潔に言うと、変数とは「データを入れるための箱」のことです。

変数は、”1”などの数値から”山田”というような文字列まで様々な値を入れることができ、その箱に好きな名前を付けることができます。

ここで一つ例を考えてみましょう。
”山田”という文字（データ）を入れた “母の旧姓”という名前の変数を作ってみます。

“母の旧姓”という名前の箱を用意しておけば、いつでも”山田”というデータを取り出すことができます。

変数がデータを入れるための箱であるというイメージは湧きましたでしょうか？

さらに、一般的に変数は「１つの変数には１つのデータしか入れることができない」ということも理解しておきましょう。

先程の例で言うと、”母の旧姓”と言う名前の箱（変数）に”山田”以外のデータ（例えば”鈴木”や”佐藤”）を追加で入れることができません。

このように１つの変数には１つのデータしか入れられないという決まりがあるのですが、実は変数の中に入っているデータを入れ替えることができます。

例えば、
“母の旧姓”という箱（変数）に”鈴木”という新たなデータを入れようとしたとき、”山田”という古いデータは箱の外に追い出し、”山田”の代わりに”鈴木”というデータを”母の旧姓”という変数に入れることができます。

以上の点を押さえておけば、変数の基本はOKです。

ただ、注意すべきは、ショートカットには扱う変数が３種類もあるということです。

続いて、iOSショートカットで使う３つの変数について理解しましょう。

iOSショートカットで使う３つの変数

ショートカットで扱う変数には、「マジック変数」「特殊変数」「手動変数」の３つが存在します。

この３つの違いを理解し、使い分けれるようになるとショートカットでできることが格段に増えます。

また、先に言っておくと、これまで説明してきた「変数」とショートカットにおける「変数」は違う性質を持っていたりするので、要注意です。

それでは、ひとつずつ理解していきましょう。

１つ目の変数：マジック変数とは？

マジック変数は、各アクションの出力結果（データ）を自動で変数として格納してくれます。

以下は、メモを検索しQuickLookで表示するショートカットの作成画面です。
今、「メモを検索」アクションと「Quick Lookで表示」アクションが配置されています。

「Quick Lookで表示」アクションの「入力」という箇所が空白になっていますのでタップし、「マジック変数を入力」をタップしてみます。

すると、以下のように「メモを検索」アクションの下に「ノート」という項目が出てきます。

これがマジック変数で、メモを検索した結果のデータを自動で「ノート」という名前の変数に入れてくれているのです。

普通は、
・変数（箱）を用意し、データを箱に入れる
・変数（箱）からデータを出す。
という流れでデータを扱うのですが、

iOSショートカットでは、アクションの結果（データ）を入れる変数（箱）は自動で「マジック変数」として用意してくれて、それを使って簡単にデータを取り出すことができます。

自分で変数を用意しなくても直感的にデータを操れるので、めちゃくちゃ便利です。
まさに「マジック」ですね。

２つ目の変数：手動変数とは？

手動変数は、その名の通り自分で設定する変数のことです。

マジック変数は、アクションの結果を自動で変数に設定してくれました。

そこを自分で（手動で）設定するのが手動変数です。

先ほどのメモを検索しQuickLookで表示するショートカットを手動変数を使って作ると以下のようになります。

「変数を設定」というアクションを追加しメモを検索した結果（データ）を「メモ」という名前の変数（箱）に入れ、クイックルックアクション内で「メモ」という名前の変数（箱）からメモを検索した結果（データ）を取り出し、表示する。

以上のようなことをしているわけですが、マジック変数を使った方が簡単だと思いませんでしたか？

多くの場合、手動変数を使わずにマジック変数を使った方が良いです。

マジック変数を使った方がプログラムが読みやすくなりますし、なりより便利であるからです。

しかし、手動変数にはマジック変数にできないことがあります。

それは「複数のデータを入れておく」ことです。

「え？前に”1つの変数には1つのデータしか入らない”って言ってなかった？」
と思った方は鋭いです。

実は、ショートカットの手動変数というのは特別で、複数の値を入れることができるのです。

ショートカットの手動変数に複数の値を入れるには「変数に追加」というアクションを使います。

「メモを検索してクイックルックで表示するショートカット」で「変数に追加」を使ってみると以下のようになります。

まずは、①”本日の予定”という文字を本文に含むメモを検索し、

②その結果を「変数に設定」アクションを使って「メモ」という名前の変数に入れています。

続いて、③”auto-cook”という文字を本文に含むメモを検索しています。

その下に④「変数に追加」アクションを追加し、③の検索結果を事前に設定しておいた「メモ」という名前の変数に追加しています。

そして最後に、⑤「”本日の予定”という文字を本文に含むメモ」「”auto-cook”という文字を本文に含むメモ」という２つのデータが入った「メモ」という変数から、クイックルックで中にある２つのデータを表示しています。

これは、マジック変数ではできないことです。
手動変数をうまく使えば、複数のデータを使ったショートカットを作成することが可能になります。

ただ、一般的な定義では、変数というのは１つにつき１データです。

ですので、もしショートカットアプリ以外（JavaScriptなどのプログラミング言語などを用いて）でプログラミングをすることになったときに、

「変数って複数の値を格納できるんでしょ？」と思っていると困ったことになってしまうので注意です。

ショートカットの変数が例外的であることを意識しておきましょう。

２つ目の変数：特殊変数とは？

最後に、特殊変数です。

特殊変数とは、ショートカットが実行されるごとに異なるデータが格納される変数のことです。

現段階では意味不明だと思いますが、特殊変数の具体例を見れば「あー、あれか！」と理解できると思います。

特殊変数には以下のようなものがあります。
・毎回尋ねる
・クリップボード
・現在の日付
・ショートカットの入力
などです。

クリップボードの中身や現在の日付というのは、ショートカットを実行する時々で変化しますよね？

「毎回尋ねる」というのも、ショートカットの実行時に毎回入力を求めてくるものなので、その都度値が変化します。

↓ 実行画面

これらの特殊変数は、事前に用意されています。

変数の選択画面や、キーボード入力の上から選ぶことができます。

この特殊変数も、マジック変数と同様に自動で設定してくれるので非常に使いやすいですね。

まとめ

ここまで
・変数の基本的な概念
・ショートカットで使う３つの変数
について解説してきました。

おそらく、「変数、変数、言われすぎて、よく分からくなった…」という方もいらっしゃると思いますので、

ここまでの内容をまとめたチェックシートを作っておきます。
復習にご活用ください！

・変数は「データを入れるための箱」

・変数には好きな名前をつけれる

・１の変数には１つのデータしか入らない

・ショートカットアプリの変数には「マジック変数」「手動変数」「特殊変数」の３種類がある

・「マジック変数」にはアクションの結果（データ）が自動で入れられるので、自分で変数を設定しなくて良いから便利

・「手動変数」は自分で名前とデータを用意する変数。一般的な変数と違い、複数のデータを持つことができる。

・「特殊変数」はショートカットを実行する時々でデータが変わる変数。自動で用意されている。

終わりに

「iOSショートカットで学ぶ！プログラミング教室」第３回の本記事では、「変数」について解説しました。

プログラミングに慣れていない方だと、初見で理解することが難しかったかもしれません。

しかし、自分で手を動かして変数を使ってショートカットを作ってみれば、「ああ！こういうことだったのか！」と理解できることもあると思います。

自分で「変数」を使ってみて、よく分からなくなってしまったら、またこの記事に帰ってきてください！

次回の記事はこちら！

あわせて読みたい

【if文をマスターする！】iPhoneショートカットで条件分岐を完全理解しよう！ iOSでショートカットを作っているとき、「if文」というアクションをよく見かけると思います。 「なんだか難しそう…」と多くの方が思っていることでしょう。 しかし、慣…

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

The post 【徹底解説！】「変数」って何？iPhoneショートカットを作りながらマスターしよう！ first appeared on オートクック！.