ハトネコエ Web がくしゅうちょう

プログラミングやサーバー関連、チームマネジメントなど得た技術のまとめ

プログラミング初心者が HTML, CSS を独学で勉強するならなに使う?

HTMLCSSプログラミング言語じゃなくて
マークアップ言語スタイルシート言語じゃないか!」
…という話は置いておきます。

さて、Progateで勉強し始めた人と今日話して、
「あ〜そういえばテキストエディタや便利なサイトって知らないんだよなぁ」
と思ったので、まとめておきます。

Progate は無料で、あらゆるセットアップ抜きでプログラミング体験ができて良いサイトです。

とはいえ、1つ1つ進めていくのはけっこうかったるいし、勉強したことを見返しにくいしで、
ああいうドリル形式でやるより、参考書片手に自分の書きたいように書く、ってのが向いてる人もいると思いますので、その人向けに書きます。

1. まず、本を買う

Webでも情報は拾えるのですが、特に初心者は本が1冊はあるといいです
Webだと情報が点在しているのですが、本だと「あれやってこれやってこう」みたく体系的にまとまっているので、
1冊終わる頃にはその言語についての知識がしっかり定着するようになると思います。

また、情報が正確なのもいいところです。
Webの情報はほとんどが個人による執筆ですが、
本の場合は、たいてい著者の同僚エンジニア数人が査読(誤りがないかチェック)をおこないますし、
わかりにくい箇所がないか編集者のチェックがありますので、情報が洗練されています。

ただし、情報は古くなっていくものなので、
この2〜3年以内に発売された本を買うのが望ましいです。

選ぶ基準は、本屋で読み比べて自分が読み進められそうだなー、と思うものを買うのが一番いいです。
あとは Amazon レビューを参考にする手もありますが、名著だから評価高いけど読む気にならない本なんかもあるのでお気をつけて……。

JavaScript 第6版

JavaScript 第6版

↑ 例えばオライリーJavaScript本、名著だから☆4評価だけど、文字多いしレイアウトの「レ」の字もないような構成なので私は読む気になれない・・・

スラスラわかるHTML&CSSのきほん 第2版

スラスラわかるHTML&CSSのきほん 第2版

↑ ちょっと探した感じだと、例えばこんな本がおすすめです。
カラフルで画像が多くて読み進めやすく、本を真似すれば最終的に人に見せられるようなクオリティのものが作れる
という構成はモチベーション維持に役立つと思います。

2. 本をどう使うか?

さて本を買ってきたとしましょう。
初心者のうちは読み返すことが多いでしょうから、電子書籍でなく物理的な本がいいですよ!

買った本を読み進めながら、
本の中に書いてあるコードを実際に書き写して自分のパソコンで表示してみてください。

この書き写すって作業がけっこう大事で、本を眺めてるだけだとあんまり脳に残らないんですが、
実際に打ち込んでみると頭に残るし、さらにアレンジを加えてみる(例えば、本に書いてあるのと違う言葉を入れてみる、違う画像を使ってみる)と、
言われたままじゃない感じがして少し楽しくなります。

余談ですが、本に書いてあるコードを実際にパソコンで打ち込んでみる作業を、
仏教で経典を書き写す作業になぞらえて「写経(しゃきょう)」と言ったりします。

3. どこにコードを書くか

本を読みながら内容を書き写す、と上で言いましたが、
では HTML や CSS をどこに書くのがいいのでしょう。

3-1. Visual Studio Code

個人的には「Visual Studio Code」というテキストエディタ
プラグインとして

を入れて書いていく。という方法をおすすめしたいです。

f:id:nekonenene:20200321010949p:plain
「Live Server Previewプラグインで完成形を見ながら編集できる

言ってみればプロの開発者と同じ環境なので、
今後プログラミング経験をより積んでいく予定があるなら、この選択は大いにアリです。

3-2. JSFiddle

一方で、上の方法は
なんだかんだでセッティングにつまずいたり使い方がわからなかったり、で時間を多く使ってしまう可能性もあります。

それも勉強にはなるのですが、
「もっと手軽にやりたいな」って方や、「フロントエンドだけ勉強したら充分」って方には、
JSFiddle がオススメです。

f:id:nekonenene:20200321012732p:plain
JSFiddle でプレビューを見ながら作成できる!

HTML, CSS, JavaScript を手軽に書いて実行することが出来ます。

右上の設定から Code hinting(補完機能)と Auto-run code(Runボタンを押さなくても反映してくれる)をオンにしておくことをおすすめします。

f:id:nekonenene:20200321013434p:plain
オンにするとよい設定(※ Auto-run code はログイン済みユーザーのみ設定可能)

また、JavaScript のライブラリを設定することも可能なので、
jQuery を使いつつ JavaScript 書いてみたいな〜」っていう練習にも対応できます。

f:id:nekonenene:20200321014258p:plain
実はタブの上部を押すとこんな詳細設定が出てくる

4. HTML, CSS の勉強が終わったら?

本を1冊踏破して、本の内容を80%くらい理解したとしましょう。

なお、HTMLタグやCSSプロパティをすべて覚える必要はありません
多くの人が「こういうときどうするっけ」ってこういうサイトを見たり、やりたいことでググったりしています。
使用頻度の高いものは自然に覚えていくと思うので、丸暗記する必要は全くありません。

このあとは、作りたいサイトがある人はそれを作ってみたり、
プログラミングを勉強したい、という人は JavaScriptRuby, Python などに行ってみてもいいでしょう。

Progate とか見てると「HTML/CSSの次はJavaScript」と思うかもしれませんが、
決してそんなことはなくJavaScript を使わずとも PHPRuby on Rails でサイト作りをすることはできます。

「ユーザー登録の出来るWebアプリケーションを作りたい」と考えている人なら、
JavaScript の勉強は飛ばして LaravelRails の学習に進むのはアリです。
ただし、データベースを使うなど難度は上がるので、時間はかかるかもしれません。

個人の好みに合うプログラミング言語は人それぞれですから、
勉強し始めて挫折したら、他のプログラミング言語の勉強をしてみてもいいです。

プログラミング言語の本、なにか1冊を読破しましょう。
それが出来れば、プログラミング言語同士は共通点が多いので、
他の言語に関しては本いらずでだいたい理解できるようになっていると思います。

なにか迷った際は、お気軽にご相談ください。

twitter.com