![Javascript入門編](https://i0.wp.com/afficana.com/wp-content/uploads/2020/04/js-basic-1.png?resize=1280%2C720&ssl=1)
僕はエンジニアとして働いているのですが、ちょうどもう1度最初からJavascriptを勉強し直そうと思ったので、皆さんにシェアしていきたいと思います!
この入門編をクリアできた時点で、どうやってjavascriptを実行できるかや簡単な計算なんかもできるようになっているはずです!
動画も登場するので、文字でわかりずらかったら動画でも学んでみて下さい!
Javascriptの可能性
Javascriptがなんなのかっていうの説明してもいいのですが、正直退屈になりそうなのでここでは、Javascriptの可能性やポテンシャル。そして、なぜ勉強しておいた方がいいのかなどを紹介していきたいと思います。(みんな大好きお金の話も)
まず、Stack overflowという海外のプログラミングに関して質問できる掲示板みたいなのがあるですが、そこで調査されたプログラミング言語の人気ランキングを見てみましょう!
![プログラミング言語ランキング](https://i0.wp.com/afficana.com/wp-content/uploads/2020/04/ead7fbdfec8466fe0351679856e8ece6.png?resize=1024%2C871&ssl=1)
プログラミング言語(スクリプト言語など含む)の人気ランキング2019年の調査結果で
- Javascript
- HTML/CSS
- SQL
- Python
- Java
ダントツの1位に輝いていますね!
まぁHTMLとCSSとSQLは絶対どこでも使っているのでランキング上位なんですけど、Javascriptの人気はどんどん上がっているので、世界中どこでも仕事があるんですよね!
じゃ次はアメリカのJavascriptのエンジニアの方々の平均年収みてみましょう!
![平均年収](https://i0.wp.com/afficana.com/wp-content/uploads/2020/04/55391c4877eb9830e20068d79650328b.png?resize=1024%2C501&ssl=1)
だいたい年収で1268万円!!!!めっちゃ高いですね!これ平均なんでもっと上の人もいます!それぐらい、需要があって金額も高くなってきています。
それぐらいJavascriptには可能性が秘められているので、学んで損はないということを伝えたかったんです。
ウェブ制作でも、バックエンドでもフロントエンドでもJavascriptは使うので、勉強していて後に特をすることばかりだと思ってます!
Javascriptの書き方
ここから実際にどうやって書くのかやっていきましょう!
まずは、ファイル名から!
ファイル名は最後に .jsと付けるだけで、javascripが書けるようになります!例えば、index.jsとかmain.jsかドットの前はなんでもいいので自分の好きな名前をつけましょう!
書き方はこんな感じです。↓
console.log(‘この中に文字を入れると表示できる’);
こんな感じで、console.log();というおまじないでこの()の中に入れたものを表示できます。文字を表示したいときは、””か”で文字を囲むと表示できます。
もし数値として計算などする場合は、””などで囲まずそのまま入れて下さい。
()このカッコの中の値が文字ならば””数値ならば、なし、と覚えておきましょう!
実行方法
実行方法は2通りあるので、最初は1番よくする方法を紹介したと思います!
まずはgoogle cromeを開いてどこのページでもいいので開いて下さい。そのページで右クリック!『検証』またはショートカットコマンドのMac:「command」+「option」+「I」windows: 「F12」で開くことができるこんな画面。
こんな感じで開くと思います。この写真ではconsoleというタブを開いているのですが、もし開いてない場合は、consoleの文字のところ押すとここにたどり着けます。
この白いところにjavascriptを書き込むと実行できます。こんな感じで!↓
![実行方法1](https://i0.wp.com/afficana.com/wp-content/uploads/2020/04/e0657abdb11054c7126dc25e32dfdf68.png?resize=1024%2C208&ssl=1)
これが1番簡単な方法です!
もう1つ簡単な方法は、ファイルを作って表示させる方法です。
ファイルの作成方法などは割愛させていただきますが、HTMLとJSのファイルを作ってHTMLファイルをダブルクリックするとページが開きそこでさっきの検証をクリックすると、JSのファイルが読み込まれてそこに表示されます。
index.html のファイルにこれを↓
index.jsのファイルにこれを↓
そうするとこんな感じに表示されてるはずです!
![表示](https://i0.wp.com/afficana.com/wp-content/uploads/2020/04/6ccc2c292dc13a938f58fcbd8863cbba.png?resize=1024%2C227&ssl=1)
nodeを使っての実行方法
nodeっていうのをインストールできる人は挑戦してほしいですが、もしできたならばこんな感じでも実行可能です。(後日インストール方法まとめます。)
テキストエディタのターミナルを使って実行ができちゃいます!こんな感じで↓
![conosle](https://i0.wp.com/afficana.com/wp-content/uploads/2020/04/b527edf29f008d71d5cea661280f72a4.png?resize=862%2C216&ssl=1)
node ファイル名
node index.js
node+ ファイル名だけでそのファイルの内容を表示することができます!
nodeさえインストールできれば簡単ですね!
四則演算
なんか難しそうですね。四則演算。。。。。
これはただの足し算と引き算とかけ算と割り算の話です。
計算をjavascriptでできるようになるのがここでの目標です。数値の表示は前でも話したように、””で囲まないようにします。そして、『+, -, *, /』の4つを使って計算できます。
例を見てみましょう!
結果は。。。。
![コンパイル結果](https://i0.wp.com/afficana.com/wp-content/uploads/2020/04/7b91ba62bc7b0d9d85028ac0e8191af6.png?resize=528%2C334&ssl=1)
当然の結果ですね。
しかし、1番下に『3 % 2』というのありますがこれはあまりを出す計算式です。3割る2=1.5ですが、小数点以下は表示しないようになっているので、あまりの割ることができない1が余っているということで、1と表示されます!
まとめ
動画で今までの内容を振り返ってみましょう!
めっちゃ雑ですいません!
Javascriptは最初の段階ではそんなに難しくなく感じるでしょうが、どんどん難しくなってきますので、最初の基礎の部分を忘れないように勉強することをオススメします!
フレームワークのreactとかvue.jsとかに手を出していくでしょうが、結局基本のJavascriptがわかってないと、理解できないとこがたくさん出てくると思うのでしっかり身につけましょう!
![](https://i0.wp.com/afficana.com/wp-content/uploads/2019/03/meeting_1551628662.jpg?resize=320%2C180&ssl=1)