クライアントサイドでは一択
こんにちは、徳です。
デジタルDIYができるようコーディング・プログラミング・画像加工・動画編集などを本やYouTubeで勉強しています。
現在は初心者なので、とにかくゆっくり進んでいくと思います。
また、「間違っていること」や「こうした方が良いよ」などがあれば、コメントなどしていただけたら幸いです。
では、いきましょう！
JavaScript
JavaScript
って聞いたことありませんか?
Javaとは違います。
よく、
Webページ作成ならHTML・CSS・JavaScriptの3つ
と聞くあのJavaScriptです。
このようにWebページ制作に必要なプログラミング言語である、
JavaScript
についての紹介です。
それではよろしくお願いします。
JavaScriptとは
説明
JavaScriptとは、
Webページに動きをつけるためのプログラミング言語
です。
HTMLとCSSでコーディングしたWebページにJavaScriptで指示し、部分的にロードすることでWebページに動きをつけます。
Webサイトは、HTML・CSS・JavaScriptの3つを使ってよく作られます。
なぜJavaScriptを使うのか
従来のWebサイトは、1ページ1ページ全てHTMLで準備されていました。
つまり、JavaScriptを使わなくても
Webサイトは作れますし見られます。
その中には、どのページにも使われている部分もありますよね。(ヘッダーメニューやアイコンなど)
大体のページにあるのに、ページが変わるたびにその部分も読み込むのは、速度などにも影響が出ます。
JavaScriptでは、ページ自体の変更をさせずに、変更する必要のある部分をプログラミングで指示し、HTML自体を書き換える事ができます。
Webページには、
ヘッダー
がありますね。
こちらは、そのWebサイトのどのページにも同じように入っています。
しかし、JavaScriptが使われる前は、同じ部分があってもサイト内を移動するとき、次のページを全て読み込みます。
一緒なのにもう一度読み込むのは無駄のように思えますね。
これを、JavaScriptを使うことにより、HTMLの文章をプログラミング言語で、書き換える事ができます。
これにより、変更のない場所はそのままで、変更が必要な箇所のみの読み込みで済みます。
とは言っても、全部を一つのHTMLで作ってはかなり読みづらいので、
複数枚に分けますけどね。
こちらは、あくまで1例です。
今あるWebアプリはたくさんの動きがあります。(ページの下まで行ったら自動で更新されるなど)
今のWebサイトのほとんどは、JavaScriptに使われています。
HTML・CSS・JavaScriptの例え
この三つはよく
1冊の本
で例えられます。
HTML：本の文章
CSS：行間の広さであったりカバーの色などの装飾
JavaScript：ページをめくる動作
どんな感じ?
あくまでこんな感じと出しただけなので、
無理して読まなくてもOKです。
必要なもの
JavaScriptに必要なものとしては、
エディタ
ブラウザ
です。
ブラウザはきっと何か持っていますよね。
あとは、エディタを準備しましょう。
どんなことができる?
JavaScriptにできることは、
- 非同期通信
- Webページに動きをつける
- クリックなどのイベントに合わせて動きを指定する
などたくさんあります。
非同期通信
先ほど例に挙げたものです。
ページを同期することで、違うページを表示するのでなく、JavaScriptがHTMLを書き換えてくれることにより、同期せずに違うページを見る事ができます。
これにより低負荷でページ移動が可能になります。
Webページに動きをつける
- ボタンを押したら計算結果を表示する
- 時間が経ったら表示さえれている画像が変化する
など今のWebサイトは一つのアクションなどからページに動きがあります。
これは、JavaScriptで指示することで、できるようになります。
クリックなどのイベントに合わせて動きを指定する
JavaScriptでは、クリックやスクロールなどの動作をイベントとして、取得してくれます。
そして、「そのイベントを取得したら、〇〇をする」などの指定ができます。
番号を入力するフォームで、アルファベットなど入れていたら、フォームの上に[数字を入力してください]と赤い文字を表示する。
など
メリット・デメリット
メリット
JavaScriptのメリットとしては、
- ブラウザがあれば環境構築は完成
- クライアントサイド・サーバーサイドどちらでも使える
- ライブラリが多い
などがあります。
ブラウザがあれば環境は完成
PHPやPythonなどのプログラミング言語は、実行環境を自分で整える必要があります。
しかし、JavaScriptにはその必要がありません。
なぜなら、Chrome・Safari・EdgeなどほとんどのブラウザでJavaScriptが搭載されているからです。
ブラウザは基本入っていると思うので、何もダウンロードやインストールはしなくていいです。
クライアントサイド・サーバーサイドどちらでも使える
Webサイトには、
サーバーサイドとクライアントサイドの二つ
があります。
クライアントサイドとは、ユーザーがブラウザで見るページのことです。
サーバーサイドとは、ページを作った側が管理するためのページのことです。
主に、JavaScriptは
クライアントサイド
で使われていました。
しかし、今では、
Node.js (ノードジェイエス)
というソフトがあり、JavaScriptでサーバーサイドの開発もできます。
つまり、クライアントサイド・サーバーサイドどっちも使えるため、
慣れれば便利ですよね。
ライブラリが多い
JavaScriptは世界中で使われています。
そのため、ライブラリやフレームワークも豊富です。
- ライブラリ：再利用できる便利な機能
- フレームワーク：Webアプリに使われる枠組み
のようなものです。
使っている人が多いため、たくさんの人が便利な機能や枠組みを作ってくれています。
一から作るよりライブラリを使用して、
元からあるものから作る方が多いです。
デメリット
JavaScriptのデメリットとしては、
- ブラウザによって動作や表示が変化する
- 処理速度が速くない
などがあります。
ブラウザによって動作や表示が変化する
JavaScriptは、皆さんが見るWebサイトを作るのに使用します。
では、Webサイトは何で見ますか?
Chrome
Safari
Edge
などブラウザですよね。
このように皆さんが見るブラウザは異なります。
その全てで全く同じ表示方法・全く同じ動作というわけではありません。
当然、全然違うということもありませんが。
このように、
JavaScriptはブラウザによっていろいろ変化があってしまう
ことになります。
処理速度が速くない
JavaScriptは、スクリプト言語です。
そしてスクリプト言語の特徴として、
コンパイルが必要ない代わりに解析に時間がかかる
ということがあります。
JavaScriptも例外ではありません。
処理速度が速くない
です。
まとめ
今回は、
JavaScript
について紹介させていただきました。
とにかくまず言いたいことは、
みんなが見るWebページを作りたいならJavaScriptは必須
ということです。
JavaScriptのさまざまなライブラリを使いましょう。
実際、書く事のみを考えたら今回の紹介はそこまで重要ではないと思われます。
しかし、JavaScriptは何に使われるのかなどを理解した方が書くときも理解しやすいと思います。
これから、JavaScriptの書き方についても少しずつ紹介させていただきます。
最後まで読んでいただき、ありがとうございました。
コメント