Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

なぜJavaScriptを学ぶか

No description
by

光宏 新田

on 16 December 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of なぜJavaScriptを学ぶか

なぜJavaScriptを学ぶか
初めに
HTML5
JavaScriptの歴史
言語
後継
まとめ
AjaxやHTML5の普及により、JavaScriptは簡易なスクリプトだけではなく、複雑なアプリケーションの構築を求められるようになりました。
また現在、普及しているOSはWindows、Mac、iOS、Androidなど数多くなっていますが、JavaScriptが動くブラウザはそのどのOSでも動くため、JavaScriptはある意味最も移植性が高い、一度書けばどこでも動く言語となっています。
Form
要素
canvas
2D
SVG
WebGL
video
audio
CSS3
Semantic
HTML
Geolocation
API
DragDrop
API
Clipboard
API
History
API
FileAPI
Offline Web Application
WebStrage
Indexed
DataBase
WebSocket
WebWorkers
画面部品です。
2D描画APIです。
2Dの
ベクター
グラフィックです。
3Dの
描画APIです。
動画の
再生を
行います。
音声です。
高度な画面レイアウト設定を管理します。
画面と関連するデータを管理します。
位置情報を
参照します。
ドラッグ&ドロップ
関連処理を行います。
クリップボードを管理します。
戻るボタン関連処理を行います。
ファイルの読み書きを行います。
アプリケーションをローカルで
キャッシュします。
ローカル上での簡易データストレージです。
ローカルでの高度なデータストレージです。
サーバーとの相互通信を行います。
マルチスレッド
処理を行います。
現在、HTML5の普及が進んでいます。HTML5の主な機能には以下のものがあげられます。
移植性
機能を見ていくとHTML5はすでに、Webページの表示用APIではなく、OSのAPIといったほうがいいものが、多く混ざっています。
このことからHTML5以降、ブラウザはアプリケーションの動作基盤となる、OSのような役割を果たすことを期待されているようです。それにともない、今後JavaScriptはフルセットのアプリケーションを記述するための言語として扱われるようになるでしょう。
JavaScriptは、長らくブラウザごとの独自実装が多く、環境によって処理を切り替える必要がありました。しかしHTML5ではすべての挙動をきちんと仕様化することになったため、いずれそのようなことはなくなると思われます。
ただ、まだ完全に仕様が固まり、すべてのブラウザで使えるようになった機能は、それほど多くありません。特にIEの8以前はHTML5への対応が弱くなっています。
~1995
1995
1996
1997
1998
1999
2003
2008
2009
2009~
JavaScript以前
LISP
Smalltalk
Self
JavaScriptのもとになった言語について説明します。
高級言語としてはFORTRANの次、世界で二番目に開発されました。マクロによる強力な拡張機能を持ち、ライブラリによってかなり自由自在に言語機能を拡張することができます。そのため多くの人々が言語を改良し、試行錯誤することができました。さまざまな便利な機能が考案され、その結果として常にプログラム言語の最先端を切り開いてきました。最近はさすがに他の言語も追いついてきたようですが、その洗練された論理的構造はまだまだ現役で通用しています。
1958年~
1972年~
オブジェクト指向言語として開発された最初の言語です。オブジェクト指向言語でも、C++からJavaなどへの発展はCの構造体などを出発点として、ボトムアップ的に実装レベルで一歩一歩発展してきました。しかしSmalltalkはそれとは違い、最初に世界のすべてをオブジェクトとして表現するにはどうすればよいか、という哲学的な思考から出発し、理想を見据えて発展してきています。そのため、理想的なプログラムを考察するうえでは無視できない言語となっています。最近大流行しているObjective-Cなんかもこの直系ですね。
アジャイルもデザインパターンもこの言語で発展したものが、他のの言語でも普及したものです。
Smalltalkでは、実行効率の面からクラスベースのオブジェクト指向を採用しているのですが、その選択は
妥協であったらしいです。なぜなら、現実世界を継承構造で表現しようとした時、クラスベースだと不足する機能があるからです。
1986年~
プロトタイプベースのオブジェクト指向
Selfでは、クラスを使いません。インスタンスの作成はオブジェクトのコピーとして行い、継承もインスタンス間で行います。この仕組みをプロトタイプベースと言います。この言語はメジャーといえるようにはなりませんでしたが、現在も細々と発展を続けているようです。
JavaScriptの誕生
この年NetscapeがJavaScriptの父ブレンダン・アイクを雇い入れました。ブラウザ上でLISP(Scheme)を実装する仕事があると言われ、喜んで入社したようです。もともと言語に造詣が深かったと思われます。
しかし実際に仕事を始めてみると、締め切りは2週間後。流行のJavaに似せて欲しい。それでいてあまりJava真似しすぎると問題になるので、クラスという仕組みは使っていけない。
など、理想とはたいへん遠いお仕事だったようです。
しかし彼はそれでめげることなく、ちゃんと世界に通用する言語を作り上げました。もともとLISPの仕事と言われて喜ぶような人ですから過去の言語設計については改めて調査するまでもなく頭に入っていたのでしょう。
ただ、細部については作りこむ時間的余裕がなかったのか、詰めが甘い部分はたくさん残りました。それがJavaScriptです。
このころから、IEがJavaScript対応ブラウザ戦争が盛んになってきています。
ECMAScript
ECMAによって標準化されました。MicrosoftとNetsapeの共通部分を仕様化したようです。
ECMAScript2
簡単な改定だったようです。
ECMASpript3
機能が追加
されました。
EcmaScript4の策定が進んでいましたが、MicrosoftとNetscapeが喧嘩をやめようとしないので、打ち切りとなってしまいました。
EcmaScript4の策定が、再度打ち切られます。今度は会社と会社の対立という話ではなく、設計理念による対立だったようです。JavaScriptにクラスやインターフェースやパッケージ、名前空間、果てはジェネリックに至るまで、最近よくあるような機能を、きちんと追加して拡張しようという話が進んでいたようなのですが。そんなものはいらない。LISPみたいにもっとシンプルにしたいくらいだという一派もいて、その結果大論争が巻き起こりました。
ECMAScript4の策定は完全に中止され、代わりにコードネームECMAScript Harmonyプロジェクトが立ち上がりました。Harmonyは調和の意味で、つまり仲良く話し合おうという意味のようですね。他の言語が持つような機能の導入は見送られ、JavaScriptらしいシンプルで柔軟な方向に発展することになったようです。
ECMAScript4策定中止
ECMAScript4完全中止
ECMAScript5
Harmonyのうち、まとまった部分がECMAScript5として公開されました。
Hermony
まだ
続いています。
構文
基本型
関数型
オブジェクト型
クラス的な機能
全体的に
CoffeeScript
Dart
JavaScriptでは、if、for、while、swichなどの構文が普通に使えます。
弱点
forはC風の構文のほかに、for inといって、C#のforeachとかJavaの拡張forのような使い方もできます。とはいえ、この構文を使う時はいろいろ注意しなくてはならない点があり、素直には使いにくいです。
Javaに似ていますし、もっと言えばPerlなどのスクリプト言語に似ています。
数字とか
文字列とか
普通の文法です。弱い型付けなのでちょっと使うには融通が利いていていいですね。
いい感じで型を変換してくれています。
こちらで宣言した関数も宣言の結果変数に代入されているので、あまりかわりません。
JavaScriptの関数は
変数に代入することができます。
代入せずに引数に渡すこともできます。
これは現代風のライブラリを作るには、必須な機能です。
普通に宣言のような書き方をすることもできますが
弱点
吾輩は猫ふぁんくしょんである。どこで生れたかとんとふぁんくしょん見当がつかぬ。何でも薄暗いふぁんくしょんじめじめした所でニャーニャー泣いていた事ふぁんくしょんだけは記憶している。吾輩はここでふぁんくしょん始めて人間というものを見た。
functionという単語を書かねばなりませんが、これは多用するだけに、文字数が長くて目立ってしまいます。
最近のプログラムは、自然言語のように高い可読性を求められていて、単語を流し読んでいくと自然に意味が分かる、というものに近づいてきています。そこにプログラムの仕様とは関係なく目立つ単語がしょっちゅう現れると可読性が落ちます。
また引数として渡す簡単な関数を作るとき、ほかの言語では{}やreturnも省くことができることが多いですが、それもできません。
こんな文章を書いているようなものです。
読みにくいですよね?
弱点
オブジェクト型は、非常にシンプルであるにもかかわらず多機能なものとなっており、それだけでオブジェクト指向の基本機能を実現しています。
基本的には連想配列
です。連想配列というのは、配列だけれどもキーが文字列というものですね。
文字列でアクセスできています。
中身も文字列にできます。
基本的な機能はこれだけ。このシンプルな機能で十分に多機能に使えるのです。
配列としても使えます。
キーに数字を指定すればいいです。
実際には文字列として扱われます。
弱い片付きなので、型変換がされているだけですね。
シンタックスシュガーがあって、
このようにも書けます。
単に[""]の書き方を変えただけなのですが、
これだけでメンバアクセスのような書き方が可能となっています。他言語のオブジェクトと同じような使い方がこれだけでできてしまいます。
メンバへのアクセスのように使えますし
JavaSctiptは関数も普通に変数と同じように使えるので
関数をオブジェクトのメンバとして代入するだけでメソッドも作れます。
またオブジェクトの初期化の構文も大変シンプルで使いやすいため、
JavaScriptと全く関係ない分野でも、オブジェクトの状態の記述や通信に使われているほどです。JSONと呼ばれていますね。
この辺までは大変シンプルかつ多機能で素晴らしいのですが、短期間で設計したこともあり、詰めが甘い部分が見られるのが残念です。
大規模開発やパフォーマンスチューニング向けに改良しつつ、必要ならJavaScript流の手っ取り早いコーディングもできるように設計しています。また、DartはJavaScriptにコンパイルすることが可能であるため、JavaScriptが動く環境ならどこでも動かすことができます。ただし、CoffeeScriptほど単純な置き換えではないようです。よりDartに対応したブラウザでは、JavaScriptに変換せずに、そのままDartをコンパイルして動かすことができるため、高速な動作が期待できます。
以上のように、JavaScriptは今後、高レベルのライブラリと本格的なアプリケーションが構築でき、それでいて移植性が高い言語として、ますます普及していくと思われます。学習することによって実際に利用できる局面も多いでしょうし、また高レベルなインターフェースの学習にも役立つことから、勉強していて損がない言語と言えるでしょう。
JavaScriptは、プロトタイプベースのオブジェクト指向言語なのでクラスは使えませんが同じような使い勝手でオブジェクトを使えるようにはなっています。
初期化関数を定義すると
関数名をクラス名のようにして扱えます。
継承にあたる構文はこんな感じです。
プロトタイプベースなので、ベースクラスにあたるものをインスタンス化して代入します。
ちゃんとポリモーフィズムもできています。
ただ機能的にはいいのですが、関数を定義するとそれがクラスとして使えるとか、プロトタイプを関数のメンバに代入とかいうのは、あまり直感的とは言えません。
論理的な言語の仕組みは大変練りこまれているのですが、細かい見た目や使い勝手の部分が、今一つです。セマンティクスは優秀ですが、文法が今一つという言い方もできます。ただ、この状況は実用的に考えると、比較的問題は少ないのです。
たしかに、見た目や使い勝手が悪いと、プログラムを組む時や読む時に、いちいち思考を妨げることになりますが。論理的な言語の仕組みが洗練されているので、使いやすいライブラリを作り、主要な処理をライブラリの中に隠してしまうことは十分にできます。
ライブラリ化がうまくいかないと、複雑さは等比級数的に発散してしまいますが。使い勝手については、実際に書くコード量に比例して効いてくるだけですから、影響は少ないのです。実際、jQueryなどは内部的にかなり凝った処理を含みつつ、極めて使いやすいライブラリとなっています。
これまで説明したように、JavaScriptは機能的には大変良い言語なのですが、見た目や細かい使い勝手の面で使いにくい面が多々あります。そこで生まれたのがCoffeeScriptです。
JavaScriptと同じような機能を持っていて、それでいて表面的な機能としてRubyやPythonの使いやすいものを取り入れ、てあります。JavaScriptからの変更点は表面的なものなので、簡単な変換ロジックを使いJavaScriptのコードに変換し、JavaScriptに変換された状態で実行されます。なので、JavaScriptが動く環境ならどこでも動きます。変換はシンプルなものであるため、専用のデバッガなどがなくてもJavaScript用のデバッガを使って変換されたJavaScriptプログラムのデバッグをすれば十分です。
ライブラリはJavaScriptのライブラリがそのまま使えます。そしてJavaScriptで評判の悪かった部分は置き換えられ、可読性の高い構文となっています。JavaScriptに比べて便利になっている点は、関数の記述、繰り返し構文、クラスの定義、変数のスコープなどです。
JavaScriptで書くとこのようになります。
DartはGoogleによって設計されました。JavaScriptの置き換えを狙った言語です。JavaScriptは、パフォーマンスチューニングや大規模開発に向かない面があります。そこでGoogleは、JavaScriptでは今後のアプリケーションを構築していくには耐えられないと、Dartを発表しました。MicrosoftがJavaScriptをいWindowsの次世代開発言語に加えるという発表をする直後にです。
速度
LISPのシンプルかつ応用力が高い部分はうまく取り入れ、見た目の文法はちゃんとJavaに似たものを採用し、かつクラスベースではないオブジェクト指向を採用した言語を、きちんと作り上げました。
ただ、その前年にGoogleが発表したGo言語ほどは話題にならず、またMicrosoftはIEに組み込む気がないような発言をしています。が、Googleは、ChromeしかDartに対応せず、またDartが普及しなかったとしたら、その時はChrome上でGoogleが開発したアプリだけが高品質で高速で動くようになるだけのことだ、とか強気の発言をしているようです。今後どうなるかは不安ですが、確かにGoogleは自社のみ採用しても言語を盛り上げていくことはできるため、それなりに期待が持てると思います。
Full transcript