1.1 はじめに

(1/1)
プログラムとは何だろうか。まず言葉の定義を確認しておこう。
プログラム 【program(me)】
①番組。予定。計画。
②目録。計画表。また、演劇・音楽会などの内容を解説した小冊子。
③コンピューターに対して、どのような手順で仕事をすべきかを、機械が解読できるような特別の言語などで指示するもの。
『広辞苑』第七版より
スマートフォンのアプリのイラスト
このシリーズでは、③の意味のプログラムを作ることを学んでいく。

プログラムは、パソコンやスマホ、タブレットなどのアプリそのものである。また、スマートスピーカーやデジカメ、ドローンといったIT機器や、テレビ、冷蔵庫、エアコンなどの家電製品、自動車や飛行機といった大型機械、ワイヤレスヘッドホンやICカードの中にも入っている。現代人の生活とプログラムは切っても切れない関係にある。
プログラミングをする人のイラスト(女性)
このシリーズは、これからプログラムに関わる仕事に就く方、趣味としてプログラムを作ってみたい方を想定して書いている。
プログラムを作るにあたって費用をかけずに、当サイトからファイルをダウンロードするだけで学習できるように配慮したつもりである。
プログラムはプログラミング言語を使って書くものだが、世の中には数多くのプログラミング言語がある。ここで使うプログラミング言語は1つだけだが、学んだ内容は他の言語にも応用できるようにしたつもりである。(コラム:プログラム電卓」参照)

目次

用意するもの:WindowsやMacの場合

JavaScript
このシリーズでプログラムを作って実行するのに必要なものは、お手持ちのパソコン、スマホ、タブレットだけだ。プログラミング言語を買ったりダウンロードしたりする必要はない
このシリーズでは JavaScript (ジャバスクリプト)  というプログラミング言語を使うが、これはブラウザの機能として備わっている。つまり、WindowsパソコンでもMacでもLinuxパソコンでも、AndroidでもiPhoneでも動かすことができる。
あとは、プログラムを書くためのメモ帳またはワープロ・ソフトがあればいい。Windowsならメモ帳、Macならテキストエディットで十分だ。
また、終盤で学ぶネットを使ったプログラム以外は、ネットに接続していなくてもプログラムの作成と実行ができるようにしてある。

用意するもの:Androidの場合

QuickEditテキストエディター
スマホの場合、クラウドサービスとして提供されている開発環境や、作成したファイルをクラウドに保存するアプリがあるが、ここではWindowsやMacと同様、ローカルドライブに保存してブラウザで動作させるというオーソドックスな方法を紹介する。
この種のエディタは色々あるのだが、無料で利用でき、機能がシンプルなものとして「QuickEditテキストエディター」を紹介する。
QuickEditテキストエディター
インストールしたら、右上のフォルダ・アイコンをタップし、新規作成を選び(左上図)、これから紹介するプログラムを入力する。もしくは、ダウンロードしたHTMLファイルを開き、編集する。
入力できたら、下方にあるフォルダ・アイコンをタップし、ファイル名を指定して保存する。

つづいて、Files by Googleアプリを使って、保存したファイルをタップする。拡張子.htmlにはChromeブラウザがリンクしているので、入力したJavaScriptを実行する。
うまく動かないときは QuickEdit に戻って修正し、保存。Chromeブラウザでリロードする。この繰り返しである。

サンプル・プログラムの文字エンコードについて

この連載では、各節で、サンプル・プログラムを無償でダウンロードできるようになっている。
プログラム・ファイルの文字エンコードは、現在、WebサイトやWebアプリで標準的に用いられる UTF-8:blue] で、改行コードは LF にしている。前述のメモ帳やエディタは、いずれも UTF-8 に対応しているが、もしダウンロードしたファイルが文字化けするようだったら、メモ帳やエディタの設定を見直してほしい。
なぜ UTF-8 を使うのかについては、「UCS と UTF - 文字コード」を参考にしていただきたい。

プログラムの利用、ご質問・ご意見は

このシリーズでダウンロードできるプログラムは無償だ。
自己学習の範囲内で利用する分には、自由に変更してもらって構わない。ただし、利用した結果、何らかの得失が発生しても当方は責任は負えないので、あらかじめご了承願いたい。
また、学校や企業内などで2次利用したいときは、「リンク・二次利用について」をご覧いただきたい。

内容に関するご質問、こんなテーマを取り上げて欲しいなどのご意見があれば、Twitterアカウントをお持ちの方は パパぱふぅ@𝙥𝙖𝙝𝙤𝙤.𝙤𝙧𝙜 へ、お持ちでない方は各ページの右下にあるリンク「こちらへお願いします」をクリックしてほしい。
これらコミュニケーションは他の利用者の参考にもなるので、とくに事情がないかぎり、ネット上でオープンにやり取りさせていただきたい。

おすすめの参考書

表紙 独習JavaScript 新版
著者 CodeMafia 外村 将大
出版社 翔泳社
サイズ 単行本
発売日 2021年11月15日頃
価格 3,278円(税込)
ISBN 9784798160276
参考書を読みながら学習を進めたいという方にお勧めなのが本書だ。「解説→例題(サンプル・プログラム)→理解度チェック」の繰り返しで、初心者から経験者までJavaScriptの理解度を深めることができる。
著者は、ソフトバンクの社内システムの開発を経て、CodeMafia のハンドルネームでUdemyなどでプログラミング講師として活動している外村将大 (とのむら まさとし) さん。

コラム:テキストエディタのすすめ

WZ EDITOR
WZ EDITOR
マイクロソフト Visual Studio やオープンソースの Eclipse (イクリプス)  のような統合開発環境(IDE)にはプログラム・エディタが付属している。プログラムの入力からデバッグまで、さまざまな機能が付いた便利エディタだが、その言語でしか使えないという制約がある。
私はパソコン上で、FORTRAN、BASIC、COBOL、Pascal、SmallTalk、Lisp、Prolog、C、C++、C#、Java、JavaScript、PHP、Ruby、Python‥‥数え切れないほどのプログラミング言語に関わってきた。言語によってプログラム入力操作が異なると生産性が落ちるので、VZ EDITOR という市販の汎用テキストエディタを使ってきた。現在は WZ EDITOR という名前で販売されており、30年以上の付き合いになる。
本シリーズだけでなく、ぱふぅ家のホームページもすべて WZ EDITOR で書いている。

みなさんも、ご自身が使いやすいテキストエディタを1つ見つけておいてはいかがだろうか。

コラム:システム開発とプログラム開発

再び広辞苑を調べてみよう。
システム【system】
複数の要素が有機的に関係しあい、全体としてまとまった機能を発揮している要素の集合体。組織。系統。仕組み。
『広辞苑』第七版より
システム開発とプログラム開発
システム開発とプログラム開発
今日のシステムは、様々なIT機器がネットワークを介して有機的に結合しているが、これを図示したものが上の絵である。
ここで注意してほしいのは、それぞれのIT機器は、その役割・機能に適したプログラミング言語でソフトウェアが構築されていることだ。たとえば、アプリケーションサーバ(クラウドサービスと呼ばれるものを含む)は PythonPHPJava などで、データベースは SQLで、人工知能は PythonR言語で、ドローンなどのIoT機器は C++言語などでソフトウェアが書かれている。
ここで学ぶ JavaScriptは、システムの中の一部――スマホやパソコンといったクライアント・プログラムを書くのに適したプログラミング言語である。

この連載では、JavaScriptを使ったプログラミングを通じてアプリケーションサーバやデータベース、人工知能の基礎技術に触れることはあるが、JavaScriptだけではこれらすべてのシステムを開発できないことを、あらかじめ承知しておいてほしい。
かといって、すべての言語を一気呵成に学ぶというのも現実的ではない。どれか1つの言語を修めてから他の言語の習得に進むのが常道である。
また、1人の人間の能力には限界があるから、システム全体を独力で開発できるフルスタックエンジニアになるのは非常にハードルが高い。仕事では、それぞれの言語が得意なエンジニアが集まってチーム開発することがほとんどである。
ここでは、システム開発の登竜門としてJavaScriptを学んでほしい。
(この項おわり)
header