{"componentChunkName":"component---src-templates-articles-jsx","path":"/blog/1/introduction/","result":{"data":{"post":{"fields":{"slug":"/1/introduction/"},"frontmatter":{"title":"ポートフォリオについて","date":"October 22nd, 2020","learning_Point":["Updated on 2020-11-8"]},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"ポートフォリオについて\",\n  \"subtitle\": null,\n  \"date\": \"2020-10-22T00:00:00.000Z\",\n  \"description\": null,\n  \"learning_Point\": [\"Updated on 2020-11-8\"],\n  \"img\": null,\n  \"tags\": [\"gatsby\"],\n  \"category\": \"gatsby\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Title = makeShortcode(\"Title\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Title, {\n    mdxType: \"Title\"\n  }, \"\\u5236\\u4F5C\\u306E\\u30DD\\u30EA\\u30B7\\u30FC\"), mdx(\"p\", null, \"\\u3053\\u306E\\u30DD\\u30FC\\u30C8\\u30D5\\u30A9\\u30EA\\u30AA\\u30B5\\u30A4\\u30C8\\u3092\\u4F5C\\u308B\\u969B\\u306B\\u610F\\u8B58\\u3057\\u305F\\u3053\\u3068\\u306F\\u3001\\u300C\\u3068\\u308A\\u3042\\u3048\\u305A\\u3084\\u3063\\u3066\\u307F\\u308B\\u300D\\u3068\\u3044\\u3046\\u3053\\u3068\\u3067\\u3059\\u3002\"), mdx(\"p\", null, \"\\u30D7\\u30ED\\u30B0\\u30E9\\u30DF\\u30F3\\u30B0\\u3067\\u306E\\u632B\\u6298\\u306E\\u539F\\u56E0\\u306F\\u3001\\u964D\\u308A\\u304B\\u304B\\u308B\\u8D64\\u3044\\u30A8\\u30E9\\u30FC\\u306E\\u96E8\\u3060\\u3068\\u3088\\u304F\\u805E\\u304D\\u307E\\u3059\\u3002\\u305D\\u306E\\u969C\\u58C1\\u306B\\u7ACB\\u3061\\u5411\\u304B\\u3044\\u3001\\u69D8\\u3005\\u306A\\u89E3\\u6C7A\\u7B56\\u3092\\u8A66\\u3057\\u3066\\u307F\\u308B\\u3002\\u3053\\u308C\\u306F\\u307E\\u308B\\u3067\\u3001\\u30B2\\u30FC\\u30E0\\u306E\\u9014\\u4E2D\\u306B\\u51FA\\u3066\\u304F\\u308B\\u6575\\u3092\\u3001\\u3042\\u306E\\u624B\\u3053\\u306E\\u624B\\u3067\\u5012\\u3059\\u306E\\u306B\\u4F3C\\u3066\\u3044\\u307E\\u3059\\u3002\\u79C1\\u306F\\u305D\\u308C\\u304C\\u3068\\u3066\\u3082\\u9762\\u767D\\u304F\\u611F\\u3058\\u307E\\u3057\\u305F\\u3002\"), mdx(\"p\", null, \"\\u65B0\\u3057\\u3044\\u6280\\u8853\\u3001\\u77E5\\u8B58\\u3092\\u5B66\\u3076\\u3053\\u3068\\u306B\\u8E8A\\u8E87\\u305B\\u305A\\u3001\\u9032\\u3093\\u3067\\u307F\\u307E\\u3057\\u305F\\u3002\"), mdx(Title, {\n    mdxType: \"Title\"\n  }, \"GatsbyJS\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"320px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"27.500000000000004%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAABMUlEQVQY02Poz9pyd1HzwZ8LGw/8aYtdt4yBgY/ZkuE/AxRwA7EiEDMzYAfSQMyLIjK3Zu9/oKH/Z5bv/g808JePYLuen0AvTDoMiEuAWARJCwsQM0HZnkCsjGLgzIrd/4Mke35lWsz+UeK26H+qyfRJpjJ+DMxMrMFA6UqoJjsgdgJif6hYDRCbAnExELcDsT0QawOxBsPe5Zf/t8ev/w007MeOhRf+l3kvmuJsFMLAwsyaBlSQBjXkIshuIG4D4lVAXAHEs4F4HhDXQ+mpQLyAYeucs/+3zT33f379/v8Tsrf+C1foM3YXL2OQ49djByooB+IWIDYG4jggLoJaYAbEmUCcCsTVQGwFdXk0Q779/PKagOXnG8NX7001muFYHbCMIc6ulomRkYmBRJACClsA72xeE21j0WAAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Gatsby Icon\",\n    \"title\": \"Gatsby Icon\",\n    \"src\": \"/static/fa38ab30a9b8abb4a1ff8c0b7fb86cef/72799/Gatsby_Logo.png\",\n    \"srcSet\": [\"/static/fa38ab30a9b8abb4a1ff8c0b7fb86cef/81690/Gatsby_Logo.png 80w\", \"/static/fa38ab30a9b8abb4a1ff8c0b7fb86cef/69538/Gatsby_Logo.png 160w\", \"/static/fa38ab30a9b8abb4a1ff8c0b7fb86cef/72799/Gatsby_Logo.png 320w\", \"/static/fa38ab30a9b8abb4a1ff8c0b7fb86cef/e85cb/Gatsby_Logo.png 480w\", \"/static/fa38ab30a9b8abb4a1ff8c0b7fb86cef/6af66/Gatsby_Logo.png 640w\", \"/static/fa38ab30a9b8abb4a1ff8c0b7fb86cef/e8950/Gatsby_Logo.png 2000w\"],\n    \"sizes\": \"(max-width: 320px) 100vw, 320px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \")), mdx(\"p\", null, \"GatsbyJS \\u306F React \\u30D9\\u30FC\\u30B9\\u306E\\u9759\\u7684\\u30B5\\u30A4\\u30C8\\u30B8\\u30A7\\u30CD\\u30EC\\u30FC\\u30BF\\u30FC\\u3067\\u3059\\u3002\"), mdx(\"p\", null, \"\\u3082\\u3068\\u3082\\u3068 React \\u306B\\u3059\\u3054\\u3044\\u8208\\u5473\\u304C\\u3042\\u3063\\u305F\\u306E\\u3067\\u3001Progate \\u3092\\u7D42\\u3048\\u3066\\u3059\\u3050\\u306B React \\u306E\\u5B66\\u7FD2\\u3092\\u3057\\u3066\\u3044\\u307E\\u3059\\u3002\"), mdx(\"p\", null, \"GatsbyJS \\u3092\\u77E5\\u3063\\u305F\\u306E\\u306F\\u3001\\u9759\\u7684\\u30B5\\u30A4\\u30C8\\u30B8\\u30A7\\u30CD\\u30EC\\u30FC\\u30BF\\u30FC(SSG)\\u306E\\u4E00\\u89A7\\u8868\\u3092\\u898B\\u3066\\u3044\\u305F\\u6642\\u3067\\u3059\\u3002 \\u30C9\\u30AD\\u30E5\\u30E1\\u30F3\\u30C8\\u306E\\u5145\\u5B9F\\u3055\\u3001\\u30B3\\u30DF\\u30E5\\u30CB\\u30C6\\u30A3\\u306E\\u5927\\u304D\\u3055(\\u7279\\u306B\\u6D77\\u5916\\u52E2)\\u304C\\u5370\\u8C61\\u7684\\u3067\\u3057\\u305F\\u3002\\u307E\\u305F\\u3001GraphQL \\u304C\\u6A19\\u6E96\\u642D\\u8F09\\u3055\\u308C\\u3066\\u304A\\u308A\\u3001\\u30D6\\u30ED\\u30B0\\u4F5C\\u6210\\u3001\\u7BA1\\u7406\\u304C\\u5BB9\\u6613\\u3068\\u3044\\u3046\\u3053\\u3068\\u3082\\u3042\\u308A\\u3001GatsbyJS \\u3092\\u9078\\u3073\\u307E\\u3057\\u305F\\u3002\"), mdx(Title, {\n    mdxType: \"Title\"\n  }, \"Tailwind \\u306B\\u3088\\u308B\\u30B9\\u30BF\\u30A4\\u30EA\\u30F3\\u30B0\"), mdx(\"p\", null, \"\\u6700\\u521D\\u306F styled-component \\u3084 Emotion \\u3092\\u4F7F\\u3063\\u3066\\u30B9\\u30BF\\u30A4\\u30EA\\u30F3\\u30B0\\u3057\\u3066\\u3044\\u307E\\u3057\\u305F\\u3002\\u5F8C\\u306B Tailwind \\u3092\\u77E5\\u308A(CSS \\u30D5\\u30EC\\u30FC\\u30E0\\u30EF\\u30FC\\u30AF\\u3068\\u3044\\u3046\\u3082\\u306E\\u3092\\u77E5\\u308A)\\u3001\\u4E00\\u5EA6 Tailwind \\u3092\\u4F7F\\u3063\\u3066\\n\\u30B9\\u30BF\\u30A4\\u30EA\\u30F3\\u30B0\\u3057\\u3066\\u307F\\u305F\\u3068\\u3053\\u308D\\u3001\\u3053\\u3061\\u3089\\u3092\\u63A1\\u7528\\u3057\\u307E\\u3057\\u305F\\u3002Tailwind \\u306E\\u66F8\\u304D\\u65B9\\u3084\\u6A5F\\u80FD\\u306A\\u3069\\u3092\\u5B9F\\u969B\\u306B\\u66F8\\u3044\\u3066\\u4F7F\\u3063\\u3066\\u307F\\u305F\\u304B\\u3063\\u305F\\u304B\\u3089\\u3067\\u3059\\u3002\"), mdx(\"p\", null, \"CSS \\u306E\\u81EA\\u7531\\u304C\\u52B9\\u304B\\u306A\\u3044\\u5206\\u3001\\u3084\\u306F\\u308A\\u7D20\\u65E9\\u304F\\u30B9\\u30BF\\u30A4\\u30EA\\u30F3\\u30B0\\u3067\\u304D\\u307E\\u3057\\u305F\\u3002\\u30EC\\u30B9\\u30DD\\u30F3\\u30B7\\u30D6\\u3082\\u7C21\\u5358\\u306B\\u8A2D\\u5B9A\\u3001\\u9069\\u5FDC\\u3067\\u304D\\u308B\\u306E\\u3067\\u4FBF\\u5229\\u3067\\u3059\\u3002\"), mdx(\"p\", null, \"\\u30B9\\u30BF\\u30A4\\u30EA\\u30F3\\u30B0\\u306B\\u7279\\u306B\\u3053\\u3060\\u308F\\u308A\\u306F\\u306A\\u3044\\u3051\\u3069\\u3001\\u304B\\u3063\\u3053\\u3088\\u304F\\u3057\\u305F\\u3044\\u3068\\u3044\\u3046\\u3068\\u304D\\u306B\\u4F7F\\u3048\\u308B\\u306A\\u3068\\u611F\\u3058\\u307E\\u3057\\u305F\\u3002\"), mdx(Title, {\n    mdxType: \"Title\"\n  }, \"Netlify \\u3067\\u81EA\\u52D5\\u30DB\\u30B9\\u30C6\\u30A3\\u30F3\\u30B0 \"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"320px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"27.500000000000004%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAABUElEQVQY0z3R3StDcRgH8OcgL7FTikTtbLIXUhqrNdpSk7O5US6Hm43sbkuMCy4kueDGSnKhpSEmGzZrx3mZ5MK1O0q59V/M97f9curTc+p5zvc853doSFccjhflfdBQTl0ltX00VyRLfK1BtDhIlOz/TGZbvUr2LtQeWAAPdMMqDLA+jZSfDxFaHtaUN9x7PU8VOqtW2cOtYIVmHibxugRB2IMA+OERXLVAd0H9dhfVHGQ8D+qJ97okW8JRwoYHGMhAgm9zD1uQhw3Y5uFJuIF1CJM/q8fG77RbyPuy+q/vSll0xpIkWp0p/vZ9HsLqCmzCNOzCjijZ5nlYL3xQ4NI4gh/Qpy4MOfT6SexCMw4TsAxzcAxjPJRtFYEozNRm68dRoGC60hJKV9IwK58bFMhoQuSrSh19/QL/CQIf7jSZ7U38HNvwBayymUben4TUHxL9eCtt9864AAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Netlify Icon\",\n    \"title\": \"Netlify Icon\",\n    \"src\": \"/static/e84c164819279717e4fb312b9fe77c0d/72799/Netlify.png\",\n    \"srcSet\": [\"/static/e84c164819279717e4fb312b9fe77c0d/81690/Netlify.png 80w\", \"/static/e84c164819279717e4fb312b9fe77c0d/69538/Netlify.png 160w\", \"/static/e84c164819279717e4fb312b9fe77c0d/72799/Netlify.png 320w\", \"/static/e84c164819279717e4fb312b9fe77c0d/e85cb/Netlify.png 480w\", \"/static/e84c164819279717e4fb312b9fe77c0d/6af66/Netlify.png 640w\", \"/static/e84c164819279717e4fb312b9fe77c0d/de766/Netlify.png 1838w\"],\n    \"sizes\": \"(max-width: 320px) 100vw, 320px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \")), mdx(\"p\", null, \"Netlify \\u3067\\u306F github \\u3068\\u9023\\u5E2F\\u3067\\u304D\\u308B\\u306E\\u3067\\u3001git \\u306B\\u30D7\\u30C3\\u30B7\\u30E5\\u3059\\u308B\\u3060\\u3051\\u3067\\u81EA\\u52D5\\u7684\\u306B Netlify \\u3092\\u4ECB\\u3057\\u3066\\u914D\\u4FE1\\u3055\\u308C\\u307E\\u3059\\u3002\\n\\u901A\\u5E38\\u5229\\u7528\\u3067\\u306F\\u7121\\u6599\\u3001\\u521D\\u671F\\u8A2D\\u5B9A\\u3082\\u7C21\\u5358\\u306A\\u306E\\u3067 Netlify \\u306B\\u3057\\u307E\\u3057\\u305F\\u3002\"), mdx(\"p\", null, \"\\u66F4\\u65B0\\u4F5C\\u696D\\u304C\\u305D\\u3093\\u306A\\u306B\\u306A\\u3044\\u30D6\\u30ED\\u30B0\\u3068\\u304B\\u3060\\u3068\\u3001\\u3053\\u308C\\u3067\\u5341\\u5206\\u304B\\u306A\\u3068\\u601D\\u3044\\u307E\\u3059\\u3002\"), mdx(\"p\", null, \"\\u3042\\u3068\\u306F\\u3001Gatsby \\u81EA\\u4F53\\u306E\\u30D3\\u30EB\\u30C9\\u304C\\u91CD\\u3044\\u306E\\u3067\\u3001\\u305D\\u308C\\u3082\\u5C11\\u3057\\u6539\\u5584\\u3055\\u308C\\u308B\\u3068\\u826F\\u3044\\u306A\\u3068\\u601D\\u3044\\u307E\\u3059\\u3002\"), mdx(Title, {\n    mdxType: \"Title\"\n  }, \"GitHub\\u306E\\u30EC\\u30DD\\u30B8\\u30C8\\u30EA\"), mdx(\"a\", {\n    href: \"https://github.com/NearCloser/ts-blog/\",\n    target: \"_blank\",\n    rel: \"noopener noreferrer\"\n  }, \"\\u30EA\\u30DD\\u30B8\\u30C8\\u30EA\\u306F\\u3053\\u3061\\u3089\"), mdx(\"p\", null, \"\\u5236\\u4F5C\\u3057\\u305F\\u30B5\\u30A4\\u30C8\\u306E\\u30BD\\u30FC\\u30B9\\u306F GitHub \\u306B\\u516C\\u958B\\u3057\\u3066\\u3042\\u308A\\u307E\\u3059\\u3002\"), mdx(\"p\", null, \"\\u3053\\u306E\\u30DD\\u30FC\\u30C8\\u30D5\\u30A9\\u30EA\\u30AA\\u30B5\\u30A4\\u30C8\\u306F\\u3001\\u3053\\u308C\\u304B\\u3089\\u3082\\u3063\\u3068\\u826F\\u304F\\u306A\\u308B\\u3088\\u3046\\u306B\\u6539\\u5584\\u3057\\u3066\\u3044\\u304F\\u4E88\\u5B9A\\u3067\\u3059\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"/1/introduction/","previous":null,"next":null}},"staticQueryHashes":["1229257044","1529963643","2012975941"]}