Vue.jsとwebpackとbabelを使う

フロントエンド界隈では、Vue.jsが大流行。

そこでVue.jsとクラスを使いたいのでbabelも採用し、それを最終的にwebpackを経由させてjsファイルを吐き出すということをやってみたい。

まずは、npmコマンドでVue.jsをインストール。

npm install vue

次に、webpackをインストール。

npm install --save-dev webpack

npm install --save-dev webpack-cli

最後に、core-jsとregeneratorをインストール。

npm install --save core-js@3.6.5 npm install --save regenerator

久しぶりにbabelを調べてみると、Babel 7.4.0から@babel/polyfillが非推奨になったとのこと。

代わりに、core-jsとregeneratorを使ってくれということになっていたので、今回、インストールしました。

// src/app.js
import Vue from "vue";
import "core-js/stable";
import "regenerator-runtime/rumtime";

class Hoge {
  constructor(){
    console.log("hoge")
  }
}

new Vue({
  el:'#foo',
  mounted:function(){
    console.log("foo")
  }
});

まず、ターミナルでjsのトランスフォームを行います。

regenerator src lib

最後に、webpackコマンドを叩けば完了です。

npx webpack --config webpack.config.js

//webpack.config.js
const path = require('path');

module.exports = {
  mode: 'production' ,
  entry: path.resolve(__dirname, 'lib/app.js'),
  output: {
    filename: 'app.min.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

Javaのリスト

Javaには配列以外にもリストサポートしているようです。

import java.util.Arrays;
import java.util.List;

class Hoge{
    public static void main(String[] args){
        List<String> hoge = Arrays.asList("1","2","3");
        hoge.forEach(item ->{
            System.out.println(item);
        });
    }
}

macのローカルでJavaを実行する方法

簡単なJavaプログラムを作りデバッグしたい時があります。

デバッグするのにSpringBootプロジェクトを作るのは正直めんどくさい。

できれば、macのローカルで実行したい。

そんな時は、macのターミナルでjavaプログラムをコンパイルし、実行するのが便利です。

例えば、下にデバッグしたいプログラムを用意したとします。

class Hoge{
    public static void main(String[] args){
        System.out.println("Hello world!!");
    }
}

hoge.javaファイルと保存して、Hogeクラスを実行したい。

そんな時は、例えば、デスクトップにhoge.javaが保存されていたとして、ターミナルでjavac hoge.javaコマンドを叩くと、Hoge.classファイルが生成されます。

それを同じくターミナルでjava Hogeと実行すればデバッグすることができます。

windowsでも同じようにできるので、簡単にJavaプログラムを確認したい場合に便利。

Spring Bootで複数のURLのパスを受け取る

前回、Spring BootでURLのパスを受け取る方法を書きました。

jumbomonaca.hatenablog.com

その時は、一つのURLに対して、一つのメソッドを結びつける形でしたが、複数の異なるURLを一つのメソッドにマッピングしたい場合にどうすればいいのか調べました。

例えば、/hogeと/fooを受け取りたい場合、配列で設定すれば解決できる。

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.stereotype.Controller;

@SpringBootApplication
@Controller
public class TestApplication {
    @GetMapping({"/hoge", "/foo"})
    public String test() {
        return "test";
    }
}

Google Apps ScriptからGoogle Spreadsheetsにカスタムメニューを追加

Google SpreadsheetsからGoogle Apps Scriptを実行したい時に、毎回、スクリプトエディターから実行するのが、正直めんどくさい。

そこで、Google Spreadsheetsにメニューを追加して、そこからスクリプトエディターを開かずに実行したい。

幸い、Google Apps Scriptでカスタムメニューを追加してくれるメソッドがあるので、それを使ってアドオンメニューに項目を追加する。

追加前のアドオンメニューの画像を下に添付する。

function testMain(){
  console.log("hello")
}

function onOpen(){
  let _ui = SpreadsheetApp.getUi();
  let _menu = _ui.createAddonMenu();
  _menu.addItem('testItem','testMain').addToUi();
}

Google Apps ScriptのスクリプトエディターからonOpen関数を実行すると、アドオンにメニューが追加される。

実行した結果の画像を下に添付する。

アドオンメニューに「ファイル名」が追加され、さらにその下にonOpen関数で実行されたtestItemメニューが追加されている。

手軽にメニューを追加することができるので便利だ。

参考

developers.google.com

GAS実行時に起動時間の最大値を超えましたというエラー

処理の想いGoogle Apps Scriptを実行したら、

「起動時間の最大値を超えました」

というエラーが発生。

原因を調査してみると、どうやらG SuiteのBusinessまたは、Enterpriseは30分で、それ以外は6分なので、重たい処理は、運用方法を変更するか、仕様を変更するか、アルゴリズムを変更するかが余儀なくされる。

developers.google.com

Spring BootでURLを取得する

Spring BootでURLを取得するにはどうすればいいのだろうか？

org.springframework.web.servlet.support.ServletUriComponentsBuilderを使って取得することができるみたいだ。

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.servlet.support.ServletUriComponentsBuilder;
import org.springframework.stereotype.Controller;
import org.springframework.web.util.UriComponentsBuilder;


@SpringBootApplication
@Controller
public class HogeApplication {

    public static void main(String[] args) {
        SpringApplication.run(HogeApplication.class, args);
    }


    @GetMapping("/")
    public String top() {
        String uri = ServletUriComponentsBuilder.fromCurrentRequestUri().toUriString();
        return "top";
    }
}

参考 stackoverflow.com