JavaScript勉強会

JavaScriptの学習日記

【JS学習マラソン】第1回 1.1.1 Javascript 入門

JavaScript学習マラソンの第1回は、

「現代の JavaScript チュートリアル」パート1の1.1「Javascript 入門」です。

 

Javascript 入門 https://ja.javascript.info/intro

を読んでみます。

 

JavaScriptの発祥

JavaScriptは、最初Webページにプログラムを組み込むためのプログラミング言語として開発されました。

今は他の用途も広がりましたが、やはり多いのはWebサイトでの使用ですかね。

 

JavaScript - Wikipedia

登場時期 1995年

設計者 ブレンダン・アイク

影響を受けた言語 C言語JavaPerlPythonSchemeSelf

 

JavaScriptの特徴

JavaScriptは、SchemeやSelfも参考にして作られたので、その特徴があります。

 

Scheme - Wikipedia

登場時期 1975年

設計者 ガイ・L・スティール・ジュニア、ジェラルド・ジェイ・サスマン

影響を受けた言語 Plasma、Conniver、Planner、ALGOL 60、LISP

 

Self - Wikipedia

登場時期 1986年

設計者 David Ungar、Randall Smith

影響を受けた言語 Smalltalk

 

JavaScriptの要点

従って、JavaScriptの使い方、特徴(パラダイム=考え方)を理解するには、

  1. 手続型言語 → 構造化プログラミングの特徴「順次・反復・分岐
  2. 関数型言語 → 関数型プログラミングの特徴「合成・再帰・パターンマッチ
  3. プロトタイプベース → オブジェクトの作り方(クラスベースとの違い)

の3点を念頭に置けば、スムーズになると思います。

(今どきのプログラミング言語なら、どれも似たような機能が用意されているので、JavaScriptに限った話ではありませんが。)

 

JavaScriptの基本

基本は、JavaScriptを手続型として使う場合の「順次、反復、分岐」です。

 

構造化プログラミング - Wikipedia

  1. 順次 順接、順構造とも言われる。プログラムに記された順に、逐次処理を行なっていく。プログラムの記述とコンピュータの動作経過が一致するプログラム構造である。
  2. 反復 一定の条件が満たされている間処理を繰り返す
  3. 分岐 ある条件が成立するなら処理Aを、そうでなければ処理Bを行なう。

 

f:id:jsstudy:20170208192730j:plain

 

とりあえず、

  • 繰り返し → for、while
  • 条件分岐 → if、switch

の文法を理解すれば、最低限動くプログラムをJavaScriptで書けるようになります。

 

JavaScriptの中級

ところで、そもそもですが「プログラム」って何なんでしょうか?

 

コンピューター(電子計算機)のプログラム(命令)は、

  1. データ
  2. 処理

という2つの構成要素から成り立っています。

 

データと処理の関係は、

(1)データの入力 → (2)処理 → (3)データの出力

という関係になっています。

 

jsstudy.hatenablog.com

 

f:id:jsstudy:20170208191854p:plain

 

参照透過性の維持=副作用の管理

ある処理に、同じデータを入れたら同じ結果が出てくる性質を「参照透過性」といいます。

 

参照透過性 - Wikipedia

同じ入力に対して同じ作用と同じ出力とを持つプログラムになる)ことを言う。

 

例えば、足し算の「+」という処理(作用)の場合、1+1は何度やっても毎回

1+1=2

という同じ結果になります。(=参照透過性がある。)

もしも、これが毎回結果が違って、1+1=0とか1+1=3とかに変わったら困りますねw(=参照透過性がない。)

 

参照透過性が維持されない状況は、処理の「副作用」によってもたらされます。

 

副作用 (プログラム) - Wikipedia 

プログラミングにおける副作用(ふくさよう)とは、ある機能がコンピュータの(論理的な)状態を変化させ、それ以降で得られる結果に影響を与えることをいう。

代表的な例は変数への値の代入である。

 

  1. 同じ条件を与えれば必ず同じ結果が得られる
  2. 他のいかなる機能の結果にも影響を与えない

このような性質を参照透過性という。

参照透過な機能はそれ自身状態を持たないことで副作用と独立している。

 

状態を持つ機能

このような機能では見えない所で条件を変化させてしまうために、参照透過性の一つ目の仮定が崩れ、また他の機能の結果も変化させるので二つ目の仮定も成立しない。

 

副作用を伴う機能の例としては、I/O制御(write/print等)、破壊的代入を行う機能などがある。

ノイマン型のアーキテクチャは副作用を前提として動作するため、多くのプログラミング言語では変数の破壊的代入機能を持つ。

一方関数型言語では原則として副作用を存在しないものとみなし、モナドなどの手法で抽象化している。

 

f:id:jsstudy:20170208185213j:plain

 

コンピューターは基本的に、状態の変化=副作用で動作しています。

 

プログラムを作るときのコツは、バグ(エラー)をなくすことです。

バグをなくす一つの方法として、参照透過性を維持するために、副作用を分離して管理することが重要になってきます。 

  • 小さなプログラムを作る場合は、副作用の影響を把握しやすいので、特に困りません。
  • 大きなプログラムを作る場合は、副作用の影響でバグが生じてくるので、その影響を管理してコントロールする必要が出てきます。

 

副作用をコントロールする方法は、いろいろ考えられてきました。

 

 JavaScriptで大きなプログラムを作るとき、バグを減らすために、

  • (Selfに由来する)オブジェクトの機能
  • Schemeに由来する)関数型の機能

を利用して、「副作用」の管理=「参照透過性」の確保ができます。

 

JavaScriptの学習で迷ったときは、原則に立ち返り、

この機能は、副作用を扱うためにどう役立つのか?

を常に思い出すようにしたいと思います。

  • 目的と手段が一致していることを確認する。
  • 必要最小限の機能でプログラムを書く。

 

その他、JavaScriptの基礎知識

JavaScriptの実行環境

人間が書いたプログラムは、コンピューターが実行できる形式に変換する必要があります。

この変換するソフトには「コンパイラ」や「インタープリタ」などがあります。

 

JavaScriptのコードをコンピューターが実行できる形に変換するソフトは、

などが提供されています。

 

WebブラウザーでJavaScriptができることとできないこと

  • Webページ内のHTMLやCSSを書き換えることはできる。
  • ブラウザーを飛び越えて、パソコン(OS)内の様々な機能を勝手に利用することはできない。

セキュリティーを確保するために、Webブラウザー内のJavaScriptが活動できる範囲は制限されているんですね。

 

f:id:jsstudy:20190103072620p:plain

 

JavaScriptの代替え(AltJS)

JavaScriptの文法を拡張したプログラミング言語AltJS)がいろいろ作られています。

 

AltJSとは - はてなキーワード

AltJS とは、JavaScriptの代替プログラミング言語で、JavaScript実行環境で動作する非JavaScript言語の総称である。

 

AltJSとして、

などがあります。

 

AltJSは、「トランスパイラー」という変換ソフトを使って、JavaScriptに変換できます。

AltJSは、JavaScriptフレームワーク(便利な機能を詰め込んだソフト)を使う場合に出番があります。

 

まとめ

(教材のサマリーを引用) 

  • JavaScriptは当初ブラウザ用の言語として作られました。しかし今はその他の多くの環境で利用されています。
  • 現時点では、JavaScriptはHTML/CSSと完全に統合し、最も広く採用されたブラウザ言語として、独立した地位にいます。
  • JavaScriptに “トランスパイル” し、特定の機能を提供する多くの言語があります。 JavaScriptをマスターした後、少なくとも簡単にでも目を通しておくことをお勧めします。

 

 

 

スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)

スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)