おしえて！JavaScriptの書き方
JavaScriptはWeb制作で使われるプログラミング言語の一種です。
Webで使われるプログラミング言語は他に、Webページ自体を作るHTMLとWebページを装飾するためのCSSがありますが、JavaScriptは画面の動きを裏側で制御できる言語になります。
裏側で制御と言われても何のこっちゃという方もいると思うので簡単な実例を見てみましょう。
JavaScriptのサンプルコード
HTML
<html>
<head>
<script>
function onClickButton(text) {
alert(text + '押されました！')
}
</script>
</head>
<body>
<button onclick="onClickButton('ここ')">押してね</button>
</body>
</html>
画面にボタンを配置してみました。
ボタンを押したらこうなります。
画面上部にメッセージが表示されましたね。
JavaScriptで書かれたプログラムが表示させたのです。
具体的に説明しますと、buttonタグでボタンを配置しましたが、タグの属性にonclickというものがついています。
onclick属性の値に「onClickButton(‘ここ’)」って書いてますね。
これはボタンがクリックされた時にonClickButtonというJavascriptで書かれた関数を動かします、という意味になります。
ちなみにonclickのようにユーザーがWebページに対して何らかの操作を行うことをイベントと呼びます。
クリックの他にWebページをスクロールしたり、入力欄にカーソルを当てたり離したり、キーボードのキーを押されたり離されたりといった操作をJavaScriptでは検知することができます。
それらイベントを駆使することによってJavaScriptではユーザーが画面で何かをした時に何らかの動きをつけてあげることができます。
ちなみに関数を動かしますと言いましたが、関数とは何でしょうか。ちょっと難しそうな言葉ですね。
関数って何？
例えばですが、
自動車工場にタイヤとエンジンとシャシーを持っていったら車が出来上がります。
洗濯機に汚れた服を入れたら綺麗な服が出てきます。
自動販売機にお金を入れたらジュースが出てきます。
電子レンジに凍ったお米を入れたら温かいご飯が出てきます。
これら、自動車工場、洗濯機、自動販売機、電子レンジにあたるものが関数だと思ってください。
つまり、何かを与えたら別の何かを返してくれるものが関数です。
そして、関数に与えられる何かのことを引数といいます。パラメータとも呼びます。
そして、関数から返される何かのことを戻り値といいます。
話を戻しましょう。
ボタンが押されたらonClickButtonという関数が動きます。
onClickButtonの後に「(‘ここ’)」って書いてますね。
括弧の中に書かれるのが引数になります。
つまりonClickButton関数に「ここ」という文字を与えています。
（JavaScriptで文字はシングルクォーテーション（’）で囲みます。）
onClickButton関数の中身はheadタグの中のscriptタグの中に書かれています。
JavaScript
function onClickButton(text) {
alert(text + '押されました！')
}
こちらはfunction onClickButton(text)と書いてますね。
関数を書く時は最初に「function」と書きます。
functionとは英語で関数といいます。
その次に半角スペースを入れて関数名を書きます。
関数名はonClickButtonと書いていますが自分で作った関数なので何でも構いません。
次に「(text)」と書いていますが、これが引数になります。
引数名に「text」とつけていますが、ここは何でも構いません。
ここでつけられた引数名は関数の中で使われます。
わかるでしょうか。
onClickButton関数から見ると処理をするには何かしらの引数が一つ必要だと言っています。
なので、onClickButton関数を呼び出す時は何かしらの引数を与えてあげなければなりません。
「{}」で囲まれた部分が関数の処理の中身です。
今回は「alert(text + '押されました！')」と書かれています。
alert()は上画像のように画面上にポッとメッセージを出すための関数になります。
そう、これも関数なんです。
ただし、alert()はJavaScriptに用意されている標準の関数になります。
標準の関数は自分で作る関数とは違って名前や引数が決まっています。
alert()の引数に「text + ‘押されました！’」と書いています。
これは引数textと押されました！という文字を合体させています。
上記の場合はtextは「ここ」になりますので、「ここ押されました！」という文字になります。
こうしてボタンが押されたら「ここ押されました！」というメッセージが表示されることになります。
あれ、どうして「ここ」という引数が「text」になってるんだって思った方はいるでしょうか。
textは引数なんですが、同時に変数ともいいます。
関数、引数、変数。次から次と◯数が出てきますね。。
変数とは
プログラムの世界の「箱」だと思ってください。
何かを入れられるものが変数です。
onClickButton関数を呼び出す時の引数は「’ここ’」ですが、呼ばれる先のほうでは「text」になっています。
これは「ここ」という文字を「text」という箱に入れてるんです。
「onClickButton(‘テスト’)」と書いて呼び出すと「text」には「テスト」が入ります。
今回は引数が変数のパターンですが、関数の中で変数を作ることもできます。
変数は例えばこんな感じで作ることができます。
JavaScript
function calculate() {
// number1という変数を作ります
var number1 = 10
// number2という変数を作ります
var number2 = 15
// 戻り値は150です
return number1 * number2
}
この例ではnumber1という変数とnumber2という変数を作っています。
変数を作る時は最初に「var」と書きます。
本当は「var」の他に「let」「const」がありますが、これはまた別の記事で紹介したいと思います。
次に半角スペースを入れて変数名を書きます。
次に「=」を書いて、変数に入れたい内容をその次に書きます。
つまり、number1変数に10を入れて、number2変数に15を入れています。
そして最後に「return number1 * number2」と書いていますが、「return」は戻り値という意味です。
そして、プログラミングでは「*」は掛け算という意味です。
つまり、10×15=150を戻り値として関数の呼び元に返しています。
まとめ
HTMLとCSSだけでは書かれたものが表示されるだけの動きの無いWebページになってしまいますが、JavaScriptではイベントを検知して、様々な動きをつけることができます。
JavaScriptでは関数、引数、戻り値、変数の理解が必要になります。
プログラミング言語はJava、PHP、Python、Rubyなど様々あるのですが、書き方こそ違えど、この考え方はどれも同じです。
これがわかればどのプログラミング言語でも大抵通用します。
これだけでもそこそこのプログラミングができますが、その他にも条件分岐やループといった制御を書くこともできますので、今後それらも紹介しようと思います。
したっけ！
- JavaScriptはWeb上でのユーザー操作に応じて処理を書くことができるプログラミング言語
- 関数、引数、戻り値、変数の概念を覚えることが大事
- 引数を与えて関数を呼び出せば戻り値が返ってくる
- 変数は値を入れられる箱のようなもの
本格的にプログラミングを学びたいですか？ITのエンジニアになりたいですか？
IT業界は万年人手不足であり、ニーズがあります。
パソコンとインターネットがあれば場所を問わず仕事ができるので、リモートワークが普及しつつある現代にマッチした職種と言えると思いますし、
物理的に必要なものはパソコンぐらいなので初期投資にかかる費用も少なく、人並みに仕事ができればフリーランスになって会社依存を脱却することもできます。
身につけた技術は一生モノです。
もし本腰を入れて勉強したいという方はスクールに入るのも一つの手です。
いくつか紹介しますので、興味があればサイトを覗いてみてください。
TechAcademy
最短4週間で未経験からプロを育てるオンライン完結のスクールです。 どこかに通う必要なく、自宅でもプログラミングやアプリ開発を学ぶことができます。
TechAcademyのサイトへ
Want to learn programming in earnest? Want to be an IT engineer?
The IT industry is understaffed for many years and has needs.
If you have a computer and the Internet, you can work anywhere,
so I think it can be said that it is a job type that matches the present age when remote work is becoming widespread.
The initial investment cost is low, and if you can work like a normal person, you can become freelance and get rid of your dependence on the company.
The skills that you have acquired is something that will last a lifetime.
If you want to study in earnest, you can go to school.
I will introduce some of them, so if you are interested, please take a look at the site.
DMM WEBCAMP
This is a programming school for those who are serious about changing jobs. guarantee a job change, so it is recommended for those who are inexperienced and are looking for a job change in the IT industry!
move to DMM WEBCAMP
TechAcademy
It is an online school that trains professionals from inexperienced in a minimum of 4 weeks. You can learn programming and app development at home without having to go anywhere.
move to TechAcademy