2018.06.01 JavaScript Meetup Okinawa #4 @ CODE BASE

LT.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style>\n",
       ".rise-enabled .reveal .rendered_html h1,\n",
       ".rise-enabled .reveal .rendered_html h2,\n",
       ".rise-enabled .reveal .rendered_html h3,\n",
       ".rise-enabled .reveal .rendered_html p {\n",
       "    line-height: 1.5em;\n",
       "    font-family: osaka;\n",
       "}\n",
       "</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%HTML\n",
    "<style>\n",
    ".rise-enabled .reveal .rendered_html h1,\n",
    ".rise-enabled .reveal .rendered_html h2,\n",
    ".rise-enabled .reveal .rendered_html h3,\n",
    ".rise-enabled .reveal .rendered_html p {\n",
    "    line-height: 1.5em;\n",
    "    font-family: osaka;\n",
    "}\n",
    "</style>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# トリ 🐦"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Webpack や Vue.js, React を使って"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# 「俺は JavaScript が書ける」"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## と思い込んでいる皆さん\n",
    "## こんばんは"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# みなさん、本当に JavaScript を\n",
    "# 理解していますか？？？"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# ホンモノの JavaScript というのを\n",
    "# お見せいたしますよ"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "![](https://avatars3.githubusercontent.com/u/1976227?s=200&v=4)\n",
    "\n",
    "# @hoto17296\n",
    "- 元 Web 屋\n",
    "- データ分析マン at ちゅらデータ株式会社\n",
    "- Gotanda.js 主宰 (一応)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# JavaScript の本質的な特徴は\n",
    "- イベントループによる非同期処理\n",
    "- **オブジェクト指向** ← 今回はこれ"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# オブジェクト指向とは？"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## 「クラスを定義してオブジェクトを量産するやつでしょ」"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# 🙅‍ No"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## クラスはオブジェクトを作る手段の一つであって"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## オブジェクト指向に必ずしもクラスは必要ない"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# 「でも JavaScript にも class あるじゃん」"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# 🙅‍ No"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## JavaScript (ES2015 以降) における class はただの糖衣構文に過ぎない\n",
    "\n",
    "## Ruby や PHP の class とは似て非なるもの"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## なんの糖衣構文か？"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# 「プロトタイプチェーン」"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## プロトタイプチェーンを理解している人どれくらいいますか？？？ 🙋‍"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## まず、「オブジェクト」とはなにか？"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "オブジェクトとは\n",
    "\n",
    "``` js\n",
    "var obj = {};\n",
    "```\n",
    "\n",
    "これです"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## JavaScript のデータはほぼ全部オブジェクト\n",
    "配列も関数も数値も文字列も論理値も null もオブジェクト"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "例えばこの 100 という数値もオブジェクトで、メソッドが生えていたりする\n",
    "\n",
    "``` js\n",
    "var num = 100;\n",
    "num.toString();  //=> \"100\"\n",
    "```\n",
    "\n",
    "この `100` は「100 という数値を表す Number オブジェクト」を生成するためのリテラル"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "また、皆がメソッドと思っているものの正体は、\n",
    "\n",
    "ただオブジェクトに関数が生えてるだけ\n",
    "\n",
    "``` js\n",
    "var obj = {\n",
    "  say: function() {\n",
    "    return 'foo';\n",
    "  },\n",
    "};\n",
    "\n",
    "obj.say();  //=> \"foo\"\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# 「え？じゃあクラスって何？」"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "クラス ”のようなもの” の正体\n",
    "\n",
    "``` js\n",
    "var parentObj = {\n",
    "  sayName: function() {\n",
    "    return this.name;\n",
    "  },\n",
    "};\n",
    "var childObj = {\n",
    "\tname: 'foo',\n",
    "};\n",
    "childObj.__proto__ = parentObj;  // ？？？\n",
    "\n",
    "childObj.sayName()  //=> \"foo\"\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "`child` にない属性は `child.__proto__` にあるかどうか探しに行く\n",
    "\n",
    "→ `child.__proto__` にもない場合 `child.__proto__.__proto__` を探しに行く\n",
    "\n",
    "→ `child.__proto__.__proto__` にもない場合...(以下略)\n",
    "\n",
    "このように、  \n",
    "`__proto__` オブジェクトを辿りながら  \n",
    "再帰的に目的の属性を探しに行くのが"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# 「プロトタイプチェーン」"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "このプロトタイプチェーンこそが、\n",
    "\n",
    "JavaScript のオブジェクト指向の真髄"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "### プロトタイプチェーンは圧倒的にすごい\n",
    "### プロトタイプチェーンは圧倒的にかわいい\n",
    "(詳細は割愛)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "しかし `__proto__` 属性は標準仕様ではないため、直接触るのは好ましくない\n",
    "\n",
    "実際に使用する際に直接 `__proto__` 属性にオブジェクトを入れるわけではない"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## では実際にはどうするか"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# `new` 演算子"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "ここで力尽きたようだ"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "## 参考\n",
    "- [O’Reilly Japan - JavaScript 第6版](https://www.oreilly.co.jp/books/9784873115733/)\n",
    "- [最強オブジェクト指向言語 JavaScript 再入門！](https://www.slideshare.net/yuka2py/javascript-23768378)"
   ]
  }
 ],
 "metadata": {
  "celltoolbar": "Slideshow",
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.5"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}