プログラミングの学習には、パソコンインターネット が必要です。

むしろこの2つさえあれば、誰でも学ぶことができます。開発も同じです。

パソコン には、開発に必要な ソフト をいくつか ダウンロード する必要があるため、学習前の準備として開発環境を整えましょう。

今回は、 Webサイトを検索するブラウザ Google Chrome(グーグル クローム) をダウンロードし、なぜこの ブラウザ が必要なのかについて説明していきます。

まだ パソコン に Google Chrome が ダウンロード されていなければ、以下の URL からダウンロードしてください。

Google Chrome ウェブブラウザ

ダウンロードができたら、「デフォルトで使うブラウザ」に設定しておきましょう。最初に起動したときに設定するかどうかを問われると思います。

また、すぐに起動ができるように、アプリのショートカットアイコン を分かりやすいところに設置しておいてください。

ブラウザについて

インターネットで Webページ を閲覧する アプリ のことを ブラウザアプリ といいます。

この ブラウザ にも種類があり、代表的なものでは Google Chrome、Safari、Firefox、IE、Edge、Opera などがあります。

Google Chrome にも パソコン版 スマートフォン版 があり、厳密には それぞれ別のアプリです。このように同じ ブラウザ でもいくつか種類がある場合があります。

また、ブラウザの バージョン ごとにも機能や性能の違いがあります。

ちなみに、日本の パソコン で使用されている ブラウザ の中では Google Chrome がシェア率57%(2020/5/27)で 最も多い結果となっています。

Desktop Browser Market Share Japan | StatCounter Global Stats

ブラウザのシェア率

フロントエンド(HTML、CSS、JavaScript)の 開発において、この ブラウザのシェア率 はとても重要です。

ブラウザごとに プログラミングコードを実行した結果が異なること が よくある からです。

そのため、すべてのブラウザで同じ様に動作するWebサイトを作る場合は、当然すべてのブラウザで 確認 や テスト を行う必要があります。

対象となる ブラウザ や バージョン の数が多ければ多いほど 開発コストは多くなります。

そのため、シェア率の低いブラウザ や バージョン を対象から外すことで、開発コストを抑えます。

なぜGoogle Chrome なのか

シェア率が高い

Google Chrome は 日本でも世界でも 最も多く使用されているブラウザです。

シェア率の高いブラウザで開発を進めていくのは理に適っています。

翻訳機能を使える

開発者は、多くの技術について詳細に暗記しているわけではありません。暗記できる量ではないからです。

では、どうしているかというと、Google で調べます。ググるってやつです。

プログラミングに関する技術の多くは英語圏で生まれており、当然英語で書かれているドキュメントが多いです。

英語ができる方であれば問題ないかもしれませんが、多くの日本人にとって英語はストレスです。

Google Chromeには 翻訳機能 が備わっており、ある程度の精度で翻訳してくれるので、大変重宝します。

デベロッパーツールが優秀

開発者が、ブラウザで実行されている コード を確認するために、それぞれのブラウザには デベロッパーツール という 開発者向けの機能が備わっています。

このデベロッパーツールには、現在のHTMLやCSS、JavaScriptの状態を確認したり、通信結果やログを確認したりする多くの機能があります。

また、Google Chrome では Android端末 と接続して、端末内のブラウザで表示しているWebサイトを確認することもできます。 同じ様に、Safari では iPhone や iPad ど接続して確認することができます。

開発者は、この デベロッパーツール をとても頻繁に使用します。

Google Chromeのデベロッパーツールは、他のブラウザと比べて使いやすく(個人的な感想)、多くの機能を使用できます。

Google Chrome の デベロッパーツール は、

Windows なら F12 もしくは fn + F12
Mac なら option + ⌘ + I 

を押すと表示することができます。

シークレットモード

ブラウザには シークレット(プライベート)モード という機能があります。普段開いている ブラウザ は キャッシュクッキー といった Webサイトの 閲覧情報を保持する といった特徴があります。

ある Webサイトに ログイン をして、ブラウザを閉じて開いた場合でも ログイン されたままになっているのは、この情報が残っているためです。

シークレットモード はこれらの閲覧情報を保持せず、ブラウザを閉じた時点で 消去されます。

このことから、開発時にはしばしば シークレットモード が使用されます。

Windows なら Ctrl + Shift + N
Mac なら ⌘ + Shift + N  

で開くことができます。

他のブラウザ

開発には、Google Chrome を使います。

しかし、他のブラウザでテストを行う必要がある場合もあるため、主要な他のブラウザもダウンロードしておきましょう。

Mac には Safari が標準でダウンロードされていますが、Windows では Safari を使用できません

同じ様に、Windows には IE または Edge が標準でダウンロードされていますが、Mac では使用できません。しかし、最も新しい Edge は Macでも使用することができます。
* 新しいEdge と 古いEdge は別物のため、テストは両方の Edge で行わなければなりません。

課題

Google Chrome で「プログラミング javascript」と検索した結果と、「programming javascript」の結果の違いを比較して、説明してください。

Bulma」このサイトにアクセスし、Google Chrome の翻訳機能を使って日本語にしてください。

デベロッパーツールを開いてどのようなツールがあるかについて確認してみてください。

シークレットモードを開いてみてください。

実際に開くことを確認できればOKです。

シークレットモードを使うと、閲覧履歴やログイン状態がブラウザを閉じると初期化されます。