記事の対象

初心者プログラマ
完全な素人さん
子供たちにプログラミングを教えたい大人（親、先生）

を対象にしているQiita記事です。

ブラウザの開発者向けツールを使って今すぐプログラミングの学習をする

プログラミングの学習というと、つい構えてしまいがちですよね。専用のアプリケーションをインストールして、プロジェクトを作って、ファイルを作って、さぁプログラミング！みたいな流れが一般的でしょうし、そういう雰囲気を醸し出してるところに、素人や初心者がやってくると「なんだか難しそう！」とか「じっくり時間がある時に！」なんて感じて引いてしまうと思うんです

でも、少なくともPC上でブラウザを使ってネットを閲覧している状態なら、キーを一回とクリック2回ぐらいでプログラミングの重要な概念のほとんどを学べるんですよね。

なので、素人さんや初心者でも気軽に勉強できるようなワークシートを作りました。そして、素人さんの代表としてうちの14歳（中学3年）の娘と一緒にワークシートをやってみました。

ワークシートはGitHubにあります。

今回は「式」についてですが、今後は以下のような内容を作って行きます。

「関数」
「制御文」
「変数」
「データ構造」
などなど

娘とのセッションの様子はYouTubeにアップしています。

補足

以下はこのワークシートを使って教える（学ぶ）時に理解しておくべき「式」に関する補足です。

プログラミングの「式」はプログラミング言語学習の最重要項目

私はプログラミングを学ぶならまず最初に「式」について学習するべきだと思っています。なぜならすべてのプログラミング言語には「式」にあたる概念（英語ではExpression）があるからです。現在主流のコンピュータアーキテクチャにはかならず「分岐」という処理があります。分岐をするにはなんらかの式を評価しなければなりません。なので式を表す文法が存在します。

さらに「式」を学習することは対費用効果が高いと考えます。プログラミング言語はそれぞれ独特の文法があって、言語によっては他と大きく異なる場合があります。しかし「式の書き方」に関しては、どのプログラミング言語であっても大きな差はありません。おそらくその理由は、式の多くが数学や論理学などを表すため、その表記方法もすでに一般的になっている書き方をそのまま継承しているケースが多いからだと思うのです（例：「より大きい」は「＞」記号を使う）。

もちろん、例外的にかなり独特な書き方をするプログラミング言語はあるでしょうが、ソフトウェア開発の現場で実際に利用されているプログラミング言語の多くは、おおよそ同じような「式の書き方」をしているといっても間違いはないと思います。

~ ちょっと脱線。英語マメ知識

英語では expression といいます。どちらかというと「式」よりも「表現」という訳の方が僕はしっくりくると思うんですよね。

expression という単語の仲間にはこんなのがあります

impression ：「印象」上からハンコを押したような、最初にパッと伝わる外見のこと
expression ：「表現・表情」人の顔を見ながら His expression showed confusion（彼の表情から見て取れるのは「混乱」だ）
oppression ：「抑圧」例えばある宗教が激しく禁止されているとき our religion is severely oppressed in this country （この国では我々の宗教は弾圧されている）みたいに言います

どれも、press 「押し付ける」という言葉が付いてます。expression の ex は「外に向かうイメージ」です（例： export, extension, exit, exhaust)なので、外に向かって何かを表している様子のことです。ちょっと「式」とはニュアンスが違いますよね。まぁ数学っぽくていいんしょうけど。なので、不本意ながら、「式」という言葉を使いますが expression に慣れる方が海外での就職には便利です。

じゃぁプログラミングで使う「式」ってなに？

ひとつの例えとしては「電卓に打ち込んだ計算式」です。例えば 98 + 76 が式です。

「式」は「評価」されて初めて意味があるのです

98 + 76 という式は、そのままだと「式」のままです。それを「評価（英語で evaluate）」されて、初めてその評価の結果を「値（value）」として返します

プログラミングでは、この値（結果）を次のアクションに繋いで、なんらかの仕事をコンピューターにさせるのです。プログラミングの基礎の基礎だと、私は思っています。「式は評価されて、結果がでる」という流れをしっかりと体験的に学ぶのがこのワークシートで最重要課題です。

どうしてブラウザだけでプログラミングが体験出来るの？

実はChromeブラウザにはJavaScirptエンジンというソフトウェアが含まれていて、JavaScript言語のプログラムの実行をすべて引き受けています。通常は、ウェブサイトからロードしたJavaScriptプログラムを実行するだけですが、開発者向けコンソールの interpreter という対話式のプログラムを介して、直接コードを実行することも出来ます。

具体的には、ブラウザがが、コンソールから式（expression）入力を受け取り、それを評価（evaluate）し、結果をコンソールに出力したのです。

ワークシートに出てきた「変数」ってなに？

ところで、**式の評価結果（値）はほとんどの場合、一時的なもので、どこにも保存されていません。**コンソールに表示はされましたが、それだけです。コンソールを綺麗にクリアーしたり、ブラウザを閉じたりするとその結果は永遠に失われてしまいます。例えば、外食した時の会計のように、電卓で合計を算出し、支払う代金が分かったらその瞬間、その計算の結果は忘れてしまいますが、それに似ています。

値（評価の結果）を保存したい場合は「変数」という「入れ物」をつかうのです（「変数」に関しては別にワークシートを作成します）

普段の生活で計算をしないといけない時、ブラウザの開発者向けツールを使えます

ブラウザに与えて結果を得る式は、プログラミングに関係なく、普段の生活でも役に立ちます！サイトを見ている時にちょっとした計算をしたくなることってありませんか？例えばショッピングサイトで商品をいくつか選んでいる時に、合計金額を知りたいとか、あまり大きな声では言えませんが、学校の算数の宿題をしている時にちょっと「確認」の計算をしたい時など（あくまでも「確認！」ですよね、決して答が分からないからではなく！）。

「演算子」って何？

「演算子」という言葉が登場しました。演算子は英語で operator といいます。日本語英語でもオペレーターという言葉はたまに使いますね。operate （動詞）をする人（主体）を operator と言います。つまり、させたい演算の種類を示す「記号」のことです。

~~脱線！英語マメ知識

Operator という単語とその仲間は、日本語英語でもよくつかわれています。例えば病院で受ける手術は operation で、「オペ」
短く呼ばれているようですね。機械を操作する人をオペレーターと呼びます。またソフトウェア開発の現場では最近 devops という言葉が使われるようになってきました。dev は developer(開発者）、ops は operator （運用者）を指し、その両方に責任を持つ仕事を指します。

ここで気づかれた人もいるかもしれませんが、プログラミングの式を学ぶことは、どのような operator （演算子）があって、それをどのように組み合わせて式を作るか、を学ぶことです。暗記する必要はありません。慣れないうちは調べればいいし、使っているうちに調べなくても思い出します。別のプログラミング言語を使うことになったとしても、そのプログラミング言語で使う operator を調べながら使えばいいだけです。特定のプログラミング言語にこだわるよりも、大きな視点で「式」を深く理解する方がずっと大切です。