JavaScriptを遊んで学ぶ
はじめまして、今年4月に新卒エンジニアとして入社しました村田です。
今回が初投稿となりますがよろしくお願いいたします！
さて、実は私はJavaScript初心者です。
入社後、実際に製品を触るまでJavaScriptをつかった事がなかったため、
開発で一番苦労したのはJavaScriptだったような気がします(笑)
そこで今回は、ｗ２に入社前のエンジニアや学生の方に向け、初歩の初歩からお話していきたいと思います！
ところで…、「JavaScript」と文字数が多いので、以降「JS」と略させていただきます。
1. 簡単に書く
事前にお伝えさせていただきますが、今回は遊ぶだけなのでHTMLとJSだけで行いますね。
まず、基本JSは下のような形でコードを書きます。これは私も知っています。
<script>
// コードを記述
</script>上記をHTML ファイルの中の head 、 又はbody 要素内に記述するらしい。
…といってもjsファイルに書いたり呼び出せるので、その限りではないです。
個人的にはデザインが見づらくなるので、別で書いてまとめた方が良いと思います。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お遊び</title>
</head>
<body>
<label>この下JavaScript注意</label>
<br/>
<script>
document.write("<label>この上HTML注意</label>");
</script>
</body>
</html>実行結果
業務外（？）プログラムを触るのが久しぶりすぎて楽しい…。
こちらデザインが見づらいですね。別ファイルで書いて呼び出しましょう。
※呼び出し方例
<script type="text/javascript" src="./js/test.js"></script>中身は同じで、ファイルだけ分けた状態のコードがこちら
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お遊び</title>
</head>
<body>
<label>この下JavaScript注意</label>
<br/>
<script src="./js/test.js">
</body>
</html>結果は同じですね、というかHelloWorldにすればよかった。
2. function関数
次にご紹介するのは、個人的にコードを見ていて知りたかったものの１つ、「function関数」です。
「わかりやすく最初からやろう > 知りたい 」っていう条件式があったので仕方ないですね。
まあ書き方からやるつもりなのでセーフという事にしてください・・・。
JSの関数は実際にはすべて Function オブジェクトで、(function(){}).constructor === Function というコードが true を返すことで確認することができるそうです。
C#の「int.parse」もそうですね。
function関数は下記の様に書き、引数指定できます。
function test(引数) {
// コードを記述
}function test(引数) {
// コードを記述
}test(引数);例えば、これをボタン押下時の場合（OnClick=）で定義すると実行してくれて、中に指定している処理を実行してくれるわけです。まあ便利。
サンプルコード
<script>
function test(a) {
return a * a;
}
</script>ただの二乗するコードです。
なんか高校の時同じような事をするコードをC#で習ったな・・・。
では引数「5」を渡して実行してみましょう。
すごく簡単なプログラムしか書いてない…
これ、VisualtSudioでやるとブレイクポイントをはれなくて時中の変数に何が入っているかわかりづらいんですよね。
そんな時は「Console.log(変数);」でConsoleに落としてやりましょう。
（開発で滅茶苦茶役に立ちました）
// こんな感じ
<script>
function test() {
Console.log("こんにちは");
}
</script>実行すると…
といった感じで表示することができます。
console.系は他にも「console.time()」でtime()〜timeEnd()までの間にある処理を計測したり、
「console.count()」で実行回数をカウントしてくれたり、色々メソッドがあります。
よかったら調べてみてください！（よく使うのはlog）
3. 終わりに
さて、長くなってきたので、そろそろ終わろうと思います。
本当はAjaxの非同期処理をやりたかった…ので、次回までにそれを学び記事としてご紹介できるくらいにしたいと思います。
ざざっとどんなものか説明いたしますと、
Web サーバーとブラウザとの間で非同期通信を行う方法で、ページを切り替えることなくページの内容を書き換えることができるようになります。
この文章ではよくわかりませんね…。
しかし「ページを切り替えることなくページの内容を書き換える」という説明文に全てが詰まっています。
それまでに自分がJSを全て理解し、触らないかもしれない…
という事はほぼないと思います。
では、次回作をお楽しみに！お読みいただきありがとうございました。