今から始めるプログラミング
目次
今から始めるプログラミング
プログラミングを始めてみたいと思っている方に、ツールや言語の選び方、どのようなサイトを参考にしたらよいかの指針を提供します。
この記事は TypeScript + React + Material UI を推奨しています。
プログラムを書くということ
プログラミングを始めたいという方は、一体どういう事が出来るようになるのか？ と疑問に思うものだと思います。
ゲームを作りたい、スマホアプリを作りたい、色々目的があると思います。
もちろん、ゲームやスマホアプリも プログラミングで出来ることですが、ビジネスプロセスに直結するニーズもあります。
私は、AWSというクラウドサービスを利用し、運用を行っています。 その中で、多様なニーズが発生してきます。
- EC2 インスタンス一覧を CSVで出力したい。
- EC2 の AMIを取得し、ログインし設定を変更したい。
- AWS Backup の過去の Snapshot を全て削除したい。
- 毎日 0時に Route 53 のバックアップを取得したい。
これらが、たとえば数インスタンスであれば頑張れば手動で出来ます。
しかし、実際は数百単位のインスタンスを管理しているため、手動管理は不可能です。
プログラムを書くことが出来るということは、 数時間から1日程度でプログラムを記述することが出来て、数百単位の処理を実行することが出来ます。
プログラマーの三大美徳というものがあります。
- 怠惰
- 短期
- 傲慢
というものです。
めんどくさいな、やりたくないな そう思ったとき、 『頑張る』ではなく『プログラムに任せよう』 と思えるエンジニアになってほしいと切に願います。
画像も無い白黒画面で文字が動いているだけではモチベーションが上がらないと思いますので、 TypeScript + React + Material UI という構成で出来ることやおすすめの理由をまとめていきます。
TypeScript + React + Material UI
TypeScript + React + Material UI とは、私がプログラムを記述する環境のことを指しています。
プログラミング言語： TypeScript
JSフレームワーク： React
CSSフレームワーク： Material UI
上記の構成を指しています。
これは、Webブラウザ（Chrome, Safari, Firefox, etc.）からアクセスし、利用できる Web Application を作成するための構成です。
この構成により、あっという間に ブラウザからグラフィカルに利用できるプログラムを作成することが出来ます。
ブラウザができることが少なかったのは昔の話、いまはブラウザに対応するだけで Windowsも Macも スマホにも対応したサイトが作れる様になっています。
この構成でできること
-
Web Application を作成する
- ブラウザ上で動くアプリを作成できます。
- ZipBake はブラウザだけで動くアプリケーションです。
-
クライアントソフトウェアを作成する
- React Native というフレームワークを利用することで、 Windowsや Mac、 スマートフォン向けのアプリを作成することが出来ます。
- React の知識で クライアントソフトウェアが作成出来るのです。
-
サーバーサイドプログラムを記述できる
- Express というフレームワークを用いることで、 JavaScriptによりサーバーサイドプログラムを記述できます。
- AWS や GCP といった大手クラウドでは JavaScript を直接実行できるサービスも展開されています。
- サーバーサイドプログラムを書くエンジニアにとっても最良の選択肢となりえます。
- SatJoin はサーバー側の処理は TypeScript で記述されています。
-
コマンド実行ができる
- 例にもあったように、 node という実行環境を利用することで、コマンドとして実行することが出来ます。
- ビジネス上のちょっとした処理など、コマンドから実行するプログラムを作成することで安易に自動化が可能です。
-
ウェブサイトを作成できる
- WordPress や Drupal といった 動的サイトによる CMSがあるように、 Gatsbyjs という静的サイトの CMSが Reactベースで作成されています。
- 動的サイトのCMSでは、MySQLなどのデータベース、計算するためのサーバー、データを保存するストレージが必要であり、それなりの費用がかかります。
- 静的サイトのCMSでは、上記の機能をパソコンが担うため、配信のためのストレージだけでウェブサイトを運用できます。
- このサイトは Gatsbyjs で運用されています。
Visual Studio Code
Visual Studio Code は マイクロソフトが作成した無料のコードエディターです。
先に コードエディターからおすすめするというのも変な話ですが、必須ツールです。
まずは Visual Studio Code が最適です、導入しましょう。 その後、好きなエディターがあるようでしたら切り替えると良いでしょう。
Extension という拡張で、機能を拡張できるエディターですので、おすすめの Extensionを記載しtます。
-
Japanese Language Pack for Visual Studio Code
- 必須です。
- エディターの文字を日本語化します。
-
Debugger for Chrome
- Chrome と Visual Studio Code を連携して、デバッグを容易にします。
弘法は筆を選ばなかったらしいですが、プログラマーはエディターを選びます。
TypeScript
TypeScript は マイクロソフトが作成した JavaScript の拡張言語です。
トランスパイル（コンパイルではない）という過程をへて JavaScript のコードを生成するものです。
なぜ、 JavaScript ではなく、その拡張言語をすすめるのか？ まずは基本からではないか？ と思う方もいるかも知れません。
しかし、学習効率から JavaScript を学習することはオススメできません。
理由は下記の通りです。
- JavaScript はレガシーであり、古い仕様を引きずっている
- JavaScript は動作環境が多く、全てに対する考慮が面倒である
- 最近の言語は全て 型安全・Null安全であり、この知識を先に身につけたい
- 豊富なライブラリを利用することが可能である
- 構文補完機能を利用し、楽したい
順に説明します。
JavaScript はレガシーであり、古い仕様を引きずっている
JavaScript は 1995年に作られた古い言語です。
言語的にはプロトタイプ言語という他に類を見ない言語系で非常に難解な言語となっています。 互換性の維持や、特定のブラウザで実装された非合理な処理などが処理系に入っており、現代で利用する際に冗長な記述が必要だったりするデメリットが含まれていたりします。
import などのライブラリを利用する機能も統一化出来ていません。
TypeScript は 2012年に出来た新しい言語であり、簡潔に記述が出来る言語です。
頻繁にバージョンアップが行われていて、プログラマーは最新の構文などを利用することが出来ます。
現代のプログラムを習得する以上、最新の構文を身に着けてほしい意図があります。
JavaScript は動作環境が多く、全てに対する考慮が面倒である
JavaScript の主な動作環境はブラウザです。
ブラウザは、ご存知のとおり Chrome, Safari, FireFox など、多くの種類が存在しており、それぞれのバージョンごとにも利用できる機能が異なっています。
これらを手動で全て考慮することは不可能です。
TypeScript は JavaScript を生成する過程で、どのターゲットに向けて生成するかを選択することが可能です。
TypeScript が、全ての新しい構文を古い構文の同一機能に置換するのです。
そのため、プログラマとしては互換性を考慮する必要がなくなるため、TypeScript をおすすめします。
最近の言語は全て 型安全・Null安全であり、この知識を先に身につけたい
型安全、Null安全というのが最近の言語のトレンドです。
型がない言語や、Null安全ではない言語は実行時にエラーを出力します。 プログラムを楽しく書いているが、実行時になりエラーとなる。
エラーログからどこでエラーが発生したかを追跡するというのは苦痛でしか有りません。
型安全言語、Null安全言語は、実行時にエラーで停止する実行時エラーが原理的に起き得ない言語となります。 （処理誤りはあるので、テスト不要とは言っていません）
Null安全でない言語の典型例が C言語や Java です。 イギリスの計算学者であるアントニー・ホーアはNull参照について
それは10億ドルにも相当する私の誤りだ。
としています。
型安全でも、Null安全でもない言語の典型例が JavaScript や Python です。
現代において、多くのプログラミング言語が拡張されて、型安全、Null安全に切り替わっています。
例えば、『Java は Kotlin へ』『Objective-C は Swift へ』変わっています。
型安全・Null安全を覚えることは、自身が楽をするとともに、これらの言語への移行もスムーズになります。
型安全とは
事前に定義した変数、型以外のアクセスがエラーとなる仕様。
たとえば、 string 型にしか存在しないメソッド toLowerCase は、
変数が number 型の時にアクセスするとコーディングしているその場でエラーとなる。
Null安全とは
Null許容変数にアクセスする際に、Nullを考慮できてないとエラーとなる仕様。
たとえば、 let pet: Pet|null = null とした際に pet.name を呼び出すと Nullが考慮されていないとしてその場でエラーとなる。
豊富なライブラリを利用することが可能である
TypeScript は JavaScript の拡張言語であるため、その豊富なライブラリを利用できます。
プログラムの目的は、書くことではなく、目的の機能が動くことです。 『何行書きました！』は石器時代の話です。
他の人がライブラリ化して提供した機能について、ライセンスや品質のも題が無いのであれば、再度作る必要はありません。
昔は、ライブラリは作成者のサイトからダウンロードして利用するものでした。 現代は違います。
TypeScript （JavaScriptも同様）であれば、 npm というパッケージマネージャーから必要なライブラリをダウンロードします。
npm には、パッケージ管理、バージョン管理、脆弱性管理などの必要なものが全て揃っています。
例えば、CSV出力ライブラリがほしいと思った際に、 csv で検索すれば数多くのライブラリが見つかります。
利用する際は、右側に出てくる Weekly Download や License などを確認の上、ダウンロードを行います。
構文補完機能を利用し、楽したい
結局の所、コレが一番の目的なのかもしれません。
Editor が 型やライブラリを理解してくれるため、基本的に文字を打つたびに選択肢を提示してくれるようになります。
キーボードを打つことすら面倒になりつつある私ですので、基本的に提示された選択肢から自分が目的とするものを選んで エンターを押す作業でプログラムを書いています。
上記の理由から、JavaScriptを学習するのではなくTypeScriptの学習を勧めます
React
React は JSフレームワーク、JavaScriptフレームワークなどとと言われているものの一つです。
Facebook 製の JSフレームワークとなります。
HTML は 一つのHTMLファイルにページを構成するすべての要素を記載する必要があります。
たとえば、全ページで記載するヘッダー、フッター、ナビゲーションバーなども、全てのページに記載する必要があり、その管理は冗長で大変なものです。
React は、HTMLをコンポーネントというパーツに分けて管理ができるようにして、それを JavaScript で動的に書き換えることが出来るようにするものです。
React は 古い記法（クラスコンポーネント） と 新しい記法（関数コンポーネント） があります。
新しい記法は日本語ではまだ情報が少ないですが、圧倒的に楽が出来るため、新しい記法での記述を推奨します。
同様の機能をもったライブラリは Vue や Angular などがあります。
特にこだわりがなければ、シェアが圧倒的に高い （56% 2021年1月現在） Reactを用いるので良いと思います。 Google Trends
Material UI
Material UI は CSSフレームワークと言われているものの一つです。
Material Design 自体は Google が提唱する見た目定義で、 Material UI は 複数の企業によるスポンサードで運営されています。
一定のデザインルールに従って Webページの見た目を装飾するものです。
Material UI は React と完全に統合されている Material Design の実装です。
モダンで分かりやすい見た目をデザインなしで利用できるようになります。
Webページを作成していると、Material UI に無い見た目を提供したくなることも多々あります。
その際は、 styled-components を利用してみてください。
見かけ上、そのままのCSSが利用できるような不思議な感覚で画面を彩ることが出来るようになります。
入門サイトや困ったときの参照先
プログラムを初めて書くとき、『どうやって勉強したら良いだろうか？』『どうやって使うと良いだろうか？』といった疑問が湧いてくると思います。
なれてくると、今度は逆に『この機能ってどうやって使うんだっけ？』という疑問が出てきます。
私がオススメできるのは一つしかありません。 『公式サイトを熟読してください』これ以上の上達の近道はありません。
なぜなら、個人のブログ、テックブログ、企業サイト、どこよりも公式が充実して体系だって説明していることが多いからです。
主に『Getting Started』や『Tutorial』で検索し、入門記事を熟読します。
ここでは、本当に活用できるサイトや書籍を紹介してまとめとします。
MDN Web Docs
FireFox の開発母体、 Mozillaが提供する開発者向けサイトです。
Webに関する基本知識はここを参照してください。 HTML5, CSS3, JavaScript など、質の高い情報が提供されています。
画面中央部、『ウェブ開発について学ぶ』は必読です。
HTMLタグの意味や、必要な要素など、悩んだときはここを見ます。
初めてのJavaScript 第3版
オライリーから出版される入門書です。
ES2015 という新しい記法に対応しているため、TypeScript や他の言語にも活用できます。 書籍で始めたい方にはこちらの書籍をおすすめいたします。
TypeScript
Microsoft が運営するTypeScriptの公式サイトです。
入門としての側面は弱いため、 MDN や React の チュートリアルと並行して読むのが良いです。
TypeScriptの特徴である、型については、the TypeScript Handbook を読むのが良いです。
英語なので、Google翻訳を駆使しましょう。
React
Facebook が運営する Reactの公式サイトです。
入門としては、JavaScript ベースの記事が Tutorial としてあります。
最初のほうは Classコンポーネントでの記述があり、 『ゲームを完成させる』『関数コンポーネント』から新しい 関数コンポーネントが出てきます。 実際のプログラムでは、関数コンポーネントのみで構成されることがほとんどです。
TypeScript ベースで始めたほうが楽であるため、 TypeScript や create-react-app-with-typescript - GitHub を参照して始めるのが良いと思います。
まとめ
数多くのプログラミング言語を経験してきた私から初学者に向けた、知識をつけるための最短ルートとなります。
教育コンテンツなどは改版が追いつかず、C言語や Javaなどレガシー言語を使うことが多いですが、 TypeScript や React といった最新のフレームワークを使うことで楽して技術を身につけることが可能です。
必要な情報を探し、身につけることが出来る良いエンジニアを目指していただけると幸いです。
以上
✨ブログランキングにご協力ください✨
本サイトの記事について
本サイトの記事は、プログラミングだけでなく、雑多な雑学を多く配信しております。
もしよろしければ、ほか記事も閲覧いただけますと幸いです。