12. 各種の話題

レポート課題

本日のテーマ

ソフトウェア工学

Extreme programming (XP)

人力プログラミング

コールバックプログラミング

繰り返しの指定

ソフトウェア工学の研究

50年の歴史

信頼性のあるソフトウェアを作成する

情報処理学会誌の特集 (2017)

https://ipsj.ixsq.nii.ac.jp/ej/index.php?action=pages_view_main&active_action=repository_view_main_item_snippet&index_id=8967&pn=1&count=20&order=7&lang=japanese&page_id=13&block_id=8 https://gyazo.com/c7faba8c4cf69d6e7d5ccf542283caa9

by 玉井哲雄

https://gyazo.com/5a2f2e58c8316597c85f0758666e4521

ソフトウェア工学の手法

プログラミング言語

構造化プログラミング

GOTOを使わない

オブジェクト指向

テスト技法

形式的仕様定義

視覚的仕様定義

UML (Unified Modeling Language)

CMM

GOTOに対する批判

https://gyazo.com/d0185f0ca38aefea7a155f1855460536

構造化プログラミングを提唱

"Considered Harmful" という表現が流行る

GOTOだらけのフローチャート

http://gyazo.com/ba6a0d78000d76428b935d3a1d63c4af.png

構造化プログラミング

プログラムの構造に制約をもたせる

GOTO considered harmful

オブジェクト指向

オブジェクト指向言語

Simula (1967)

Smalltalk (1980)

C++ (1983)

Objective-C (1983)

OOPSLA (Object-Oriented Programming, Systems, Languages, and Applications) コンファレンス

1986-2008

SPLASHになった?

ウォーターフォールモデル

https://gyazo.com/541a7f4ee035d92da3887872b2302b16

ウォーターフォールモデル

ウォーターフォールモデル

プランが重要

設計とプラニングが終わってからコーディング

形式的仕様記述

from Wikipedia

形式仕様記述（けいしきしようきじゅつ、英: formal specification）とは形式手法のひとつで、何らのシステムなどについて、その性質などの仕様を形式的に記述する手法や、そういった手法による仕様の記述である。

形式的な仕様を与えることにより、対象システムが仕様に照らして正しいかどうかを形式的に判定することが可能となる(形式的検証)。また、仕様策定の工程で仕様の不整合を検出することが可能となり、実装工程のような開発の後半での仕様不備発覚、それに伴う手戻り(多大なコストを要する場合が多い)を防ぐという利点がある。他の使われ方として、仕様から設計、設計から実装へと段階的に検証可能なステップを踏んで詳細化し、開発工程で不具合を作りこむのを防ぐ。

from Z manual

Formal specifications use mathematical notation to describe in a precise way the properties which an information system must have, without unduly constraining the way in which these properties are achieved. They describe what the system must do without saying how it is to be done. This abstraction makes formal specifications useful in the process of developing a computer system, because they allow questions about what the system does to be answered confidently, without the need to disentangle the information from a mass of detailed program code, or to speculate about the meaning of phrases in an imprecisely-worded prose description.

形式的仕様記述言語

LOTOS

Z の例

https://gyazo.com/579e864894c7640884f4c4466b861396

Specification and code

Specification

https://gyazo.com/a53c6edba027b9f6df3f17bcec0409f4

Pascalコード

https://gyazo.com/aa67599dbb85272c869f47d19e5f82a9

形式的仕様記述の問題点

仕様を書くのはプログラムを書くの以上に難しい

概念の理解が困難

最近の傾向

アジャイル開発

Extreme programming

Test-driven develpment (TDD)

Continuous integration (CI)

アジャイル開発

https://gyazo.com/2676785fe25d703199c84155deac0325

c.f. ウォーターフォールモデル

https://gyazo.com/541a7f4ee035d92da3887872b2302b16

1. Our highest priority is to satisfy the customer through early and continuous delivery of valuable software.

2. Welcome changing requirements, even late in development. Agile processes harness change for the customer's competitive advantage.

3. Deliver working software frequently, from a couple of weeks to a couple of months, with a preference to the shorter timescale.

4. Business people and developers must work together daily throughout the project.

5. Build projects around motivated individuals. Give them the environment and support they need, and trust them to get the job done.

6. The most efficient and effective method of conveying information to and within a development team is face-to-face conversation.

7. Working software is the primary measure of progress.

8. Agile processes promote sustainable development. The sponsors, developers, and users should be able to maintain a constant pace indefinitely.

9. Continuous attention to technical excellence and good design enhances agility.

10. Simplicity--the art of maximizing the amount of work not done--is essential.

11. The best architectures, requirements, and designs emerge from self-organizing teams.

12. At regular intervals, the team reflects on how to become more effective, then tunes and adjusts its behavior accordingly.

https://gyazo.com/5e56287a18119ee238d3284ba3591981

https://gyazo.com/3daab8caa03cd020ebba05265679d7b0

Make People Awesome

Make Safety a Prerequisite

Experiment & Learn Rapidly

Deliver Value Continuously

https://gyazo.com/435cced9437c136cf76bf3b0eb42c3c2

Kent Beckが提唱

実用的なプログラミング手法

Kent Beck

オブジェクト指向の専門家

Smalltalk本多数執筆

http://gyazo.com/90e878e7e3991568c575010daaa2c06a.png

XPの基本

コミュニケーション

シンプルさ

フィードバック

勇気

http://gyazo.com/fa758d64d0dca5d8c0f8bcc1813b5c41.png

XPのプラクティス

反復型開発

イテレーションごとに部分的な設計・実装・テスト

半完成品システムのリリースを繰り返す

単体機能の実装

コード修正とテストの繰り返しによって進める

XPのプラクティス (Cont'd)

共通の用語

用語集を作成し、チーム全員の使用する用語とその概念の不一致を解消する

開けた作業空間

会話しやすく、作業に打ち込める雰囲気を作る

回顧(頻繁な振り返り)

開発のプラクティス

テスト駆動開発

ペアプログラミング

リファクタリング

ソースコードの共同所有

継続した結合

YAGNI

テスト駆動開発

実装を行うより先に、テストを作成

テストをパスすることを目標に実装を行なう

求める機能が明確化され、シンプルな設計が可能になる

ペアプログラミング

https://gyazo.com/735c1c0f9df0486fc392e9d22a0089a3.png

ふたりでプログラミング

相補的役割

コードを書く人

それをチェックする人

役割は変化する

常にコードがチェックされる

常にコードがシェアされる

利点

ボーっとしてる時間がなくなる

ひとりで書くよりコードの品質が上がる

ワークフローが変化

次に何をするか悩まなくなる

ノイズに慣用になる

役割が変わる => 柔軟に指向できる

利点 (続き)

共同作業が好きな人もいる

コードが共有される

知識が共有されやすい

チームワーク

割り込みが入りにくい

ふたりで仕事をしているところには割り込みにくい

コンピュータの数が少なくてすむ

評価

精度の向上 15%

速度の向上 20-40%

全体的な向上 15-60%

...

ペアプロの問題点

熟練者にはつまらない

ふたりで働くのを好まない人もいる

効率は必ずしも向上しない

能力のアンバランス

コーディングスタイルの違い

スケジュールScheduling

リモートでやりにくい

ペアプロの問題点

休憩をとりにくい

疲れる

Mob programming is a software development approach where the whole team works on the same thing, at the same time, in the same space, and at the same computer.

https://gyazo.com/69f748b871befb52df4fd99f67e3c34b

リファクタリング

動いているコードを改善する

仕様は変えない

厳密なテスト環境を利用

コード共有

チームメンバは誰でもコードを変更可能

全員がコードに責任をもつ

1. コードのレポジトリを利用 (e.g. GitHub)

2. ビルド自動化

3. ビルドとテストを自動化

4. 誰もがコミット可能

5. あらゆるコミットをビルド/テスト

6. 高速にビルド

7. クローンした環境でテスト

8. 最新の成果物を簡単に入手

9. 誰でも最新ビルドをチェック可能

10. 自動デプロイ

Continuous integration (CI)

ユニットテストの後で常に結合テストを動かす

毎日一度はテスト実行

CIツール

https://gyazo.com/45e242791b7752b745a7ae53f265acd4

https://gyazo.com/2e071a06a2e5e358d57d863db2463b8c

https://gyazo.com/f3bcedf8a3fd9165a1152e42ee1c4e27

YAGNI

余計なものを実装しない

先の事を考えて実装を複雑化させない

無駄な機能は削りとり、今必要な機能だけ実装する

このことで後のイレギュラーな変更に対応しやすいようにする

プログラマとXP

プログラマの多くが肯定的

プログラマの不安を解消する仕掛けが多いため

ドキュメントよりソースコードを重視

中長期的な計画よりも細かい修正を重視

プロジェクト管理者は困るかも

テスト駆動開発は重要

プログラムのテスト

http://gyazo.com/5e7a7dba9271d9217245911b716ceb45.png

プログラムのテスト

https://gyazo.com/56719c9affa2d9bdd30e6156c7f58355

テストファーストプログラミング

テストコードを最初に書く

テストコードを書いた後でプログラムを書く

テストが通れば次に進む

Test-Driven Development (TDD)

テストファーストの注意

後からテストを書くと都合の良い条件ばかり書く可能性がある

本来は別人がテストを書くべき

プログラムを書く前は別人みたいなものだからOKかも

テストシステム

Unit test frameworks

SUnit (Smalltalk)

JUnit (Java)

RubyUnit (Ruby)

RubyUnit

Rubyのテストシステム

アサーションによるテスト実行

初期化処理

終了処理

RubyUnit example

code:test.rb

require 'test/unit'

class ArrayTest < Test::Unit::TestCase

def setup

@empty_array = []

end

def test_empty?

assert(@empty_array.empty?)

end

def test_size

assert_equal(0, @empty_array.size)

end

def teardown

@empty_array = nil

end

end

RSpec example

code:rspec.rb

describe Array, "when empty" do

before do

@empty_array = []

end

it "should be empty" do

@empty_array.should be_empty

end

it "should size 0" do

@empty_array.size.should == 0

end

after do

@empty_array = nil

end

end

JUnit example

code:junit.java

import static org.junit.Assert.*;

import org.junit.Test;

import static org.hamcrest.MatcherAssert.assertThat;

import static org.hamcrest.Matchers.*;

import com.pitecan.gyaim.GoogleIME;

import com.pitecan.gyaim.Message;

public class GoogleIMETest {

String 変換例リスト[][] = {

{"べんきょう", "勉強"},

{"ますい", "増井"},

{"いちのもと", "櫟本"},

{"むさしぼうべんけい","武蔵坊弁慶"},

{"かまくらのかいがん", "鎌倉の海岸"}

};

@Test

public void Google変換チェック() {

for (String[] 変換例: 変換例リスト) {

boolean found = false;

}

assertTrue(found);

}

}

}

Demo: Running tests for Gyaim

リファクタリング

積極的に完成済みのコードを修正

外部から見た動作は変えず、内部だけ改善する

テストが作成されていることが前提

リファクタリングの手法

Extract methods and reuse

Change bidirectional relations to unidirectional

Create small classes

Change switch statement to polymorphism

Clean up class members

リファクタリングの手法

Replace subclass with delegation

Encapsulate Downcast

Convert constructors to factory methods

Use objects for arguments

Change names and attributes

70個の手法

https://www.amazon.co.jp/dp/4274224546 https://gyazo.com/f7710c02c9f6ec1413b5c3e9d219be14

JavaScript版

テストコードが超重要

テストが通る限り変更は自由

デザインパターン

ソフトウェアのノウハウのカタログ

"Gang of Four"

23個のパタン

http://gyazo.com/c1541545f2bb32608bc10b048075f8c1.png

生成系パタン

Abstract Factory pattern

Provide an interface for creating families of related or dependent objects without specifying their concrete classes.

関連する一連のインスタンスを状況に応じて適切に生成する方法を提供

Builder pattern

Separate the construction of a complex object from its representation, allowing the same construction process to create various representations.

複合化されたインスタンスの生成過程を隠蔽

Factory Method pattern

Define an interface for creating a single object, but let subclasses decide which class to instantiate. Factory Method lets a class defer instantiation to subclasses.

実際に生成されるインスタンスに依存しない、インスタンスの生成方法を提供

Prototype pattern

Specify the kinds of objects to create using a prototypical instance, and create new objects from the 'skeleton' of an existing object, thus boosting performance and keeping memory footprints to a minimum.

同様のインスタンスを生成するために、原型のインスタンスを複製

Singleton pattern

Ensure a class has only one instance, and provide a global point of access to it.

あるクラスについて、インスタンスが単一であることを保証

構造系パタン

Adapter pattern

Convert the interface of a class into another interface clients expect. An adapter lets classes work together that could not otherwise because of incompatible interfaces. The enterprise integration pattern equivalent is the translator.

元々関連性のない2つのクラスを接続するクラスを作る

Bridge pattern

Decouple an abstraction from its implementation allowing the two to vary independently.

クラスなどの実装と、呼出し側の間の橋渡しをするクラスを用意し、実装を隠蔽

Composite pattern

Compose objects into tree structures to represent part-whole hierarchies. Composite lets clients treat individual objects and compositions of objects uniformly.

再帰的な構造を表現

Decorator pattern

Attach additional responsibilities to an object dynamically keeping the same interface. Decorators provide a flexible alternative to subclassing for extending functionality.

あるインスタンスに対し、動的に付加機能を追加する。Filterとも呼ばれる。

Facade pattern

Provide a unified interface to a set of interfaces in a subsystem. Facade defines a higher-level interface that makes the subsystem easier to use.

複数のサブシステムの窓口となる共通のインタフェースを提供

Flyweight pattern

Use sharing to support large numbers of similar objects efficiently.

多数のインスタンスを共有し、インスタンスの構築のための負荷を減らす

Proxy pattern

Provide a surrogate or placeholder for another object to control access to it.

共通のインタフェースをもつインスタンスを内包し、利用者からのアクセスを代理する。Wrapperとも呼ばれる。

動作系パタン

Chain of Responsibility pattern

Avoid coupling the sender of a request to its receiver by giving more than one object a chance to handle the request. Chain the receiving objects and pass the request along the chain until an object handles it.

イベントの送受信を行う複数のオブジェクトを鎖状につなぎ、それらの間をイベントが渡されてゆくようにする。

Command pattern

Encapsulate a request as an object, thereby allowing for the parameterization of clients with different requests, and the queuing or logging of requests. It also allows for the support of undoable operations.

複数の異なる操作について、それぞれに対応するオブジェクトを用意し、オブジェクトを切り替えることで操作の切替えを実現する。

Interpreter pattern

Given a language, define a representation for its grammar along with an interpreter that uses the representation to interpret sentences in the language.

構文解析のために、文法規則を反映するクラス構造を作る。

Iterator pattern

Provide a way to access the elements of an aggregate object sequentially without exposing its underlying representation.

複数の要素を内包するオブジェクトのすべての要素に順にアクセスする方法を提供する。反復子。

Mediator pattern

Define an object that encapsulates how a set of objects interact. Mediator promotes loose coupling by keeping objects from referring to each other explicitly, and it allows their interaction to vary independently.

オブジェクト間の相互作用を仲介するオブジェクトを定義し、オブジェクト間の結合度を低くする。

Memento pattern

Without violating encapsulation, capture and externalize an object's internal state allowing the object to be restored to this state later.

データ構造に対する一連の操作のそれぞれを記録しておき、以前の状態の復帰または操作の再現が行えるようにする。

Observer pattern

Define a one-to-many dependency between objects where a state change in one object results in all its dependents being notified and updated automatically.

インスタンスの変化を他のインスタンスから監視できるようにする。Listenerとも呼ばれる。

State pattern

Allow an object to alter its behavior when its internal state changes. The object will appear to change its class.

オブジェクトの状態を変化させることで、処理内容を変えられるようにする。

Strategy pattern

Define a family of algorithms, encapsulate each one, and make them interchangeable. Strategy lets the algorithm vary independently from clients that use it.

データ構造に対して適用する一連のアルゴリズムをカプセル化し、アルゴリズムの切替えを容易にする。

Template Method pattern

Define the skeleton of an algorithm in an operation, deferring some steps to subclasses. Template method lets subclasses redefine certain steps of an algorithm without changing the algorithm's structure.

あるアルゴリズムの途中経過で必要な処理を抽象メソッドに委ね、その実装を変えることで処理が変えられるようにする。

Visitor pattern

Represent an operation to be performed on the elements of an object structure. Visitor lets a new operation be defined without changing the classes of the elements on which it operates.

データ構造を保持するクラスと、それに対して処理を行うクラスを分離する。

XP とパタンランゲージ

密接な関係

Kent Beck invented XP and pattern language

Christopher Alexander

パタンランゲージの発明者

http://gyazo.com/835dfec1ee8d66545ff1cd4933cfe488.png

Ward Canninghum

Wiki Wiki Webを発明

Applied pattern language to software

http://gyazo.com/266865260d7551358e88687c2b6e03be.png

History of object-oriented programming

Simula

Smalltalk

C with classes

C++

Objective-C

Modula2

Eiffel

オブジェクト指向の歴史

80年代非常に盛り上がる

最近は沈静化

Simula

シミュレーション用言語

情報隠蔽

Smalltalk

PARCで開発

GUIとの統合

ALTO = GUI + OO + network

C++

「C with classes」

Cのフロントエンドプロセッサ

現在蔓延中

Objective-C

Developed by Brad Cox

http://www.amazon.com/dp/0201548348/ http://gyazo.com/f1929fecb1b6ec2f3e36a10633cbda1c.png

Objective-C

CをSmalltalk的に拡張

NeXTワークステーションで採用

Apple製品で全面採用

Modula2

DECが推進

Eiffel

Bertrand Myer氏

http://gyazo.com/04acd02b4fb4ea7e46c55c3a64c945b3.png

メソッド呼び出しとインスタンス変数アクセスが同じ

Rubyなどでも同様

e.g. object.list

データなのかメソッドなのか字面からは不明

JavaScript

プロトタイプベースのオブジェクト指向

現在最も蔓延中

皮をかぶせて利用する方法が浸透中

CoffeeScript

Typescript

プロトタイプベースのオブジェクト指向

既存のオブジェクトのクローンを利用

1980年代に提唱

オブジェクト指向の本質は?

継承?

情報隠蔽?

共通化?

物との対応づけ?

分散通信?

オブジェクト指向の本質

「プログラムを短くする技術である」(竹内郁夫)

オブジェクト指向は本当に必要?

Cでオブジェクト指向もどきも可能

構造化プログラミングや再帰ほどで重要ではない?

Unixカーネルはオブジェクト指向で作られていない

コンパイラはオブジェクト指向で作られていない

ファイルシステムとオブジェクト指向

ファイルとデバイスの区別がない

/home/masui/xxx も /dev/xxxx も同じ仕様

中島氏の記事

「塩をとって下さい」

「とって下さい塩」ではない

後置記法のメリット

X.inv.log

log(inv(X))

人力コンピューティング

人力をプログラミング要素として利用

人力は究極の計算資源

人間にしか解けない問題がある

おすすめレストランは?

面白い本は?

プログラミングにおける人力の活用

ペアプログラミング

集合知

人力と計算機の併用

Web = 人力利用プラットフォーム

計算機、センサ、人間がひとつの場所でつながっている

人力が超並列

究極の計算リソース

人力計算力をこっそり利用する

複雑な計算をしたい

⇒ 情報が集まるようなWebサービスを作る

⇒ 人力で集まったデータから結果を抽出する

人力計算の例

良いレストランをみつける

影響力の高い人をさがす

美人度を判定する

...

こっそり仕事をさせる方法

人間は気づかずに仕事をしてしまう場合がある

何かを自慢する

何かを修正する

楽しみながら計算

Wikipedia

Hotornot

コトノハ

reCAPTCHA

Wikipedia

世界最大の人力計算プロジェクト?

楽しいから/自慢したいから記事を書く

美人かどうか計算

http://gyazo.com/2dc0aa135251d5ad4f74c1b9a610c2f2.png

簡単なアンケート

http://gyazo.com/d9f0658089b8e185d3005eca5d9f90b4.png

CAPTCHA

人間かどうか認証

http://gyazo.com/d200e187b92f98e4d639ed8d23d5203f.png

reCAPTCHA

人力を利用して、認証ついでに文字認識をさせる

楽しいものではない

http://gyazo.com/7c26209860f904a1feff6ca10d0aa073.png

つい修正してしまう

気持ち悪いとつい働いてしまう

ゴミを拾ってしまったり

Power of Low Standards

http://gyazo.com/c9147cba2b040dd25331909d064c0fa5.png

写真の位置登録

写真と地図がズレているとつい直したくなる

http://gyazo.com/bb7642f350fff42abb9f7a61bf31657b.png

修正結果

正しい位置が登録される

http://gyazo.com/61289b265ca621d8f77db568c2110c81.png

Demo: 位置修正の例

間違った日本語が書いてあるとすごく気になる

つい直してしまうかも

好奇心などを利用

言語の相互添削

http://gyazo.com/aa5264fa4e48875c793a1cf9b26e0379.png

日記の例

http://gyazo.com/97901c841fc693ae6d51ce1bac74d54b.png

クラウドソーシング

ネット上の誰かにアウトソーシング

Amazonのクラウドソーシングサービス

日本でも利用可能 (2017/6-)

https://gyazo.com/279e5f7883dafdcfcfb3933ac01c296d.png

クラウドベースのワープロ

「パラグラフを短くして」のようなメニュー

https://gyazo.com/8d2f6dcb50cde919e403735b9e92e20e.png

クラウドソーシングの問題点

Mechanical Turkの値段安すぎ

英語と日本語関連の問題を1時間やったら$1.80もらえた

搾取になるかも?

人間をプログラミング

パスタのレシピ

湯をわかす

塩を入れる

沸騰するのを待つ

while(not hot){ sleep(10) }

パスタを投入

10分待つ

sleep(600)

プログラミングとレシピ

プログラミングできない人は多い

レシピは誰でもわかる

レシピ = 人間のプログラミング

BabaScript

人力計算を明示的に指示

計算機への指示と人間への指示を同等に扱う

人間は計算資源として利用する

指示手順

指示手順の例

code:register.baba

// at a supermarket

if( long queue at register 1)

open register 2

パスタを作るスクリプト

人間に対する指示をJavaScriptで記述

http://gyazo.com/af526e4b31557f9b331679fe46eff8fe.png

待機時画面

http://gyazo.com/e6e0d85e04cf4f6e6ed94cccd49d3de0.png

指令が来たところ

選択して返事する

http://gyazo.com/58b715a4ed9d9306d78fe34930bc047c.png

推薦システム

ふだんの行動データを利用

暗黙的なプログラミング?

Not aware of computing something

Google

重要なページをみつける

リンクを利用

人手による情報整理が人力計算になっている

ページランク

Invented by Larry Page (Google)

Use link information for page ranking

Linked pages considered important

Human power over natural language processing

Larry Page

https://gyazo.com/5a7ea84315f9ec3569afb46f070aa3d3

https://gyazo.com/43e0c52c1f5ab35dab98ed2b2ba40d90

Ｘ＝Ｚ

Ｙ＝X/2

Ｚ＝X/2＋Ｙ

⇒ X : Y : Z = 0.4 : 0.2 : 0.4

重要なファイルの判定

自分だけの大事なファイルをバックアップしたい

ファイルの重要度を計算したい

重要なファイルとは?

× 動画ファイル

× システムファイル

× MP3

○ 自分が撮った写真

○ アイデアメモ

サイズやファイル属性から判定できない

重要なファイルの特徴

自分だけが持っているファイルは重要

○ 自分が撮った写真

○ アイデアメモ

重要度の判定

ファイルのハッシュ値を登録サイトに登録

自分以外に誰も登録していないものは重要

他人とのファイル共有の視覚化

https:///gyazo.com/5124de74689ff55d53ffb3da92c1c636.png

自分のディスク内の重複ファイル

https://gyazo.com/4418725289623822fa490081d48ec670.png

共有情報からのデータマイニング

集合知プログラミング

http://gyazo.com/3cfa17df5e77ccc67b7bd5f8f6a8279f.png

集合知プログラミング

推薦システム

クラスタリング

決定木

SVM

推薦システム

協調フィルタリング (Collaborative Filtering)

Firefly = 元祖協調フィルタリング

Firefly

ユーザが自分の好みの音楽を登録する

他のユーザの傾向を比較して推薦する

沢山登録が必要なので結構大変

Last.fm

音楽を聞いていると好みが蓄積されていく

登録の手間が感じられない

本棚.orgの登録情報から情報を抽出

日本語でメソッドを指定

推薦以外の計算も可能

数量化三類による二次元視覚化

主成分分析 / 因子分析

コールバックプログラミング

非同期プログラミング

JavaScriptで一般的になった

重い処理を裏で実行

通常のプログラミング

code:funcs.c

func1();

func2();

func3();

JSで重い計算をするとブラウザが固まる!

解決法

複数プロセスを利用

コールバックプログラミング

コールバックプログラミングの例

code:callback.js

func1();

func2(arg1,arg2,function()｛

// heavy or slow operations

// e.g. communication with slow server

console.log("end")

});

func3();

バックグラウンド処理される

終了すると"end"と表示

コールバックプログラミングの利点

重い処理をユーザが待つ必要がない

擬似的に並列処理が可能

コールバックプログラミングの欠点

プログラムがわかりにくくなる

実行の順番が保証されない

実行順を保証する方法1

コールバックをネストする

ネストが深くなって大変

「コールバック地獄」

code:async1.js

setTimeout(function(){

console.log('First');

setTimeout(function(){

console.log('Second');

setTimeout(function(){

console.log('Third');

},100);

},500);

},1000);

比較的新しいJavaScriptの機能

同期/非同期的処理を簡単に扱える

Promise

非同期処理の抽象化

code:callback.js

getAsync("fileA.txt", function(error, result){

if(error){

// do error handling

throw error;

}

// process the result

});

code:promise.js

var promise = getAsyncPromise("fileA.txt");

promise.then(function(result){

// process the result

}).catch(function(error){

// error handling

});

Async-await

同期処理にPromiseを使う

code:async.js

function openFile(url) {

const p = new Promise((resolve, reject) => {

const xhr = new XMLHttpRequest();

xhr.open('GET', url);

xhr.addEventListener('load', (e) => resolve(xhr));

xhr.send();

});

return p;

}

async function loadAllFiles() {

const xhr1 = await openFile('foo.txt');

const xhr2 = await openFile('bar.txt');

const xhr3 = await openFile('baz.txt');

console.log('done!');

}

loadAllFiles();

for文の発明

for(init;cond;change){ ... }

Cで発明?

ループに関する諸処理が1行に

バグが出にくい

「XXチャート」が絶滅

e.g. while文

code:while.txt

init

while(condition)｛

(Do something)

change values

}

繰り返し処理の記述を消す

map関数

複数の要素に処理を適用

ループを明示しない

map関数

code:map.rb

map.rb

puts s

}

まとめ

いろんなプログラミングパラダイムがある

いつでもどこでもプログラミングを楽しもう!