Placeholder Image

字幕表 動画を再生する

  • [Applause]

    [拍手]

  • 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 Anjanato appear on the screen.

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

  • I could assign a variable, I call itname

    name という変数を宣言し、

  • and have it store the textAnjana.”

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

  • I could have a greeting likeHi, I'm” orHello, 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 addsHi, 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 outputHi, 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 inputcool

    「cool」と入力すると、

  • and get a function that's called coolifier.

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

  • So, now when I pass a string to coolifier,

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

  • I getcooladded 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 likefororwhile”, 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,

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