【初心者向け】エンジニアが教えるJavascript入門

Other

Javascriptって難しそう…

こんな方向け。

本記事で紹介する事

  • 入門:Javascriptって何?
  • おすすめのエディタは?
  • Javascriptの書き方は?
  • Javascriptを勉強するのにおすすめのサイト
  • コード・エラーの検索方法

本記事では、Javascriptについて初心者の方が知っておいたら便利なことを紹介していきます。コードはほとんど紹介しません。初心者の方でも理解できると思うので、ぜひご覧ください!

それではみてきましょう〜。

 

入門:Javascriptって何?

まずJavacriptとは何か説明していきたいと思います〜。

Javascriptとは、HTMLで配置した部品に挙動を加えるための言語です。

例えば「ボタンがクリックされたらアラートを表示する」こんな感じですね。Webサイトの動き(挙動)はJavascriptで作られていると思っておいてくださいね!

他にもJavascriptで、出来ることを少し紹介しておきますね。たくさんありすぎるのでほんの一握り。

  • アラートを表示する
  • 時間を取得する
  • Pタグの文字を変更する
  • タイマーをセットする
  • データを送信する(サーバーなどに)
  • 画像を生成する

基本何でもできます笑。「こんなことできるんだ〜」程度に覚えておいてください!

 

おすすめのエディタは?

Javascriptを書くのにおすすめのエディタはAtomですね。好みがありますが、基本Atomをダウンロードしておけば不自由はないかなと思います。

Atomのダウンロードはこちらから↓

Sunsetting Atom
We are archiving Atom and all projects under the Atom organization for an official sunset on December 15, 2022.

他のエディタを使いたい方は、無理にAtomを使う必要はないです。基本エディタならなんでもいいですが、以下のことに気を付けてください。

  • コードに対応している
  • 行数が表示できる
  • 使用ユーザーが多い

コードに対応しているかどうか、めっちゃ大事です。Windows純正のメモアプリなどはコードに対応していないので、色がつかなかったり自動でインデントをそろえてくれなかったり…

Javascriptに対応しているエディタを選ぶようにしてください!

 

Javascriptの書き方は?

それでは具体的なJavascriptの書き方について紹介したいと思います!

<html>
 <head>
 </head>
 <body>
  //ここにHTMLをかく
 </body>
 <script>
  //Javascriptをかく
  //scriptタグで囲む
 </script>
</html>

このようにScriptタグの中にJavascriptを書いていきます。拡張子は.htmlのままでOKです。拡張子も変える必要がないので、手軽ですね!

.jsファイルを作る方法もあるのですが、少し面倒なので紹介しません。上で紹介した方法で書くのがおすすめですよ〜。

 

Javascriptを勉強するのにおすすめのサイト

Javascriptを勉強するのにおすすめのサイトは・・・

ドットインストール

です。

ドットインストールは3分動画でプログラミングを学ぶことができるサイトです。Javascriptの動画も無料で見ることができます!

>> ドットインストールのJavascript動画はこちら

【無料あり】独学におすすめのプログラミング学習サイト
プログラミングって独学で勉強できる?どのサイトで勉強したらいいの?こんな疑問を持っている方向け。本記事では独学でプログラミングを学ぶのに最適なサイトを紹介します。しかも無料です!また、効率的に勉強する方法も紹介するのでぜひご覧ください〜。

 

コード・エラーの検索方法

最後にJavascriptについてネットで調べるときのコツを2つの状況別に紹介したいと思います〜。

やりたいことのコードを調べる場合

自分が実現したいことをネットで調べたいときは、以下のコツを頭に入れておいてください!

  • キーワードに「Javascript」または「js」を入れる
  • 単語で調べる(例:Js ボタン アラート)
  • できるだけ新しい記事を見る
  • わからない時は英語で調べる

Javascriptを略してjsと書くので、これらの単語を必ず入れて検索するようにしましょう。

また、わからない時は英語で調べることで解決したりしますよ〜。

>> 英語版Googleはこちら

 

エラーが出る場合・うまく動かない場合

うまく動かない場合は、まずはエラー内容を確認しましょう。MacでChromeなら「option + Command + i」でデベロッパーツールを開き、「Consoleタブ」を開くことでエラー内容を見ることができます。

あとは、エラー内容の英語をコピーしネットで検索することで解決策が見つかるはずです。この場合は「Javascript」とキーワードに入力しなくても大丈夫です。

 

まとめ

以上、Javascriptについての知識でした!

Javascriptを書くことができたら、プログラマーと名乗ることができます笑。思ったよりも簡単だと思うので、とにかくコードを書いて練習してみてください。

それではJavascript頑張っていきましょう〜。

タイトルとURLをコピーしました