ブログについての情報を中心に、ギター関連の上達法や転職情報など幅広く発信中。悩み解決に特化したHow toメディア。

Limitless.net

プログラミング

JavaScriptの基礎知識と書き方を学んでイメージをつかもう

投稿日:

JavaScriptの基礎知識と書き方を学んでイメージをつかもう

 

誠太
こんにちは、誠太です。

 

プログラミングの基礎知識として、JavaScriptはどのようなことが出来る言語なのかをまとめました。

 

正直、ぼくも勉強段階なので基礎知識しかないところですが、ザックリどんな事ができる言語なのかは確認できると思うので、参考にしてもらえたらと思います。

 

本記事の内容

  • JavaScriptの基礎知識
  • JavaScriptの書き方
  • JavaScriptで作れるもの

 

JavaScriptの基礎知識と書き方を学んでイメージをつかもう

JavaScriptの基礎知識と書き方を学んでイメージをつかもう

 

JavaScriptと検索すると難しいページが検索結果のトップに表示されていて、理解どころではないと思います。

 

そのため、なんとなくJavaScriptってこんな言語なんだなっていう感覚をつかめるページを作りたくて、本記事を執筆しました。

JavaScriptとは

JavaScriptとは

 

JavaScriptは、WebサイトやWebページに動きのあるアニメーションを付ける事が出来る言語になります。

 

上記の例はあくまで一例なので、他にも作れるものは多くあるようです。

 

例えばこのサイトでいうと、サイトのヘッダーメニューをクリックしたときに、ドロップダウンメニューダウンでサブカテゴリーが表示されるのが分かると思うのですが、これもJavaScriptでアニメーションを付けることができています。

JavaScriptの基礎知識

JavaScriptの基礎知識

 

JavaScriptはフロントサイドの言語と言われています。

簡単に解説すると、いまあなたが見ているWebページ自体がフロントサイドになります。

 

逆にサーバーサイドという言葉を聞いたこともあると思うのですが、サーバーサイドはサーバーの中に入っているデータを処理する言語になります。

 

ログインアカウントとかが間違っていたときに表示される『アカウント情報が間違っています』の『間違っている』という事をフロントに伝える役割とかがそうですね。

 

JavaScriptの開発環境はブラウザでOK

JavaScriptの開発環境はブラウザがあればOKです。

扱いやすいブラウザとしてGoogle Chromeが例として良く使用されているので、もしインストールしていなかったら使いやすいブラウザなので乗り換えるのもありだと思います。

 

JavaScriptの書き方

JavaScriptはこちらのスクリプトタグの中に内容を記述するようになっています。

 

<script>~~~</script>

 

例えば、ブラウザに”Hello World”を表示させるにはこのように記述します。

 

<!DOCTYPE html>
<html>
<head>
<title>JavaScriptの基礎知識</title>
</head>
<body>
<script>
document.write("Hello world!!");
</script>
</body>
</html>

 

また、ページを開いたときにポップアップを表示させるようにするための記述は下記のようなものがあります。

 

<script>
alert("Welcome to my website!!");
</script>

 

ページを開いたときのポップアップは広告などで使用されていますね。

 

全画面広告なんかはまさにJavaScriptの挙動でしょうし、phpmyadminにログインするときに丈夫に表示されるログインポップアップもJavaScriptとPHPの合わせ技になっているのだと思っています。

 

このようにWebサイト上で何らかのクリックや動作を行った場合に、アニメーションアクションを起こすように出来る言語がJavaScript言語になります。

 

JavaScriptの拡張子はhtmlとjs

JavaScriptの拡張子はhtmlの場合と、jsの場合と2つのパターンがあるようです。

 

少ないアニメーションなのであればHTMLに直書きでも良いのだと思うのですが、もし記述が大きくなってくるようなサイト単位の開発だった場合には、js拡張子ファイルを作成して外部ファイルとして読み込んだほうが開発がしやすい感じがします。

 

この感覚と似ているのは、CSSですね。

CSSも外部ファイルとして、style.cssをHTMLに読み込ませて使用する場合がほとんどだと思うので、JavaScriptでも同じような感じの事が出来ると思ってもらって良いと思います。

 

JavaScriptのコードの最後には『セミコロン(;)』

JavaScriptの閉めの文章はCSS同様で『セミコロン(;)』になります。

 

このセミコロンを忘れてしまうと、命令が閉められずにどこまで処理を行えばよいのかがわからなくなってしまって、記述した内容が正常に動作しない場合があります。

 

JavaScriptのコメントの書き方

JavaScriptのコメントの書き方は、1文の場合と複数文の場合で記述方法が分かれます。

 

//1行コメントの場合

/*

複数コメントの場合

*/

 

このように記述することでプログラムコードとして認識されなくなるため、後々どのような処理をしたのか確認しやすいように、最初のうちはコメントを積極的に使って復習するのもありだと思います。

JavaScriptで作成できるもの一例

JavaScriptで作成できるもの一例

 

続いてJavaScriptで作成できるものを簡単に一例として集めてみました。

 

それぞれ、コメントを入れつつ紹介していきたいと思うので、あなたが作りたいと思うものがあれば挑戦してみてください!

 

Webサイト

Webサイト

 

WebサイトのほとんどがJavaScriptで作られています。

 

という記事をよく見かけます。

ただ、これは結構誤解を招きやすく、混乱する書き方だと思うのであえてここで解説しておきたいと思います。

 

分析してみた感じだと、Webサイトの表向きのページを作成するのはHTMLとCSSでJavaScriptで作成されているわけではないです。

 

JavaScriptはあくまで、HTMLとCSSで作成したWebサイトにアニメーション効果を施すものだと認識しているので、JavaScriptの記述だけでWebサイトが作成できるとは思わないでください。

 

混乱して何から勉強をしたら良いかわからなくなってしまうので、注意です。

 

Webアプリ

Webアプリ

 

Webアプリも同様です。

Webアプリの表向きの部分に関しては、HTMLとCSSで作成されています。

 

JavaScriptで作成されているWebアプリ例でいうと、FaceBookやTwitterなどのSNSサイト(Webサイトで動くアプリケーション)などが良い例になるはずです。

 

このようなWebアプリを作成する場合でも、Webサイトを作成する場合でも、機能的なところを見てみると...

 

  • サイトの骨格を作るHTML
  • デザインを決めるCSS
  • アニメーション効果を施すJavaScript
  • サーバーデータを管理するPHP

 

といったようにそれぞれの役割が決まっているようなので、これらの言語から得意分野を決めて取り組んでいくのが良いのかなと思いました。

 

ポップアップ

ポップアップ

 

ポップアップは先ほどもお伝えしましたね。

ページのポップアップを表示させて、警告やログイン情報の入力欄を表示させることが可能です。

 

基本的にはアラートという記述をするので、注意を促すときに使用するのが一般的なのかなと思います。

 

ドロップダウンメニュー

ドロップダウンメニュー

 

ドロップダウンメニューも先ほど紹介しました。

このサイトのヘッダーメニューの部分をクリックすると、クリックしたカテゴリーの下にサブカテゴリーが表示されると思います。

 

これもJavaScriptの挙動でわかりやすい例になると思います。

もし、ヘッダーメニューがドロップダウンじゃないサイトを模写する場合には、追加してドロップダウン効果を付けてみるとJavaScriptの効果を実感できるはずです。

 

スライドショー

スライドショーは簡単な例としては、このようなものです。

 

2019/6/18

REALFORCE R2レビュー!日本製プレミアムキーボードの最高峰?!

引用:REALFORCE公式 http://www.realforce.co.jp/index.html   誠太こんにちは、誠太です!   キーボードで定評のある東プレ製のプレミアムキーボード REALFORCEを使い始めてから早いもので2ヶ月が経過しました。   FilcoのMajestouchやHappy Hacking KeyboardのPFUなどと比較されることが多いキーボードですが、結果的にREALFORCEをチョイスして正解だったと思っています。   ...

ReadMore

2019/6/16

ギターの値段によって弾きやすさや音は変わる?元楽器屋スタッフが解説!

  誠太こんにちは、誠太です!   ギターの値段によって音や弾きやすさは変わるのか。 こんな疑問をお持ちではないですか?   結論から言うと値段が高いからという事ですべてが優れているということはありませんが、高いギターのほうが優秀な場合が多いです。   本記事では、楽器店のスタッフとして働いていた経験を元に、安いギターと高いギターの違いについて解説してみようと思います。   スポンサーリンク ギターの値段によって弾きやすさや音は変わる?元楽器屋スタッフが解 ...

ReadMore

2019/6/15

【最高!】MacBook Pro用キーボードカバー『moshi』 が有能すぎた

  誠太こんにちは、誠太です!   ついに我が家にも来ました。 MacBook Pro用キーボードカバー『moshi Clearguard MB』   先日、ELECOMのキーボード防塵カバー PKB-MB16を購入したのですが、大失敗した模様をブログで書きました。   『ELECOMのMacBook Pro用のキーボードカバーを買ったら大失敗だった話』   そこで、どのキーボードカバーが信頼性が高く長時間使用できるかを調査してみたところ、moshiのキー ...

ReadMore

2019/6/14

職場に馴染めない人必見!3つのポイントで居心地のいい職場に変化する?!

  誠太こんにちは、誠太です!   職場に馴染めないと毎日が憂鬱で嫌になりますよね。 今まで多数の転職を繰り返してきましたが、転職先で長く務めているのに何故か職場に馴染めていない人をたくさん見てきました。   その経験上、働く上での3原則を忘れてしまっている人が多かったのです。   『ありがとう』 『すみません』 『あいさつ』   ぼくはこれらのポイントを意識することで、職場に馴染めなかったということは今までの経験上ありませんでした。   そのた ...

ReadMore

2019/6/13

ELECOMのMacBook Pro用のキーボードカバーを買ったら大失敗だった話

  誠太こんにちは、誠太です。   先日、MacBook Proを購入するに当たって必要と思われるアクセサリーを購入しました。   購入したアクセサリーの中でELECOMのキーボード防塵カバーを購入したのですが、見事に失敗・・・   パッケージ的にはいい感じの商品かと思ったのですが、実際に装着してみると気になるポイントが沢山あったので、これからキーボードカバーを購入しようとしている方に向けて注意喚起も含め記事を書きたいと思います。 そもそもMacBookにキーボード ...

ReadMore

 

サイトのトップページに大きな画像がスライドショーで表示されているサイトがありますが、あれもJavaScriptの挙動になります。

JavaScriptはフロントエンド開発の中心的な言語

JavaScriptはフロントエンド開発の中心的な言語

 

JavaScriptについて超初級的な解説ページとなりましたが、JavaScriptが日頃使っているサイトのいたるところに散りばめられているのがわかったと思います。

 

表向きのページに関しては、HTML+CSS+JavaScriptで作成して、ログイン機能やお問い合わせフォームなどの実装にはPHPで作成。

 

最終的にそれぞれで作成したものを合わせて、1つのサイトやアプリにすると考えるとイメージしやすいと思います。

 

今後もプログラミング初学者に近いところで記事を更新し、記事と共に徐々にレベルアップしてプログラミング初学者に役立つカテゴリにしていけたら良いなと考えているので、ぼくもがんばります!

 

\ あわせて読みたい /

2019/6/2

初心者の僕がProgateのHTML/CSS基礎編を実践してみた個人的感想

  誠太こんにちは、誠太です!   以前にドットインストールでの基礎学習のポイントを記事にしましたが、どうせだったらProgateを体験してみようと思い、今回HTMLとCSSの基礎編を実践してみました。   ドットインストールとProgateどっちで勉強した方がいいのかというプログラミング初学者の人は多いと思うので、本記事を参考にどちらをメインにして学習するかを決めていただければ嬉しく思います。   本記事の内容 Progateを受講してみての初学者としての感想 P ...

ReadMore

2019/5/29

ドットインストールでプログラミング初心者のぼくが勉強してみた感想

  誠太こんにちは、誠太です!   ドットインストールでプログラミング言語の勉強をし始めて、はや早いもので1ヶ月程経過しました。   5月に入って本格的にプログラミング言語の勉強をし始めて、HTML、CSS、PHP、JavaScriptの勉強を終えたので、初心者が勉強しやすいと言われている主要言語の基礎学習は終了です。   そこで、ドットインストールで基礎学習を終えたプログラミング初心者のぼくが、ドットインストールでプログラミング言語の勉強をしてみての感想をお伝えし ...

ReadMore

2019/5/27

JavaScriptの基礎知識と書き方を学んでイメージをつかもう

  誠太こんにちは、誠太です。   プログラミングの基礎知識として、JavaScriptはどのようなことが出来る言語なのかをまとめました。   正直、ぼくも勉強段階なので基礎知識しかないところですが、ザックリどんな事ができる言語なのかは確認できると思うので、参考にしてもらえたらと思います。   本記事の内容 JavaScriptの基礎知識 JavaScriptの書き方 JavaScriptで作れるもの   JavaScriptの基礎知識と書き方を学んでイメ ...

ReadMore

2019/5/22

XAMPPの設定方法とインストール方法まとめ!【開発環境を整えよう】

  誠太こんにちは、誠太です。   PHPの開発環境を整えるには、XAMPPがオススメです。 プログラミング初心者のぼくは、開発環境を整えるときにApacheやMySQLという言葉がとても難しく感じてしまいました。   しかし、XAMPPを使えば初学者レベルの人でも、簡単にPHPの開発環境が可能になります。   環境開発を整えるのはプログラミングの熟練者でも時間を要する場合があるという話はよく聞くので、本記事を参考にXAMPPでPHPの環境開発を整えてしまいましょう ...

ReadMore

2019/5/21

PHPの基礎知識と書き方を学んで、サーバーサイド言語を理解しよう

  誠太こんにちは、誠太です。   プログラミング言語であるPHPってどんな言語なんでしょうか?   PHPはわかりやすくお伝えすると、インターネットサービスなどで会員登録をしたサイトにて『ログイン』という操作をすると思うのですが、ログインしたときにその情報はあなたのものかを確認して、正しければ会員ページへ。   入力したアカウント情報が間違ったものであれば、確認をするように文字を打ち出すような仕組みを構築する言語になります。   これは、あくまで一例です ...

ReadMore

  • この記事を書いた人
  • 最新記事
誠太

誠太

接客業で年間1600万円の売上を達成した経験を活かして、リアル接客とWebマーケティングを融合。『事実と根拠を明確に、誠実な情報発信』をモットーにブログを毎日更新しています。

-プログラミング
-

Copyright© Limitless.net , 2019 All Rights Reserved.