こんにちは！ktです！

ちょっと日にちがたってしまいましたね笑

みなさんいかがお過ごしでしょうか？

私は京都に住んでいるのですが9月になったというのにも関わらず、連日猛暑日でびっくりしています。

しかもめちゃくちゃ暑いと思ったら、今度は一気に天気が崩れて雷が鳴り始めて一気に土砂降りになるというなかなかの変わりっぷりを見せています。

そんなことは置いておいて、今日は「＃02　ひな形となるファイルを作ろう」をやっていきます。

URLはこちらから

https://dotinstall.com/lessons/basic_javascript_v4/50602

まずは前回インストールしたVS　Code　を開いていきます。

日本語化したはずなので日本語が表示されてるのではないかと思います。

最初に青枠に白文字でファイルを開くというボタンがあるのでそれを押します。

そうするとファイル選択画面が出てくると思うので今回はデスクトップにファイルを作ることにします。

（あくまでも動画の指示に従っているだけで、どこにファイルを作っても構わないと思います。）

名前は何でも良いです。私は動画でMyJSPracticeとしてあったのでそれに従いました。

その後作ったファイルを押してwindowsの方は下の「ファイルの選択」をクリックします。

Macの人は開くボタンがあると思われるのでそちらをクリックします。

VS　Code　に戻るはずなのでそこで「開いているエディター」の下をみると、

先ほど作ったファイル名が出てきてると思います。

ファイル名の右の方にカーソルを持って行くと4つアイコンが出てくると思います。

その中の一番左である「新しいファイル」という物をクリックしてください！

そうするとファイル名を打ち込むことができるようになるので、

ファイル名を決めてください。私は動画通り「index.html」にしました。

ここで画面左側にあるサイドバー（今まで操作してきていた部分）はもう使わないので、

一番左にある紙が2枚重なったようなアイコンをクリックしてサイドバーを消します。

これから1行目に文字を打ち込んでいくのですが、実はこのコードにはhtmlの知識が必要なようです。

私はそれを思いっきりすっ飛ばしてしまったのでまずそちらからやらないといけないことが

判明しました笑

要するに順番は守れということのようです。

ですのでhtmlの知識の知識をつけることにしましょう。

 

まずは「  #01 Chromeブラウザを導入しよう」からやっていきます。

これは前回やったのでもう大丈夫だと思います。一応念のため確認していきたいと思います。

Windowsの場合デフォルトでedgeが入っていると思いますがドットインストールではChromeを推奨しているので、そちらを使っていくのが良いと思います。何より動画と全く同じことをすれば良いだけなので楽です。

Chromeをインストールできたら＃01は終了です。完了ボタンを忘れずにクリックしてくださいね。

詳しい説明は前回しているので「1からプログラミング　～その1　スタート編～」を見てください。

 

では次に「#02 VS Codeエディタを用意しよう」をやっていきたいと思います。

さっきインストールしたChromeで「visual studio code」と検索してください。

visual studio code は Microsoft が開発している無料のエディターとなります。

こちらをダウンロードしてください。

これも前回やったのでそちらを見てくれればいいと思います。

VS　Codeを開くと最初に必ずウェルカム画面が出ますが、左下のチェックを外しておくことで次から表示されなくなります。

こちらもまだ簡単なのですんなりいったと思います。

 

では今度は「  #03 VS Codeエディタを設定していこう」をやっていきたいと思います。

ここからはやったことない場所ですので、詳しく説明していきたいと思います。

まず設定画面を開いていきます。左上の「ファイル」→「基本設定」→「設定」で開くことができます。

よく使う画面なので、ショートカットキー「Ctrl」＋「,」も覚えておくと良いと思います。

左側に6つの設定項目がありますが、右側によく使う物がまとまっているので、今回はそちらを設定していきます。

まず、「Auto Save」は「AfterDelay」にしておきます。

これにするとファイル編集後に自動保存してくれるので便利です。

それから、「Tab Size」でタブのサイズも設定していきます。

初期設定は4ですが4だと横に広がりすぎるので、2に設定します。

また、「Word Wrap」も設定していきます。

Word Wrapは最初offになっていますが、onにしてください。そうすると、行が自然に折り返されます。

これで基本的な設定は終わりです。

完了ボタンを押して、完了してください。

今回はこれで終わりにします。次回は＃04からやっていこうと思います。