|
「Web制作を始めたい」 「JavaScriptも勉強しないといけないらしい」 「ドットインストールという学習サイトで無料で始められるらしい」 |
今やWeb制作は人気の職業なので始めてみようと思う人が増えています。
ドットインストールという学習サイトも知られるようになり、気になる人も多いでしょう。
Web初心者がはじめてのJavaScript（無料）をやってみた感想です。
以下「はじめてのHTML と CSS（無料）」の続きですので、先にこちらを見てください。
はじめてのJavaScript
ドットインストールのレッスン一覧からドットインストールが提供する学習コースの一覧が見れます。
コース詳細はいずれまとめ記事に書くとして、「ウェブサイトを作れるようになろう」で学ぶJavaScriptのうち、無料で受けられる以下を受けてみました。
- はじめてのJavaScript
レッスン内容
レッスンは動画です。
動画で解説されている通りに自分のPC環境でマネして学ぶスタイルです。
ドットインストールの特徴をまとめるとこんな感じです。
（利点）
- 開発環境の設定から実際現場で使用する開発環境で学習できる
- 動画の解説通りにマネすることで学習できる
- 1レッスンの動画の長さは平均2分と短いので集中できる。
- 他のユーザーの「質問と回答」を見れる
- レッスンに必要な素材は提供されている
- 分からないことを質問できる（有料）
初心者にやさしい学習サイトです。
最初のレッスンはJavaScriptの概要です。
「JavaScriptを使うと何ができるか？」を初心者向けに説明されています。
開発環境に以下のツールが必要ですが、前回の講義、「はじめてのHTML と CSS（無料）」で設定前提で講義が進みます。
- Visual Studio Code（通称VS Code）
いろんなプログラミングができるコードエディタ - Google Chrome
最も人気のWebブラウザ。Web制作のデバッグやプレビューで使う。
VS CodeでJavaScriptのコードを入力し、
Google ChromeでJavaScriptの動作を確認します。
学習した項目は一覧で確認できます。
レッスンを完了したら手動で「完了」に設定します。
無料のJavaScriptのレッスンの以下ですが、Web制作”は”ほぼ初心者の僕がこのコースにかかった時間は1時間です。
- はじめてのJavaScript
動画は合計30分以下で、他のプログラミング言語経験者は命令の違い程度しか学ぶことはないので、ほとんどコードを入力してません。
はじめてのJavaScriptのレッスンでできることは以下までです。
図形をクリックすると条件によって「Lose!」、「Win!」の文字が表示される、という簡単なゲームが作れます。
学んだ内容と手順はだいたいこんな感じです。
- エラーチェック
use strict - クリックイベントを設定
getElementById()、addEventListner() - エラーメッセージの読み解き方法
Google Chromeのデベロッパーツールでエラーを確認し、修正する方法 - CSSのクラスの作成と操作
classList - CSSのクラスの解除・再設定
toggle() - 定数の利用（長い変数名を定数でまとめる）
const - divを生成し、bodyに表示
createElement()、appendChild() - 繰り返し文
for() - 要素にテキスト入力
textContent - 条件文
if() - ランダムな整数値の生成
Math.floor()、math.random() - CSSで図形変形
transform: rotate()、transform: scale()
次に「詳解JavaScript 基礎文法編」と進みます。
レッスン6から有料です。（2020年6月）
感想 はじめてのJavaScript
「はじめてのHTMLとCSS」とほとんど同じ感想になりますが、初心者にやさしい学習サイトです。
初心者でも一人でドットインストールでJavaScriptを勉強できます。
レッスン内容は子供でも楽しみながら勉強できるように工夫されています。
このレッスンだけでも「JavaScriptを使えばWebブラウザで動作するゲームが作れる」と分かるので、学習のモチベーションが上がります。
もしこれでも難しいと感じる人は超初心者向けの学習サイト、Progateで始めるといいでしょう。
ただ、現場と同じ開発環境、ツールに早くから慣れておくと以下のメリットがあります。
- ツールの使い方も覚えられる
- ショートカットキーを自然と覚えられる
- マークアップ作業を高速で出来るようになる
また、VS Codeの以下ショートカットキーは頻繁に使うでしょうから、早く使って体に覚えさせた方がいいです。
- [option] + “↑” or “↓”：選択範囲のコードをコピー
- [Shift] + [option] + “↑” or “↓”：選択範囲のコードを移動
- [Cmd] + “/”：コメント入力
他サイトの口コミでは「ドットインストールは難しいからProgateから始めることをオススメ」といった意見もありますが、なるべく早く現場の開発環境、VS Code、Google Chromeで学習するのが良いです。
レッスン内容の分からない点を質問できるのは大きなメリットです。
言うまでもないですが、この「はじめてのJavaScript」で学べる内容はWeb制作の勉強の入り口です。
無料の内容でできることはほとんどないので、Web制作を学習するには有料版の登録が必須です。
なお、Web制作でAdobe製品（XD、Dreamweaver、Adobe Photoshop、Illustratorなど）を使う場合はAdobe Creative Cloudが必要です。
社会人やAdobeオンライン講座を受けたい場合はヒューマンアカデミーから購入するとお得です。
