Uncaught ReferenceError: regeneratorRuntime is not defined

f:id:matatsuna:20181018212400p:plain

解決策

webpack.config.js

require("babel-polyfill");
module.exports = {
  entry: ["babel-polyfill", "./src/main.js"],

.bablerc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "transform-class-properties"
    ]
}

react+webpackしながらasync/await使おうとした時に出たエラーの対処方法

環境

    "@babel/cli": "^7.1.0",
    "@babel/core": "^7.1.0",
    "@babel/node": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-polyfill": "^6.26.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.1",
    "webpack-command": "^0.4.1",
    "react": "^16.5.2",
    "react-dom": "^16.5.2"

参考

github.com

ハイライト付きでプログラムソースコードをきれいに印刷できるcodePrintを作った

codePrint

https://i.gyazo.com/b42be61be7f3762df141844efaae27d8.png

service.matatsuna.net

作った経緯

コーディングしていて、複雑な部分を考える時によく印刷したソースコードにペンで書き込んだりするのですが、VS Code標準機能では印刷することができなくて、さっとweb上で欲しくて作りました。

技術的仕組み

影響を受けたブログ

blog.bulkus.net

ほぼ👆この通りです。
CodeMirror を使って言語ごとのソースコードのハイライトを付けてます。

  1. codemirror でソースコードを入力してもらう
  2. 印刷ボタンをクリックするとブラウザ標準の印刷ダイアログを出す

印刷のときに任意のコンテンツを消す

初めて知ったのですが、印刷時にcss

 @media print{} 

が呼ばれて任意のコンテンツに新たなcssを適用することができます。
今回は、

display:none;

で言語選択リストボックスや印刷ボタンを消してます。
on-ze.com

作ってみて

意外とcodemirrorの扱いが難しくて大変苦労しました。なので、VS Codeの拡張であるvscode.print を参考にさせていただきました。ありがとうございます。

「いつもソースコードを印刷しないけど、じっくり読みたい」、「手軽にハイライト付きで印刷したい」など、使いたい時にWebサービスでできるなら楽と思っているので、使ってくれたら嬉しいです。

google chart APIが突然エラー吐くようになり、仕様が大きく変わったぽい

google Geo Chartを使っていたプログラムが急に動かなくなっていた。
原因は仕様変更だった。
詳しいものは以下を参照
Visualization: GeoChart  |  Charts  |  Google Developers

起こった現象

gyazo.com
出たエラーは「Error: First row is not an array.」など

解決策

stackoverflow.com
いろんな部分の変更があった模様

解決前
<script src="https://www.google.com/jsapi"></script>
<script>
    google.load('visualization', '1', { packages: ['geochart']});
    google.setOnLoadCallback(graphChart("hoge"));
    var option = {
        region: 'JP',
        resolution: 'provinces',
        backgroundColor: '#81d4fa'
    };
解決後
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
    google.charts.load('current', { packages: ['geochart'], mapsApiKey: '<APIキー>' });
    google.charts.setOnLoadCallback(graphChart); //コールバック引数も変更
     var option = {
            region: 'JP',
            displayMode: 'markers',
             resolution: 'provinces',
             backgroundColor: '#81d4fa'
     };
データ形式変更前
[
    {
        "name": "hoge1",
        "address": "住所1"
    },
    {
        "name": "hoge2",
        "address": "住所2"
    }
]
データ形式変更後
[
    [
        "住所",
        "名称"
    ],
    [
        "東京都渋谷区ほげふが",
        "ほげふがタワー"
    ]
]||<