【入門】JavaScriptをわかりやすく解説します【初心者必見】

今回は上記のようなお悩み、疑問にお答えする記事となっています。

こんな方にオススメの記事です

JavaScriptは理解出来ないと難しく感じる言語ですが、理解できるようになるととても楽しい言語です。初めての方でも分かるように解説していきますので是非読んでみて下さいね。

それでは行ってみましょう。

記事の信頼性

はじめまして、大阪のWEB制作会社でフロントエンドエンジニアとして勤務しているしのです。

今現在現役のエンジニアですので、今回の記事の信頼性の担保になると考えています。

JavaScriptで出来ること

JavaScriptで出来ることは大きく分けて以下の二つあります。

JavaScriptでは出来る事が本当に多くあるため、"現段階の知識として"、代表的な二つと言えばこれという認識で捉えて頂ければと思います。

それでは順番に解説していきます。

WEBサイトに動きをつける

まず一つ目がWEBサイトに動きをつけることです。

例を出した方が早いので箇条書きで記載します。

などなど。挙げればキリがないほどですが、皆さんもWEBサイトを見た時に目にした事があるものが多いと思います。

こういった機能を実装しているサイトは必ずJavaScriptを使っています。逆に昨今ではJavaScriptを使ってない方が珍しいと思われます。

なぜなら、HTMLとCSSだけだと動きが殆どありませんし、平たく言うと「今っぽくないサイト」になってしまいます。

例えばこのサイトでは画面をスクロールしていくとふわっとコンテンツが浮かび上がるようにして現れますが、こういった仕様もJavaScirptによるものです。

反対にWikipediaのようなサイトではJavaScriptは使われていません。

JavaScriptが使われていないサイトを「静的なサイト」、JavaScriptが使われているサイトを「動的なサイト」とも呼びます。

サーバーと通信して非同期通信が出来る

次に出来ることとしては、「サーバーと通信して非同期通信が出来る」です。よく意味が分からないですよね。

非同期通信というものをご説明する前に同期通信についてご説明します。

同期通信とは、HTMLデータをサーバーに送って、それに対してサーバーからクライアント(サイトを見ているユーザー)のPCにデータが送られてくるわけですが、この流れをまとめて同期通信と言います。

ただ、同期通信だと例えば

と面倒な事が起きます。

これを解決したのがJavaScriptの非同期通信なのですね。Ajax(エイジャックス)とも呼ばれます。

非同期通信をする事で、例えばGoogle Mapであればスクロールすればスイスイと他のエリアを見れますよね。

また、入力フォームも入力ミスや漏れがあればその都度知らせてくれます。

こういった事が出来るのがJavaScriptなんですね。

JavaScriptの勉強方法

JavaScriptで出来ることは分かったけど、どうやって勉強したら良いの、と思われるかもしれません。

プログラミング学習で有名なprogateやドットインストールを利用するのも手ですが、書籍での勉強も自分のペースで勉強出来るのでおすすめです。

まずはこういった書籍で基礎をしっかり固めます。

特に上記の２冊は入門用に最適ですので一読される事をオススメします。

その後は、「何かを作ってみる」と良いです。

なぜかと言うと、JavaScriptを勉強していると「これはどこで使うの？」と感じる事が多々あるため、実際に何かを作ってみて、考える方が効率的に学べるからです。

意味がわかると勉強の理解度も上がります。

なので基礎を終えられた方は例えばドロップダウンメニューを作ってみるとか、タブメニューを作ってみるなどの実装をしてみる事をオススメします。

JavaScriptのフレームワークについて

JavaScriptにはフレームワークというものがあります。JavaScriptをベースにしつつより使いやすくしたツールの事ですね。

そして2021年現在、JavaScriptのフレームワークは大きく分けて以下の三つがあります。

それぞれ以下のような特徴があります。

Vue.js(ビュージェイエス）

Vueは、WebアプリケーションやWEBサイトのUIを構築できるフレームワークです。フロントエンド開発の多くのシーンで用いられます。

[特徴]

・学習コストが低い

・シングルページアプリケーションの作成に長けている

・どちらかというと大規模よりも中規模の設計に向いている

・割と気軽に始められる

・日本語の書籍や記事が多め

・双方向のデータバインディングが出来る

・個人開発向けだがチーム開発も可で汎用性が高い

・JavaScirptを使用

React.js(リアクトジェイエス)

ReactもWebサイトのUIパーツを構築するために使われるフレームワークで、こちらはFacebook社によって開発・提供されています。

[特徴]

・学習コストはVue.jsに比べるとやや高い。日本語の書籍や記事がまだまだ少ないのも特徴

・どちらかというと個人開発向けだが、チームでの大規模開発も可

・片方向だけのデータバインディング

・JavaScriptを使用

・UIを作ることに特化している

・Reactを学習すればReact Nativeでスマホアプリが作れる

Angular.js(アンギュラージェイエス)

Angularは、検索エンジン大手のGoogle社によって開発されたフルスタックフレームワークです。Angularでは、Webアプリケーション開発に必要なほとんどの機能をサポートしています。

[特徴]

・学習コストが高い。初学者にはあまりオススメ出来ません

・TypeScriptを使用

・双方向データバインディングを使用

・マスターメンテナンスのようなCRUD系アプリやフォームを使ったアプリ向け

・開発に必要な機能が全て揃っている

・高い開発効率を実現しやすい

筆者のオススメのフレームワーク

私がオススメするとしたらVue.jsです。

私もJavascriptのフレームワークはVue.jsから始めたのですが、やはり学習コストが低く、かつHTMLを触って開発するのでHTML/CSSから勉強を始めた人にも馴染みやすいフレームワークであると思います。

導入に関してもCDNといってフレームワークを使うためのコードを一文エディタに記載するだけでよく、開発の準備も容易であるためです。

Vue.jsの書籍も多数出ています。

一番上のものは通称「猫本」と呼ばれているものでVue.jsに初めて触れる人向けの１冊と言われています。

他の２冊もわかりやすいためオススメです。

また、２つめの書籍の著者でもあるたにぐちまことさんはYOUTUBEでもVue.jsの解説をされておりこちらもわかりやすいため参考にされる事をオススメします。

学習する順番

フレームワークについてご紹介しましたが、たまに

「生のJavaScriptよりも先にフレームワークを勉強しても良いですか？」

といった事を聞かれますが、基本的にはJavaScirptの基礎学習を終えられてからフレームワークの勉強をされる事をオススメします。

というのもフレームワークはあくまでツールですので、JavaScirptの基礎が身についていないと理解しづらいためです。

技術書や学習サイトもJavaScriptの基礎は身についている前提で話が進められることが多いので、挫折しやすくなってしまうでしょう。

そのため、最低でも基礎学習、クラスやオブジェクトくらいまで終えられてからフレームワークに着手すると良いと思います。

学習の注意点

JavaScriptは他の言語と比べて習得がしやすい、とは言われていますが初めてプログラミング学習をする方、HTML/CSSから学ばれてJavaScriptを勉強し始めた方などは

と思われるのではないでしょうか。

それもそのはず、HTMLやCSSはある程度型にはまってなくても「動きました」し、変化を感じる事が出来ました。

でもJavaScriptは1文字でも間違えるとすぐエラーになって「動かない」んです。

特に初学者のうちはそういう状態が頻発するので挫折につながりやすいです。

なので初めてプログラミング学習をする方でJavaScriptを学ぶ方の心構えとしては

「JavaScript習得にはある程度時間がかかる」と思っておきましょう。

すぐ身につけれると考えているとそれこそ現実とのギャップで挫折に繋がります。💦

オススメの学習方法

では挫折しない、オススメの学習方法とはどういったものか、自分自身の経験も踏まえてお伝えしたいと思います。

結論からお伝えすると

「早いうちにDOM操作をしてHTMLの要素を動かしてみる」

というものです。

DOM操作とは、Document Object Modelの略で、平たく言うとJavaScriptでHTMLを操作する事を言います。

そう、つまりJavaScriptはWEBサイトに動きをつけることが出来る言語ですが、これはDOMによるものが大半なのです。

なので、DOM操作をしてJavaScriptが出来る事を実感した上で学ぶ、という方法が自身はオススメと考えています。

技術書や動画ではまず基礎学習から入ります。

演算子やアウトプット方法など。

もちろん演算子やアウトプット方法も大事なのですが、全体像や出来る事を把握していないと知識が中々線として繋がりにくいんですね。

自身はこれで最初だいぶ苦労したので。

とまさにハテナがいっぱいでした。笑

ただ、DOM操作をすると、例えばテキストの入れ替えなどであっても凄く感動したのを覚えています。

「おおー！！変わった！プログラムが機能してる！」と(大袈裟)

でも最初はそんな小さな変化も嬉しいんです。

JavaScriptに限らずプログラミング学習は理解が大事なので、木を見て森を見ず状態になると学習が上手く進まなかったりします。

なのでまずはDOM操作をしてJavaScriptを体感してみてもらえたらと思います✨

JavaScriptは人気の言語

JavaScriptはプログラミング言語のの中でも人気の言語と呼ばれています。

フロントエンド、バックエンドの両方で使える汎用性の高さと、環境構築の容易性、需要の多さなどが理由とされています。

先述の通り、昨今ではJavaScriptを使ってないサイトの方が珍しいくらいなので需要は高まり続けると思いますので学習しておいて損はない言語と言えます。

まとめ

いかがでしたでしょうか。

JavaScriptは奥が深い言語ですし、今も進化を続けてる言語です。フロントエンドエンジニアを目指す方であればJavaScriptは避けては通れませんし、むしろフロントエンドはJavaScriptを使うのが仕事です。

ただ、先述しましたが最初は習得が難しいと思います。

なので焦らない事が大事です。一日一日、出来る事、理解出来る事を増やしていきましょう。

最後までお読みいただきありがとうございました✨

おしまい✨