javascriptでHello World - なおしむ論

新年度が始まって「プログラミングが勉強したい！」て話をよく聞くので、javascriptを書いて実行するまでについて書きます

エディタを用意する

おすすめはVisualStudioCodeかatomです好きな方を選んでください

コードを書く

エディタを起動して以下のコードを入力してください

<!DOCTYPE html>
<h1>sample</h1>
<script>
console.log('Hello world');
</script>

少し解説すると、
このプログラムは、画面にsampleと表示し、コンソールにHello worldと表示するプログラムです
コンソールとは「開発者用の画面」だと思ってください

<script>より前の部分がhtmlを記述する部分です
今回は<h1>sample</h1>と書きましたが、これは「大きな文字でsampleと表示する」というプログラムです

<script>から</script>の部分がjavascriptを記述する部分です
今回はconsole.log('Hello world');と書きましたが、これは「コンソールにHello worldと表示する」というプログラムです

保存する

ファイル名は何でもいいですが、拡張子はhtmlで保存してください
今回であれば、たとえばhello.htmlとか

ブラウザで表示を確認する

ブラウザはとりあえずchromeでお願いします
chromeを開いて、先ほど保存したhtmlファイルをchromeにドラッグアンドドロップしてください
「sample」という文字が表示されたと思います

次にコンソールでHello worldが表示されることを確認します

ページの適当な場所で右クリックして「検証」をクリック
出てきたウィンドウの「Console」タブをクリック
コンソールを開にHello worldが表示され、javascriptが正しく実行されたことを確認する

f:id:naosim:20180426064709p:plain

プログラムを変更してみる

<h1>sample</h1>を<h1>sample sample</h1>に変更し、 console.log('Hello world');をconsole.log('Hello world, Hello world');に変更し、保存してください
その後ブラウザを更新すると、ページとコンソールに変更が反映されたことが確認できると思います

まとめ

ブラウザでjavascriptを動かすまでの手順を載せました
今回のコードを書いてブラウザで表示するまでの流れを反復練習して、何も見なくてもできるレベルになってほしいと思います