{"id":34742,"date":"2023-07-18T03:23:52","date_gmt":"2024-01-28T00:55:36","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%b8%aa%e5%87%a0%e4%b9%8e%e6%b2%a1%e6%9c%89%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e7%bb%8f%e9%aa%8c%e7%9a%84%e4%ba%ba%ef%bc%8c%e5%9c%a8%e4%b8%a4%e4%b8%aa%e6%9c%88%e5%86%85%e5%b0%9d%e8%af%95\/"},"modified":"2024-04-30T14:05:50","modified_gmt":"2024-04-30T06:05:50","slug":"%e4%b8%80%e4%b8%aa%e5%87%a0%e4%b9%8e%e6%b2%a1%e6%9c%89%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e7%bb%8f%e9%aa%8c%e7%9a%84%e4%ba%ba%ef%bc%8c%e5%9c%a8%e4%b8%a4%e4%b8%aa%e6%9c%88%e5%86%85%e5%b0%9d%e8%af%95","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%b8%aa%e5%87%a0%e4%b9%8e%e6%b2%a1%e6%9c%89%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e7%bb%8f%e9%aa%8c%e7%9a%84%e4%ba%ba%ef%bc%8c%e5%9c%a8%e4%b8%a4%e4%b8%aa%e6%9c%88%e5%86%85%e5%b0%9d%e8%af%95\/","title":{"rendered":"\u4e00\u4e2a\u51e0\u4e4e\u6ca1\u6709\u524d\u7aef\u5f00\u53d1\u7ecf\u9a8c\u7684\u4eba\uff0c\u5728\u4e24\u4e2a\u6708\u5185\u5c1d\u8bd5\u4f7f\u7528React+Redux+GAE\/Go\u521b\u5efa\u4e86\u4e00\u4e2aWeb\u5e94\u7528\u7684\u6545\u4e8b"},"content":{"rendered":"<h1>\u603b\u7ed3<\/h1>\n<p>\u5728\u8fd9\u7bc7\u6587\u7ae0\u4e2d\uff0c\u6211\u5c06\u603b\u7ed3\u5728\u4e24\u4e2a\u6708\u7684\u65f6\u95f4\u91cc\uff0c\u6211\u72ec\u81ea\u4e00\u4eba\u4ece\u96f6\u5f00\u59cb\u5236\u4f5cWeb\u5e94\u7528\u7a0b\u5e8f\u7684\u7ecf\u9a8c\u548c\u6280\u5de7\u3002\u6211\u7684\u603b\u7ed3\u5927\u81f4\u5305\u62ec\u4ee5\u4e0b\u5185\u5bb9\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u3069\u3093\u306a\u6d41\u308c\u3067Web\u30a2\u30d7\u30ea\u3092\u500b\u4eba\u3067\u4f5c\u3063\u3066\u30ea\u30ea\u30fc\u30b9\u307e\u3067\u3082\u3063\u3066\u3044\u3063\u305f\u304b<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u305d\u306e\u6642\u306b\u3069\u3046\u3044\u3046\u3053\u3068\u3092\u3057\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u304b<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">React\u3067\u3069\u3046\u3084\u3063\u3066\u305d\u3053\u305d\u3053\u672c\u683c\u7684\u306aWeb\u30a2\u30d7\u30ea\u3092\u4f5c\u308b\u304b<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068\u3069\u3093\u306a\u611f\u3058\u3067\u9023\u643a\u3092\u3057\u3066\u3044\u308b\u306e\u304b<\/ul>\n<h2>\u521b\u5efa\u7684\u4e1c\u897f\uff08EveryChart\uff09<\/h2>\n<p>\u8fd9\u662f\u4e00\u4e2a\u80fd\u8ba9\u4efb\u4f55\u4eba\u53d1\u8868\u81ea\u5df1\u559c\u6b22\u7684\u53e3\u7891\u8bc4\u4ef7\u7684\u7f51\u7ad9\u3002\u5b83\u57fa\u4e8eGAE\/Go\u8fdb\u884c\u8fd0\u884c\uff0c\u524d\u7aef\u90e8\u5206\u4f7f\u7528React + Redux + TypeScript\uff08\u8be6\u7ec6\u4fe1\u606f\u5c06\u5728\u540e\u6587\u63d0\u53ca\uff09\u3002<\/p>\n<blockquote><p>\u3010\u8f6c\u53d1\u5e0c\u671b\u3011\u6211\u521b\u5efa\u4e86\u4e00\u4e2a\u540d\u4e3a\u201cEveryChart\u201d\u7684\u7f51\u7edc\u670d\u52a1\uff0c\u4efb\u4f55\u4eba\u90fd\u53ef\u4ee5\u521b\u5efa\u548c\u5206\u4eab\u81ea\u5df1\u559c\u6b22\u7684\u53e3\u7891\u8bc4\u4ef7\uff01\u8fd9\u662f\u4e00\u4e2a\u53ef\u4ee5\u8ba9\u4efb\u4f55\u4eba\u521b\u5efa\u7c7b\u4f3c\u96f7\u8fbe\u56fe\u8bc4\u4ef7\u9875\u9762\u7684\u670d\u52a1\u3002\u6709\u5174\u8da3\u7684\u8bdd\uff0c\u8bd5\u8bd5\u770b\u5427~(^-^)\/https:\/\/t.co\/A4yVi96uPH #EveryChart pic.twitter.com\/JQTQtZqsBM\u2014 branch@\u4e2a\u4eba\u5e94\u7528\u5f00\u53d1\u8005 (@br_branch) August 31, 2019<\/p><\/blockquote>\n<p><script><\/script><\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d1ebf37434c4406c171cd\/9-0.gif\" alt=\"everychart.gif\" \/><\/div>\n<p>\u53e6\u5916\uff0c\u6e90\u4ee3\u7801\u5df2\u5728GitHub\u4e0a\u516c\u5f00\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d1ebf37434c4406c171cd\/11-0.png\" alt=\"undefined\" \/><\/div>\n<p>\u203b \u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u4e0a\u306e\u7406\u7531\u3067\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u5074\u306f\u4e2d\u9014\u534a\u7aef\u306a\u72b6\u614b\u3067\u516c\u958b\u3057\u3066\u307e\u3059\u304c\u3001\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u307e\u3067\u306f\u52d5\u304b\u305b\u307e\u3059\u3002<\/p>\n<p>\u5728\u672c\u6587\u4e2d\uff0c\u6211\u4eec\u5c06\u8ba8\u8bba\u4ee5\u4e0b\u5185\u5bb9\u3002<\/p>\n<p>\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9<\/p>\n<p>React v16<br \/>\nRedux v4<br \/>\nTypeScript v3.5<br \/>\nWebpack v4<br \/>\nchart.js v2<br \/>\nJavascript Load Image v2<\/p>\n<p>\u30d0\u30c3\u30af\u30a8\u30f3\u30c9<\/p>\n<p>Google Cloud Platform (GCP)<br \/>\nGAE \/ Go1.9<br \/>\nEcho v3<br \/>\nTwitter API<br \/>\nFirestore API<br \/>\nGoogle Cloud Storage API<\/p>\n<p>\u307e\u305f\u3001\u30b3\u30de\u30f3\u30c9\u306e\u5b9f\u884c\u74b0\u5883\u306f\u3001Mac OSX(10.14.5) \u3067\u3059\u3002<\/p>\n<h2>\u8bf7\u4ecb\u7ecd\u4e00\u4e0b\u81ea\u5df1\uff08\u8bf4\u660e\u662f\u4ec0\u4e48\u6837\u7684\u4eba\u5236\u4f5c\u7684\uff09\u3002<\/h2>\n<p>\u666e\u6bb5\u306fJava or Go\u3092\u4f7f\u3063\u305f\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u958b\u767a\u3092\u30e1\u30a4\u30f3\u3067\u884c\u3063\u3066\u3044\u307e\u3059\u3002<br \/>\n\u305f\u3060\u3001\u6700\u8fd1\u306f\u30b0\u30eb\u30fc\u30d7\u30de\u30cd\u30fc\u30b8\u30e3\u30fc\u3068\u3057\u3066\u8907\u6570\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u898b\u305f\u308a\u3068\u3044\u3063\u305f\u7ba1\u7406\u696d\u52d9\u304c\u30e1\u30a4\u30f3\u306b\u306a\u3063\u3066\u307e\u3059\uff08\u30d7\u30ec\u30a4\u30f3\u30b0\u30de\u30cd\u30fc\u30b8\u30e3\u30fc\u3068\u3057\u3066\u8a2d\u8a08\u3084\u5b9f\u88c5\u306a\u3069\u3082\u305d\u3053\u305d\u3053\u3053\u306a\u3057\u3066\u307e\u3059\uff09<\/p>\n<p>\u30d5\u30ed\u30f3\u30c8\u30b5\u30a4\u30c9\u306f\u30017\u5e74\u524d\u306b\u306f\u3084\u3063\u3066\u307e\u3057\u305f\u3002\u305f\u3060\u305d\u306e\u9803\u306f\u307e\u3060HTML4\u3067\u3001\u696d\u52d9\u30b7\u30b9\u30c6\u30e0\u304c\u30e1\u30a4\u30f3\u3060\u3063\u305f\u306e\u3067\u30ea\u30c3\u30c1\u306a\u3053\u3068\u3082\u3057\u3066\u304a\u3089\u305a\u3001\u4e3b\u306bjQuery\u3092\u4f7f\u3063\u3066\u4f5c\u6210\u3092\u3057\u3066\u3044\u307e\u3057\u305f\u3002<br \/>\n\u3068\u3044\u3046\u308f\u3051\u3067\u6700\u8fd1\u306e\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u3067\u3044\u3046\u3068\u307e\u3063\u305f\u304f\u306e\u672a\u7d4c\u9a13\u8005\u3067\u3059\u3002<\/p>\n<h2>\u6211\u521b\u5efaWeb\u5e94\u7528\u7a0b\u5e8f\u7684\u539f\u56e0<\/h2>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u6700\u8fd1\u306e\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3092\u52c9\u5f37\u3057\u305f\u304b\u3063\u305f<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u3068\u3044\u3046\u304b\u30bc\u30ed\u304b\u3089Web\u958b\u767a\u3057\u305f\u304f\u306a\u3063\u305f<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\u3044\u305a\u308c\u72ec\u7acb\u30fb\u8d77\u696d\u3082\u8996\u91ce\u306b\u3044\u308c\u305f\u526f\u696d\u3092\u59cb\u3081\u308b\u305f\u3081\u306e\u30dd\u30fc\u30c8\u30d5\u30a9\u30ea\u30aa\u306b\u306a\u308b\u3082\u306e\u3092\u4f5c\u308a\u305f\u304b\u3063\u305f<\/ul>\n<p>\u3068\u3044\u3046\u308f\u3051\u3067\u3001\u524d\u7f6e\u304d\u304c\u9577\u304f\u306a\u308a\u307e\u3057\u305f\u304c\u3053\u3053\u304b\u3089\u5148\u304c\u672c\u984c\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<h1>What is the topic?<\/h1>\n<p>\u4e0a\u8a18\u306e\u3088\u3046\u306b\u3001\u52c9\u5f37\uff0b\u30dd\u30fc\u30c8\u30d5\u30a9\u30ea\u30aa\u3068\u306a\u308b\u3082\u306e\u3092\u4f5c\u308b\u3068\u3044\u3046\u306e\u304c\u52d5\u6a5f\u3060\u3063\u305f\u306e\u3067\u3001\u6700\u521d\u304b\u3089 \u7d50\u69cb\u30ac\u30c1\u306a\u30b5\u30a4\u30c8 \u3092\u4f5c\u308d\u3046\u3068\u8003\u3048\u3066\u306f\u3044\u307e\u3057\u305f\u3002\u66f4\u306b\u306f\u3001\u4f5c\u308b\u3068\u304d\u306b\u306f\u4ee5\u4e0b\u306e\u76ee\u6a19\u3092\u7acb\u3066\u306a\u304c\u3089\u958b\u767a\u3092\u3057\u307e\u3057\u305f\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u306a\u308b\u3079\u304f\u77ed\u671f\u9593\u3067\u4f5c\u308b<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u30dd\u30fc\u30c8\u30d5\u30a9\u30ea\u30aa\u3068\u3057\u3066\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u5074\u306f\u4ed5\u4e8b\u306e\u30ce\u30a6\u30cf\u30a6\u3082\u6d3b\u304b\u305b\u308b\u3082\u306e\u3092\u4f5c\u308b<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u304b\u3064\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3067\u3082\u521d\u3081\u3066\u306e\u3053\u3068\u306b\u6311\u6226\u3059\u308b<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u904b\u7528\u30b3\u30b9\u30c8\u306f\u307b\u307c\u30bc\u30ed\u306b\u3059\u308b<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\u6bce\u65e52\u6642\u9593\u3060\u3051\u4f5c\u696d\u306b\u3042\u3066\u308b<\/ul>\n<p>\u7d50\u679c\u3068\u3057\u3066\u306f\u3001\u77ed\u671f\u9593\u304b\u3069\u3046\u304b\u306f\u308f\u304b\u308a\u307e\u305b\u3093\u304c\u30012019\/7\/7\u306b\u958b\u59cb\u3057\u30012018\/8\/31\u306b\u30ea\u30ea\u30fc\u30b9\u307e\u3067\u6301\u3063\u3066\u3044\u3051\u307e\u3057\u305f\u3002\u3061\u3087\u3046\u30698\u9031\u9593\u3001\u7d042\u30f6\u6708\u3067\u3001\u52c9\u5f37\u3057\u306a\u304c\u3089\u3060\u3063\u305f\u306e\u3067\u307c\u304f\u306a\u308a\u306b\u306f\u6e80\u8db3\u3057\u3066\u307e\u3059?<\/p>\n<h2>2\u30f6\u6708\u9593\u306e\u30b9\u30b1\u30b8\u30e5\u30fc\u30eb<\/h2>\n<p>\u3060\u3044\u305f\u3044\u4ee5\u4e0b\u306e\u30b9\u30b1\u30b8\u30e5\u30fc\u30eb\u611f\u3067\u4f5c\u6210\u3057\u3066\u3044\u304d\u307e\u3057\u305f\u3002<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\u4f55\u3092\u3064\u304f\u308b\u304b\u3068\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u306a\u3069\u3082\u308d\u3082\u308d\u6c7a\u3081\u308b(2019\/7\/7\uff1a1\u65e5)<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\u958b\u767a(\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\uff06\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9)(2019\/7\/8\u301c2019\/8\/23\uff1a47\u65e5)<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\u753b\u50cf\u306a\u3069\u306e\u30ea\u30bd\u30fc\u30b9\u4f5c\u6210 (\u958b\u767a\u3068\u4e26\u884c)<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\u30b9\u30c6\u30fc\u30b8\u30f3\u30b0\u74b0\u5883\u3067\u306e\u691c\u8a3c(2019\/8\/24\u301c2019\/8\/28\uff1a5\u65e5)<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\u672c\u756a\u74b0\u5883\u3067\u306e\u6700\u7d42\u78ba\u8a8d(2019\/8\/29\u301c2019\/8\/30\uff1a2\u65e5)<\/ol>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<ol>\u30ea\u30ea\u30fc\u30b9(2019\/8\/31\uff1a1\u65e5)<\/ol>\n<h3>\u4f55\u3092\u4f5c\u308b\u304b\u6c7a\u3081\u308b<\/h3>\n<p>\u6700\u521d\u306b\u3084\u3063\u305f\u3053\u3068\u306f\u5f53\u7136\u306a\u304c\u3089\u4f55\u3092\u4f5c\u308b\u304b\u306e\u691c\u8a0e\u3067\u3057\u305f\u3002<br \/>\n\u3068\u306f\u3044\u3063\u3066\u3082\u3001\u4ee5\u524d\u304b\u3089\u300c\u3053\u3046\u3044\u3046\u306e\u6b32\u3057\u3044\u306a\u3041\u300d\u3068\u3044\u3046\u30a2\u30a4\u30c7\u30a2\u306f\u30e1\u30e2\u3057\u305f\u308a\u3057\u3066\u3044\u3066\u3001\u305d\u306e\u30cd\u30bf\u5e33\u304b\u3089\u3072\u3063\u3071\u3063\u3066\u304f\u308b\u3060\u3051\u3060\u3063\u305f\u306e\u3067\u3059\u3050\u6c7a\u307e\u308a\u307e\u3057\u305f\u3002\u4ee5\u524d\u304b\u3089\u300c\u3088\u304f\u884c\u304f\u304a\u5e97\u3068\u304b\u3001\u611f\u52d5\u3057\u305f\u5c0f\u8aac\u3068\u304b\u3092\u81ea\u5206\u306a\u308a\u306b\u30e9\u30f3\u30af\u4ed8\u3051\u3067\u304d\u308b\u3088\u3046\u306a\u30a2\u30d7\u30ea\u304c\u3042\u308b\u3068\u3044\u3044\u306a\u3041\u300d\u3063\u3066\u601d\u3063\u3066\u305f\u306e\u3067\u3001\u305d\u308c\u3092\u4f5c\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n<h4>\u306a\u308b\u3079\u304f\u6700\u5c0f\u9650\u306e\u6a5f\u80fd\u3067\u30ea\u30ea\u30fc\u30b9<\/h4>\n<p>\u5927\u67a0\u306f\u304d\u307e\u3063\u305f\u306e\u3067\u3001\u6b21\u306f\u3069\u3046\u3044\u3046\u6a5f\u80fd\u3092\u5165\u308c\u308b\u304b\u3092\u691c\u8a0e\u3057\u307e\u3059\u3002\u5e73\u65e5\u306e\u901a\u52e4\u6642\u9593\u3092\u4f7f\u3063\u3066\u691c\u8a0e\u3092\u3057\u307e\u3057\u305f\u3002<br \/>\n\u3053\u3046\u3044\u3046\u306e\u3092\u8003\u3048\u3066\u308b\u6642\u304c\u4e00\u756a\u697d\u3057\u3044\u3067\u3059\u306d\u3002<br \/>\n\u305f\u3060\u3001\u6a5f\u80fd\u3092\u5165\u308c\u3059\u304e\u308b\u3068\u77ed\u671f\u9593\u3067\u306f\u4f5c\u6210\u304c\u3067\u304d\u306a\u3044\u306e\u3067\u3001\u4ee5\u4e0b\u3060\u3051\u3092\u4f5c\u308b\u3053\u3068\u306b\u3002<\/p>\n<p>\u30a2\u30ab\u30a6\u30f3\u30c8\u306e\u7ba1\u7406\uff08Twitter\u3067\u306e\u8a8d\u8a3c\uff09<\/p>\n<p>TwitterAPI\u3067\u306e\u8a8d\u8a3c\u30fb\u8a8d\u53ef<br \/>\n\u30ed\u30b0\u30a4\u30f3\/\u30ed\u30b0\u30a2\u30a6\u30c8<br \/>\n\u767b\u9332\u3068\u9000\u4f1a<\/p>\n<p>\u8a55\u4fa1\u30da\u30fc\u30b8\u3092\u30b0\u30eb\u30fc\u30d7\u5316\u3067\u304d\u308b\u6a5f\u80fd\uff08\u30ce\u30fc\u30c8)<\/p>\n<p>\u753b\u50cf\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3067\u304d\u308b<br \/>\n\u8aac\u660e\u6587\u3092\u66f8\u3051\u308b<br \/>\n\u7de8\u96c6\u3068\u524a\u9664\u304c\u3067\u304d\u308b<\/p>\n<p>\u8a55\u4fa1\u30da\u30fc\u30b8\u306e\u4f5c\u6210<\/p>\n<p>\u597d\u304d\u306a\u30c1\u30e3\u30fc\u30c8\u304c\u4f5c\u308c\u308b<br \/>\n\u30c1\u30e3\u30fc\u30c8\u306f\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u8868\u793a\u3055\u308c\u308b<br \/>\n\u753b\u50cf\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3067\u304d\u308b<br \/>\n\u8aac\u660e\u6587\u3092\u66f8\u3051\u308b<br \/>\n\u7de8\u96c6\u3068\u524a\u9664\u304c\u3067\u304d\u308b<br \/>\n\u8a55\u4fa1\u30da\u30fc\u30b8\u306b\u30b3\u30e1\u30f3\u30c8\u304c\u3067\u304d\u308b<br \/>\n\u4ed6\u306e\u4eba\u3082\u8a55\u4fa1\u3092\u6295\u7a3f\u3067\u304d\u308b<\/p>\n<p>\u305d\u306e\u4ed6\u7d30\u304b\u3044\u6a5f\u80fd<\/p>\n<p>\u5229\u7528\u898f\u7d04\u3068\u30d7\u30e9\u30a4\u30d0\u30b7\u30fc\u30dd\u30ea\u30b7\u30fc<br \/>\n\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u306e\u8aac\u660e<br \/>\n\u5168\u4f53\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u306f\u3057\u3063\u304b\u308a\u3068\u4f5c\u308a\u8fbc\u3080<\/p>\n<p>\u3060\u3044\u305f\u3044\u3056\u3063\u304f\u308a\u3068\uff11\u30643\u65e5(6\u6642\u9593)\u3068\u898b\u7a4d\u3082\u308a\u307e\u3057\u305f\u3002\u305d\u3057\u3066\u91cd\u8907\u3057\u3066\u308b\u6a5f\u80fd\u306f\u6d41\u7528\u3067\u304d\u308b\u3068\u60f3\u5b9a\u3057\u3066\u300139\u65e5\u304f\u3089\u3044\u3067\u3067\u304d\u308b\u304b\u306a\u3041\u3068\u304b\u8003\u3048\u3001\u66f4\u306b\u306f\u30a6\u30a9\u30fc\u30ba\u30de\u30f3\u7406\u8ad6\u3092\u5fdc\u7528\u3059\u308b\u3053\u3068\u30677\u6708\u4e2d\u306b\u30ea\u30ea\u30fc\u30b9\u3067\u304d\u308b\u3093\u3058\u3083\u306a\u3044\u304b\u3068\u8003\u3048\u3001\u305d\u308c\u3092\u76ee\u6a19\u306b\u958b\u767a\u3092\u958b\u59cb\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>\u7d50\u679c\u7684\u306b\u306f\u8272\u3093\u306a\u8981\u56e0\u3067\u30a6\u30a9\u30fc\u30ba\u30de\u30f3\u7406\u8ad6\u306e\u5fdc\u7528\u306f\u65ad\u5ff5\u3057\u3001\u304b\u3064\u6700\u521d\u306e\u4e88\u5b9a\u3088\u308a2\u9031\u9593\u9045\u308c\u3061\u3083\u3044\u307e\u3057\u305f\u304c\u3002<br \/>\n\u3084\u3063\u3071\u308a\u3001\u81ea\u5206\u304c\u30a6\u30a9\u30fc\u30ba\u30de\u30f3\u3067\u306f\u306a\u3044\u3068\u9014\u4e2d\u3067\u6c17\u3065\u3044\u3066\u3057\u307e\u3063\u305f\u306e\u304c\u75db\u304b\u3063\u305f\u3067\u3059\u3002<\/p>\n<h4>\u4f55\u306b\u6311\u6226\u3059\u308b\u304b<\/h4>\n<p>\u7d9a\u3044\u3066\u3001\u4f55\u306b\u6311\u6226\u3059\u308b\u304b\u3092\u6c7a\u3081\u307e\u3059\u3002\u3053\u308c\u3082\u5ff5\u5165\u308a\u306b\u691c\u8a0e\u3057\u305f\u3068\u3044\u3046\u3088\u308a\u306f\u300c\u524d\u304b\u3089\u8208\u5473\u306f\u3042\u3063\u305f\u3082\u306e\u300d\u3092\u53d6\u308a\u5165\u308c\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<br \/>\n\u30d5\u30ed\u30f3\u30c8\u5074\u306f\u3001React\u3092\u4f7f\u3046\u4e88\u5b9a\u3067\u306f\u6700\u521d\u304b\u3089\u3044\u307e\u3057\u305f\u3002Vue.js\u3084Anglar\u306b\u3082\u8208\u5473\u306f\u3042\u3063\u305f\u306e\u3067\u3059\u304c\u3001React\u306f\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u8c4a\u5bcc\u3063\u3066\u805e\u3044\u3066\u305f\u306e\u3067\u305d\u308c\u3067\u9078\u3093\u3060\u7a0b\u5ea6\u306e\u611f\u3058\u3067\u3059\uff08\u6b21\u306fVue.js\u3082\u4f7f\u3063\u3066\u307f\u305f\u3044)\u3002<br \/>\n\u305d\u308c\u3067\u8272\u3005\u3068\u8abf\u3079\u3066\u3044\u305f\u3089\u3001\u6700\u8fd1\u3067\u306f React\u3068Redux\u3092\u4f75\u7528\u3057\u3066State\u7ba1\u7406\u3092\u3059\u308b\u3089\u3057\u3044\u3068\u3044\u3046\u3053\u3068\u3092\u77e5\u3063\u305f\u306e\u3067\u3001 React+Redux\u5165\u9580 \u3068\u304b\u3092\u8aad\u307f\u3064\u3064\u3001\u305d\u308c\u3082\u5c0e\u5165\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3059\u3002\u3064\u3044\u3067\u306bTypeScript\u3067\u66f8\u3053\u3046\u3068\u3082\u5b89\u6613\u306a\u6c17\u6301\u3061\u3067\u601d\u3044\u3001\u4ee5\u4e0b\u306e\u6311\u6226\u3092\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9<\/p>\n<p>React + Redux + TypeScript\u3067\u30d5\u30ed\u30f3\u30c8\u5074\u3092\u4f5c\u308b<br \/>\nWebpack4\u3092\u4f7f\u3063\u3066\u307f\u308b<\/p>\n<p>\u30d0\u30c3\u30af\u30a8\u30f3\u30c9<\/p>\n<p>\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306f\u57fa\u672c\u69cb\u6210\u306f\u4eca\u56de\u306f\u5b9f\u7e3e\u306e\u3042\u308b\u3082\u306e\u3067(GAE\/Go1.9)<br \/>\n\u305f\u3060Firestore Native\u30e2\u30fc\u30c9\u3092\u4f7f\u3063\u3066\u307f\u308b<br \/>\n\u30af\u30ea\u30fc\u30f3\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u3068DDD\u306b\u3082\u6311\u6226\u3057\u3066\u307f\u308b<\/p>\n<h4>\u67b6\u6784<\/h4>\n<p>\u3053\u3093\u306a\u611f\u3058\u306e\u691c\u8a0e\u3092\u3057\u307e\u3057\u305f\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d1ebf37434c4406c171cd\/41-0.png\" alt=\"\u5168\u4f53\u69cb\u6210.png\" \/><\/div>\n<h4>\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u6210<\/h4>\n<p>\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u6210\u306f\u3053\u3093\u306a\u611f\u3058\u3067\u3059\u3002<br \/>\n\u305f\u3060\u3001\u4e0b\u306e\u300c\u53cd\u7701\u70b9\u300d\u3067\u3082\u66f8\u3044\u305f\u306e\u3067\u3059\u304c\u30d5\u30ed\u30f3\u30c8\u5074\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u6210\u306f\u5931\u6557\u3067\u3057\u305f\u3002<br \/>\n\u307e\u3042\u3001\u305d\u308c\u3082\u7d4c\u9a13\u3068\u3044\u3046\u3053\u3068\u3067\u63a1\u7528\u3057\u305f\u69cb\u6210\u3092\u305d\u306e\u307e\u307e\u8f09\u305b\u307e\u3059\u3002<br \/>\n(\u53cd\u7701\u70b9\u306e\u7b87\u6240\u306b\u3053\u3046\u3057\u305f\u3089\u3088\u304b\u3063\u305f\u3068\u3044\u3046\u306e\u306f\u66f8\u3044\u3066\u307e\u3059)<\/p>\n<pre class=\"post-pre\"><code>EveryChart\r\n\u251c\u2500\u2500 backend <span class=\"c\"># \u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3002\u6700\u7d42\u7684\u306b\u306f\u3053\u306e\u4e2d\u306e\u3082\u306e\u304c\u30c7\u30d7\u30ed\u30a4\u3055\u308c\u308b<\/span>\r\n\u2502   \u251c\u2500\u2500 src <span class=\"c\"># \u30bd\u30fc\u30b9\u30c7\u30a3\u30ec\u30af\u30c8\u30ea<\/span>\r\n\u2502   \u2502   \u2514\u2500\u2500 project <span class=\"c\"># \u30eb\u30fc\u30c8<\/span>\r\n\u2502   \u2502       \u251c\u2500\u2500 core <span class=\"c\"># \u30b5\u30fc\u30d0\u30fc\u306e\u57fa\u672c\u90e8\u5206\u3092\u6271\u3063\u305f\u30d1\u30c3\u30b1\u30fc\u30b8<\/span>\r\n\u2502   \u2502       \u251c\u2500\u2500 client <span class=\"c\"># TwitterAPI\u3084Firestore\u306a\u3069\u3001\u5916\u90e8\u30b5\u30fc\u30d3\u30b9\u3068\u9023\u643a\u3059\u308b\u305f\u3081\u306e\u30af\u30e9\u30b9\u3092\u307e\u3068\u3081\u308b\u30d1\u30c3\u30b1\u30fc\u30b8<\/span>\r\n\u2502   \u2502       |   \u251c\u2500\u2500 foon <span class=\"c\"># Firestore API\u3092\u6271\u3046\u30d1\u30c3\u30b1\u30fc\u30b8<\/span>\r\n\u2502   \u2502       |   \u251c\u2500\u2500 oauth <span class=\"c\"># Twitter API\u3092\u6271\u3046\u30d1\u30c3\u30b1\u30fc\u30b8<\/span>\r\n\u2502   \u2502       |   \u251c\u2500\u2500 session <span class=\"c\"># Session API \u3092\u6271\u3046\u30d1\u30c3\u30b1\u30fc\u30b8<\/span>\r\n\u2502   \u2502       |   \u2514\u2500\u2500 storage <span class=\"c\"># Google Cloud Storage API \u3092\u6271\u3046\u30d1\u30c3\u30b1\u30fc\u30b8<\/span>\r\n\u2502   \u2502       \u251c\u2500\u2500 errors <span class=\"c\"># error\u3092\u6271\u3063\u305f\u30d1\u30c3\u30b1\u30fc\u30b8<\/span>\r\n\u2502   \u2502       \u251c\u2500\u2500 handler <span class=\"c\"># \u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u306e\u51e6\u7406\u3092\u307e\u3068\u3081\u305f\u30d1\u30c3\u30b1\u30fc\u30b8<\/span>\r\n\u2502   \u2502       \u251c\u2500\u2500 mapper <span class=\"c\"># JSON\u30d5\u30a1\u30a4\u30eb\u3068\u30c9\u30e1\u30a4\u30f3\u30e2\u30c7\u30eb\u3092\u30de\u30c3\u30d4\u30f3\u30b0\u3059\u308b\u30af\u30e9\u30b9\u3092\u96c6\u3081\u305f\u30d1\u30c3\u30b1\u30fc\u30b8<\/span>\r\n\u2502   \u2502       \u251c\u2500\u2500 middlewares <span class=\"c\"># \u30b5\u30fc\u30d0\u30fc\u306e\u632f\u308b\u821e\u3044\u3092\u5b9a\u7fa9\u3059\u308b\u30af\u30e9\u30b9\u3092\u96c6\u3081\u305f\u30d1\u30c3\u30b1\u30fc\u30b8<\/span>\r\n\u2502   \u2502       \u251c\u2500\u2500 model <span class=\"c\"># \u30c9\u30e1\u30a4\u30f3\u30e2\u30c7\u30eb\u3092\u96c6\u3081\u305f\u30d1\u30c3\u30b1\u30fc\u30b8<\/span>\r\n\u2502   \u2502       \u251c\u2500\u2500 persistence <span class=\"c\"># \u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u3078\u4fdd\u7ba1\u3059\u308bEntity\u3068\u30ec\u30dd\u30b8\u30c8\u30ea\u3092\u5b9a\u7fa9\u3057\u305f\u30d1\u30c3\u30b1\u30fc\u30b8<\/span>\r\n\u2502   \u2502       |   \u251c\u2500\u2500 data <span class=\"c\"># \u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306eEntity\u3092\u8868\u73fe\u3057\u305f\u30d1\u30c3\u30b1\u30fc\u30b8 (\u30e2\u30c7\u30eb\u306e\u30de\u30c3\u30d4\u30f3\u30b0\u3082\u884c\u3046)<\/span>\r\n\u2502   \u2502       |   \u2514\u2500\u2500 repository <span class=\"c\"># \u30c7\u30fc\u30bf\u30a2\u30af\u30bb\u30b9\u3092\u6271\u3046\u30d1\u30c3\u30b1\u30fc\u30b8<\/span>\r\n\u2502   \u2502       \u251c\u2500\u2500 usecase <span class=\"c\"># \u30b7\u30b9\u30c6\u30e0\u306e\u632f\u308b\u821e\u3044\u3092\u307e\u3068\u3081\u305f\u30d1\u30c3\u30b1\u30fc\u30b8<\/span>\r\n\u2502   \u2502       \u251c\u2500\u2500 util <span class=\"c\"># \u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u30af\u30e9\u30b9\u3092\u3042\u3064\u3081\u305f\u30d1\u30c3\u30b1\u30fc\u30b8<\/span>\r\n\u2502   \u2502       \u251c\u2500\u2500 vendor <span class=\"c\"># dep\u306e\u4f9d\u5b58\u30d1\u30c3\u30b1\u30fc\u30b8\u304c\u683c\u7d0d\u3055\u308c\u308b\u30d1\u30c3\u30b1\u30fc\u30b8<\/span>\r\n\u2502   \u2502       \u251c\u2500\u2500 Gopkg.toml <span class=\"c\"># dep\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb<\/span>\r\n\u2502   \u2502       \u2514\u2500\u2500 main.go <span class=\"c\"># \u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u5074\u306e\u30a8\u30f3\u30c8\u30ea\u30dd\u30a4\u30f3\u30c8<\/span>\r\n\u2502   \u251c\u2500\u2500 static <span class=\"c\"># \u9759\u7684\u30d5\u30a1\u30a4\u30eb\u306e\u7f6e\u304d\u5834<\/span>\r\n\u2502   \u2502   \u251c\u2500\u2500 images <span class=\"c\"># favicon\u306a\u3069\u306e\u753b\u50cf\u7f6e\u304d\u5834<\/span>\r\n\u2502   \u2502   \u2514\u2500\u2500 js <span class=\"c\"># webpack\u3067\u30b3\u30f3\u30d1\u30a4\u30eb\u3057\u305f\u30d5\u30a1\u30a4\u30eb\u304c\u683c\u7d0d\u3055\u308c\u308b<\/span>\r\n\u2502   \u2502       \u2514\u2500\u2500 bundle.js <span class=\"c\"># webpack\u306e\u751f\u6210\u30d5\u30a1\u30a4\u30eb<\/span>\r\n\u2502   \u251c\u2500\u2500 template <span class=\"c\"># html\u306eGo \u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u914d\u7f6e\u3059\u308b\u30c7\u30a3\u30ec\u30af\u30c8\u30ea<\/span>\r\n\u2502   \u2502   \u251c\u2500\u2500 layout <span class=\"c\"># \u30d9\u30fc\u30b9\u3068\u306a\u308b\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u5b9a\u7fa9\u3059\u308b\u30d1\u30c3\u30b1\u30fc\u30b8<\/span>\r\n\u2502   \u2502   \ufe19\r\n\u2502   \u251c\u2500\u2500 .envrc <span class=\"c\"># direnv\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb<\/span>\r\n\u2502   \u2514\u2500\u2500 hogehoge.yaml <span class=\"c\"># backend\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u3002\u30ed\u30fc\u30ab\u30eb\u7528\/\u30b9\u30c6\u30fc\u30b8\u30f3\u30b0\u7528\/\u672c\u756a\u7528\u3092\u7528\u610f<\/span>\r\n\u2514\u2500\u2500 front <span class=\"c\"># \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u5074\u3002\u3053\u306e\u4e2d\u306e\u3082\u306e\u304cwebpack\u3067\u30b3\u30f3\u30d1\u30a4\u30eb\u3055\u308c\u3001 backend\/static\/js\/bundle.js \u306b\u683c\u7d0d\u3055\u308c\u308b<\/span>\r\n    \u251c\u2500\u2500 node_modules <span class=\"c\"># node.js\u306e\u4f9d\u5b58\u30d1\u30c3\u30b1\u30fc\u30b8\u304c\u683c\u7d0d\u3055\u308c\u308b<\/span>\r\n    \u251c\u2500\u2500 src <span class=\"c\"># \u30bd\u30fc\u30b9\u30d5\u30a1\u30a4\u30eb\u306e\u914d\u7f6e\u5834\u6240<\/span>\r\n    \u2502   \u251c\u2500\u2500 app <span class=\"c\"># \u5404\u6a5f\u80fd\u3054\u3068\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8868\u73fe\u3002\u305f\u3060\u3053\u3053\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u69cb\u6210\u306f\u5931\u6557\u3060\u3063\u305f\u3002\u3002<\/span>\r\n    \u2502   \u2502   \u251c\u2500\u2500 common <span class=\"c\"># \u5171\u901a\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8868\u73fe<\/span>\r\n    \u2502   \u2502   \u251c\u2500\u2500 xxxx <span class=\"c\"># \u5404\u6a5f\u80fd<\/span>\r\n    \u2502   \u2502   \u2502   \u251c\u2500\u2500 xxxComponent.tsx <span class=\"c\"># UI\u90e8\u54c1<\/span>\r\n    \u2502   \u2502   \u2502   \u251c\u2500\u2500 xxxActions.ts <span class=\"c\"># \u30a4\u30d9\u30f3\u30c8\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u5b9a\u7fa9<\/span>\r\n    \u2502   \u2502   \u2502   \u251c\u2500\u2500 xxxContainer.ts <span class=\"c\"># UI\u306e\u632f\u308b\u821e\u3044\u3092\u5b9a\u7fa9<\/span>\r\n    \u2502   \u2502   \u2502   \u2514\u2500\u2500 xxxState.ts <span class=\"c\"># UI\u306e\u72b6\u614b\u3092\u5b9a\u7fa9<\/span>\r\n    \u2502   \u2502   \ufe19\r\n    \u2502   \u2502   \u251c\u2500\u2500 component.tsx <span class=\"c\"># \u57fa\u790e\u3068\u306e\u3042\u308b\u30ec\u30a4\u30a2\u30a6\u30c8<\/span>\r\n    \u2502   \u2502   \u251c\u2500\u2500 routerActions.ts <span class=\"c\"># \u57fa\u672c\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u30a2\u30af\u30b7\u30e7\u30f3<\/span>\r\n    \u2502   \u2502   \u251c\u2500\u2500 routerContainer.ts <span class=\"c\"># \u57fa\u672c\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u30b3\u30f3\u30c6\u30ca<\/span>\r\n    \u2502   \u2502   \u2514\u2500\u2500 routerState.ts <span class=\"c\"># \u57fa\u672c\u30ec\u30a4\u30a2\u30a6\u30c8\u306e\u72b6\u614b\u3092\u8868\u3057\u305f\u30af\u30e9\u30b9<\/span>\r\n    \u2502   \u251c\u2500\u2500 client <span class=\"c\"># backend\u3068\u306e\u901a\u4fe1\u3092\u884c\u3046\u30af\u30e9\u30b9\u3092\u6271\u3063\u305f\u30d1\u30c3\u30b1\u30fc\u30b8<\/span>\r\n    \u2502   \u251c\u2500\u2500 model <span class=\"c\"># \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u5074\u3067\u6271\u3046\u30e2\u30c7\u30eb\u3092\u6271\u3063\u305f\u30d1\u30c3\u30b1\u30fc\u30b8<\/span>\r\n    \u2502   \u251c\u2500\u2500 sample <span class=\"c\"># \u7df4\u7fd2\u7528\u306e\u304c\u305d\u306e\u307e\u307e\u6b8b\u3063\u3066\u308b\u3060\u3051<\/span>\r\n    \u2502   \u251c\u2500\u2500 types <span class=\"c\"># \u4e00\u90e8TypeScript\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u306a\u3044\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u5b9a\u7fa9\u3092\u3059\u308b\u305f\u3081\u306e\u30d1\u30c3\u30b1\u30fc\u30b8<\/span>\r\n    \u2502   \u251c\u2500\u2500 utils <span class=\"c\"># \u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u30af\u30e9\u30b9<\/span>\r\n    \u2502   \u251c\u2500\u2500 consts.ts <span class=\"c\"># \u5b9a\u6570\u3092\u96c6\u3081\u305f\u30af\u30e9\u30b9<\/span>\r\n    \u2502   \u251c\u2500\u2500 eventDispacher.ts <span class=\"c\"># \u5171\u901a\u3067\u547c\u3073\u51fa\u3057\u305f\u3044\u30a4\u30d9\u30f3\u30c8\u3092\u5b9a\u7fa9<\/span>\r\n    \u2502   \u251c\u2500\u2500 index.css <span class=\"c\"># \u5171\u901a\u306eCSS<\/span>\r\n    \u2502   \u251c\u2500\u2500 index.tsx <span class=\"c\"># \u30d5\u30ed\u30f3\u30c8\u5074\u306e\u30a8\u30f3\u30c8\u30ea\u30dd\u30a4\u30f3\u30c8<\/span>\r\n    \u2502   \u251c\u2500\u2500 registerServiceWorker.ts <span class=\"c\"># service-worker.js \u3092\u767b\u9332\u3059\u308b\u305f\u3081\u306e\u30b9\u30af\u30ea\u30d7\u30c8<\/span>\r\n    \u2502   \u2514\u2500\u2500 store.ts <span class=\"c\"># Redux\u306eStore<\/span>\r\n    \u251c\u2500\u2500 package.json <span class=\"c\"># \u30d1\u30c3\u30b1\u30fc\u30b8\u7ba1\u7406\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb<\/span>\r\n    \u251c\u2500\u2500 tsconfig.json <span class=\"c\"># TypeScript\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb<\/span>\r\n    \u251c\u2500\u2500 tslint.json <span class=\"c\"># TypeScript\u306e\u9759\u7684\u89e3\u6790\u306e\u5b9a\u7fa9\u30d5\u30a1\u30a4\u30eb<\/span>\r\n    \u2514\u2500\u2500 webpack.config.js <span class=\"c\"># Webpack\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb<\/span>\r\n<\/code><\/pre>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d1ebf37434c4406c171cd\/45-0.png\" alt=\"\u51e6\u7406\u306e\u6d41\u308c.png\" \/><\/div>\n<h4>\u5728\u5b9e\u9645\u60c5\u51b5\u4e0b\u8fdb\u884c\u672c\u5730\u8fd0\u884c<\/h4>\n<p>\u5b9f\u969b\u306e\u52d5\u304d\u306f\u3001GitHub\u304b\u3089\u843d\u3068\u3057\u3066\u304d\u3066\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<br \/>\n\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u5074\u306f\u516c\u958b\u3057\u3059\u304e\u3061\u3083\u3046\u3068\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u7684\u306b\u3082\u3088\u308d\u3057\u304f\u306a\u3044\u3093\u3067\u3001\u30b3\u30a2\u3068\u306a\u308b\u90e8\u5206\u306f\u6d88\u3057\u3066\u3057\u307e\u3063\u3066\u3044\u307e\u3059\u304c\u3001\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u307e\u3067\u306a\u3089\u898b\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u304b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<h5>\u5b89\u88c5\u8bbe\u7f6e<\/h5>\n<p>\u5c06\u4ee5\u4e0b\u5185\u5bb9\u653e\u5165Mac\u4e2d\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Go v1.9 (\u74b0\u5883\u69cb\u7bc9(Qiita))<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Dep (\u74b0\u5883\u69cb\u7bc9(Qiita))<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Direnv(\u74b0\u5883\u69cb\u7bc9(Qiita))<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Gcloud(\u74b0\u5883\u69cb\u7bc9(Qiita))<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Goapp (\u74b0\u5883\u69cb\u7bc9(Qiita))<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">Firebase emurator (\u74b0\u5883\u69cb\u7bc9(Qiita))<\/ul>\n<pre class=\"post-pre\"><code><span class=\"c\"># \u4e0a\u306e\u5fc5\u8981\u306a\u30c4\u30fc\u30eb\u985e\u306f\u5165\u308c\u3066\u3044\u308b\u72b6\u614b<\/span>\r\n<span class=\"nv\">$ <\/span>git clone https:\/\/github.com\/brbranch\/EveryChartSample <span class=\"nt\">--recursive<\/span>\r\n<span class=\"nv\">$ <\/span><span class=\"nb\">cd<\/span> .\/EveryChartSample\/backend\r\n<span class=\"nv\">$ <\/span>direnv allow <span class=\"c\"># direnv\u3092\u6709\u52b9\u306b\u3059\u308b<\/span>\r\n<span class=\"nv\">$ <\/span><span class=\"nb\">cd<\/span> .\/src\/project\r\n<span class=\"nv\">$ <\/span>dep ensure <span class=\"c\"># \u4f9d\u5b58\u30e9\u30a4\u30d6\u30e9\u30ea\u306eDL<\/span>\r\n<span class=\"c\"># firestore emurator\u306e\u8d77\u52d5<\/span>\r\n<span class=\"nv\">$ <\/span>gcloud beta emulators firestore start <span class=\"nt\">--host-port<\/span><span class=\"o\">=<\/span>localhost:8915\r\n<span class=\"c\"># \u30b5\u30fc\u30d0\u30fc\u306e\u8d77\u52d5(\u5225\u30bf\u30d6\u306a\u3069\u3067\u30bf\u30fc\u30df\u30ca\u30eb\u3092\u958b\u304f)<\/span>\r\n<span class=\"nv\">$ <\/span>goapp serve local.yaml\r\n<\/code><\/pre>\n<p>\u3042\u3068\u306f\u3001 http:\/\/127.0.0.1:8080 \u3092\u30d6\u30e9\u30a6\u30b6\u304b\u3089\u53e9\u304f\u3068\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u308b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<h1>\u5f00\u59cb\u5f00\u53d1<\/h1>\n<p>\u56e0\u6b64\uff0c\u5728\u8003\u8651\u4e86\u7ec4\u7ec7\u7ed3\u6784\u7b49\u5404\u4e2a\u65b9\u9762\u540e\uff0c\u6211\u4eec\u5c06\u5f00\u59cb\u5f00\u53d1\u3002\u4ee5\u4e0b\u53ea\u5217\u4e3e\u91cd\u70b9\u3002<\/p>\n<h2>\u540e\u7aef\u5f00\u53d1<\/h2>\n<p>\u6700\u5f00\u59cb\u662f\u4ece\u719f\u6089\u7684\u540e\u7aef\u5f00\u59cb\u521b\u5efa\uff0c\u800c\u4e0d\u662f\u4ece\u524d\u7aef\u5f00\u59cb\u3002<br \/>\n\u6784\u5efa\u65b9\u5f0f\u4e00\u5f00\u59cb\u5c31\u6309\u7167\u4e0a\u8ff0\u7684\u5f62\u5f0f\uff0c\u5148\u8003\u8651\u6a21\u578b\u5e76\u8bb0\u5f55\u7528\u4f8b\uff0c\u7136\u540e\u901a\u8fc7Handler\u521b\u5efa\u7ec8\u7aef\u8282\u70b9\uff0c\u63a5\u7740\u7f16\u5199\u8fdb\u4e00\u6b65\u7684\u5904\u7406\u7a0b\u5e8f\u3002<\/p>\n<h3>\u4f7f\u5f97\u53ef\u4ee5\u901a\u8fc7Twitter\u8fdb\u884c\u8ba4\u8bc1<\/h3>\n<p>\u9996\u5148\uff0c\u7531\u4e8e\u65e0\u6cd5\u767b\u5f55\uff0c\u6240\u4ee5\u96be\u4ee5\u7ee7\u7eed\u521b\u5efa\uff0c\u56e0\u6b64\u9009\u62e9\u901a\u8fc7Twitter\u5173\u8054\u8fdb\u884c\u521b\u5efa\u3002<br \/>\n\u4eceTwitter\u5f00\u53d1\u8005\u5e73\u53f0\u6ce8\u518c\u5e94\u7528\u7a0b\u5e8f\uff0c\u5e76\u83b7\u53d6\u5e94\u7528\u7a0b\u5e8f\u7684\u4ee4\u724c\u548c\u79d8\u5bc6\u4fe1\u606f\u3002<br \/>\n(\u6709\u5173\u5982\u4f55\u8fdb\u884c\u8fd9\u4e9b\u6b65\u9aa4\u7684\u8be6\u7ec6\u4fe1\u606f\uff0c\u8bf7\u53c2\u9605https:\/\/qiita.com\/kngsym2018\/items\/2524d21455aac111cdee)<\/p>\n<p>\u8865\u5145\u4e00\u70b9\uff0c\u5f53\u4f7f\u7528Twitter\u7684OAuth\u65f6\uff0c\u5fc5\u987b\u6307\u5b9a\u5e94\u7528\u7a0b\u5e8f\u7684\u56de\u8c03URL\u3002<br \/>\n\u7136\u800c\uff0c\u8fd9\u4e2a\u56de\u8c03URL\u53ef\u4ee5\u662f http:\/\/127.0.0.1:8080 \u6216\u8005\u5176\u4ed6\u4efb\u4f55\u5408\u9002\u7684URL\uff0c\u6240\u4ee5\u8bf7\u5c06\u5176\u6307\u5b9a\u4e3a http:\/\/127.0.0.1:8080\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d1ebf37434c4406c171cd\/60-0.png\" alt=\"image.png\" \/><\/div>\n<p>\u8fd9\u90e8\u5206\u7684\u5b9e\u73b0\u5927\u81f4\u662f\u8fd9\u6837\u7684\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">type<\/span> <span class=\"n\">AuthHandler<\/span> <span class=\"k\">struct<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">func<\/span> <span class=\"p\">(<\/span><span class=\"n\">a<\/span> <span class=\"o\">*<\/span><span class=\"n\">AuthHandler<\/span><span class=\"p\">)<\/span> <span class=\"n\">Handle<\/span><span class=\"p\">(<\/span><span class=\"n\">e<\/span> <span class=\"o\">*<\/span><span class=\"n\">echo<\/span><span class=\"o\">.<\/span><span class=\"n\">Group<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"c\">\/\/ ... \u4e2d\u7565...<\/span>\r\n    <span class=\"n\">e<\/span><span class=\"o\">.<\/span><span class=\"n\">GET<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/auth\/twitter\/:id\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">a<\/span><span class=\"o\">.<\/span><span class=\"n\">authTwitter<\/span><span class=\"p\">)<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">func<\/span> <span class=\"p\">(<\/span><span class=\"n\">a<\/span> <span class=\"o\">*<\/span><span class=\"n\">AuthHandler<\/span><span class=\"p\">)<\/span> <span class=\"n\">authTwitter<\/span><span class=\"p\">(<\/span><span class=\"n\">e<\/span> <span class=\"n\">echo<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"p\">)<\/span> <span class=\"kt\">error<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"n\">ctx<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">core<\/span><span class=\"o\">.<\/span><span class=\"n\">NewContext<\/span><span class=\"p\">(<\/span><span class=\"n\">e<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"n\">client<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">oauth<\/span><span class=\"o\">.<\/span><span class=\"n\">NewAuthClient<\/span><span class=\"p\">(<\/span><span class=\"n\">oauth<\/span><span class=\"o\">.<\/span><span class=\"n\">Twitter<\/span><span class=\"p\">,<\/span> <span class=\"n\">ctx<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"n\">requestUri<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">client<\/span><span class=\"o\">.<\/span><span class=\"n\">GetAuthUrl<\/span><span class=\"p\">(<\/span><span class=\"n\">e<\/span><span class=\"o\">.<\/span><span class=\"n\">Param<\/span><span class=\"p\">(<\/span><span class=\"s\">\"id\"<\/span><span class=\"p\">))<\/span>\r\n\r\n    <span class=\"k\">if<\/span> <span class=\"n\">err<\/span> <span class=\"o\">!=<\/span> <span class=\"no\">nil<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"n\">core<\/span><span class=\"o\">.<\/span><span class=\"n\">ErrorHTML<\/span><span class=\"p\">(<\/span><span class=\"n\">e<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"k\">return<\/span> <span class=\"n\">e<\/span><span class=\"o\">.<\/span><span class=\"n\">Redirect<\/span><span class=\"p\">(<\/span><span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">StatusFound<\/span><span class=\"p\">,<\/span> <span class=\"n\">requestUri<\/span><span class=\"p\">)<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"k\">type<\/span> <span class=\"n\">TwitterAuth<\/span> <span class=\"k\">struct<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"n\">Context<\/span> <span class=\"n\">core<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">type<\/span> <span class=\"n\">TwitterAccount<\/span> <span class=\"k\">struct<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"n\">ID<\/span>              <span class=\"kt\">string<\/span> <span class=\"s\">`json:\"id_str\"`<\/span>\r\n    <span class=\"n\">Name<\/span>            <span class=\"kt\">string<\/span> <span class=\"s\">`json:\"name\"`<\/span>\r\n    <span class=\"n\">RefID<\/span>           <span class=\"kt\">string<\/span> <span class=\"s\">`json:\"screen_name\"`<\/span>\r\n    <span class=\"n\">Description<\/span>     <span class=\"kt\">string<\/span> <span class=\"s\">`json:\"description\"`<\/span>\r\n    <span class=\"n\">ProfileImageURL<\/span> <span class=\"kt\">string<\/span> <span class=\"s\">`json:\"profile_image_url_https\"`<\/span>\r\n    <span class=\"n\">Email<\/span>           <span class=\"kt\">string<\/span> <span class=\"s\">`json:\"email\"`<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">func<\/span> <span class=\"p\">(<\/span><span class=\"n\">t<\/span> <span class=\"o\">*<\/span><span class=\"n\">TwitterAuth<\/span><span class=\"p\">)<\/span> <span class=\"n\">Connect<\/span><span class=\"p\">()<\/span> <span class=\"o\">*<\/span><span class=\"n\">oauth<\/span><span class=\"o\">.<\/span><span class=\"n\">Client<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"o\">&amp;<\/span><span class=\"n\">oauth<\/span><span class=\"o\">.<\/span><span class=\"n\">Client<\/span><span class=\"p\">{<\/span>\r\n        <span class=\"n\">TemporaryCredentialRequestURI<\/span><span class=\"o\">:<\/span> <span class=\"s\">\"https:\/\/api.twitter.com\/oauth\/request_token\"<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"n\">ResourceOwnerAuthorizationURI<\/span><span class=\"o\">:<\/span> <span class=\"s\">\"https:\/\/api.twitter.com\/oauth\/authenticate\"<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"n\">TokenRequestURI<\/span><span class=\"o\">:<\/span>               <span class=\"s\">\"https:\/\/api.twitter.com\/oauth\/access_token\"<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"n\">Credentials<\/span><span class=\"o\">:<\/span> <span class=\"n\">oauth<\/span><span class=\"o\">.<\/span><span class=\"n\">Credentials<\/span><span class=\"p\">{<\/span>\r\n            <span class=\"n\">Token<\/span><span class=\"o\">:<\/span>  <span class=\"n\">os<\/span><span class=\"o\">.<\/span><span class=\"n\">Getenv<\/span><span class=\"p\">(<\/span><span class=\"s\">\"TWITTER_AUTH_TOKEN\"<\/span><span class=\"p\">),<\/span>\r\n            <span class=\"n\">Secret<\/span><span class=\"o\">:<\/span> <span class=\"n\">os<\/span><span class=\"o\">.<\/span><span class=\"n\">Getenv<\/span><span class=\"p\">(<\/span><span class=\"s\">\"TWITTER_AUTH_SECRET\"<\/span><span class=\"p\">),<\/span>\r\n        <span class=\"p\">},<\/span>\r\n    <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">func<\/span> <span class=\"p\">(<\/span><span class=\"n\">t<\/span> <span class=\"o\">*<\/span><span class=\"n\">TwitterAuth<\/span><span class=\"p\">)<\/span> <span class=\"n\">GetAuthUrl<\/span><span class=\"p\">(<\/span><span class=\"n\">anonymousId<\/span> <span class=\"kt\">string<\/span><span class=\"p\">)<\/span> <span class=\"p\">(<\/span><span class=\"kt\">string<\/span><span class=\"p\">,<\/span> <span class=\"kt\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"n\">config<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">t<\/span><span class=\"o\">.<\/span><span class=\"n\">Connect<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"n\">client<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">urlfetch<\/span><span class=\"o\">.<\/span><span class=\"n\">Client<\/span><span class=\"p\">(<\/span><span class=\"n\">t<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"n\">host<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">t<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"o\">.<\/span><span class=\"n\">Request<\/span><span class=\"p\">()<\/span><span class=\"o\">.<\/span><span class=\"n\">URL<\/span><span class=\"o\">.<\/span><span class=\"n\">Host<\/span>\r\n    <span class=\"n\">url<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Sprintf<\/span><span class=\"p\">(<\/span><span class=\"s\">\"https:\/\/%s\/authc\/twitter\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">schema<\/span><span class=\"p\">,<\/span> <span class=\"n\">host<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"k\">if<\/span> <span class=\"n\">os<\/span><span class=\"o\">.<\/span><span class=\"n\">Getenv<\/span><span class=\"p\">(<\/span><span class=\"s\">\"ENVIRONMENT\"<\/span><span class=\"p\">)<\/span> <span class=\"o\">==<\/span> <span class=\"s\">\"local\"<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"n\">url<\/span> <span class=\"o\">=<\/span> <span class=\"s\">\"http:\/\/127.0.0.1:8080\/authc\/twitter\"<\/span>\r\n    <span class=\"p\">}<\/span>\r\n    <span class=\"n\">rt<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">config<\/span><span class=\"o\">.<\/span><span class=\"n\">RequestTemporaryCredentials<\/span><span class=\"p\">(<\/span><span class=\"n\">client<\/span><span class=\"p\">,<\/span> <span class=\"n\">url<\/span><span class=\"p\">,<\/span> <span class=\"no\">nil<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"k\">if<\/span> <span class=\"n\">err<\/span> <span class=\"o\">!=<\/span> <span class=\"no\">nil<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"s\">\"\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">t<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"o\">.<\/span><span class=\"n\">WrapErrorf<\/span><span class=\"p\">(<\/span><span class=\"n\">err<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"failed to create request.\"<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"p\">}<\/span>\r\n    <span class=\"n\">sess<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">session<\/span><span class=\"o\">.<\/span><span class=\"n\">NewSession<\/span><span class=\"p\">(<\/span><span class=\"n\">t<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"k\">if<\/span> <span class=\"n\">err<\/span> <span class=\"o\">!=<\/span> <span class=\"no\">nil<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"s\">\"\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">t<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"o\">.<\/span><span class=\"n\">WrapErrorf<\/span><span class=\"p\">(<\/span><span class=\"n\">err<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"failed to open session.\"<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"n\">sess<\/span><span class=\"o\">.<\/span><span class=\"n\">PutString<\/span><span class=\"p\">(<\/span><span class=\"n\">AnonymousIdSession<\/span><span class=\"p\">,<\/span> <span class=\"n\">anonymousId<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"n\">sess<\/span><span class=\"o\">.<\/span><span class=\"n\">PutString<\/span><span class=\"p\">(<\/span><span class=\"n\">twitterRequestToken<\/span><span class=\"p\">,<\/span> <span class=\"n\">rt<\/span><span class=\"o\">.<\/span><span class=\"n\">Token<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"n\">sess<\/span><span class=\"o\">.<\/span><span class=\"n\">PutString<\/span><span class=\"p\">(<\/span><span class=\"n\">twitterRequestSecret<\/span><span class=\"p\">,<\/span> <span class=\"n\">rt<\/span><span class=\"o\">.<\/span><span class=\"n\">Secret<\/span><span class=\"p\">)<\/span>\r\n\r\n    <span class=\"n\">sess<\/span><span class=\"o\">.<\/span><span class=\"n\">Save<\/span><span class=\"p\">()<\/span>\r\n\r\n    <span class=\"k\">return<\/span> <span class=\"n\">config<\/span><span class=\"o\">.<\/span><span class=\"n\">AuthorizationURL<\/span><span class=\"p\">(<\/span><span class=\"n\">rt<\/span><span class=\"p\">,<\/span> <span class=\"no\">nil<\/span><span class=\"p\">),<\/span> <span class=\"no\">nil<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u3053\u308c\u3067Twitter\u306b\u8a8d\u53ef\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u6295\u3052\u308b\u305f\u3081\u306eURL\u3092\u4f5c\u6210\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n\u305d\u3057\u3066\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u8a8d\u53ef\u3092\u3057\u3001\u6307\u5b9a\u3057\u305f\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u5148\u306b\u8a8d\u8a3c\u30c8\u30fc\u30af\u30f3\u304c\u9001\u3089\u308c\u3066\u304d\u307e\u3059\u3002\u305d\u308c\u304c\u4ee5\u4e0b\u306e\u5834\u6240\u3067\u3059\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"n\">onst<\/span> <span class=\"n\">AuthSessionKey<\/span> <span class=\"kt\">string<\/span> <span class=\"o\">=<\/span> <span class=\"s\">\"AuthResultMessage\"<\/span>\r\n\r\n<span class=\"k\">type<\/span> <span class=\"n\">OAuthCallbackHandler<\/span> <span class=\"k\">struct<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">func<\/span> <span class=\"p\">(<\/span><span class=\"n\">a<\/span> <span class=\"n\">OAuthCallbackHandler<\/span><span class=\"p\">)<\/span> <span class=\"n\">Handle<\/span><span class=\"p\">(<\/span><span class=\"n\">e<\/span> <span class=\"o\">*<\/span><span class=\"n\">echo<\/span><span class=\"o\">.<\/span><span class=\"n\">Group<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"n\">e<\/span><span class=\"o\">.<\/span><span class=\"n\">GET<\/span><span class=\"p\">(<\/span><span class=\"s\">\"\/twitter\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">a<\/span><span class=\"o\">.<\/span><span class=\"n\">authTwitter<\/span><span class=\"p\">)<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">func<\/span> <span class=\"p\">(<\/span><span class=\"n\">OAuthCallbackHandler<\/span><span class=\"p\">)<\/span> <span class=\"n\">authTwitter<\/span><span class=\"p\">(<\/span><span class=\"n\">e<\/span> <span class=\"n\">echo<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"p\">)<\/span> <span class=\"kt\">error<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"n\">ctx<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">core<\/span><span class=\"o\">.<\/span><span class=\"n\">NewContext<\/span><span class=\"p\">(<\/span><span class=\"n\">e<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"n\">verifer<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">e<\/span><span class=\"o\">.<\/span><span class=\"n\">QueryParam<\/span><span class=\"p\">(<\/span><span class=\"s\">\"oauth_verifier\"<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"n\">client<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">oauth<\/span><span class=\"o\">.<\/span><span class=\"n\">NewAuthClient<\/span><span class=\"p\">(<\/span><span class=\"n\">oauth<\/span><span class=\"o\">.<\/span><span class=\"n\">Twitter<\/span><span class=\"p\">,<\/span> <span class=\"n\">ctx<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"n\">account<\/span> <span class=\"p\">,<\/span> <span class=\"n\">err<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">client<\/span><span class=\"o\">.<\/span><span class=\"n\">GetAccount<\/span><span class=\"p\">(<\/span><span class=\"n\">verifer<\/span><span class=\"p\">)<\/span>\r\n\r\n    <span class=\"k\">if<\/span> <span class=\"n\">err<\/span> <span class=\"o\">!=<\/span> <span class=\"no\">nil<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"n\">handleError<\/span><span class=\"p\">(<\/span><span class=\"n\">e<\/span><span class=\"p\">,<\/span> <span class=\"n\">ctx<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"n\">service<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">usecase<\/span><span class=\"o\">.<\/span><span class=\"n\">NewLoginService<\/span><span class=\"p\">(<\/span><span class=\"n\">ctx<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"k\">if<\/span> <span class=\"n\">ac<\/span> <span class=\"p\">,<\/span> <span class=\"n\">err<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">service<\/span><span class=\"o\">.<\/span><span class=\"n\">LoginOrSignup<\/span><span class=\"p\">(<\/span><span class=\"n\">account<\/span><span class=\"p\">);<\/span> <span class=\"n\">err<\/span> <span class=\"o\">!=<\/span> <span class=\"no\">nil<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"n\">handleError<\/span><span class=\"p\">(<\/span><span class=\"n\">e<\/span><span class=\"p\">,<\/span> <span class=\"n\">ctx<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"n\">ctx<\/span><span class=\"o\">.<\/span><span class=\"n\">Infof<\/span><span class=\"p\">(<\/span><span class=\"s\">\"login (userID: %s)\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">ac<\/span><span class=\"o\">.<\/span><span class=\"n\">ID<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"n\">e<\/span><span class=\"o\">.<\/span><span class=\"n\">Redirect<\/span><span class=\"p\">(<\/span><span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">StatusFound<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"\/home\"<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"k\">return<\/span> <span class=\"n\">e<\/span><span class=\"o\">.<\/span><span class=\"n\">Redirect<\/span><span class=\"p\">(<\/span><span class=\"n\">http<\/span><span class=\"o\">.<\/span><span class=\"n\">StatusFound<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"\/top\"<\/span><span class=\"p\">)<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code>\r\n<span class=\"k\">func<\/span> <span class=\"p\">(<\/span><span class=\"n\">t<\/span> <span class=\"o\">*<\/span><span class=\"n\">TwitterAuth<\/span><span class=\"p\">)<\/span> <span class=\"n\">GetAccount<\/span><span class=\"p\">(<\/span><span class=\"n\">verifier<\/span> <span class=\"kt\">string<\/span><span class=\"p\">)<\/span> <span class=\"p\">(<\/span><span class=\"o\">*<\/span><span class=\"n\">LinkedAccount<\/span><span class=\"p\">,<\/span> <span class=\"kt\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"n\">token<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">t<\/span><span class=\"o\">.<\/span><span class=\"n\">GetAccessToken<\/span><span class=\"p\">(<\/span><span class=\"n\">verifier<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"k\">if<\/span> <span class=\"n\">err<\/span> <span class=\"o\">!=<\/span> <span class=\"no\">nil<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"no\">nil<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span>\r\n    <span class=\"p\">}<\/span>\r\n    <span class=\"n\">oc<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">t<\/span><span class=\"o\">.<\/span><span class=\"n\">Connect<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"n\">client<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">urlfetch<\/span><span class=\"o\">.<\/span><span class=\"n\">Client<\/span><span class=\"p\">(<\/span><span class=\"n\">t<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"n\">v<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">url<\/span><span class=\"o\">.<\/span><span class=\"n\">Values<\/span><span class=\"p\">{}<\/span>\r\n    <span class=\"n\">v<\/span><span class=\"o\">.<\/span><span class=\"n\">Set<\/span><span class=\"p\">(<\/span><span class=\"s\">\"include_email\"<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"true\"<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"n\">resp<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">oc<\/span><span class=\"o\">.<\/span><span class=\"n\">Get<\/span><span class=\"p\">(<\/span><span class=\"n\">client<\/span><span class=\"p\">,<\/span> <span class=\"n\">token<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"https:\/\/api.twitter.com\/1.1\/account\/verify_credentials.json\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">v<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"k\">if<\/span> <span class=\"n\">err<\/span> <span class=\"o\">!=<\/span> <span class=\"no\">nil<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"no\">nil<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span>\r\n    <span class=\"p\">}<\/span>\r\n    <span class=\"k\">defer<\/span> <span class=\"n\">resp<\/span><span class=\"o\">.<\/span><span class=\"n\">Body<\/span><span class=\"o\">.<\/span><span class=\"n\">Close<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"k\">if<\/span> <span class=\"n\">resp<\/span><span class=\"o\">.<\/span><span class=\"n\">StatusCode<\/span> <span class=\"o\">&gt;=<\/span> <span class=\"m\">500<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"no\">nil<\/span><span class=\"p\">,<\/span> <span class=\"n\">errors<\/span><span class=\"o\">.<\/span><span class=\"n\">New<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Twitter is unavailable\"<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"k\">if<\/span> <span class=\"n\">resp<\/span><span class=\"o\">.<\/span><span class=\"n\">StatusCode<\/span> <span class=\"o\">&gt;=<\/span> <span class=\"m\">400<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"no\">nil<\/span><span class=\"p\">,<\/span> <span class=\"n\">errors<\/span><span class=\"o\">.<\/span><span class=\"n\">New<\/span><span class=\"p\">(<\/span><span class=\"s\">\"Twitter request is invalid\"<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"n\">twitter<\/span> <span class=\"o\">:=<\/span> <span class=\"o\">&amp;<\/span><span class=\"n\">TwitterAccount<\/span><span class=\"p\">{}<\/span>\r\n    <span class=\"n\">err<\/span> <span class=\"o\">=<\/span> <span class=\"n\">json<\/span><span class=\"o\">.<\/span><span class=\"n\">NewDecoder<\/span><span class=\"p\">(<\/span><span class=\"n\">resp<\/span><span class=\"o\">.<\/span><span class=\"n\">Body<\/span><span class=\"p\">)<\/span><span class=\"o\">.<\/span><span class=\"n\">Decode<\/span><span class=\"p\">(<\/span><span class=\"n\">twitter<\/span><span class=\"p\">)<\/span>\r\n\r\n    <span class=\"k\">if<\/span> <span class=\"n\">err<\/span> <span class=\"o\">!=<\/span> <span class=\"no\">nil<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"no\">nil<\/span><span class=\"p\">,<\/span> <span class=\"n\">t<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"o\">.<\/span><span class=\"n\">WrapErrorf<\/span><span class=\"p\">(<\/span><span class=\"n\">err<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"failed to decode account\"<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"k\">return<\/span> <span class=\"o\">&amp;<\/span><span class=\"n\">LinkedAccount<\/span><span class=\"p\">{<\/span>\r\n        <span class=\"n\">UniqueID<\/span><span class=\"o\">:<\/span>    <span class=\"n\">fmt<\/span><span class=\"o\">.<\/span><span class=\"n\">Sprintf<\/span><span class=\"p\">(<\/span><span class=\"s\">\"twitter:%s\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">twitter<\/span><span class=\"o\">.<\/span><span class=\"n\">ID<\/span><span class=\"p\">),<\/span>\r\n        <span class=\"n\">Type<\/span><span class=\"o\">:<\/span>        <span class=\"s\">\"twitter\"<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"n\">ID<\/span><span class=\"o\">:<\/span>          <span class=\"n\">twitter<\/span><span class=\"o\">.<\/span><span class=\"n\">RefID<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"n\">Name<\/span><span class=\"o\">:<\/span>        <span class=\"n\">twitter<\/span><span class=\"o\">.<\/span><span class=\"n\">Name<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"n\">ImageURL<\/span><span class=\"o\">:<\/span>    <span class=\"n\">twitter<\/span><span class=\"o\">.<\/span><span class=\"n\">ProfileImageURL<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"n\">Description<\/span><span class=\"o\">:<\/span> <span class=\"n\">twitter<\/span><span class=\"o\">.<\/span><span class=\"n\">Description<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"n\">Email<\/span><span class=\"o\">:<\/span>       <span class=\"n\">twitter<\/span><span class=\"o\">.<\/span><span class=\"n\">Email<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"p\">},<\/span> <span class=\"no\">nil<\/span>\r\n\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">func<\/span> <span class=\"p\">(<\/span><span class=\"n\">t<\/span> <span class=\"o\">*<\/span><span class=\"n\">TwitterAuth<\/span><span class=\"p\">)<\/span> <span class=\"n\">GetAccessToken<\/span><span class=\"p\">(<\/span><span class=\"n\">verifier<\/span> <span class=\"kt\">string<\/span><span class=\"p\">)<\/span> <span class=\"p\">(<\/span><span class=\"o\">*<\/span><span class=\"n\">oauth<\/span><span class=\"o\">.<\/span><span class=\"n\">Credentials<\/span><span class=\"p\">,<\/span> <span class=\"kt\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"n\">config<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">t<\/span><span class=\"o\">.<\/span><span class=\"n\">Connect<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"n\">sess<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">session<\/span><span class=\"o\">.<\/span><span class=\"n\">NewSession<\/span><span class=\"p\">(<\/span><span class=\"n\">t<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"k\">if<\/span> <span class=\"n\">err<\/span> <span class=\"o\">!=<\/span> <span class=\"no\">nil<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"no\">nil<\/span><span class=\"p\">,<\/span> <span class=\"n\">t<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"o\">.<\/span><span class=\"n\">WrapErrorf<\/span><span class=\"p\">(<\/span><span class=\"n\">err<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"failed to open session.\"<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"n\">token<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">sess<\/span><span class=\"o\">.<\/span><span class=\"n\">GetString<\/span><span class=\"p\">(<\/span><span class=\"n\">twitterRequestToken<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"n\">secret<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">sess<\/span><span class=\"o\">.<\/span><span class=\"n\">GetString<\/span><span class=\"p\">(<\/span><span class=\"n\">twitterRequestSecret<\/span><span class=\"p\">)<\/span>\r\n\r\n    <span class=\"k\">if<\/span> <span class=\"n\">token<\/span> <span class=\"o\">==<\/span> <span class=\"s\">\"\"<\/span> <span class=\"o\">||<\/span> <span class=\"n\">secret<\/span> <span class=\"o\">==<\/span> <span class=\"s\">\"\"<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"no\">nil<\/span><span class=\"p\">,<\/span> <span class=\"n\">exception<\/span><span class=\"o\">.<\/span><span class=\"n\">INVALID_SESSION<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"n\">client<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">urlfetch<\/span><span class=\"o\">.<\/span><span class=\"n\">Client<\/span><span class=\"p\">(<\/span><span class=\"n\">t<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"n\">at<\/span><span class=\"p\">,<\/span> <span class=\"n\">_<\/span><span class=\"p\">,<\/span> <span class=\"n\">err<\/span> <span class=\"o\">:=<\/span> <span class=\"n\">config<\/span><span class=\"o\">.<\/span><span class=\"n\">RequestToken<\/span><span class=\"p\">(<\/span><span class=\"n\">client<\/span><span class=\"p\">,<\/span> <span class=\"o\">&amp;<\/span><span class=\"n\">oauth<\/span><span class=\"o\">.<\/span><span class=\"n\">Credentials<\/span><span class=\"p\">{<\/span>\r\n        <span class=\"n\">Token<\/span><span class=\"o\">:<\/span>  <span class=\"n\">token<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"n\">Secret<\/span><span class=\"o\">:<\/span> <span class=\"n\">secret<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"p\">},<\/span> <span class=\"n\">verifier<\/span><span class=\"p\">)<\/span>\r\n\r\n    <span class=\"k\">defer<\/span> <span class=\"k\">func<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"n\">sess<\/span><span class=\"o\">.<\/span><span class=\"n\">Delete<\/span><span class=\"p\">(<\/span><span class=\"n\">twitterRequestSecret<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"n\">sess<\/span><span class=\"o\">.<\/span><span class=\"n\">Delete<\/span><span class=\"p\">(<\/span><span class=\"n\">twitterRequestToken<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"n\">sess<\/span><span class=\"o\">.<\/span><span class=\"n\">Save<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"p\">}()<\/span>\r\n\r\n\r\n    <span class=\"k\">if<\/span> <span class=\"n\">err<\/span> <span class=\"o\">!=<\/span> <span class=\"no\">nil<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"no\">nil<\/span><span class=\"p\">,<\/span> <span class=\"n\">t<\/span><span class=\"o\">.<\/span><span class=\"n\">Context<\/span><span class=\"o\">.<\/span><span class=\"n\">WrapErrorf<\/span><span class=\"p\">(<\/span><span class=\"n\">err<\/span><span class=\"p\">,<\/span> <span class=\"s\">\"failed to request token.\"<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"n\">sess<\/span><span class=\"o\">.<\/span><span class=\"n\">PutString<\/span><span class=\"p\">(<\/span><span class=\"n\">twitterOAuthSecret<\/span><span class=\"p\">,<\/span> <span class=\"n\">at<\/span><span class=\"o\">.<\/span><span class=\"n\">Secret<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"n\">sess<\/span><span class=\"o\">.<\/span><span class=\"n\">PutString<\/span><span class=\"p\">(<\/span><span class=\"n\">twitterOAuthToken<\/span><span class=\"p\">,<\/span> <span class=\"n\">at<\/span><span class=\"o\">.<\/span><span class=\"n\">Token<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"n\">at<\/span><span class=\"p\">,<\/span> <span class=\"no\">nil<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u7136\u540e\uff0c\u901a\u8fc7\u5b9e\u9645\u7684\u767b\u5f55\/\u6ce8\u518c\u8fc7\u7a0b\u6765\u5c06\u6570\u636e\u6301\u4e45\u5316\uff0c\u5e76\u5728\u4e4b\u540e\u7684\u8eab\u4efd\u8ba4\u8bc1\u4e2d\u4f7f\u7528\u3002<\/p>\n<h3>\u4f7f\u7528Go\u8bed\u8a00\u5728Firestore\u7684\u539f\u751f\u6a21\u5f0f\u4e0b\u8c03\u7528API\u3002<\/h3>\n<p>\u8fd9\u6b21\uff0c\u6570\u636e\u6c38\u4e45\u5316\u6211\u4eec\u91c7\u7528\u4e86Firestore\u3002<br \/>\nFirestore\u539f\u672c\u662fFirebase\u7684\u4e00\u4e2a\u670d\u52a1\uff0c\u540e\u6765\u88ab\u7eb3\u5165\u5230GCP\u4e2d\uff0c\u5e76\u8ba1\u5212\u5728\u672a\u6765\u53d6\u4ee3DataStore\u3002\u5b83\u6709DataStore\u517c\u5bb9\u6a21\u5f0f\u548c\u539f\u751f\u6a21\u5f0f\u4e24\u79cd\u3002\u6536\u8d39\u6807\u51c6\u4e0d\u4f1a\u6539\u53d8\u3002<\/p>\n<h4>Firestore\u3068Memcache\u3092\u9023\u643a\u3059\u308b\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u306a\u3044<\/h4>\n<p>\u305f\u3060\u3001Firestore\u306e\u30cd\u30a4\u30c6\u30a3\u30d6\u30e2\u30fc\u30c9\u306f\u30e9\u30f3\u30cb\u30f3\u30b0\u30b3\u30b9\u30c8\u3092\u6291\u3048\u308b\u3068\u3044\u3046\u70b9\u3067\u306f\u3072\u3068\u3064\u6b20\u70b9\u304c\u3042\u308a\u3001Memcache\u3068\u306e\u9023\u643a\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u307e\u3060\u306a\u3044\u3068\u3044\u3046\u306e\u304c\u3042\u308a\u307e\u3059(\u3069\u3053\u304b\u3067\u3001 Firestore\u81ea\u8eab\u304c\u30ad\u30e3\u30c3\u30b7\u30e5\u3059\u308b \u3001\u307f\u305f\u3044\u306a\u8a71\u3082\u898b\u305f\u306e\u3067\u3059\u304c\u3001\u78ba\u8a8d\u3057\u305f\u9650\u308a\u306f\u6bce\u56de\u53d6\u5f97\u306e\u305f\u3073\u306b\u7121\u6599\u67a0\u3092\u5727\u8feb\u3057\u3066\u3044\u3063\u3066\u308b\u3088\u3046\u306a\u611f\u3058\u3067\u3057\u305f\uff09\u3002<br \/>\nDataStore\u4e92\u63db\u30e2\u30fc\u30c9\u3060\u3068\u3001goon\u306e\u3088\u3046\u306bMemcache\u3068\u9023\u643a\u3057\u3066\u30b3\u30b9\u30c8\u3092\u6291\u3048\u3066\u304f\u308c\u308b\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u3042\u308b\u3093\u3067\u3059\u3051\u3069\u306d\u30fb\u30fb\u30fb\u3002<br \/>\n\u305d\u3093\u306a\u308f\u3051\u3067\u3001\u4ed5\u65b9\u306a\u3044\u306e\u3067\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d1ebf37434c4406c171cd\/72-0.png\" alt=\"undefined\" \/><\/div>\n<p>\u7531\u4e8e\u4e13\u6ce8\u4e8e\u5236\u4f5c\u8fd9\u4ef6\u4e8b\uff0c\u82b1\u4e86\u5f88\u591a\u65f6\u95f4\uff0c\u5bfc\u81f4\u53d1\u5e03\u65e5\u671f\u6bd4\u8ba1\u5212\u5ef6\u8fdf\u4e86(\u00b4\u30fb\u03c9\u30fb`)\u3002<\/p>\n<h2>\u5ba2\u6237\u7aef\u5f00\u53d1\u3002<\/h2>\n<p>\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306f\u307e\u3042\u305d\u3093\u306a\u611f\u3058\u3067\u3001\u7d9a\u3044\u3066\u306f\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u5074\u3067\u3059\u3002<\/p>\n<h3>\u521b\u5efa\u5165\u53e3\u70b9<\/h3>\n<p>\u307e\u305a\u306f\u30a8\u30f3\u30c8\u30ea\u30dd\u30a4\u30f3\u30c8\u3067\u3042\u308b index.tsx\u306e\u4f5c\u6210\u3092\u884c\u3044\u307e\u3059\u3002<br \/>\n\u307e\u305f\u3001\u4eca\u56de\u306fRedux\u3092\u4f7f\u3046\u306e\u3067\u3001store\u3078\u306e\u767b\u9332\u3068\u3044\u3063\u305f\u3082\u306e\u3082\u884c\u3048\u308b\u3088\u3046\u306b\u3057\u3066\u304a\u304d\u307e\u3059\u3002<br \/>\nRedux\u306b\u3064\u3044\u3066\u306f\u3001\u3053\u3061\u3089\u306e\u8a18\u4e8b\u304c\u8a73\u3057\u3044\u3067\u3059\u3002<\/p>\n<p>Redux\u5165\u9580\u3010\u30c0\u30a4\u30b8\u30a7\u30b9\u30c8\u7248\u301110\u5206\u3067\u7406\u89e3\u3059\u308bRedux\u306e\u57fa\u790e<br \/>\nhttps:\/\/qiita.com\/kitagawamac\/items\/49a1f03445b19cf407b7<\/p>\n<p>\u305f\u3060\u3001Redux\u3092\u305d\u306e\u307e\u307e\u4f7f\u3046\u306e\u306f\u5927\u5909\u3089\u3057\u3044\u306e\u3067\u3001\u4eca\u56de\u306ftypescript-fsa\u3092\u4f7f\u3063\u3066\u307e\u3059\u3002<br \/>\n\u3053\u306e\u3042\u305f\u308a\u306f\u3001\u4ee5\u4e0b\u3092\u53c2\u8003\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>\u5728\u5173\u4e1c\u5730\u533a\u6700\u5feb\u901f\u5730\u5f00\u53d1React+Redux+TypeScript\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"c1\">\/\/ <\/span>\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">history<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">createBrowserHistory<\/span><span class=\"p\">()<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">store<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">createStore<\/span><span class=\"p\">(<\/span>\r\n    <span class=\"nx\">Store<\/span><span class=\"p\">(<\/span><span class=\"nx\">history<\/span><span class=\"p\">),<\/span>\r\n    <span class=\"nx\">applyMiddleware<\/span><span class=\"p\">(<\/span><span class=\"nx\">thunk<\/span><span class=\"p\">,<\/span> <span class=\"nx\">routerMiddleware<\/span><span class=\"p\">(<\/span><span class=\"nx\">history<\/span><span class=\"p\">))<\/span>\r\n<span class=\"p\">)<\/span>\r\n\r\n<span class=\"c1\">\/\/ Material-UI\u30c6\u30fc\u30de\u30ab\u30b9\u30bf\u30de\u30a4\u30ba<\/span>\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">theme<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">createMuiTheme<\/span><span class=\"p\">({<\/span>\r\n    <span class=\"c1\">\/\/ \u4e2d\u7565<\/span>\r\n<span class=\"p\">});<\/span>\r\n\r\n<span class=\"c1\">\/\/ FontAwesome\u306e\u8ffd\u52a0<\/span>\r\n<span class=\"nx\">library<\/span><span class=\"p\">.<\/span><span class=\"nx\">add<\/span><span class=\"p\">(<\/span><span class=\"nx\">fab<\/span><span class=\"p\">,<\/span> <span class=\"nx\">fas<\/span><span class=\"p\">,<\/span> <span class=\"nx\">far<\/span><span class=\"p\">,<\/span> <span class=\"nx\">faTwitter<\/span><span class=\"p\">,<\/span> <span class=\"nx\">faCoffee<\/span><span class=\"p\">,<\/span> <span class=\"nx\">faHeart<\/span><span class=\"p\">,<\/span> <span class=\"nx\">faComment<\/span><span class=\"p\">,<\/span> <span class=\"nx\">faCheckSquare<\/span><span class=\"p\">,<\/span> <span class=\"nx\">faExclamation<\/span><span class=\"p\">,<\/span> <span class=\"nx\">faExclamationCircle<\/span><span class=\"p\">,<\/span> <span class=\"nx\">faChartArea<\/span><span class=\"p\">,<\/span> <span class=\"nx\">faInfoCircle<\/span><span class=\"p\">,<\/span> <span class=\"nx\">faTrash<\/span><span class=\"p\">,<\/span> <span class=\"nx\">faUserLock<\/span><span class=\"p\">,<\/span> <span class=\"nx\">faFileAlt<\/span><span class=\"p\">,<\/span> <span class=\"nx\">faStar<\/span><span class=\"p\">);<\/span>\r\n\r\n<span class=\"nx\">ReactDOM<\/span><span class=\"p\">.<\/span><span class=\"nx\">render<\/span><span class=\"p\">(<\/span>\r\n    <span class=\"c1\">\/\/ Store\u306e\u4f7f\u7528<\/span>\r\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">Provider<\/span> <span class=\"nx\">store<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">store<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\r\n            <span class=\"c1\">\/\/ Material UI\u306e\u30c6\u30fc\u30de\u306e\u8a2d\u5b9a<\/span>\r\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">MuiThemeProvider<\/span> <span class=\"nx\">theme<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">theme<\/span><span class=\"p\">}<\/span> <span class=\"o\">&gt;<\/span>\r\n                <span class=\"c1\">\/\/ \u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u8a2d\u5b9a<\/span>\r\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">ConnectedRouter<\/span> <span class=\"nx\">history<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">history<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\r\n                    <span class=\"o\">&lt;<\/span><span class=\"nx\">Root<\/span><span class=\"o\">\/&gt;<\/span>\r\n                <span class=\"o\">&lt;<\/span><span class=\"sr\">\/ConnectedRouter<\/span><span class=\"err\">&gt;\r\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/MuiThemeProvider<\/span><span class=\"err\">&gt;\r\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/Provider&gt;<\/span><span class=\"err\">,\r\n<\/span>    <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\r\n<span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<p>\u5546\u5e97\u957f\u8fd9\u662f\u8fd9\u6837\u7684\u60c5\u51b5\u3002<\/p>\n<pre class=\"post-pre\"><code>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">type<\/span> <span class=\"nx\">AppState<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"na\">login<\/span><span class=\"p\">:<\/span> <span class=\"nx\">LoginState<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">router<\/span><span class=\"p\">:<\/span> <span class=\"nx\">RouterState<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"c1\">\/\/ Root\u90e8\u5206<\/span>\r\n    <span class=\"na\">root<\/span><span class=\"p\">:<\/span> <span class=\"nx\">RootState<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"c1\">\/\/ \u7701\u7565<\/span>\r\n<span class=\"p\">};<\/span>\r\n\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"p\">(<\/span><span class=\"nx\">history<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span>  <span class=\"nx\">combineReducers<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">AppState<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">({<\/span>\r\n    <span class=\"na\">router<\/span><span class=\"p\">:<\/span> <span class=\"nx\">connectRouter<\/span><span class=\"p\">(<\/span><span class=\"nx\">history<\/span><span class=\"p\">),<\/span>\r\n    <span class=\"na\">login<\/span><span class=\"p\">:<\/span> <span class=\"nx\">loginReducer<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">root<\/span><span class=\"p\">:<\/span> <span class=\"nx\">rootReducer<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"c1\">\/\/ \u7701\u7565<\/span>\r\n    <span class=\"p\">}<\/span>\r\n<span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<h3>\u8def\u7531<\/h3>\n<p>\u4f7f\u7528react-router\u8fdb\u884c\u8def\u7531\u63a7\u5236\u3002<br \/>\n\u901a\u8fc7\u4f7f\u7528\u5b83\uff0c\u53ef\u4ee5\u6839\u636eURL\u7684\u4e0d\u540c\u663e\u793a\u4e0d\u540c\u7684\u5185\u5bb9\u3002<\/p>\n<pre class=\"post-pre\"><code>    <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">classes<\/span><span class=\"p\">.<\/span><span class=\"nx\">root<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\r\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">CssBaseline<\/span> <span class=\"o\">\/&gt;<\/span>\r\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">AppBar<\/span> <span class=\"nx\">position<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">fixed<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">color<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">default<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">classes<\/span><span class=\"p\">.<\/span><span class=\"nx\">appBar<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\r\n            <span class=\"c1\">\/\/ \u7701\u7565\uff1a\u5171\u901a\u30d8\u30c3\u30c0\u30fc\u306e\u8a2d\u5b9a<\/span>\r\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/AppBar<\/span><span class=\"err\">&gt;\r\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"nx\">main<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">classes<\/span><span class=\"p\">.<\/span><span class=\"nx\">content<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\r\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">classes<\/span><span class=\"p\">.<\/span><span class=\"nx\">toolbar<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span>                <span class=\"p\">{<\/span><span class=\"nx\">renderBody<\/span><span class=\"p\">()}<\/span>\r\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">classes<\/span><span class=\"p\">.<\/span><span class=\"nx\">hr<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;&amp;<\/span><span class=\"nx\">nbsp<\/span><span class=\"p\">;<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\r\n<\/span>                <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">classes<\/span><span class=\"p\">.<\/span><span class=\"nx\">footer<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\r\n                    <span class=\"c1\">\/\/ \u7701\u7565\uff1a\u5171\u901a\u30d5\u30c3\u30bf\u30fc\u306e\u8a2d\u5b9a<\/span>\r\n                <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\r\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/main<\/span><span class=\"err\">&gt;\r\n<\/span>        <span class=\"c1\">\/\/ \u7701\u7565\uff1a \u901a\u77e5\u30c0\u30a4\u30a2\u30ed\u30b0\u306e\u8a2d\u5b9a<\/span>\r\n        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\r\n<\/span>    <span class=\"p\">);<\/span>\r\n\r\n    <span class=\"kd\">function<\/span> <span class=\"nx\">renderBody<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"c1\">\/\/ \u30a8\u30e9\u30fc\u304c\u5b58\u5728\u3057\u3066\u305f\u3089\u3001\u4ed6\u306e\u63cf\u753b\u306f\u3084\u3081\u3066\u30a8\u30e9\u30fc\u30da\u30fc\u30b8\u3092\u8868\u793a<\/span>\r\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">errorJson<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n            <span class=\"kd\">const<\/span> <span class=\"nx\">err<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nx\">parse<\/span><span class=\"p\">(<\/span><span class=\"nx\">errorJson<\/span><span class=\"p\">);<\/span>\r\n            <span class=\"k\">return<\/span> <span class=\"nx\">renderError<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">.<\/span><span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"p\">}<\/span>\r\n        <span class=\"c1\">\/\/ \u30eb\u30fc\u30c6\u30a3\u30f3\u30b0<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"nx\">renderRouter<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"kd\">function<\/span> <span class=\"nx\">renderRouter<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n            <span class=\"c1\">\/\/ \u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u90e8\u5206<\/span>\r\n            <span class=\"c1\">\/\/ path\u306b\u6307\u5b9a\u3057\u305f\u30d1\u30bf\u30fc\u30f3\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u307f\u3092\u63cf\u753b\u3059\u308b<\/span>\r\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">Switch<\/span><span class=\"o\">&gt;<\/span>\r\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">Route<\/span> <span class=\"nx\">exact<\/span> <span class=\"nx\">path<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">render<\/span><span class=\"o\">=<\/span><span class=\"p\">{({<\/span><span class=\"nx\">match<\/span><span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Login<\/span><span class=\"o\">\/&gt;<\/span><span class=\"p\">)}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span>                <span class=\"o\">&lt;<\/span><span class=\"nx\">Route<\/span> <span class=\"nx\">exact<\/span> <span class=\"nx\">path<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/top\/terms<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">render<\/span><span class=\"o\">=<\/span><span class=\"p\">{({<\/span><span class=\"nx\">match<\/span><span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Terms<\/span><span class=\"o\">\/&gt;<\/span><span class=\"p\">)}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span>                <span class=\"o\">&lt;<\/span><span class=\"nx\">Route<\/span> <span class=\"nx\">exact<\/span> <span class=\"nx\">path<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/top\/policy<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">render<\/span><span class=\"o\">=<\/span><span class=\"p\">{({<\/span><span class=\"nx\">match<\/span><span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">PrivacyPolicy<\/span><span class=\"o\">\/&gt;<\/span><span class=\"p\">)}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span>                <span class=\"o\">&lt;<\/span><span class=\"nx\">Route<\/span> <span class=\"nx\">exact<\/span> <span class=\"nx\">path<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\/top\/info<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">render<\/span><span class=\"o\">=<\/span><span class=\"p\">{({<\/span><span class=\"nx\">match<\/span><span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Information<\/span><span class=\"o\">\/&gt;<\/span><span class=\"p\">)}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span>                <span class=\"c1\">\/\/ \u7701\u7565<\/span>\r\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/Switch<\/span><span class=\"err\">&gt;\r\n<\/span>        <span class=\"p\">);<\/span>\r\n    <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h3>\u968f\u540e\u7684\u521b\u4f5c\u8fc7\u7a0b<\/h3>\n<p>\u5728\u524d\u53f0\u65b9\u9762\u7684\u5de5\u4f5c\u4e2d\uff0c\u6309\u7167\u4ee5\u4e0b\u6d41\u7a0b\u8fdb\u884c\u4e86\u521b\u5efa\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Actions \/ State \/ Container \/ Component\u3092\u305d\u308c\u305e\u308c\u4f5c\u6210\u3059\u308b<\/ul>\n<\/li>\n<\/ul>\n<p>Actions\u306b\u305d\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u5b9a\u7fa9<br \/>\nState\u3067\u3001\u30a2\u30af\u30b7\u30e7\u30f3\u3054\u3068\u306e\u72b6\u614b\u5909\u66f4\u3092\u5b9a\u7fa9<br \/>\nContainer\u3067\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u3075\u308b\u307e\u3044\u3092\u5b9a\u7fa9<br \/>\nComponent\u3067UI\u90e8\u54c1\u3092\u5b9a\u7fa9<\/p>\n<p>\u5b9f\u969b\u306b\u53d6\u308a\u6271\u3046\u30c7\u30fc\u30bf\u90e8\u5206\u306fData\u3068Model\u306b\u5b9a\u7fa9<br \/>\nContainer\u307e\u305f\u306fState\u3067Model\u3092\u547c\u3073\u51fa\u3057\u3001\u30c7\u30fc\u30bf\u306e\u52a0\u5de5\u3092\u884c\u3046<\/p>\n<p>Container\u3067\u547c\u3073\u51fa\u3057\u305f\u5834\u5408\u306f\u52a0\u5de5\u5f8c\u306e\u30c7\u30fc\u30bf\u3092Action\u3067\u9001\u308b<\/p>\n<p>Action \/ State \/ Container \/ Component \u306e\u90e8\u5206\u306f\u3001Redux\u306e\u3084\u308a\u65b9\u305d\u306e\u3082\u306e\u304b\u306a\u3063\u3066\u601d\u3044\u307e\u3059\u3002<br \/>\n\u305f\u3060\u3001\u305d\u308c\u3060\u3051\u3060\u3068\u3061\u3087\u3063\u3068\u4f7f\u3044\u3065\u3089\u304b\u3063\u305f\u306e\u3067\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3067\u8868\u73fe\u3057\u3066\u308b\u30e2\u30c7\u30eb\u306e\u4e00\u90e8\u306f\u30d5\u30ed\u30f3\u30c8\u5074\u3067\u3082\u8868\u73fe\u3092\u3057\u307e\u3057\u305f\u3002<br \/>\n(\u53cd\u7701\u70b9\u3067\u8a18\u8f09\u3057\u307e\u3059\u304c\u305d\u306e\u3084\u308a\u65b9\u306e\u30c7\u30e1\u30ea\u30c3\u30c8\u3082\u3042\u3063\u305f\u3057\u3001\u3082\u3063\u3068\u52b9\u7387\u306e\u826f\u3044\u3084\u308a\u65b9\u3082\u3042\u3063\u305f\u306e\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\uff09<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d1ebf37434c4406c171cd\/91-0.png\" alt=\"Redux\u542b\u3081\u305f\u51e6\u7406\u306e\u6d41\u308c.png\" \/><\/div>\n<p>Reducer\u3068\u3044\u3046\u306e\u306f\u3001Redux\u306e\u4e2d\u3067\u3044\u3044\u611f\u3058\u306b\u30a2\u30ec\u3057\u3066\u304f\u308c\u308b\u30a2\u30ec\u3067\u3001State\u306e\u30d5\u30a1\u30a4\u30eb\u5185\u3067\u5404\u81ea\u5b9a\u7fa9\u3057\u3066\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u4e0b\u306b\u3001\u4f8b\u3092\u4e00\u90e8\u629c\u7c8b\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">actionCreator<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">actionCreatorFactory<\/span><span class=\"p\">();<\/span>\r\n<span class=\"c1\">\/\/ Action<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">commentEditActions<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"na\">changeComment<\/span><span class=\"p\">:<\/span> <span class=\"nx\">actionCreator<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">string<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">COMMENTEDIT_ACTION_CHNAGECOMMENT<\/span><span class=\"dl\">'<\/span><span class=\"p\">),<\/span>\r\n<span class=\"p\">};<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"c1\">\/\/ State<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kr\">interface<\/span> <span class=\"nx\">NotebookCommentEditState<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">myComment<\/span><span class=\"p\">:<\/span> <span class=\"nx\">NotebookComment<\/span>\r\n    <span class=\"nx\">visible<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span>\r\n    <span class=\"nx\">edit<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"c1\">\/\/ \u30c7\u30d5\u30a9\u30eb\u30c8\u306eState(\u521d\u671f\u5024)<\/span>\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">initialState<\/span><span class=\"p\">:<\/span> <span class=\"nx\">NotebookCommentEditState<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"na\">myComment<\/span><span class=\"p\">:<\/span> <span class=\"kc\">undefined<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">visible<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">edit<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span>\r\n<span class=\"p\">};<\/span>\r\n\r\n<span class=\"c1\">\/\/ Reducer<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">notebookCommentEditReducer<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">reducerWithInitialState<\/span><span class=\"p\">(<\/span><span class=\"nx\">initialState<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"p\">.<\/span><span class=\"k\">case<\/span><span class=\"p\">(<\/span><span class=\"nx\">commentEditActions<\/span><span class=\"p\">.<\/span><span class=\"nx\">changeComment<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">state<\/span><span class=\"p\">,<\/span> <span class=\"nx\">value<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">model<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">NotebookCommentModel<\/span><span class=\"p\">(<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">myComment<\/span><span class=\"p\">,<\/span> <span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"nx\">model<\/span><span class=\"p\">.<\/span><span class=\"nx\">changeComment<\/span><span class=\"p\">(<\/span><span class=\"nx\">value<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"p\">{...<\/span><span class=\"nx\">state<\/span><span class=\"p\">,<\/span><span class=\"na\">edit<\/span><span class=\"p\">:<\/span><span class=\"kc\">true<\/span><span class=\"p\">,<\/span> <span class=\"na\">myComment<\/span><span class=\"p\">:<\/span> <span class=\"p\">{...<\/span><span class=\"nx\">model<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">()}}<\/span>\r\n    <span class=\"p\">})<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"c1\">\/\/ \u30c7\u30fc\u30bf\u306e\u5b9a\u7fa9<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kr\">interface<\/span> <span class=\"nx\">NotebookComment<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">commentId<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span>\r\n    <span class=\"c1\">\/\/ \u7701\u7565<\/span>\r\n    <span class=\"nx\">hasComment<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nx\">created<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span>\r\n    <span class=\"nx\">isNew<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">NotebookCommentModel<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">private<\/span> <span class=\"nx\">page<\/span><span class=\"p\">:<\/span> <span class=\"nx\">NotebookPage<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"k\">private<\/span> <span class=\"nx\">comment<\/span><span class=\"p\">:<\/span> <span class=\"nx\">NotebookComment<\/span><span class=\"p\">;<\/span>\r\n\r\n    <span class=\"kd\">constructor<\/span><span class=\"p\">(<\/span><span class=\"nx\">comment<\/span><span class=\"p\">:<\/span> <span class=\"nx\">NotebookComment<\/span><span class=\"p\">,<\/span> <span class=\"nx\">parent<\/span><span class=\"p\">:<\/span> <span class=\"nx\">NotebookPage<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">comment<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">comment<\/span><span class=\"p\">;<\/span>\r\n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">parent<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"nx\">changeComment<\/span><span class=\"p\">(<\/span><span class=\"nx\">comment<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">comment<\/span><span class=\"p\">.<\/span><span class=\"nx\">comment<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">comment<\/span><span class=\"p\">;<\/span>\r\n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">comment<\/span><span class=\"p\">.<\/span><span class=\"nx\">hasComment<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">hasComment<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"nx\">data<\/span><span class=\"p\">():<\/span> <span class=\"nx\">NotebookComment<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">comment<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"c1\">\/\/ \u3053\u308c\u306fComponent\u304b\u3089\u547c\u3070\u308c\u308b\u30a2\u30af\u30b7\u30e7\u30f3(Event)<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kr\">interface<\/span> <span class=\"nx\">Actions<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">changeComment<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">value<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">Action<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">string<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">;<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"c1\">\/\/ \u4e0a\u8a18\u306eAction\u3092Props\u306b\u5909\u63db\u3057\u3066\u308b<\/span>\r\n<span class=\"kd\">function<\/span> <span class=\"nx\">mapDispatchToProps<\/span><span class=\"p\">(<\/span><span class=\"nx\">dispatch<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Dispatch<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"c1\">\/\/ \u4e0a\u8a18\u306eActions\u306e\u5b9a\u7fa9<\/span>\r\n        <span class=\"na\">changeComment<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"na\">value<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n            <span class=\"c1\">\/\/ \u3053\u3053\u3067\u3001Dispatch\u3055\u308c\u308b<\/span>\r\n            <span class=\"nx\">dispatch<\/span><span class=\"p\">(<\/span><span class=\"nx\">commentEditActions<\/span><span class=\"p\">.<\/span><span class=\"nx\">changeComment<\/span><span class=\"p\">(<\/span><span class=\"nx\">value<\/span><span class=\"p\">));<\/span>\r\n        <span class=\"p\">}<\/span>\r\n    <span class=\"p\">};<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"c1\">\/\/ state\u3092React\u306eProps\u306b\u5909\u63db\u3057\u3066\u308b<\/span>\r\n<span class=\"kd\">function<\/span> <span class=\"nx\">mapStateToProps<\/span><span class=\"p\">(<\/span><span class=\"nx\">appState<\/span><span class=\"p\">:<\/span> <span class=\"nx\">AppState<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"nb\">Object<\/span><span class=\"p\">.<\/span><span class=\"nx\">assign<\/span><span class=\"p\">({},<\/span> <span class=\"nx\">appState<\/span><span class=\"p\">.<\/span><span class=\"nx\">notebookComment<\/span><span class=\"p\">);<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"c1\">\/\/ \uff12\u3064\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092Component\u306b\u6e21\u3057\u3066\u308b<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">connect<\/span><span class=\"p\">(<\/span><span class=\"nx\">mapStateToProps<\/span><span class=\"p\">,<\/span> <span class=\"nx\">mapDispatchToProps<\/span><span class=\"p\">)(<\/span><span class=\"nx\">Component<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"c1\">\/\/ \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u306e\u500b\u5225Style\u3092\u5b9a\u7fa9(Material-ui\u306e\u30e1\u30bd\u30c3\u30c9)<\/span>\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">useStyles<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">makeStyles<\/span><span class=\"p\">((<\/span><span class=\"nx\">theme<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Theme<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span>\r\n    <span class=\"nx\">createStyles<\/span><span class=\"p\">({<\/span>\r\n        <span class=\"na\">notice<\/span> <span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n            <span class=\"na\">color<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">red<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n            <span class=\"na\">fontSize<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">0.8em<\/span><span class=\"dl\">\"<\/span>\r\n        <span class=\"p\">}<\/span>\r\n    <span class=\"p\">}),<\/span>\r\n<span class=\"p\">);<\/span>\r\n\r\n<span class=\"c1\">\/\/ \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u72ec\u81ea\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5b9a\u7fa9<\/span>\r\n<span class=\"kr\">interface<\/span> <span class=\"nx\">Props<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">page<\/span><span class=\"p\">:<\/span> <span class=\"nx\">NotebookPage<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"c1\">\/\/ Actions\u3068NotebookCommentEditState\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u30de\u30fc\u30b8\u3057\u3066\u308b<\/span>\r\n<span class=\"kd\">type<\/span> <span class=\"nx\">OwnProps<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Props<\/span> <span class=\"o\">&amp;<\/span> <span class=\"nx\">Actions<\/span> <span class=\"o\">&amp;<\/span> <span class=\"nx\">NotebookCommentEditState<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"c1\">\/\/ FunctionalComponent<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">Component<\/span><span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">FC<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">OwnProps<\/span><span class=\"o\">&gt;<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">props<\/span><span class=\"p\">:<\/span> <span class=\"nx\">OwnProps<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kd\">function<\/span> <span class=\"nx\">showComment<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">if<\/span><span class=\"p\">(<\/span><span class=\"nx\">permission<\/span><span class=\"p\">.<\/span><span class=\"nx\">hasCommentPermission<\/span><span class=\"p\">())<\/span> <span class=\"p\">{<\/span>\r\n            <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">Textarea<\/span> <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">\u30b3\u30e1\u30f3\u30c8<\/span><span class=\"dl\">\"<\/span>\r\n                          <span class=\"nx\">value<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">myComment<\/span><span class=\"p\">.<\/span><span class=\"nx\">comment<\/span><span class=\"p\">}<\/span>\r\n                          <span class=\"nx\">onChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"nx\">v<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n                              <span class=\"c1\">\/\/ \u30a4\u30d9\u30f3\u30c8\u3092Container\u306b\u9001\u3063\u3066\u3044\u308b<\/span>\r\n                              <span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">changeComment<\/span><span class=\"p\">(<\/span><span class=\"nx\">v<\/span><span class=\"p\">);<\/span>\r\n                          <span class=\"p\">}}<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span>            <span class=\"p\">)<\/span>\r\n        <span class=\"p\">}<\/span>\r\n    <span class=\"p\">}<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">Dialog<\/span>\r\n           <span class=\"c1\">\/\/ \u7701\u7565<\/span>\r\n        <span class=\"o\">&gt;<\/span>\r\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">DialogContent<\/span> <span class=\"o\">&gt;<\/span>\r\n                <span class=\"p\">{<\/span><span class=\"nx\">showComment<\/span><span class=\"p\">()}<\/span> <span class=\"c1\">\/\/ \u4e0a\u306e\u95a2\u6570\u547c\u3073\u51fa\u3057<\/span>\r\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/DialogContent<\/span><span class=\"err\">&gt;\r\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/Dialog<\/span><span class=\"err\">&gt;\r\n<\/span>    <span class=\"p\">);<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h3>\u4ece\u540e\u7aef\u83b7\u53d6\u6570\u636e<\/h3>\n<p>\u5728\u8fd9\u4e2a\u7cfb\u7edf\u4e2d\uff0c\u6211\u4eec\u4ee5\u4e24\u79cd\u65b9\u5f0f\u4ece\u540e\u7aef\u63a5\u6536\u6570\u636e\u3002<\/p>\n<h4>1. \u5728\u6e32\u67d3\u65f6\u5c06JSON\u6570\u636e\u5d4c\u5165\u5230script\u6807\u7b7e\u5185<\/h4>\n<p>\u9996\u5148\u7ed8\u5236\u5c4f\u5e55\u7684\u6570\u636e\u5728\u6e32\u67d3\u65f6\u4f5c\u4e3aJSON\u5b57\u7b26\u4e32\u5d4c\u5165\u5230<script>\u6807\u7b7e\u4e2d\u4f20\u9012\u3002\u5177\u4f53\u5982\u4e0b\u6240\u793a\uff1a<br \/>\nhttps:\/\/github.com\/brbranch\/EveryChartSample\/blob\/master\/backend\/templates\/auth\/top.html#L2<\/p>\n<pre class=\"post-pre\"><code><span class=\"c\">&lt;!-- \u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u6642\u306b\u306f\u3053\u3093\u306a\u611f\u3058\u306b\u306a\u308a\u307e\u3059 --&gt;<\/span>\r\n<span class=\"nt\">&lt;script <\/span><span class=\"na\">id=<\/span><span class=\"s\">\"data-register\"<\/span> <span class=\"na\">type=<\/span><span class=\"s\">\"text\/plain\"<\/span> <span class=\"na\">data-json=<\/span><span class=\"s\">'{\"register\": null}'<\/span><span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\r\n<span class=\"nt\">&lt;script <\/span><span class=\"na\">id=<\/span><span class=\"s\">\"data-login\"<\/span> <span class=\"na\">type=<\/span><span class=\"s\">\"text\/plain\"<\/span> <span class=\"na\">data-json=<\/span><span class=\"s\">'{ \"error\" : \"\"}'<\/span><span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\r\n<\/code><\/pre>\n<h4>2. \u4f7f\u7528FetchAPI\u5728\u5f02\u6b65\u60c5\u51b5\u4e0b\u8fdb\u884c\u83b7\u53d6<\/h4>\n<p>\u8fc7\u53bb\uff0c\u5f53\u8c08\u5230\u5f02\u6b65\u64cd\u4f5c\u65f6\uff0c\u6211\u4eec\u901a\u5e38\u4f1a\u4f7f\u7528jQuery\u3002\u4f46\u662f\u8fd1\u6765\uff0cFetch API\u5df2\u7ecf\u5f97\u5230\u4e86\u51e0\u4e4e\u6240\u6709\u6d4f\u89c8\u5668\uff08\u9664\u4e86IE\uff09\u7684\u652f\u6301\u3002\u56e0\u6b64\uff0c\u6211\u4eec\u901a\u8fc7\u4ece\u5bb9\u5668\u4e2d\u8c03\u7528\u5e76\u83b7\u53d6\u6570\u636e\u6765\u4f7f\u7528Fetch API\u3002\u4e3a\u6b64\uff0c\u6211\u4eec\u521b\u5efa\u4e86\u4e00\u4e2a\u4e13\u95e8\u7684\u7c7b\uff0c\u901a\u8fc7\u8be5\u7c7b\u6bcf\u6b21\u8c03\u7528\u5b9e\u73b0\u83b7\u53d6\u6570\u636e\u7684\u529f\u80fd\u3002<\/p>\n<pre class=\"post-pre\"><code>\r\n<span class=\"k\">export<\/span> <span class=\"kr\">interface<\/span> <span class=\"nx\">FetchError<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">code<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span>\r\n    <span class=\"nx\">text<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span>\r\n<span class=\"p\">};<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">UrlFetch<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">private<\/span> <span class=\"k\">static<\/span> <span class=\"nx\">_instance<\/span> <span class=\"p\">:<\/span> <span class=\"nx\">UrlFetch<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"k\">private<\/span> <span class=\"nx\">etag<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"\"<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"k\">private<\/span> <span class=\"nx\">token<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"\"<\/span><span class=\"p\">;<\/span>\r\n\r\n    <span class=\"k\">private<\/span> <span class=\"kd\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"k\">private<\/span> <span class=\"nx\">handle<\/span><span class=\"p\">(<\/span><span class=\"nx\">response<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">):<\/span> <span class=\"kr\">any<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">ok<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n            <span class=\"k\">return<\/span> <span class=\"nx\">response<\/span><span class=\"p\">;<\/span>\r\n        <span class=\"p\">}<\/span>\r\n        <span class=\"k\">throw<\/span> <span class=\"nb\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">status<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"kd\">get<\/span><span class=\"p\">(<\/span><span class=\"nx\">path<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"nx\">callback<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">json<\/span><span class=\"p\">:<\/span><span class=\"kr\">any<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">:<\/span> <span class=\"nx\">FetchError<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"nx\">EventDispacher<\/span><span class=\"p\">.<\/span><span class=\"nx\">instance<\/span><span class=\"p\">.<\/span><span class=\"nx\">showProgress<\/span><span class=\"p\">();<\/span>\r\n        <span class=\"nx\">fetch<\/span><span class=\"p\">(<\/span><span class=\"nx\">path<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\r\n            <span class=\"na\">method<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">GET<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n            <span class=\"na\">credentials<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">include<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">})<\/span>\r\n            <span class=\"p\">.<\/span><span class=\"nx\">then<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">handle<\/span><span class=\"p\">)<\/span>\r\n            <span class=\"p\">.<\/span><span class=\"nx\">then<\/span><span class=\"p\">(<\/span><span class=\"nx\">res<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">res<\/span><span class=\"p\">.<\/span><span class=\"nx\">json<\/span><span class=\"p\">())<\/span>\r\n            <span class=\"p\">.<\/span><span class=\"nx\">then<\/span><span class=\"p\">(<\/span><span class=\"nx\">json<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">callback<\/span><span class=\"p\">(<\/span><span class=\"nx\">json<\/span><span class=\"p\">,<\/span> <span class=\"kc\">null<\/span><span class=\"p\">))<\/span>\r\n            <span class=\"p\">.<\/span><span class=\"k\">catch<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n                <span class=\"nx\">EventDispacher<\/span><span class=\"p\">.<\/span><span class=\"nx\">instance<\/span><span class=\"p\">.<\/span><span class=\"nx\">showToast<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">handleErrorStr<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">.<\/span><span class=\"nx\">message<\/span><span class=\"p\">));<\/span>\r\n                <span class=\"nx\">callback<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span><span class=\"na\">code<\/span><span class=\"p\">:<\/span> <span class=\"nb\">parseInt<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">.<\/span><span class=\"nx\">message<\/span><span class=\"p\">),<\/span> <span class=\"na\">text<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"\"<\/span><span class=\"p\">});<\/span>\r\n            <span class=\"p\">})<\/span>\r\n            <span class=\"p\">.<\/span><span class=\"k\">finally<\/span><span class=\"p\">(()<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span>\r\n                <span class=\"nx\">EventDispacher<\/span><span class=\"p\">.<\/span><span class=\"nx\">instance<\/span><span class=\"p\">.<\/span><span class=\"nx\">hideProgress<\/span><span class=\"p\">();<\/span>\r\n            <span class=\"p\">})<\/span>\r\n    <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h3>\u5c06Chart.js\u96c6\u6210\u5230React\u4e2d<\/h3>\n<p>\u5728\u8fd9\u4e2a\u7cfb\u7edf\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528\u4e86Chart.js\u8fdb\u884c\u8bc4\u4f30\u3002<br \/>\n\u539f\u672c\u8ba1\u5212\u4f7f\u7528Recharts\u4f5c\u4e3aReact\u7684\u56fe\u8868\u5e93\uff0c\u4f46\u662f\u6211\u4eec\u53d1\u73b0\u65e0\u6cd5\u5b9e\u73b0\u60f3\u8981\u7684\u529f\u80fd\uff0c\u6240\u4ee5\u653e\u5f03\u4e86\u3002<br \/>\n\u4e0d\u8fc7\uff0cChart.js\u5e76\u975eReact\u7ec4\u4ef6\uff0c\u56e0\u6b64\u9700\u8981\u5de7\u5999\u5730\u5c06\u5176\u7ec4\u5408\u5230\u7ec4\u4ef6\u4e2d\u3002<br \/>\n\u4e0d\u8fc7\uff0c\u8fd9\u5e76\u4e0d\u662f\u5f88\u96be\uff0c\u53ea\u9700\u8981\u7b80\u5355\u5730\u8c03\u7528\u5c31\u53ef\u4ee5\u4e86\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">RadarChart<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">RadarProps<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"c1\">\/\/ \u4f5c\u6210\u3057\u305fElement\u3092\u64cd\u4f5c\u3059\u308b\u305f\u3081\u306e\u5909\u6570<\/span>\r\n    <span class=\"k\">private<\/span> <span class=\"na\">canvasRef<\/span><span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">RefObject<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">HTMLCanvasElement<\/span><span class=\"o\">&gt;<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">createRef<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"k\">private<\/span> <span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"nx\">RadarItem<\/span><span class=\"p\">[]<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[];<\/span>\r\n\r\n    <span class=\"nx\">componentDidMount<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">update<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"k\">private<\/span> <span class=\"nx\">update<\/span><span class=\"p\">(<\/span><span class=\"na\">props<\/span><span class=\"p\">:<\/span> <span class=\"nx\">RadarProps<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"na\">options<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n            <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">radar<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n            <span class=\"c1\">\/\/ \u7701\u7565<\/span>\r\n        <span class=\"p\">}<\/span>\r\n        <span class=\"c1\">\/\/ render\u3067\u884c\u3063\u305fcanvas\u304c\u53d6\u5f97\u3067\u304d\u305f\u3089DOM\u64cd\u4f5c\u3092\u884c\u3046<\/span>\r\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">canvasRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n            <span class=\"kd\">const<\/span> <span class=\"nx\">ctx<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">canvasRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">.<\/span><span class=\"nx\">getContext<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">2d<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\r\n            <span class=\"c1\">\/\/ chart.js\u3092\u547c\u3073\u51fa\u3059<\/span>\r\n            <span class=\"kd\">var<\/span> <span class=\"nx\">myChart<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">Chart<\/span><span class=\"p\">(<\/span><span class=\"nx\">ctx<\/span><span class=\"p\">,<\/span> <span class=\"nx\">options<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"p\">}<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">canvas<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">className<\/span><span class=\"p\">}<\/span> <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">style<\/span><span class=\"p\">}<\/span> <span class=\"nx\">ref<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">canvasRef<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/canvas<\/span><span class=\"err\">&gt;\r\n<\/span>        <span class=\"p\">)<\/span>\r\n    <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h3>\u54cd\u5e94\u5f0f\u8bbe\u8ba1<\/h3>\n<p>\u8fd9\u4e2a\u4e5f\u4e0d\u662f\u5f88\u96be\u3002EveryChart\u4f7f\u7528\u4e86React Material-Ui\uff0c\u5e76\u5229\u7528\u5176\u4e2d\u7684\u201cContainer\u201d\u548c\u201cGrid\u201d\u8fdb\u884c\u4e86\u521d\u6b65\u7684\u54cd\u5e94\u5f0f\u9002\u914d\u3002<\/p>\n<p>\u6709\u5173\u5bb9\u5668\u548c\u7f51\u683c\u7684\u8be6\u7ec6\u4fe1\u606f\u53ef\u4ee5\u5728\u8fd9\u91cc\u627e\u5230\u3002<\/p>\n<p>\u3010Material-UI\u3011v4\u4e2d\u65b0\u589e\u7684\u4ee4\u4eba\u611f\u5174\u8da3\u7684\u65b0\u529f\u80fd<br \/>\nhttps:\/\/qiita.com\/tag1216\/items\/ab30da234dca40751f31<\/p>\n<p>\u5728 Material-UI \u4e2d\u5c1d\u8bd5\u4f7f\u7528 Grid \u5e03\u5c40<br \/>\nhttps:\/\/qiita.com\/vimyum\/items\/5ba06ca166ebe4992617<\/p>\n<h2>\u5728\u6f14\u793a\u73af\u5883\u4e2d\u8fdb\u884c\u9a8c\u8bc1\u548c\u53d1\u5e03<\/h2>\n<p>\u597d\u4e86\uff0c\u5c31\u8fd9\u6837\u4e0d\u505c\u5730\u521b\u5efa\u5e76\u4e14\u5927\u81f4\u5b8c\u6210\u4e86\u529f\u80fd\uff0c\u6240\u4ee5\u4ece\u516b\u6708\u5e95\u5f00\u59cb\u6211\u4eec\u5c06\u5e94\u7528\u90e8\u7f72\u5230\u7b2c\u4e8c\u4e2a\u73af\u5883\u8fdb\u884c\u9a8c\u8bc1\u3002\u5728goapp\u4e2d\uff0c\u90e8\u7f72\u53ea\u9700\u8981\u4e00\u4e2a\u547d\u4ee4\u5c31\u80fd\u5b8c\u6210\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span><span class=\"nb\">cd<\/span> .\/backend\r\n<span class=\"nv\">$ <\/span>goapp deploy app-staging.yaml\r\n<\/code><\/pre>\n<p>\u7136\u540e\u6211\u4eec\u4e3b\u8981\u4ece\u4ee5\u4e0b\u51e0\u4e2a\u65b9\u9762\u8fdb\u884c\u4e86\u9a8c\u8bc1\u3002<\/p>\n<ul class=\"post-ul\">\n\u30ec\u30a4\u30a2\u30a6\u30c8\u304c\u5d29\u308c\u3066\u306a\u3044\u304b<br \/>\n\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u7684\u306a\u554f\u984c\u304c\u767a\u751f\u3057\u3066\u306a\u3044\u304b<\/p>\n<p>\u898b\u3048\u3066\u306f\u3044\u3051\u306a\u3044\u3082\u306e\u304c\u898b\u3048\u3066\u306a\u3044\u304b<br \/>\n\u898b\u3048\u308b\u3079\u304d\u3082\u306e\u304c\u898b\u3048\u3066\u3044\u308b\u304b<br \/>\n\u4e00\u822c\u7684\u306a\u8106\u5f31\u6027\u653b\u6483\u306e\u5bfe\u7b56\u304c\u3055\u308c\u3066\u3044\u308b\u304b<\/p>\n<p>\u30c7\u30fc\u30bf\u306e\u4e0d\u6574\u5408\u304c\u767a\u751f\u3057\u306a\u3044\u304b\n<\/ul>\n<p>\u7d93\u904e\u4e00\u6b21\u78ba\u8a8d\u5f8c\uff0c\u6211\u5011\u57288\u670831\u65e5\uff08\u9031\u516d\uff09\u4e0a\u7dda\u4e86\u6b63\u5f0f\u74b0\u5883\uff0c\u4e26\u5728\u6700\u5f8c\u78ba\u8a8d\u5f8c\u9032\u884c\u4e86\u767c\u5e03\u3002\u7e3d\u7b97\u5b8c\u6210\u4e86\uff01(`\u30fb\u03c9\u30fb\u00b4)<\/p>\n<h1>\u5bf9\u4e8e\u4f7f\u7528React\u548cRedux\u8fdb\u884c\u5f00\u53d1\u7684\u4f53\u9a8c\u611f\u3002<\/h1>\n<p>\u603b\u4e4b\uff0c\u6211\u6700\u8fd1\u89c9\u5f97\"\u8fd1\u5e74\u7684\u524d\u7aef\u6280\u672f\u53d1\u5c55\u771f\u662f\u592a\u5feb\u4e86\"\u3002\u54ce\u5440\uff0c\u592a\u5389\u5bb3\u4e86\u3002<br \/>\n\u8d77\u521d\u6211\u5bf9Redux\u4e0d\u592a\u7406\u89e3\uff0c\u4e00\u76f4\u611f\u5230\u56f0\u60d1\uff0c\u5c31\u50cf\u662f\u7528\u4e86\u975e\u5e38\u5938\u5f20\u7684\u65b9\u5f0f\u5199\u4e86\u4e2aHello World\u4e00\u6837\uff0c\u8fdb\u5c55\u975e\u5e38\u6162\u3002\u4f46\u662f\u4e00\u65e6\u719f\u6089\u4e86\u4ee5\u540e\uff0c\u5f00\u53d1\u901f\u5ea6\u5c31\u53d8\u5f97\u975e\u5e38\u5feb\u4e86\u3002<br \/>\n\u7279\u522b\u662f\u73b0\u5728\u7684\u524d\u7aef\u5e93\u975e\u5e38\u4e30\u5bcc\uff0c\u8fd9\u4e00\u70b9\u771f\u7684\u5f88\u4e0d\u9519\u3002<\/p>\n<h2>\u53cd\u601d\u70b9\uff0c\u5931\u8d25\u7684\u65b9\u9762<\/h2>\n<p>\u63a5\u4e0b\u6765\uff0c\u6211\u5c06\u5217\u4e3e\u4e00\u4e9b\u6211\u8ba4\u4e3a\u5728\u5236\u4f5c\u8fc7\u7a0b\u4e2d\u5931\u8d25\u6216\u51fa\u73b0\u56f0\u96be\u7684\u65b9\u9762\u3002<\/p>\n<h3>\u5305\u88c5\u9519\u8bef<\/h3>\n<p>\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3082\u3061\u3087\u3063\u3068\u9593\u9055\u3048\u3066\u308b\u306e\u3067\u3059\u304c\u3001\u7279\u306b\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306f\u5931\u6557\u3057\u305f\u306a\u3041\u3068\u601d\u3044\u307e\u3057\u305f(\u00b4\u30fb\u03c9\u30fb`)<br \/>\n\u6a5f\u80fd\u3054\u3068\u306b\u30d5\u30a9\u30eb\u30c0\u3092\u4f5c\u3063\u3066\u300cAction\/State\/Container\/Component\u300d\u3092\u4f5c\u6210\u3057\u3066\u3044\u307e\u3057\u305f\u304c\u3001\u3053\u308c\u306f\u5b8c\u5168\u306b\u5931\u6557\u3067\u3059\u306d\u3002\u3002<br \/>\n\u3080\u3057\u308d\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u69cb\u6210\u3067\u4f5c\u308b\u3079\u304d\u3067\u3057\u305f\u3002<\/p>\n<pre class=\"post-pre\"><code>\u251c\u2500\u2500 actions\r\n\u2502   \u251c\u2500\u2500 topActions.ts\r\n\u2502   \ufe19\r\n\u251c\u2500\u2500 containers\r\n\u2502   \u251c\u2500\u2500 topContainer.ts\r\n\u2502   \ufe19\r\n\u251c\u2500\u2500 components\r\n\u2502   \u251c\u2500\u2500 topComponent.ts\r\n\u2502   \ufe19\r\n\u251c\u2500\u2500 states\r\n\u2502   \u251c\u2500\u2500 topState.ts\r\n\u2502   \ufe19\r\n\u251c\u2500\u2500 index.tsx\r\n\u2514\u2500\u2500 store.ts \r\n<\/code><\/pre>\n<p>\u56e0\u4e3a\u5176\u4ed6\u4eba\u90fd\u662f\u90a3\u6837\u505a\u7684\uff0c\u6240\u4ee5\u5e94\u8be5\u987a\u4ece\u5730\u90a3\u6837\u505a\u5c31\u597d\u4e86\u3002<\/p>\n<p>\u7406\u7531\u306f\u3001\u305d\u3082\u305d\u3082\u632f\u308b\u821e\u3044\u3068UI\u3092\u758e\u7d50\u5408\u306b\u3059\u308b\u305f\u3081\u306b\u300cAction\/State\/Container\/Component\u300d\u306b\u5206\u3051\u3066\u308b\u3093\u3060\u304b\u3089\u3001\u540c\u3058\u30d5\u30a9\u30eb\u30c0(\u2252\u30d1\u30c3\u30b1\u30fc\u30b8)\u306b\u5165\u308c\u3066\u5bc6\u306a\u7d50\u5408\u3092\u601d\u308f\u305b\u308b\u3088\u3046\u306a\u69cb\u6210\u306f\u907f\u3051\u308b\u3079\u304d\u3067\u3057\u305f\u3002<br \/>\n\u6700\u521d\u306f\u300c\u95a2\u9023\u3057\u3066\u308b\u3093\u3060\u304b\u3089\u540c\u3058\u3068\u3053\u308d\u306b\u5165\u308c\u308b\u3079\u304d\u3067\u3057\u3087\u300d\u3068\u304b\u601d\u3063\u3066\u305f\u306e\u3067\u3059\u304c\u3001\u7d50\u679c\u7684\u306b\u308f\u304b\u308a\u3065\u3089\u304f\u306a\u3063\u305f\u3057\u3001\u518d\u5229\u7528\u3082\u3061\u3087\u3063\u3068\u3057\u3065\u3089\u304b\u3063\u305f\u3067\u3059\u3002<\/p>\n<h3>\nAction\/State\/Container\/Component\/Data\/Model\u306e\u3084\u308a\u65b9\u304c\u3088\u304b\u3063\u305f\u306e\u304b\u3088\u304f\u308f\u304b\u3089\u306a\u3044<\/h3>\n<p>\u4ed6\u306e\u30b5\u30a4\u30c8\u3068\u304b\u3067\u898b\u308b\u3068\u305d\u3093\u306a\u3084\u308a\u65b9\u3057\u3066\u306a\u3044\u3093\u3067\u3001\u3042\u3093\u307e\u308a\u3088\u304f\u306a\u3044\u30d1\u30bf\u30fc\u30f3\u306a\u3093\u3058\u3083\u306a\u3044\u306e\u304b\u306a\u3041\u3068\u304b\u601d\u3044\u306a\u304c\u3089\u4f5c\u3063\u3066\u307e\u3057\u305f\u3002<br \/>\n\u7406\u7531\u3068\u3057\u3066\u3001Redux\u306f\u6d45\u3044\u6bd4\u8f03 \u306a\u306e\u3067\u3001State\u306e\u4e2d\u306b\u30a4\u30f3\u30bf\u30d5\u30a7\u30fc\u30b9\u306e\u5165\u308c\u5b50\u72b6\u614b\u306b\u3059\u308b\u3068\u5909\u66f4\u3092\u691c\u77e5\u3057\u306a\u3044\u53ef\u80fd\u6027\u304c\u3042\u308b\u305d\u3046\u3067\u3059\u3002<\/p>\n<p>Redux\u306eState\u304c\u5909\u66f4\u3055\u308c\u305f\u306e\u306b\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u306a\u3044\u554f\u984c<br \/>\nhttps:\/\/qiita.com\/yasuhiro-yamada\/items\/aebda0dff79a70eb71d7<\/p>\n<p>\u4e0a\u8a18\u306e\u8a18\u4e8b\u3092\u898b\u308b\u3068\u300c\u30e1\u30e2\u30ea\u4e0a\u306eID(=\u30dd\u30a4\u30f3\u30bf\u306e\u756a\u5730)\u304c\u5909\u308f\u3089\u306a\u3044\u3068\u5909\u66f4\u3092\u691c\u77e5\u3057\u306a\u3044\u300d\u3068\u66f8\u3044\u3066\u307e\u3059\u3002<br \/>\n\u5bfe\u7b56\u3068\u3057\u3066\u306f\u3001\u5358\u7d14\u306b\u30dd\u30a4\u30f3\u30bf\u53c2\u7167\u3059\u308b\u7b87\u6240(JavaScript\u3060\u3068\u914d\u5217\u3068\u304b\u30de\u30c3\u30d7\u3068\u304b)\u3092\u4f5c\u308a\u76f4\u305b\u3070\u3044\u3044\u308f\u3051\u306a\u306e\u3067\u3059\u304c\u3001\u305d\u308c\u306f\u3068\u308a\u3082\u306a\u304a\u3055\u305a\u300c\u5909\u66f4\u7bc4\u56f2\u304c\u5e83\u304f\u306a\u308b\u300d\u3053\u3068\u3092\u8868\u3057\u307e\u3059\u3002<br \/>\n\u3064\u307e\u308a\u3001State\u3092\u4ee5\u4e0b\u306e\u69cb\u9020\u3068\u3057\u305f\u5834\u5408<\/p>\n<pre class=\"post-pre\"><code><span class=\"kr\">interface<\/span> <span class=\"nx\">xxxxState<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nl\">user<\/span><span class=\"p\">:<\/span> <span class=\"nx\">User<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"kr\">interface<\/span> <span class=\"nx\">User<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nl\">name<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span>\r\n  <span class=\"nx\">address<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span>\r\n  <span class=\"nx\">accountId<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u3053\u306e xxxState#user \u306ename\u3092\u5909\u66f4\u3057\u305f\u3044\u5834\u5408\u3001\u305d\u306e\u5909\u66f4\u3092Redux\u304c\u691c\u77e5\u3059\u308b\u305f\u3081\u306b\u306f\u3001\u4e2d\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u4f5c\u308a\u76f4\u3059\u5fc5\u8981\u304c\u3042\u308b\u308f\u3051\u3067\u3059\u3088\u306d\u3002<br \/>\n\u3059\u308b\u3068\u3001\u672c\u6765\u306f\u5909\u66f4\u3057\u3066\u306a\u3044 address \u3084 accountId \u306e\u90e8\u5206\u3082\u5909\u66f4\u3057\u305f\u3068\u307f\u306a\u3055\u308c\u3066\u3001React\u306e\u4eee\u60f3Dom\u306f\u6700\u69cb\u6210\u3057\u306a\u304a\u3059\u3093\uff4a\u306a\u3044\u306e\u304b\u306a\u3041\u2026\u3068\u3002(\u5b9f\u969b\u3069\u3046\u306a\u306e\u304b\u306f\u308f\u304b\u3063\u3066\u306a\u3044\u306e\u3067\u3059\u304c\u3002\u3002\u3002)<\/p>\n<h1>\u6700\u540e<\/h1>\n<p>\u4e00\u5f00\u59cb\u5199\u4e86\u975e\u5e38\u957f\uff0c\u4f46\u81f3\u5c11\u5b8c\u6210\u4e86\u4f5c\u54c1\uff0c\u611f\u89c9\u8fd8\u4e0d\u9519\u3002\u4e0d\u8fc7\uff0c\u5e76\u4e0d\u610f\u5473\u7740\u5b8c\u6210\u540e\u5c31\u7ed3\u675f\u4e86\uff0c\u6211\u6253\u7b97\u4e0d\u65f6\u8fdb\u884c\u66f4\u65b0\u3002(\u00b4\u30fb\u03c9\u30fb`)<\/p>\n<p><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u603b\u7ed3 \u5728\u8fd9\u7bc7\u6587\u7ae0\u4e2d\uff0c\u6211\u5c06\u603b\u7ed3\u5728\u4e24\u4e2a\u6708\u7684\u65f6\u95f4\u91cc\uff0c\u6211\u72ec\u81ea\u4e00\u4eba\u4ece\u96f6\u5f00\u59cb\u5236\u4f5cWeb\u5e94\u7528\u7a0b\u5e8f\u7684\u7ecf\u9a8c\u548c\u6280\u5de7\u3002\u6211\u7684\u603b\u7ed3\u5927\u81f4\u5305 [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-34742","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u4e00\u4e2a\u51e0\u4e4e\u6ca1\u6709\u524d\u7aef\u5f00\u53d1\u7ecf\u9a8c\u7684\u4eba\uff0c\u5728\u4e24\u4e2a\u6708\u5185\u5c1d\u8bd5\u4f7f\u7528React+Redux+GAE\/Go\u521b\u5efa\u4e86\u4e00\u4e2aWeb\u5e94\u7528\u7684\u6545\u4e8b - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4e00\u4e2a\u51e0\u4e4e\u6ca1\u6709\u524d\u7aef\u5f00\u53d1\u7ecf\u9a8c\u7684\u4eba\uff0c\u5728\u4e24\u4e2a\u6708\u5185\u5c1d\u8bd5\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u4e00\u4e2a\u51e0\u4e4e\u6ca1\u6709\u524d\u7aef\u5f00\u53d1\u7ecf\u9a8c\u7684\u4eba\uff0c\u5728\u4e24\u4e2a\u6708\u5185\u5c1d\u8bd5\u4f7f\u7528React+Redux+GAE\/Go\u521b\u5efa\u4e86\u4e00\u4e2aWeb\u5e94\u7528\u7684\u6545\u4e8b\" \/>\n<meta property=\"og:description\" content=\"\u603b\u7ed3 \u5728\u8fd9\u7bc7\u6587\u7ae0\u4e2d\uff0c\u6211\u5c06\u603b\u7ed3\u5728\u4e24\u4e2a\u6708\u7684\u65f6\u95f4\u91cc\uff0c\u6211\u72ec\u81ea\u4e00\u4eba\u4ece\u96f6\u5f00\u59cb\u5236\u4f5cWeb\u5e94\u7528\u7a0b\u5e8f\u7684\u7ecf\u9a8c\u548c\u6280\u5de7\u3002\u6211\u7684\u603b\u7ed3\u5927\u81f4\u5305 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4e00\u4e2a\u51e0\u4e4e\u6ca1\u6709\u524d\u7aef\u5f00\u53d1\u7ecf\u9a8c\u7684\u4eba\uff0c\u5728\u4e24\u4e2a\u6708\u5185\u5c1d\u8bd5\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-28T00:55:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-30T06:05:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d1ebf37434c4406c171cd\/9-0.gif\" \/>\n<meta name=\"author\" content=\"\u79d1, \u9896\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u79d1, \u9896\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%b8%aa%e5%87%a0%e4%b9%8e%e6%b2%a1%e6%9c%89%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e7%bb%8f%e9%aa%8c%e7%9a%84%e4%ba%ba%ef%bc%8c%e5%9c%a8%e4%b8%a4%e4%b8%aa%e6%9c%88%e5%86%85%e5%b0%9d%e8%af%95\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%b8%aa%e5%87%a0%e4%b9%8e%e6%b2%a1%e6%9c%89%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e7%bb%8f%e9%aa%8c%e7%9a%84%e4%ba%ba%ef%bc%8c%e5%9c%a8%e4%b8%a4%e4%b8%aa%e6%9c%88%e5%86%85%e5%b0%9d%e8%af%95\/\",\"name\":\"\u4e00\u4e2a\u51e0\u4e4e\u6ca1\u6709\u524d\u7aef\u5f00\u53d1\u7ecf\u9a8c\u7684\u4eba\uff0c\u5728\u4e24\u4e2a\u6708\u5185\u5c1d\u8bd5\u4f7f\u7528React+Redux+GAE\/Go\u521b\u5efa\u4e86\u4e00\u4e2aWeb\u5e94\u7528\u7684\u6545\u4e8b - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2024-01-28T00:55:36+00:00\",\"dateModified\":\"2024-04-30T06:05:50+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/8ca01ba7f7362ad4edb7da206a12f29e\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%b8%aa%e5%87%a0%e4%b9%8e%e6%b2%a1%e6%9c%89%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e7%bb%8f%e9%aa%8c%e7%9a%84%e4%ba%ba%ef%bc%8c%e5%9c%a8%e4%b8%a4%e4%b8%aa%e6%9c%88%e5%86%85%e5%b0%9d%e8%af%95\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%b8%aa%e5%87%a0%e4%b9%8e%e6%b2%a1%e6%9c%89%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e7%bb%8f%e9%aa%8c%e7%9a%84%e4%ba%ba%ef%bc%8c%e5%9c%a8%e4%b8%a4%e4%b8%aa%e6%9c%88%e5%86%85%e5%b0%9d%e8%af%95\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%b8%aa%e5%87%a0%e4%b9%8e%e6%b2%a1%e6%9c%89%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e7%bb%8f%e9%aa%8c%e7%9a%84%e4%ba%ba%ef%bc%8c%e5%9c%a8%e4%b8%a4%e4%b8%aa%e6%9c%88%e5%86%85%e5%b0%9d%e8%af%95\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u4e00\u4e2a\u51e0\u4e4e\u6ca1\u6709\u524d\u7aef\u5f00\u53d1\u7ecf\u9a8c\u7684\u4eba\uff0c\u5728\u4e24\u4e2a\u6708\u5185\u5c1d\u8bd5\u4f7f\u7528React+Redux+GAE\/Go\u521b\u5efa\u4e86\u4e00\u4e2aWeb\u5e94\u7528\u7684\u6545\u4e8b\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/8ca01ba7f7362ad4edb7da206a12f29e\",\"name\":\"\u79d1, \u9896\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8a6fb3cc7ba2f69d2189ba532aec4633ea7ed75ac0af162ec367cb3abc0fb2af?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8a6fb3cc7ba2f69d2189ba532aec4633ea7ed75ac0af162ec367cb3abc0fb2af?s=96&d=mm&r=g\",\"caption\":\"\u79d1, \u9896\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/keying\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%b8%aa%e5%87%a0%e4%b9%8e%e6%b2%a1%e6%9c%89%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e7%bb%8f%e9%aa%8c%e7%9a%84%e4%ba%ba%ef%bc%8c%e5%9c%a8%e4%b8%a4%e4%b8%aa%e6%9c%88%e5%86%85%e5%b0%9d%e8%af%95\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u4e00\u4e2a\u51e0\u4e4e\u6ca1\u6709\u524d\u7aef\u5f00\u53d1\u7ecf\u9a8c\u7684\u4eba\uff0c\u5728\u4e24\u4e2a\u6708\u5185\u5c1d\u8bd5\u4f7f\u7528React+Redux+GAE\/Go\u521b\u5efa\u4e86\u4e00\u4e2aWeb\u5e94\u7528\u7684\u6545\u4e8b - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u4e00\u4e2a\u51e0\u4e4e\u6ca1\u6709\u524d\u7aef\u5f00\u53d1\u7ecf\u9a8c\u7684\u4eba\uff0c\u5728\u4e24\u4e2a\u6708\u5185\u5c1d\u8bd5\/","og_locale":"zh_CN","og_type":"article","og_title":"\u4e00\u4e2a\u51e0\u4e4e\u6ca1\u6709\u524d\u7aef\u5f00\u53d1\u7ecf\u9a8c\u7684\u4eba\uff0c\u5728\u4e24\u4e2a\u6708\u5185\u5c1d\u8bd5\u4f7f\u7528React+Redux+GAE\/Go\u521b\u5efa\u4e86\u4e00\u4e2aWeb\u5e94\u7528\u7684\u6545\u4e8b","og_description":"\u603b\u7ed3 \u5728\u8fd9\u7bc7\u6587\u7ae0\u4e2d\uff0c\u6211\u5c06\u603b\u7ed3\u5728\u4e24\u4e2a\u6708\u7684\u65f6\u95f4\u91cc\uff0c\u6211\u72ec\u81ea\u4e00\u4eba\u4ece\u96f6\u5f00\u59cb\u5236\u4f5cWeb\u5e94\u7528\u7a0b\u5e8f\u7684\u7ecf\u9a8c\u548c\u6280\u5de7\u3002\u6211\u7684\u603b\u7ed3\u5927\u81f4\u5305 [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u4e00\u4e2a\u51e0\u4e4e\u6ca1\u6709\u524d\u7aef\u5f00\u53d1\u7ecf\u9a8c\u7684\u4eba\uff0c\u5728\u4e24\u4e2a\u6708\u5185\u5c1d\u8bd5\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2024-01-28T00:55:36+00:00","article_modified_time":"2024-04-30T06:05:50+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d1ebf37434c4406c171cd\/9-0.gif"}],"author":"\u79d1, \u9896","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u79d1, \u9896","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"7 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%b8%aa%e5%87%a0%e4%b9%8e%e6%b2%a1%e6%9c%89%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e7%bb%8f%e9%aa%8c%e7%9a%84%e4%ba%ba%ef%bc%8c%e5%9c%a8%e4%b8%a4%e4%b8%aa%e6%9c%88%e5%86%85%e5%b0%9d%e8%af%95\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%b8%aa%e5%87%a0%e4%b9%8e%e6%b2%a1%e6%9c%89%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e7%bb%8f%e9%aa%8c%e7%9a%84%e4%ba%ba%ef%bc%8c%e5%9c%a8%e4%b8%a4%e4%b8%aa%e6%9c%88%e5%86%85%e5%b0%9d%e8%af%95\/","name":"\u4e00\u4e2a\u51e0\u4e4e\u6ca1\u6709\u524d\u7aef\u5f00\u53d1\u7ecf\u9a8c\u7684\u4eba\uff0c\u5728\u4e24\u4e2a\u6708\u5185\u5c1d\u8bd5\u4f7f\u7528React+Redux+GAE\/Go\u521b\u5efa\u4e86\u4e00\u4e2aWeb\u5e94\u7528\u7684\u6545\u4e8b - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2024-01-28T00:55:36+00:00","dateModified":"2024-04-30T06:05:50+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/8ca01ba7f7362ad4edb7da206a12f29e"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%b8%aa%e5%87%a0%e4%b9%8e%e6%b2%a1%e6%9c%89%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e7%bb%8f%e9%aa%8c%e7%9a%84%e4%ba%ba%ef%bc%8c%e5%9c%a8%e4%b8%a4%e4%b8%aa%e6%9c%88%e5%86%85%e5%b0%9d%e8%af%95\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%b8%aa%e5%87%a0%e4%b9%8e%e6%b2%a1%e6%9c%89%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e7%bb%8f%e9%aa%8c%e7%9a%84%e4%ba%ba%ef%bc%8c%e5%9c%a8%e4%b8%a4%e4%b8%aa%e6%9c%88%e5%86%85%e5%b0%9d%e8%af%95\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%b8%aa%e5%87%a0%e4%b9%8e%e6%b2%a1%e6%9c%89%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e7%bb%8f%e9%aa%8c%e7%9a%84%e4%ba%ba%ef%bc%8c%e5%9c%a8%e4%b8%a4%e4%b8%aa%e6%9c%88%e5%86%85%e5%b0%9d%e8%af%95\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u4e00\u4e2a\u51e0\u4e4e\u6ca1\u6709\u524d\u7aef\u5f00\u53d1\u7ecf\u9a8c\u7684\u4eba\uff0c\u5728\u4e24\u4e2a\u6708\u5185\u5c1d\u8bd5\u4f7f\u7528React+Redux+GAE\/Go\u521b\u5efa\u4e86\u4e00\u4e2aWeb\u5e94\u7528\u7684\u6545\u4e8b"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/8ca01ba7f7362ad4edb7da206a12f29e","name":"\u79d1, \u9896","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8a6fb3cc7ba2f69d2189ba532aec4633ea7ed75ac0af162ec367cb3abc0fb2af?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8a6fb3cc7ba2f69d2189ba532aec4633ea7ed75ac0af162ec367cb3abc0fb2af?s=96&d=mm&r=g","caption":"\u79d1, \u9896"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/keying\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%b8%80%e4%b8%aa%e5%87%a0%e4%b9%8e%e6%b2%a1%e6%9c%89%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e7%bb%8f%e9%aa%8c%e7%9a%84%e4%ba%ba%ef%bc%8c%e5%9c%a8%e4%b8%a4%e4%b8%aa%e6%9c%88%e5%86%85%e5%b0%9d%e8%af%95\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/34742","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=34742"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/34742\/revisions"}],"predecessor-version":[{"id":92355,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/34742\/revisions\/92355"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=34742"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=34742"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=34742"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}