プログラミングっぽいことをやってみる

スギ

2024年7月23日 23:30

プログラミングの最初は「Hello World !」を表示することが多いので、それのやり方を投稿してみます。
入力した文字をそのまま表示しているので、名前を入力したなら、名前が表示されればOKです。

手順はこんな感じです。

Google Chrome をインストールする
Google Chrome を起動する
プログラム入力用のWebサイトを表示する
プログラムに合わせて設定を変更する
プログラムを入力する
プログラム(ファイル)を保存する
保存したファイルを Google Chrome で表示する
改造(1)
改造(2)

1. Google Chrome をインストールする

下のアイコンが「スタート」メニュー(Windowsの場合) や「Launchpad」(macOSの場合)にあれば、この手順は飛ばして、「2. Google Chrome を起動する」に進んでください。

https://www.google.com/intl/ja_jp/chrome/ のページに移動し、「ダウンロード」のリンクをクリックし、インストーラーをダウンロードする。
ダウンロードしたインストーラーを実行する。
(これだけでできる人は手順知ってる人だよね、、、　でも、Windows も macOSも細かく書くと読むのも大変だと思うので、これで終わり)

2. Google Chrome を起動する

上のアイコンをダブルクリックして、Google Chromeを起動する。
ここから後は、このページをGoogle Chromeで表示するために、上に表示されているアドレスをコピーし、起動したGoogle Chromeにペーストし、「Enter」キーを押す。

3. プログラム入力用のWebサイトを表示する

プログラムはテキストが入力できれば作れるため、最初からインストールされている、Windowsのメモ帳やmacOSのテキストエディットでも作れます。
ですが、プログラミング向けのテキストエディタに「Visual Studio Code」(ビジュアルスタジオコード)があるのでそれを使います。
Google Chromeで表示していると思うので、「Visual Studio Code」 https://vscode.dev/?vscode-lang=ja を表示する。
下線が引いてあるところを右クリックし、新しいタブで表示する。

4. プログラムに合わせて設定を変更する

4-1. 表示する言葉を日本語にする

もしかしたら、表示されている言葉が英語になっているかもしれないので、日本語に変更します。
Windowsの場合、"Ctrl"キーと"Shift"キーと"P"キーを、macOSの場合、"Command"キーと"Shift"キーと"P"キーを押して、「コマンドパレット」を表示する。(下に表示されるのは一致しなくて大丈夫です。何度か練習したので選びたいのが一番上に来てます。)

"CDL"と入力し、「Configure Display Language」を選択する。(クリックでも、上下キーでカーソル(色がついた帯)で選択して「Enter」キーを押すでもどっちでも大丈夫です。)
一部分だけでも合ってると、候補に表示してくれます。
「Configure Display Language」が選択したくて、単語の頭文字だけ入力したのがさっきの"CDL"。キー入力が苦手な人がいるかも知れないと思い、入力が少ない "CDL" で説明しました。
僕は名前に自信なかったので、表示→Display 言語→Language で"Display Language"を入力しました。

「日本語」を選択して、「Enter」キーを押す。

画面全体の文字を変更するため、表示言語の変更を実行したときは、Visual Studio Codeを再起動するようにオススメされます。
青い方のボタンを選択してしばらく待ってください。
ちなみに、表示言語が違うとコマンドパレットの表示が変わります。

4-2. 新しいファイルを作成し、プログラム言語を選択する

左上の横棒3本をクリック → 「ファイル」をクリック → 「新しいテキストファイル」をクリックする

「Untitled-1」という名前のタブが作られます。
まだ名前が付いてない状態です。

この後、HTMLファイルを作ってプログラミングの触りをしようと思うので、「HTMLファイルを作るんだよ」って設定にします。
今は右下の表示が下の絵みたいになってると思います。

これの、「プレーンテキスト」のところをクリックします。
コマンドパレットと同じように選択するものが表示されます。

ここから「HTML」を選択します。
アルファベット順に並んでるのでかなり下までスクロールしないと「HTML」が選べません。面倒なので "HTML" を入力すると候補が減って選びやすくなります。

選択すると下の通り「プレーンテキスト」が「HTML」に変わります。
あと、下で「UTF-8」となっている場所がそれ以外の場合、「プレーンテキスト」をクリックしたときと同じように操作し、「UTF-8」に変更しておいてください。(初期設定が UTF-8 だし、UTF-8 が広く使われているので、多分、変更しなくても大丈夫。)

5. プログラムを入力する

キーボードのキーを押すと押したキーがそのまま表示されるモードにします。「A」のキーを押したとき、「あ」になる場合、Windowsだったらキーボードの左上の「半角/全角」を押す、macOSだったらスペースキーの左側の「英数」キーを押す。
「!」(ビックリマーク)キー(「Shift」キーを押しながら「1」キーを押す)を押す。

「!」マークが1つの方を選択する。

HTMLで毎回入力するものを表示します。
<body> と </body> の間の 9行目に "Hello World !" を入力します。
これが表示されるので、名前に変えても、好きな記号に変えても大丈夫ですよ。

6. プログラム(ファイル)を保存する

メニューを選択した後、保存するフォルダを指定し、名前(ファイル名)を入力します。
自分しか見ないと思うので、ファイル名はなんでも良いので、適当に「sample01」にしました、点( . )の後ろの「html」(拡張子(かくちょうし)って言います)は変更せず、そのままにしておく。

僕が保存したファイルはこうなりました。

7. 保存したファイルを Google Chrome で表示する

さっき保存したファイル、上の通り操作していたら、「sample01.html」をGoogle Chromeで表示します。
ファイルを保存したフォルダを表示します。
その中にある、「sample01.html」をクリックし、マウスを押したまま、Google Chromeのタブが表示される場所へマウスを移動し、下向き矢印が表示されたら、マウスを離します。このマウスの操作(マウスを押したまま、移動し、狙った場所に来たら離すのことを「ドラッグアンドドロップ」って言います。)
下の絵で右下に表示している①のファイルを②の丸の辺りを狙って移動し、③の下向き矢印が表示されたらマウスを離す。
タブの真ん中辺りに矢印が表示されてると、そのタブを変更してしまうので、タブの隅っこみ表示されてるときにマウスを離してください。

表示されると、こんな感じに、自分が入力した「Hello World !」が表示されてると思います。

上の表示ならず、下のように「こんにちは世界！」と表示され、翻訳する言語を選択するポップアップが表示された場合、「英語」の方を選択してください。

8. 改造(1) 翻訳表示を止める

変更前のファイル

01  <!DOCTYPE html>
02  <html lang="en">
03  <head>
04      <meta charset="UTF-8">
05      <meta name="viewport" content="width=device-width, initial-scale=1.0">
06      <title>Document</title>
07  </head>
08  <body>
09      Hello World !
10  </body>
11  </html>

2行目の <html lang="en"> で「このファイルは en(英語 ENglish)だよ」ってなってます。そのため、Google Chromeが気を遣って、日本語にする? って聞いてきます。
だから、「このファイルは日本語(JApanese)だよ」って変更すると、翻訳するか聞いてこなくなります。

変更後のファイル

01  <!DOCTYPE html>
02  <html lang="ja">
03  <head>
04      <meta charset="UTF-8">
05      <meta name="viewport" content="width=device-width, initial-scale=1.0">
06      <title>Document</title>
07  </head>
08  <body>
09      Hello World !
10  </body>
11  </html>

これを、さっきの 7. の手順で表示すると、翻訳するか聞いてこなくなります。

9. 改造(2) プログラミングで使う部品を使ってみる

ここまでのはHTMLの書き方で、HTMLでは結果が変化させられないので、プログラムの書き方だけ利用します。

01  <!DOCTYPE html>
02  <html lang="ja">
03  <head>
04      <meta charset="UTF-8">
05      <meta name="viewport" content="width=device-width, initial-scale=1.0">
06      <title>Document</title>
07  </head>
08  <body>
09      Hello World !
10      <script type="text/javascript">
11          document.write("Hi World !!!");
12      </script>
13  </body>
14  </html>

上のファイルの10〜12行目を追加してます。
ファイルを保存し、表示すると、下のように表示されます。
ファイル名変えてなければ、Google Chromeの「ページを再読み込み」ボタン(矢印が時計回りに曲がってるボタン)を押すと、ファイルを読み込み直すので、保存した内容が表示されます。

改行を出力するように作っていないため、前回の実行結果「Hello World !」の続きに11行目のカッコの中に入力した「Hi World !!!」が表示されてます。
表示している「Hi World !!!」以外の場所で入力を間違えると「Hello World !」だけが表示され、何も追加されないことがあります。
文字が追加されなかった場合、10〜12行目で文字を余分に入力していたり、入力できていなかったり、アルファベットの大文字と小文字が合っていない可能性が考えられるので、その辺を確認してみてください。

最後に

プログラミングの作業はこんな感じです。
ファイルを作って表示したり、変更して表示します。

どうなんでしょう？、僕が初めてプログラミングした時にはもうちょっと操作が必要で、実行ファイルを作るしかなくて、「パソコンに表示された！」って感動した。
ブログやNOTEでも自分が入力文字をWebブラウザに表示できるので感動しにくいかもなので、次回は動くものに挑戦してもらおうと思います。

この記事が気に入ったらサポートをしてみませんか？