今回はワードプレス歴5年の私がどうやってJavaScriptを勉強したかを備忘録がてら記述しておきます。
私が使える言語
・html
・css
今回は自分でやり方を書くまでの能力がまだ備わっていないため、詳細は参考にした記事のURLを貼っていくことにします。
目次
JavaScriptの勉強法～初心者の僕がどうやってJavaScriptを勉強したかの備忘録
htmlとcssはワードプレス使っているとある程度基本的なことが使えるようになってきたため、次はJavaScriptの勉強を始めました。
ただ読んで勉強しても身につかなさそうだったので、実際に書いてみながら勉強をしました。ということでまずはテキストエディターをインストールしてテキストエディターに書いていくことにしました。
私が使っているのはwindowsなので、いろいろ調べたところ、VisualStudioCode（通称:VSCode）かSublime Textのどちらかが良さそうだったため、VSCodeを使うことに決めました。
開発環境を整えるまでにやったこと～VSCode、node.js、gitのインストール
VSCodeをインストールすることに決めたけど、一応念のためそもそもVSCodeとは？を調べました。
TechAcademyさんの記事を参考にしました。動画でもわかりやすく解説してくれていて助かりました。
>>Visual Studio Code（VSCode）とは？インストールや使い方も現役エンジニアが解説
次にVSCodeをインストールしたけれども、調べていくとnode.jsもセットでインストールした方が良いという記事を見つけ、node.jsもインストールすることにしました。VSCode、node.js、gitについて説明してくれている@GRGSIBERIAさんのこちらの記事を参考にしました。
>>Visual Studio CodeとNode.jsの導入について
node.jsとgitについても調べてみました。
node.jsについては@リナックスアカデミーさんの記事でわかりやすく説明してくれていました。
>>初心者向け！3分で理解するNode.jsとは何か?
node.jsのインストール方法については@echolimitlessさんの記事が分かりやすかったです。
>>Windows 10へNode.jsをインストールする
続いて新しくgitも一緒に準備しといた方が良さそうだったのでこれも一緒にインストールしました。まずそもそもgitとは何かわからんかったので調べたところ、@TCDさんのこちらの記事で詳しく紹介してくれていました。
>>【初心者向け】Gitとは何なのか。基本用語やその仕組みをまとめています。
gitに関してはまだちゃんと理解は出来ていないもののとりあえずインストールしといた方が良さそうなことだけわかったので、こちらの記事でインストール方法とインストール時の設定方法がわかりやすく説明されていて参考にしました。
>>Windows10にGitをインストール(2021年04月更新)
ここまで出来たところでようやくJavaScriptのコード書きながらの勉強出来る開発環境が整いました。
VSCodeの初期設定
開発環境が整ったところで早速VSCodeにいろいろ書いてみようと思いましたが、さすがに初期設定した方が良さそうだったので調べたところ、VSCodeには拡張機能（プラグイン）が豊富で@しばひろさんの記事を参考に必要そうなものをインストールしました。
>>2020年時点で僕のVSCode(Visual Studio Code）に入ってるプラグインや設定を紹介します
拡張機能のインストールの仕方は@BLOG AND DESTROYさんの記事を参考にしました。
>>【VSCode】拡張機能をインストール・削除する方法と、有効・無効を切り替える方法
拡張機能をインストールすると再起動が必要とのことで、再起動が閉じてもう一回立ち上げるだけでいいのかどうかよくわからなかったので、VSCodeの再起動の仕方は@ITガイドさんの記事を参考にしました。
>>VSCode: 再読み込み（リロード）する方法
最初に少し躓いたところ
VSCodeのタグに色がつかない
VSCodeでコードを書くと、例えばタグや属性などに色がつくと思っていました。下記のような感じ。
しかし、拡張機能でハイライトとかインストールしても色がつかず、どの記事にも載っておらずどうしたら良いかと格闘すること1時間…
こちらは、ファイルに保存をしていない状態だとコードに色がつかないことが分かりました。なのでファイルを保存して、〇〇.htmlや〇〇.jsなどで保存をすると色が付きました。
つづく。