WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

JavaScriptとは

プログラムとは?

いよいよJavaScriptの授業が始まります。人によっては今回のJavaScriptがプログラムに触れる初めての機会になる場合もあります。
プログラムという物を触った事が無い人はまず、「プログラム」という物がどういう物なのか、という事を理解しましょう。

プログラム

コンピュータプログラム(英:computer programs)とは、コンピュータに対する命令(処理)を記述したものである。コンピュータが機能を実現するためには、CPUで実行するプログラムの命令が必要である。プログラミング言語と呼ばれるコンピューターのための言語。

要はコンピューターに命令し、動かす為に使う物(言語)です。


機械語


本来、コンピューターは機械語と呼ばれる、0と1のみで構成されている言葉で動くように設定されています。しかし、人間が機械語を使ってコンピューターに命令するのは人間側に負担が多いので、人にとって比較的使い易い「プログラム言語」を使ってコンピューターに命令していきます。


プログラム学習

2020年以降、プログラミング教育が小学校で必修化されます。現在IT業界が抱えている問題として、今後さらにIT化していく社会に対しWebエンジニアをはじめとするIT人材の不足があります。
しかし、小学校のプログラミング教育は「プログラマーの育成」が目的ではありません。小学校段階におけるプログラミング教育の目的は、プログラミング言語の使い方を覚えることで無く、文部科学省は、プログラミング教育を通じて育成すべき資質・能力を「プログラミング的思考」という言葉で表現しています。

この事は初学者にとってのこのクラスでのプログラム授業と同じで、まずは「プログラミング的思考」を理解する事を目標にしましょう。



Javascriptとは

JavaScriptとは、米Netscape Communicationsによって開発されたスクリプト言語です。JavaScriptは主にWebブラウザ上で動作します。クリックすると画像が変わったり、要素が消えたり、現れたりというHTMLやCSSでは出来ない、いわゆるサイトの動的な部分を担当しているスクリプト言語です。
Webサイト・Webアプリ・バックエンド・デスクトップアプリ・モバイルアプリなど、ブラウザからサーバー、デスクトップからスマートフォンまで使用場面は多岐にわたっています。

それどころか、今やJavaScriptは宇宙船のUIにも使用されています。
note.com


JavaScriptと似た名前のプログラミング言語に「Java」というものがありますが、まったくの別物です。なので混同しないようにしましょう。


スクリプト言語

JavaScriptスクリプト言語です。ではスクリプト言語とはどういうものか?
簡単に言うとスクリプト言語とは簡易版のプログラミング言語で、特に実行環境を整える必要も無く、ソースコードをその場で順を追って解釈する「インタープリタ方式」の言語です。

プログラム初学者にとっては特に難しい設定をしなくて済み、手軽に使えるのがこのJavaScriptです。


なぜJavaScript?


freelance-start.com



www.rstone-jp.com


image.itmedia.co.jp



主なJavaScriptフレームワークやライブラリー

AngularJS

React

Vue.js

jQuery

また、サーバーサイドでJavascriptを動かす事が出来る「node.js」やSNSとの通信で使用する「JSON」などjavascriptはとにかく汎用性が高く、便利な言語です。

JavaScriptで出来る事

演算処理

プログラミングの基本である演算処理。単純な四則演算のほか、三角関数や円周率等を使用したり、年齢を算出したり、日数を割り出したりなど、さまざまな用途で使用します

ドキュメント操作

Webページに文字を表示したり、非表示にする。文字や背景の色を指定する。 Webページを切り替える、など、html内のドキュメントを操作する事が出来ます。

マウス等のイベント処理

クリックやマウスオーバー、Webページそのものロード時など、その他様々なタイミングで処理を行わせることができます。
サムネイル画像をクリックすると大きい画像が表示されるようなものから、メニュー項目をクリックすると下の階層のメニューが開くようなナビゲーションまで、このようなイベント処理を行っています。

DOMを使用した処理

DOM(Document Object Model)を使用することで、HTML文をツリー構造のように扱うことができます。
これを上記のイベント処理等と組み合わせて使用することで、サイト内に新しいコンテンツを挿入したり、書き換えたり、削除することが出来ます。

実際にJavaScriptを入力してみる

ブラウザに文字を表示させてみましょう。ブラウザに文字を表示させたい場合はbodyタグの中にscriptタグを使ってJavaScriptの記述をしましょう。
JavaScriptで文字列を表示するには、「window.document.write(' ')」を使います。
ただし、「window.document.write(' ')」は「document.write(' ')」に省略する事が可能です。



JavaScriptの場合、コーテーションはシングルでもダブルでも使用可能ですが、シングルコーテーションが推奨されているので、授業では必ずシングルコーテーションを使用しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<script>
  document.write( 'Hellow World!!' );
</script>
</body>
</html>


プログラムの勉強はweb学習にも向いていて、様々なサービスがありますが、その中でも「progate」は初学者にも向いているので、ぜひ進めておきましょう。

prog-8.com