プログラミングを学び始めると、最初はなかなか「何に活かせるか」が想像つきません。実際私もそうで、大学のプログラミングの授業での課題をこなすことは難しいとは思わなかったのですが、その課題がアプリのどの部分につながるかがわからない間は苦痛な単純作業と化してたことを覚えています。

そこで、プログラミングの基礎はアプリのどういったところに役立つかをご紹介したいと思います。

 「変数」って結局なに？

まずプログラミングをはじめた時にいわれる意味のわからないキーワードNo.1は「変数」（筆者調べ）です。変わる数といわれてもわからないですし、紹介される文章によって「変数宣言は箱を用意すること」とか「入れ物です」みたいないろいろな表現があります。

const hoge = 1;

こいつですね。多くの書籍は当然ながら著者が文責をもつので「正確な表現」が用いられます。ですので抽象的に「箱」や「入れ物」という表現をするのですが、ここは無料noteですので、正確性よりもわかりやすさを重視して変数とは何かを説明します。

変数： 新規ファイルの作成

あなたがつくってるアプリの中の新規ファイルです。

もちろん名前をつけて保存をすれば、アプリを閉じたあとも取り出すことができます。私達はGUI上で「新規ファイルを作成」を行いますが、それをプログラミングで行うとイメージしてください。

const hoge = 1;

hogeという新規ファイルをつくって、そこに1という数字を書き込んでるだけです。簡単ですね。

ですので、「まず変数の役割から覚えよう」というのは、新規ファイルをつくれるようになってそこにいろいろ書き込めるようになろうというステップです。プログラミングを書く以上ずっと使い続けます。

余談：
名前をつけて保存するためには、以下のようにします。

localStorage['ファイル名'] = '保存する内容';

そうすると、いつでも localStorage['ファイル名'] から取り出すことができます。

四則演算はやっぱり四則演算 

そんなに本気にならなくても四則演算はただの四則演算です。 `×` が `*` になってる以外はそんなに難しくありません。「でも電卓つくるわけでもないのに四則演算って必要？」という疑問はあると思います。必要です。

・ 今から◯時間後の時間を取得。ブログの予約投稿などによく使われる手法です。
・ 入力された生年月日から年齢を算出
・ いいねボタンがクリックされたら +1

地味に使うことが多いんですよね。でもやっぱりただの四則演算なので何となく覚えてるだけで十分だったりします。

比較演算子はパターン分けに必須

四則演算に比べてわかりにくいのは比較演算子です。私も意味がわからなかった。

1 > 0

うん、わかる。

1 === 1

知ってるわ💢

なのですが、プログラミングでは時に思いもしない値が入ってきます。例えばユーザ入力によく使うinputなのですが、同じ1を入力するだけでも

1（半角）、１（全角）、①（別に可愛いのは必要ない）、一、壱、Ⅰ、ⅰ

と再現なく自由に入力しやがります。その入力値があなたの求めてるものと違うことを確認するためには比較演算子が必要になります（この入力値チェックを「バリデーション」といいます）

他に、ユーザがアップロードした画像の縦幅横幅をチェックして、システム的に問題ない画像サイズかの確認（縦横2000pxを越えてたら重くなるし嫌ですよね...）などあるので、かなり頻用します。

関数の価値は他人のつくったコードの活用

そして学習を進めると、「関数」がでてきます。コードの再利用性を高めることで...みたいな説明を受けますが、関数を知ったばかりの時はコードを数千行も書いたことないと思うので、「再利用性といわれても...」となるのよくわかります。わかります！

なので見方を変えましょう。関数は他人がつくったコードを利用するためのものです。例えば、以下のコードでは画像を90度回転することができます。

public async rotationPhoto(imageData): Promise<string> {
   const imgType = imageData.substring(5, imageData.indexOf(';'));

   const image = new Image();
   const p = () =>
     new Promise((resolve) => {
       image.onload = () => {
         resolve();
       };
     });
   setTimeout(() => (image.src = imageData));
   await p();

   const canvas = document.createElement('canvas') as HTMLCanvasElement;
   const ctx = canvas.getContext('2d');

   canvas.width = image.height;
   canvas.height = image.width;

   ctx.rotate((90 * Math.PI) / 180);
   ctx.translate(0, -image.height);
   ctx.drawImage(image, 0, 0, image.width, image.height);

   return canvas.toDataURL(imgType);
 }

コード自体を理解する必要はありません。このコードをコピペして、以下のようにするだけであなたは上記コードを利用することができます。

const rotated = rotationPhoto(imageData);

何のための関数か。最初は、他人のコードをこうやって簡単に使うためで十分です。そうして関数を使うのが当たり前になったら、次は未来のあなたが楽をするために、今日書くあなたのコードを関数にしてあげれるようになるといいですね。

おわりに

以上はプログラミングの初歩で習うごくごく一部ですが、「どこにつながるか」を意識することができれば、次に進むのが容易になるかもしれません。そういう意味では、プログラミング学習は大きく以下の2つに別れます。

・言語を基礎から学ぶ
・言語をチュートリアルで学ぶ

これはどちらが優れてるというわけではなく、性格に合う・合わないだと思っているのですが、どちらにしても学ぶことがゴールになるのではなく、それをどう活用するかを考えてもらえればと思います。

アプリつくってみたいという方はぜひこちらの書籍もご活用ください。

それではまた。