効果的なプログラミング学習方法を解説します。

ども、マサトッシュです。

僕は、これからプログラミングを始めるのであればJavaScriptが良いのではと思っています。前の記事でもその根拠も含めてそのような内容をお伝えしました。

JavaScriptを薦められたけど、JavaScriptってWEBページを作る言語だよね？

JavaScript自体ほとんど知らない方にとっては、WEBページを作るための言語だというイメージが強いと思います。

確かに、多くはWEBページを作るときによく用いられるのがJavaScriptです。ですが、実はそんな単純な言葉では言い表せないほど、JavaScriptは魅力的で様々なシーンで使えるプログラミング言語だと思います。

だからこそ、JavaScriptの人気は世界でトップなのだと思います。

Programming, Scripting, and Markup Languages

この記事では、僕なりに感じているJavaScriptの魅力を書きたいと思います。

ちなみに、僕はJavaScriptがもたらしてくれる価値が非常に高いと自信をもって言えますが、このブログを始めた事を良い機会ととらえてもっと深く習得し、自分の市場価値をより高めたいと思っています。
もしこれからJavaScriptを習得したいと思っている方がいたら、是非一緒にやっていきましょう！

僕がJavaScriptを習得するまでの軌跡を、別のカテゴリの記事で余すことなくお伝えしていきたいと思います。皆さんの学習の参考になればと思います。
その活動の中で、１つのアプリケーションを作っていこうと考えています。
僕のJavaScriptの習得方法や、その結果開発したアプリケーションに触発されて、日本でも超凄腕の「JavaScripter」が数多く誕生し、日本版シリコンバレー企業がジャンジャカ出てきてくれると嬉しいです。
また、ベンチャーキャピタルの方々もアメリカに負けないよう元気なエンジニア達を是非応援してほしいです！

それではいきましょう！

「何が出来るのかを効率的に知り、自分で調べる事が出来るようになる」という事が重要だというエピソード
1. 新入社員の時の最初の「単純で泥臭い課題」が秀逸だった件
2. 「どうすればやりたい事が出来るようになるのか」という事を自分で調べられるようになった
JavaScriptを習得する事で何が出来るのかを知る
1. 軸となる調査対象フレームワークを決める – React
  1. フレームワーク賛成派
  2. フレームワーク反対派
2. Reactに関連するライブラリを調査する
まとめ

「何が出来るのかを効率的に知り、自分で調べる事が出来るようになる」という事が重要だというエピソード

僕がまだ新入社員だったころに受けた、先輩社員からの強烈な指導を思い出しましたので、少しだけ振り返ります。

新入社員の時の最初の「単純で泥臭い課題」が秀逸だった件

僕が最初に入社した会社は組み込み系システム開発を得意とする会社で、主要な言語はC言語、時々アセンブリ言語でした。
新入社員で学生の時に少しだけプログラミングをかじっている程度の僕に対し、先輩は厚みが５センチはあるC言語の標準ライブラリのマニュアルを持ってきてこう言いました。

これを３日間で読めるようになれ

と。正直、「やべぇ、超絶クソな先輩にあたってしまったかも」そう思いましたが、当時従順な僕は入社直後という事と先輩からの指示だった事もあり、とにかく始めることにしました。
このころ、まだインターネットが普及していない時だったので、主な情報源は書籍かアプリケーションに付属のマニュアルのみでした。

１日10時間以上かけて、必死にマニュアルを３日で読みました。たった３日間しかなかったので全体を熟読する事は到底出来ません。とにかく目次、節、章、各項目のタイトル、説明文の主語と動詞をガーっと拾い読みしました。
何が重要かも分からないので、重要かどうかは全く気にせず、興味本位で気になった部分だけピックアップして熟読しました。
正直、猛烈な睡魔と格闘し続けた３日間でもありました。

「どうすればやりたい事が出来るようになるのか」という事を自分で調べられるようになった

そして３日後、先輩から練習のために１つのプログラムを作る事を言い渡されました。その時渡されたのは外部設計書のみ。

今後、このブログでは設計やアーキテクチャの重要性についても記載していきたいと思います。というか、ソフトウェア開発エンジニアやるなら必須のスキルです。

先輩からは、質問は受けるがとにかく設計書に書いてある事に沿って、思ったように作ってみろと言われました。

その時、ようやく気が付いたのですが、標準ライブラリをザーッと読み終わっていた僕は、設計書に書かれている事をプログラムするために必要なライブラリを自分で調べることが出来る状態になっていたのです。超絶つらかった３日間で、僕の頭には「この処理を行うためにはこんな処理をすればよいし、それを実現するためのライブラリ関数は、このマニュアルのこの辺に書いてあるかなー」という思考がぼんやりとできていたのです。

１つ１つのライブラリの使い方について、実際に使ってみると使い方が分かっていないものがほとんどでしたが、それを使う事でどんなことが出来るのかという事がある程度イメージできる状態でした。プログラムを作りながら、分からない部分は短いテストプログラムを書いて実行してみたり、それでも使い方が分からない関数については先輩に確認しながら、実際にプログラムを作りながら覚えていきました。

この 「自分で調べる」という事が出来るようになると、学習効率は一気に加速 します。
そのために、まずは習得しようとしている言語がどのような用途で活用できるのか、何が得意なのかといった全体マップを思い描く事はとても重要です。

という事で、まずはJavaScriptを習得する事で何が出来るのかをザックリ見てみたいと思います。

ちなみに、自分で調べても分からない時に、スグに聞ける経験者が隣にいて、必要十分以上の情報を提供してくれるという環境があると完璧ですね。

経験者が近くにいるという事は、プログラミング言語を習得するという事を超越して「システム開発スキルを獲得する」ための最強の環境です。

JavaScriptを習得する事で何が出来るのかを知る

申し訳ないのですが、ここでは海外のサイトの情報がメインになります。日本のサイトでは情報が少なすぎて面白くないからです。
ほんと、日本のエンジニアには頑張ってほしい。。。と、自分に向かって言ってみるw

僕が３日間で理解した「できる事マップ」の範囲は、当時のC言語の標準ライブラリですから分厚い本と言っても範囲はかなり限定的でした。

現在のJavaScriptについて、同じ情報粒度で「できる事」を調べ始めるとすぐに挫折するほど大量の情報量に圧倒されると思います。

その理由は、JavaScriptは本当にいろいろな事が出来るライブラリであふれてますし、それを当時僕がやった粒度でやろうとすると、「素人がいきなりエベレストを目指す」のと同じような壁の高さを感じると思いますw

ではどうするか。
まずは、軸となるフレームワークを決めて、その軸周辺で調べるのが近道だと思います。

軸となる調査対象フレームワークを決める – React

「フレームワーク」が何かは以下を参照してみてください。

フレームワークの一般的な定義（wikipedia）

簡単に言うと、プログラムを開発するための便利な「骨組み」であったり、プログラム開発のための「一定のルール」と言えます。骨組みやルールが決まっているという前提でプログラムを始めるのと、骨組みやルールを含めてゼロから自分で作り始めるのとではプログラム開発に使用する時間も労力も大きく異なります。

フレームワークの使用については、賛否両論あります。

フレームワーク賛成派

賛成派としてはやはり開発効率です。 フレームワークに慣れると、時間も労力も大きく削減できる効果を期待できます。
また、決まったルールに従ってプログラムする事で、一定水準の品質を維持できる事が期待できます。

フレームワーク反対派

反対派としては、その巨大さと独自ルールです。膨大なソースをインポートする事でプログラム自体が極端に巨大化します。
もし作りの悪いフレームワークを使用すると、かえって複雑なプログラミングを強いられたり、パフォーマンスが劣化するという事が起こる可能性があります。
またフレームワークの「プログラミングルール」に縛られるため、本来フレームワークを使用しないプログラミングに比べて、プログラムデザインの自由度が下がる可能性があります。

これらの賛否両論の意見を考慮して、メリットをうまく活用し、デメリットを抑止するためには、「広範囲で支持を得ているフレームワーク」というもの使用するのが一番確実だと思います。
理由は簡単で、多くの技術者が多くのメリットを感じているから使っているのだと思います。

今回僕は「React」というフレームワークを軸にして、JavaScript関連技術で何が出来るのかを調査してみたいと思います。

React

Reactを一言で言うと、「React is a JavaScript library for building User Interfaces.」だそうです。

余談ですが、URLのドメインに含まれる文字は「reactjs」となっていますが、公式サイトでは「React」という名称を使っています。どっちが正解なのでしょうねw

僕がReactを選択した根拠は、Stack Overflowの「WEBフレームワーク」という分類の統計データです。いまだにjQueryが根強くトップですが、Reactが大きく迫っている状況です。

Stack Overflow Developer Survey

Stack Overflowのコメントとして、緩やかにReactJSが追い上げていると記載されています。

もう一点、「state of JavaScript 2019」というサイトのフロントエンド分野において、Reactが独走しています。

State of JavaScript 2019

JavaScriptにはもう一つ大きいカテゴリとしてバックエンド分野がありますが（ちなみにこちらは「Express」が独走ですね）、今回フロントエンド分野から調査対象を決めた理由は、フロントエンドのほうが「見た目」で何が出来るのかが非常に分かりやすいと思ったからです。

私の周りでもReactはかなりの頻度でお目にかかるようになりました。
書籍の数やネット上の情報も非常に多く存在するので分からないことにぶつかっても情報ソースを探すことにはあまり苦労しなさそうです。
私の会社でもReactを使った社内プロジェクトが動き始めています。

なら、これに追従したほうが良いというのが私の意見です。

Reactに関連するライブラリを調査する

フレームワークとしてReactを利用する事にしましたので、Reactで利用できるライブラリを確認してみることにしました。

そしたらワンサカ出るわ出るわ。。
これ全部チェックするのはマジで死ねます。。

と思っていたら、こんな素敵なサマリーを提供してくれている人がいました。

Awsome React

Reactユーザーに向けて体系的にまとめてくれてます。
が、やっぱりメチャメチャ多い。。

とりあえず１カテゴリに１つをピックアップして、Reactでどんなことが出来るのか、サンプルショーケースや紹介動画等があれば積極的に取り上げてザックリ紹介していきたいと思います。
量が多いので、本当にザックリです。

ドキュメント、コミュニティサイト、開発ツール、チュートリアル等は除外します。

Next.js – Reactのためのフレームワーク

なんと、Reactというフレームワークためのフレームワークがあります。
どんだけー！w
Reactのパフォーマンスや最適化、開発効率化のためのフレームワークだそうです。NetflixやHulu、TickTokなどのサイトで使用されているようです。

Next.jsショーケース

React-admin – 管理ページをSPA化

色々なWEBサービスで提供されている管理者向けのページを想定したSPA開発フレームワークです。
マテリアルUIに対応しており、非常にリッチな管理者向けページが作成できます。
大概のシステムでは管理者ページはおざなりにされやすいのですが、これがあれば管理者も嬉しいですよね。
こういうところが他社との差別化になりそうです。

Introducting React-admin

React-router – コンテンツへのアクセスパスを簡易化

例えばページ内に “/otherContents”というURLパスにある別のコンテンツを表示させたい場合、どうしますか？
普通に考えると、パスにあるコンテンツを動的に読み込んで特定の要素にそのコンテンツを書き込むといったプログラムを書く必要が発生します。
もし、１つのページ内に複数の場所にある複数コンテンツを表示させたい場合、上記処理を複数個所に書く必要があるでしょう。

これはチョー面倒くさいですね。
React-Routerはその処理を劇的に軽減/簡易化します。

これはショーケースというものが示しづらく、「どれだけプログラムを簡易的にできるか」が見どころなので、プログラムを見て頂く必要があります。

オススメのYoutube動画をご紹介します。

ゆくゆくは私もこのような動画で、自分で説明できるように準備します。

React Router Tutorial | React For Beginners

このYoutuberは様々な動画コンテンツを持っており、他の動画もお勧めです。

Remix – React.Route開発者が開発したNext.jsライクなフレームワーク

似たようなフレームワークとしてNext.jsを挙げていますが、React.Routerの上位フレームワークという事です。特にコンテンツのルーティング機能については、フォルダ構成がそのままURLになるのでとても分かりやすいですね。
データアクセスの負荷も軽減できるようです。一度同じURLから取得したデータはRemixがキャッシュしてくれて、後続処理ではキャッシュデータを使用する事が出来るので、データアクセスが高速化されます。
プログラムの書き方も非常にシンプルになるとの事です。

フレームワークのフレームワークのフレームワーク。。。みたいに、フレームワークのお化けになるのは何か好きじゃない。
別にReact.Routerでよくないか？と思いますが、使ってみてそのメリットに気が付いたら「良い！」って思うのかなぁ。
Remix-Preivew

Styled-components – 手軽にCSSを宣言

プログラムソース内に手軽にCSSを定義する事が出来るライブラリです。Airbnb、Spotify、vimeo等のサイトでも採用されているようです。
これは利用価値が高い気がしてます。
Styled-components Showcase

Material-ui – 直観的で操作しやすいUIを構築

Googleが提唱しているデザインのガイドラインに沿ったUIが構築可能なライブラリです。
視覚的にどの要素がクリックできるのか、何が出来るボタンなのか、どこで何が出来るのかが視覚的に分かりやすくデザインできます。
Netflix、Unity、Amazon等で採用されているようです。
Material-UI

React-bootstrap – 有名なライブラリBootstrapを手軽にReactで利用できる

ページのレイアウト、入力フォーム、ジャンボトロン、カルーセル等、他のライブラリ（jQuery等）が無くても利用できるようにしたもので、React用に再構築されているようです。
React bootstrap

React Native – Reactでネイティブアプリ開発

Reactでネイティブアプリケーションを開発できるプラットフォームです。PCアプリもAndroidやiPhoneなどのモバイルアプリもこれで行けます。1コードで複数デバイスで動作できるのは素晴らしいですね。
React Native

Viro React – ReactでAR/VR

React Nativeを使用して、１つのコードを複数デバイスで動かすことが出来るAR/VRライブラリです。
これ素晴らしいですね。
Reactでここまでできるなんて、やりたいことがバンバン広がります。
Viro React

React-Three.js – Reactで3Dアプリ開発

Three.jsは、JavaScriptで3Dアプリが開発できるフレームワークですが、これをReactから利用できるようにしたのがReact-Three.jsです。
Three.jsでどんなことができるのか、サンプルサイトがあったのでどうぞ堪能してくださいw
Three.js – examples

React-reCAPTCHA – スパム操作からサイトを守るためのGoogleサービスをReactアプリから利用するライブラリ

reCAPTCHAをご存知でしょうか。
あなたのサイトに入力フォームがあった場合、悪意あるボットによってスパムコメントが大量に登録される可能性があります。
reCAPTCHAはそれを防止するためにGoogleが無料で提供しているスパム防止サービスです。
これをReactから簡単に利用するためのライブラリです。
React-reCAPTCHA

その他もろもろ – 力尽きましたw

上記のほかにも、Google Mapを便利に利用できたり、GraphQLといった新しいWeb API規格を便利に利用できたり、Reactアプリケーションで発生したアクションに対する状態の変化を管理できたり等、とにかくいろいろなプラットフォーム、フレームワーク、ライブラリが利用できますので、今後少しづつ取り上げてみたいと思います。