Hi!

こんにちは！

First of all,

まず初めに、

I just want to give a big shout-out to the organizers of this conference.

このカンファレンスの主催者に大きな 感謝を伝えたいと思います。

I feel like this has been a fantastic smooth experience from start to finish,

初めから終わりまで、素晴らしく、そしてスムーズな カンファレンスであるように感じます。

so...

ですので・・・

[Applause]

[拍手]

Amazing job.

驚くべき仕事です。

Hi! I'm Anjana Vakil.

こんにちは！私はアンジャナ・ヴァキルです。

I am an English teacher turned computational linguist

私は英語の教師から数理言語学者に、 その後ソフトウェア開発者に

turned software developer

職業転換した者です。

and as I mentioned a little bit earlier today,

そして、今日少し前に述べたとおり、

about six months ago, I knew nothing about functional programming

半年ほど前までは、関数型プログラミングについて 何も知りませんでした。

and very little about JavaScript.

そして JavaScript についても ほとんど知りませんでした。

So, what I want to do today is kind of

ですので、今日私が皆様に話したいことは、

take you guys along on some of the things I've learned

JavaScript で関数型プログラミングを 行うことについて、

about doing functional programming in JavaScript

私が学んだことのいくつかです。

and I am not an expert in any of this,

私はこのどれにおいても 専門家ではありません。

so this is going to be me taking you along on my learning journey

ですので、私の話は皆様を 私の学習の旅にお連れするだけで、

and nothing more.

それ以上のものではありません。

I'm going to try and save a little time for questions at the end,

最後に質問のための時間を 少し取っておきたいと思っていますが、

but we'll see how that turns out.

やってみないと分かりません。

So, how did I end up standing here

さて、私はどのような過程を経てここに立ち、

talking to you guys about functional programming in JavaScript?

皆様に JavaScript の関数型プログラミングに ついて話しているのでしょうか？

About six months ago in the fall of 2015,

半年ほど前、2015年の秋、

I went to a programming community in New York City

私はニューヨーク市の The Recurse Center という

called The Recurse Center

プログラミングコミュニティに行きました。

which quick plug

ちょっと宣伝っぽくなってしまいますが、

is probably the best programming community I've ever experienced

そこは私がこれまで経験した中で最高の プログラミングコミュニティーでした。

and it's a programming retreat

コンピューターサイエンスの

where you can go and learn about

世界の中で、自分が関心を

whatever is interesting to you in the world of computer science

持っていることについて学ぶことができる プログラミングの合宿なのです。

and so I got there

私がそこに行ったとき、

and a lot of people were talking about functional programming,

多くの人たちが関数型プログラミング、 Haskell、Clojure など

functional programming, Haskell, Clojure, all this cool stuff,

面白そうなことについて 話し合っていました。

a lot of people were working in JavaScript getting into node

多くの人たちが JavaScript で仕事をしていて、 ノードにのめり込んでいました。

and these were some really interesting topics

どれも大変興味深いトピックで、

and so I started talking to people there

私はそこで他の人たちと話し始め、

and finding out what is all this stuff.

それらが何なのかを 解明し始めました。

So, what is functional programming?

では、関数型プログラミングとは 何でしょうか？

Few different ways that question can be answered.

この質問にはいくつかの 異なる視点から答えることができます。

First of all, it's a programming paradigm.

それはまず、 プログラミングパラダイムの1つです。

Some other paradigms are like imperative programming

その他のパラダイムは、これをしろ、

where you say do this and then do that

あれをしろ、という命令型プログラミング。

or object-oriented programming

そしてオブジェクト指向プログラミングですね。

which maybe a lot of you write object-oriented JavaScript

皆様の多くがオブジェクト指向J avaScript を 書くために使用しているのではないでしょうか。

where you have objects and they have methods on them

オブジェクトがあって、その上にメソッドがあり、

and you change them, etc., etc.

それらを変更するというような プログラミングです。

Functional programming is also a paradigm

関数型プログラミングもパラダイムの1つで、

where functions are king

そこでは関数が王様です。

and we'll talk about what that means in a little bit.

それがどういう意味かは後でお話しします。

It's also a style of coding,

関数型プログラミングは、 コーディングのスタイルでもあり、

of organizing your code,

コードを整理するスタイルでもあり、

writing your code,

コードを書くスタイルでもあり、

style of approaching projects

プロジェクトへの アプローチのスタイルでもあり、

and really more than that it's kind of a mindset you can get into,

そしてそれ以上に、関数型プログラミングは 考え方の一種で、

a way of thinking about a problem,

問題についての考え方、

a way of approaching a task

タスクにアプローチする方法、

and it's also a really sexy trend

そして本当にセクシーなトレンドでもあります。

with lots of buzzwords that'll make you super popular

プレカンファレンスパーティーなどで 他の人たちと話しているときに、

when you're talking with people at the pre-conference party or whatever it is.

あなたを超人気にしてくれる 沢山の流行語を含み持っています。

No, just kidding.

それは冗談として、

But it is something that's gotten a lot of attention

関数型プログラミングは、 高い関心を集めています。

and, so yeah, I thought it was important

そのため私は、みんながそれほど

to find out why everybody was so excited about it.

夢中になっている理由を知ることが 重要だと思いました。

So, why do functional programming in JavaScript specifically?

では、なぜ特に JavaScript で 関数型プログラミングを行うのでしょうか？

Well, I don't know about for all of you,

もっと経験豊富な JavaScript 開発者の

perhaps more experienced JavaScript developers,

皆様はどうか分かりませんが、

but when I started learning JavaScript

私が JavaScript の学習を始めたとき、

having had some object-oriented programming experience with Java, C-Sharp,

Java、C-Sharp などでの オブジェクト指向のプログラミング経験が

that kind of thing,

ありましたが、

I found object-oriented JavaScript super confusing,

オブジェクト指向の JavaScriptは 非常に分かりにくいものでした。

prototypal inheritance, how does that work?

プロトタイプの継承？それはどのように機能するの？ という感じでした。

How many of you guys, quick show of hands,

オブジェクト指向の JavaScript で 何かをしていて、

have ever run into a bug or a problem or something unexpected with this,

バグや問題や何か予期せぬことに 遭遇したことがある人は

doing something...

手を挙げてみてください。

Yeah, exactly. Right?

ええ、やっぱり。そうですよね？

So, I found that really tricky and confusing

ですので、私にはそれが トリッキーに感じ、混乱しました。

and so I thought, all right, I know I want to get more into JavaScript

そこで私はJavaScriptについて より深く知りたくなりました。

but let me set aside the object orientation

でも、オブジェクト指向については ひとまず置いて、

and try to think about things in a functional way

関数的な観点から 考えてみましょう。

which is maybe simpler in some ways

その方が簡単かもしれません。

and avoid some of these problems

すると、これを間違った対象に

like bugs introduced by binding this to the wrong thing.

バインドして発生するバグなどの 問題を回避できます。

So, functional JavaScript to me at least is a bit safer,

ですので、私にとって 関数型 JavaScript はより安全で、

a bit less tricky,

より簡単で、

a bit easier to debug

デバッグしやすく、

but easier to maintain as you're building a project

プロジェクトを構築する際に より維持しやすいと感じます。

and we'll take a look at some of the features

これをより簡単にしてくれる機能については、

that make that easier in a bit.

後ほどお話しします。

Also, there is already a huge community of developers

また、JavaScriptに 関数的なアプローチをする

who are doing JavaScript in a functional style,

開発者の大きなコミュニティが 既にあるため、

so there's a lot of libraries out there

関数型 JavaScript を 書くにあたって役立つ

to help you write functional JavaScript.

ライブラリが 充実しています。

There's a lot of people out there that are experts in this,

これを専門とする 多くの人がいます。

for example, there was a talk in the next room over earlier today on Ramda

例えば、先ほど隣室では Ramda に ついての講義が行われました。

and there are people here you can talk to

そして、ここでは、おそらく私よりも

that probably know a lot more about functional JavaScript than I do,

関数型 JavaScript について 詳しい方々とも話すことができるでしょう。

but the point is there's already a community,

私が言いたいことは、既にコミュニティが 存在しているということです。

so this isn't necessarily something you'd be doing on your own,

ですので、必ずしも独りで JavaScript と

grappling you versus JavaScript,

真っ向勝負をするわけではありません。

there's other people to support you,

サポートしてくれる人たちがいて、

which I found really helpful.

それは私の支えになりました。

Okay.

OK。

So, hopefully by now I've convinced you

さて、皆様に関数型プログラミングが

that functional programming is at least interesting

興味深いものだ、と納得 いただけたかと思います。

and that we could do it in JavaScript to avoid these headaches, etc.

そして、それを JavaScript で行うこと によって、頭痛の種などを回避できる、とも。

How can we do it?

では、どうすればできるか？

What does it mean?

それはどういう意味なのか？

This is what I was asking myself.

これは私が自問した内容です。

So, the main thing

さて、これは

and maybe it sounds like a tautology or obvious is that

同語反復のように 聞こえてしまうかもしれませんが、

in functional programming

関数型プログラミングの目玉は

you want to do everything with functions,

すべてを関数を軸に行うことです。

so we want to express everything in our program in terms of functions.

ですので、プログラム内のすべてを 関数的な観点から表現します。

And a function of course is just something

もちろん関数とは

that takes an input and gives an output.

入力に対して 出力を返すもののことです。

So, we want to be thinking about

ですから、プログラム内の

kind of the flow of data of inputs and outputs through the program,

入出力のデータの流れに 焦点を当てることになります。

instead of thinking about objects and how they interact

オブジェクトや、それらの相互作用方法や、

and how they manipulate

処理方法、

or thinking about steps in a recipe like in an imperative style.

命令型のレシピのステップ について考えるのとは違います。

Here we're really thinking about how we can express everything

ここでは、入力を受け、出力を返す、

in terms of functions,

すべてを関数で表現する方法を

taking inputs, giving outputs.

模索しています。

So, for example,

例えば、これは、

this would be a non-functional way for me to get the text

「Hi, I'm Anjana」 というテキストを

“Hi, I'm Anjana” to appear on the screen.

画面に表示させる、非関数的な方法です。

I could assign a variable, I call it “name”

name という変数を宣言し、

and have it store the text “Anjana.”

そこに「Anjana」というテキストを 代入します。

I could have a greeting like “Hi, I'm” or “Hello, I'm”, whatever,

「Hi, I'm」または「Hello, I'm」を 変数の greeting に代入し、

and then I could log that to the console.

それらを console.log() で 表示することができます。

This is sort of an imperative style.

これは、初めにこれをして、

First do this, then do that, then do this other thing,

次にあれ、その次に別のことをしろ、 という命令型のスタイルです。

we don't have functions here,

ここには関数が含まれていません。

we're not expressing this in terms of how inputs are transformed into outputs.

これは、入力がどのように出力に変換されるか、 という観点からは表現されていません。

So, maybe a more functional way of doing the same thing

ですので、同じことを より関数的な方法で行うには、

and this is a really simple example, just for the sake of it,

これはあくまで簡単な例ですが、

is to define a function called greet

name というパラメータを受け、

which takes a parameter name

name の先頭に

and returns a string which adds “Hi, I'm”

「Hi, I'm」を加えた文字列を返す、

to the beginning of that name.

greet という関数を定義します。

So, for example, if I type greet,

例えば私が greet と書き、

the string Anjana,

Anjana という文字列を

feeding that as input

入力として与えると、

then I get the output “Hi, I'm Anjana”,

「Hi, I'm Anjana」という出力が返ってきます。

that's a more functional way expressing this in terms of functions.

これが関数を用いて表現する、より関数的な方法です。

Okay. So, another...

それではもう1つ・・・

maybe the main thing about functional programming

もしかしたら関数型プログラミングの目玉は

is to avoid side effects

副作用を避け、

and instead to use pure functions.

代わりに純粋関数を 使うことなのかもしれません。

So, what does that mean?

これは どういうことでしょう？

A side effect is anything that a function might do

副作用とは、関数が行う

that isn't computing its output from the inputs you've given

入力をもとに 出力を算出し、出力を返すこと

and returning that output.

以外の行動のことを言います。

So, for example,

例えば、

printing something to the console is not returning an output,

コンソールに何かを表示するのは、 出力を返すのとは違います。

it's doing something else,

関数側で、

something that's on the side of the function

別のことをしているわけです。

or if you have a function that uses some globally defined variable

出力を算出するにあたって、 関数への入力だけに頼るのではなく、

to compute its output

グローバルに定義された

that doesn't depend only on the input to that function,

変数を使用する 関数などは、

so that's not pure.

純粋ではありません。

It's taking something from outside the function

これらは関数の 外にあるものを持ち込み、

and involving it in some way in what the function does.

関数の動作に何らかの形で 関与させています。

So, this is just a really quick explanation of what a pure function

では、副作用を避ける 純粋な関数がどういったものか、

that avoids side-effects would do.

簡単に説明します。

For more information on that

このトピックについては、

there's excellent Wikipedia articles on these sorts of things,

素晴らしい Wikipedia の記事が いくつかあります。

but basically the idea is that

要約すると、

you want your function to do nothing

入力を受け、それだけを基に

except take its input, use that and only that

出力を算出し、 それを返す

to compute an output

ということ以外の

and then return it.

ことをして欲しくないのです。

That's pure.

これが純粋なのです。

So, for example, this function here,

例えば、この関数の場合、

we have this globally defined variable name

グローバルに定義された 変数 name があり、

which gets used in the function

それが関数内で使用されます。

as you can see in the last line there,

ご覧の通り、最後の行で使われます。

it gets used, so there's no input,

ですので、入力がありません。

we don't have name as an argument to this function,

name はこの関数の 引数になっていないため、

it's just reading something in from the global state.

グローバルな状態から何かを 読み込んでいるだけです。

That's not pure.

これは純粋ではありません。

Also, not pure because

純粋ではない理由はもう1つあります。

the return value of this function here isn't what we care about,

この関数の場合、戻り値は ここでは気にしません。

we care about doing something,

何かを行うこと、

changing the world in some way

世界を何らかの 形で変えること、

other than the return value,

戻り値を求めているのではなく、

in this case, printing to the console.

この場合、コンソールに 表示することが目的です。

So, this is a not pure function here.

ですので、この関数は純粋ではありません。

A pure function might look like this.

純粋関数は次のようになります。

Here we have,

ここに、

the only thing that matters

この関数の出力に

to the output of this function is its input,

唯一重要なものは 入力で、

the argument that we pass to it

私達が渡す引数があります。

and the only thing that it does is return its output.

そしてこれが唯一行うのが、 その出力を返すことだけです。

Okay, so I've been talking for a while now about pure functions

さて、しばらく純粋関数 についてお話ししましたが、

that's because this is really like a key thing at least for me,

それもこれが私にとって、とても 重要なトピックだからです。

something I've taken as one of the key parts of functional programming

関数型プログラミングの重要な 一部として私が学んだのが、

is thinking about things as purely as possible.

可能な限り純粋に考える、 ということです。

Another key point would be using higher-order functions.

もう1つのポイントは 高階関数を使うことです。

So, this means functions that can take as inputs other functions

高階関数とは、 他の関数を入力できる、

or a function that can return a function as its output.

または他の関数を出力する ことができる関数のことです。

So, basically, we're treating functions kind of as objects themselves.

つまり、関数をオブジェクト として扱うわけです。

They can be passed to other functions.

他の関数に渡すこともできます。

You can have layers of functions within functions within functions, etc.,

関数内に関数のレイヤーが含まれ、 その関数内にも関数が含まれることも可能です。

and these are what's called higher-order functions,

これらがいわゆる高階関数です。

they come up a lot in functional programming.

関数型プログラミングで 頻繁に登場します。

This is a bit of a random example,

これはちょっと行き会ったりばったりな例ですが、

but let's say we have this function at the top here,

上の方のこの関数があるとしましょう。

makeAdjectifier

makeAdjectifier

where we give it an adjective

これは adjective を与えると、

and it returns actually a function.

関数を出力します。

It doesn't return a string or a number or anything like that,

文字列や数字を返すのではなく、

it returns us a function

その adjective を与えた文字列に足す

which adds that adjective to a string that you give it.

関数を返すのです。

So, for example, I can use the makeAdjectifier function

例えば、 makeAdjectifier 関数を使って、

feed it the input “cool”

「cool」と入力すると、

and get a function that's called coolifier.

coolifier という名の 関数が返ってきます。

So, now when I pass a string to coolifier,

そして、coolifier に 文字列を渡すと、

I get “cool” added to that string.

その文字列に 「cool」が足されます。

So, if I pass conference, I get cool conference.

ですので、conference を渡すと、 cool conference が返ってきます。

So, the idea here is that we have a higher-order function

ここで言いたいことは、 これが関数を返す

which returns a function.

高階関数だということです。

And this kind of wrapping your head around this

これを理解することは、

at least for me

少なくとも私にとっては、

is one of the key things to being able to write in a functional style

関数的なスタイルで 書くにあたって重要でした。

because as we'll see a bit later,

何故なら、 後ほどお見せするように、

we need these higher-order functions

これらの高階関数が

in order to avoid some of the tricks

他のパラダイムで使い慣れている

that we're used to using from other paradigms.

習慣を避けるのに必要だからです。

So, learning the thing to get into that functional mindset

関数的なマインドセットに 切り替えるために、

for me really involved wrapping my head around this concept.

私には、この概念を 理解する必要がありました。

Okay.

はい。

So, one of these things that we're going to avoid

さて、 避けるべき習慣の1つは

that we're used to doing is iterating,

繰り返しです。

using like “for” or “while”, these sort of things.

「for」や「while」の使用。

We're used to going over lists and doing things to all the items in it.

私達はリスト内のアイテムすべてに 変更を加えることに慣れてしまっています。

Instead, in a functional style,

関数的なスタイルでは、代わりに、

we might use higher-order functions like Map or Reduce or Filter

Map、Reduce、Filter などの 高階関数を使うかもしれません。

which often take as an input

これらは一般的に

not only the list that you want to do something to in some way

変更を加えたいリストだけを 入力として受けるのではなく、

but also a function that then you're going to apply to it.

そのリストに適応したい関数も受けます。

In the interest of time I'm not going to go into too much detail

時間の都合上、Map、Reduce、 Filter の機能については

about what Map, Reduce, and Filter do,

あまり詳しくは説明しませんが、

but I found and also thanks to my colleague Khalid up there,

あちらの同僚のカリードのおかげで