山pの楽しいお勉強生活

勉強の成果を垂れ流していきます

We Are JavaScripters! @9thに参加してきた #WeJS #21cafe

はじめに

  • 7月20日(木)に「We Are JavaScripters! @9th」という勉強会に参加してきた時のメモです。
  • 全てLT、酒飲みながらのメモなので*1、興味のある発表については資料見たほうが早いかと思います。
    • 資料については、2017/07/21 9:00現在公開されていないようなので、公開され次第追記します。
  • ここ何回かは参加できていませんでしたが、もう9回目かという感じ。早いなー

概要

「JSの勉強会って、登壇する人がハイレベルな人ばっかりだな〜」
と思ったのがきっかけで作った勉強会、「We Are JavaScripters」!

自分が学んだこと/気づいたこと/面白かったこと/失敗したこと/ハマったこと/挑戦したこと/デバッグテクニック/オススメツール・開発環境/お気に入りのライブラリ/オレオレライブラリ/実はこうだった言語仕様/tips などなど、

お酒を片手に、気軽に発信できる場を目指しています^^/

※誰でも怖がらずに登壇できる空気を作りたいだけだけなので、もちろん玄人のみなさんも登壇大歓迎です!!

LT.1:JavaScriptパターンシリーズ ~オブザーバパターン~ @ta__miyan

LT.2:新卒エンジニアが Angular と React の比較をしてみた @atsushi

  • 発表資料
  • 新卒の方らしい。
  • Angular4
    • 独自ルールはだるい。
    • 先行事例が少なくてつらい。
    • 開発ツール使うと感動の嵐。
  • React
    • 先行事例が多い(日本語情報多い)
    • jsxが気持ち悪い
    • ライブラリの依存関係が多くてだるい
    • 開発ツール使うと感動の嵐。
  • RxJSは鬼ムズイ
  • Reduxはめんどくさい
    • ルールがかっちりしてるので、ちょっとしたことに対する手続きが多い。

LT.3:非SPAで小さく始めるReactアーキテクチャ @masarufuruya

LT.4:Reduxでmiddlewareを酷使するためにスロットマシーン書いた @腹筋コントローラーの力を信じろ

  • 発表資料
  • そこそこのアプリにならないとわからない。 → 作ってみた
  • Actionの分解。
  • Middlewareは何に反応して何に処理を繋ぐかだけを考えれば良い。
  • 結構いいんじゃない?という感想。
  • まかないてっく#1杯目 〜フロントエンドを語ろう〜の参加者募集中!
  • 前提の知識が私に足りなかったため、あまりメモれず。。。

LT.5:JavascriptでチャットCLIツール作成!@akane_256

  • 発表資料
  • チャットボット流行ってるので何か作ってみたい。
  • GoogleAPI.AIが便利そう。
    • Node.jsのSDKがある。
    • 言い回しのゆらぎを吸収。
  • コンソールに「ピザ食べたい」。
  • API.AIはサンプルコードがあるので、JavaScriptがわかれば簡単。
  • 楽しむの大事。
  • API.AIは今のところは無料らしい。
    • そのうち有料化の話もある??
  • API.AIのサンプルはピザ注文らしい。(チュートリアル?)

LT.6:JavaScript で味わう、関数型プログラミングのメリット @k5jp1015

  • 発表資料
  • 何故関数型なのか。
    • モジュール性が高まる。
    • テストが楽。
    • コードの正しさの証明。
  • small is beautiful
  • 個人的にわかった感がかなり大きい発表。
  • ☆後で見直す。

LT.7:Generate a QR code with your image by Vue.js! @schwalbe

  • 発表資料
  • LTするどころか、見ることもはじめて。
  • 本業はコンサルらしい。
  • とても初心者とは思えないw
  • 今後もプログラミングは続けていくとのこと。

LT.8:いまさらのPromise再入門 @chikoski

  • 発表資料
  • いずれされる処理を表すオブジェクト
  • 状態を2種類持っている。
    • if文(成功 or 失敗)
    • 仕事する前を含めて3つ
  • 直列化、並列化
  • エラー処理と本筋と分けて書ける
  • 普通の処理もPromiseで書いちゃう
  • thenの中でthenといったネストしたPromiseはよく考えた方が良い。
  • Promiseの本

*1:特に後半

Redshiftの文字列はバイト数換算

Amazon RedshiftはPostgreSQL互換ですが、多くの違いがあります。異なる点については公式を始めとして各所にまとまっていますが、タイトルの件についてはあまり記載を見なかったのでメモしときます。

PostgreSQLは文字数

SQLは2つの主要な文字データ型を定義しています。 character varying(n)とcharacter(n)です。 ここでnは正の整数です。 これらのデータ型は2つともn文字長(バイト数ではなく)までの文字列を保存できます。

わざわざ、バイト数ではなく と強調して書かれています。

create table hoge(c1 varchar(5));
insert into hoge(c1) values('12345'); -- OK
insert into hoge(c1) values('あいうえお'); -- OK
select * from hoge;

insert into hoge(c1) values('あいうえおa'); -- NG

実際にSQLを実行しても文字数換算です。

Redshiftはバイト数

公式から引用

CHAR および VARCHAR のデータ型は、文字単位でなくバイト単位で定義されます。CHAR 列にはシングルバイト文字のみを含めることができます。したがって、CHAR(10) 列には、最大 10 バイト長の文字列を含めることができます。VARCHAR にはマルチバイト文字 (1 文字あたり最大で 4 バイトまで) を含めることができます。例えば、VARCHAR(12) 列には、シングルバイト文字なら 12 個、2 バイト文字なら 6 個、3 バイト文字なら 4 個、4 バイト文字なら 3 個含めることができます。

こちらも、わざわざ文字単位ではなく と強調して書かれています。

create table hoge(c1 varchar(5));
insert into hoge(c1) values('あいうえお'); -- NG

insert into hoge(c1) values('12345'); -- OK
select * from hoge;

実際にSQLを実行してもバイト数換算です。ちなみに、日本語は3-4バイトになるので注意が必要です。

insert into hoge(c1) values('あ12'); -- OK
insert into hoge(c1) values('あ123'); -- NG

insert into hoge(c1) values('𠮷1'); -- OK
insert into hoge(c1) values('𠮷12'); -- NG

参考

Spring Bootを使ってWebアプリケーションを作成する(開発環境から)

はじめに

  • 某所でお題として与えられ、楽勝!って思ったら完遂できなかったので、ハマった所を解消し、再挑戦した際のメモです。*1
  • 最良、最適な方法ではないと思いますので、参考にする場合には自己責任でお願いします。*2
  • コードは一部しか記載しませんので、全てを確認したい場合には参考用コミットとしてGitHubへのリンクを記載してますので、こちらを確認してください。

要件とか

  • 下記の要件でWebアプリケーションを作成する。
  • 少しでも早く作成する。
  • 指定されていない事は想定する必要はない。
    • 最低限要件を満たした上で1秒でも早く作成する。

環境

  • まっさらなWindows
    • 開発環境。
    • 実際はWindows10だったのですが、用意できないので7で再挑戦。*3
  • Linux
    • この環境でポート80でアクセスできるWebアプリケーションを動作させる。
    • 実際はAWSでIPと秘密鍵は用意されてました。(SSHでログインは可能。)
    • 用意できないので、別マシン上にDockerで用意。

アプリケーションの要件

  • 問い合わせフォームを作る
  • http://xxx.xxx.xxx.xxx 」でアクセスすると問い合わせフォーム画面が表示される。
    • ポートは80
  • 問い合わせフォーム画面は、「名前」、「Eメール」、「問い合わせ内容」の3つの入力が可能。
  • それぞれの入力にそれなりにValidationをかける。
  • 送信ボタンを押下すると完了画面が表示される。
  • 送信ボタン押下時にDBに入力内容を保存する。
    • DBはなんでも良い
    • テーブル構成もなんでも良い

リポジトリ

Pleiadesインストー*4

プロジェクト作成

  • プロジェクトエクスプローラ上で右クリック → 新規 → プロジェクト
  • Spring → Springスタータープロジェクト
  • Spring Boot Version : 1.5.3
  • Dependencies
    • DevTools
    • Web
    • Thymeleaf
    • H2
    • JPA
  • 完了

  • 参考用コミット

問い合わせ画面を作成

  • Controllerを追加
    • com.example.demo.DemoApplication.java
      • クラス分ける時間が惜しいので、アプリケーションを起動するクラスに追加してしまいます。
@RequestMapping("/")
public String index(Model model) {
    return "index";
}
  • 画面を作成
    • src/main/resources/templates/index.html
    • 特に特筆すべき事はないのでコードは割愛。
  • アプリケーション起動
    • プロジェクト右クリック → 実行 → Spring Boot アプリケーション
  • ブラウザで確認

  • 参考用コミット

完了画面を作成

  • 問い合わせ画面でボタン押下したら完了画面が表示されるようにします。
  • 完了画面のマッピングを追加
    • com.example.demo.DemoApplication.java
@RequestMapping("result")
public String result(Model model) {
    // TODO 入力チェック
    // TODO DBに保存
    return "result";
}
  • 完了画面に遷移するように問い合わせ画面を変更
    • src/main/resources/templates/index.html
-  <form role="form" action="#">
+   <form role="form" th:action="@{/result}" method="post">

入力チェックを追加

  • 問い合わせ画面でボタン押下時に入力チェックが行われるように設定。
  • formを作成
    • src/main/java/com/example/demo/InputForm.java
public class InputForm {
    @NotEmpty
    @Size(min = 1, max = 50)
    private String name;

    @Size(max = 50)
    private String email;

    @NotEmpty
    @Size(max = 100)
    private String message;
  // getter, setterは略
}
  • 入力チェックでエラーとなった場合には問い合わせ画面に戻す処理を追加。
    • com.example.demo.DemoApplication.java
 - public String result(Model model) {
 -      // TODO 入力チェック
 +  public String result(@ModelAttribute("inputForm") @Valid InputForm form, BindingResult bindingResult, Model model) {
 +      if (bindingResult.hasErrors()) {
 +          return index(form, model);
 +      }
  • エラーメッセージを表示するように修正。
    • src/main/resources/templates/index.html
-          <p>名前 : <input type="text" name="name" /></p>
+           <p>名前 : <input type="text" th:value="*{name}" name="name" /></p>
+           <p><span
+               th:if="${#fields.hasErrors('name')}" th:errors="*{name}"></span>
+           </p>
<!-- 以下略 -->

DBに保存する

@Entity
@Table(name="message")
public class Message {
    public Message(InputForm form) {
    // 何か他にいい方法ありそうだけど、コンストラクタでformから入れ替える
        this.message = form.getMessage();
        this.email = form.getEmail();
        this.name = form.getName();
    }
    @Id
    @GeneratedValue
    private int id;

    @Column
    private String name;

    @Column
    private String email;

    @Column
    private String message;
  // getter, setterは略
}
public interface MessageRepository extends JpaRepository<Message, Integer> {
}
  • 保存処理を追加
public class DemoApplication {
 +  @Autowired MessageRepository repository;
// 略
 -      // TODO DBに保存
 +      repository.save(new Message(form));

プロパティファイルは好きじゃないのでYAMLに変更

DBに保存されている事を確認するためh2コンソールの表示設定を追加

  • src/main/resources/application.yml
spring:
   h2:
     console:
       enabled: true
   datasource:
     url: jdbc:h2:mem:test

起動するポート番号を変更

  • src/main/resources/application.yml
+server:
 +  port: 80

jarで出力する

  • プロジェクト右クリック → 実行 → Maven install
  • target配下にjarが出力されていることを確認。

jar単体で起動

動作環境の整備

  • Linuxにログイン
  • Javaのインストー
    • sudo yum install java-1.8.0-openjdk.x86_64
  • ↑で作成したjarをLinuxに移動
  • ファイアーウォールを止める
    • sudo service iptables stop
  • 起動
    • java -jar demo-0.0.1-SNAPSHOT.jar
  • ブラウザで確認

まとめ

  • ハマった部分が解消されたら、特になんてこともなくこなすことができ、凹んでいた気分が少し回復したので良しとする。
  • ハマった部分に関しても、落ち着いて挑めば解決できたと思うので、焦ってエラーメッセージや事象を検索するのではなく、外の空気でも吸いに行けばよかったと思った。
  • 色々突っ込みどころはあると自分でも思うが、お題がお題なのでこんなものではないだろうか。
  • いいお題だと思ったので、今後新しいフレームワークを学ぶ際にはこのお題をこなそうと決めた。

*1:ハマった事象は別記事にする予定。

*2:ツッコミ歓迎

*3:何も変わる事はないはず。

*4:そもそもSTSプラグイン版じゃなくて単体パッケージ版を使用した方が良いって誰かが言ってた気がする。https://spring.io/tools/sts/all

*5:これってWindows10でも発生する?

GroovyでJSONをPOSTする

概要

  • ↓をGroovyでやりたい。
curl -v -H "Accept: application/json" -H "Content-type: application/json" -X POST -d '{"id":"abcdef","user":{"name":"tarou","age":20,"email":"example@example.com","result":true}}' https://script.google.com/macros/s/xxxxxxxxx/exec
  • groovy.json.JsonBuilder を利用してJSONを作成。
  • groovyx.net.http.HTTPBuilder を利用してPOSTする。

コード

@Grab("org.codehaus.groovy.modules.http-builder:http-builder:0.7.1")

import groovyx.net.http.HTTPBuilder
import groovy.json.JsonBuilder
import static groovyx.net.http.ContentType.*

def json = new JsonBuilder()
json {
  id "abcdef"
  user {
    name "tarou"
    age 20
    email "example@example.com"
    result true
  }
}
def postBody = json.toString()

assert postBody == $/{"id":"abcdef","user":{"name":"tarou","age":20,"email":"example@example.com","result":true}}/$
/*
{
  "id":"abcdef",
  "user":{
    "name":"tarou",
    "age":20,
    "email":"example@example.com",
    "result":true
  }
}
*/

def http = new HTTPBuilder("https://script.google.com/macros/s/xxxxxxxxx/")

http.post( path: 'exec', body: postBody,
           contentType: JSON ) { resp ->
  println "POST Success: ${resp.statusLine}"
}

参考

JSONをPOSTしてGoogle SpreadSheetに書き込む

はじめに

  • GAS(Google Apps Script)でPOSTを受け付けて、SpreadSheetに書き込む手順です。
  • 認証はありませんので、URLがわかれば誰でもPOSTできてしまうので注意。
  • GroovyからSpreadSheetに書き込みたかったが、GData APIを使用するためのライブラリである、gdata-java-clientをGrapeで入れようとしたら、うまく入らなかったのでやめたという経緯があったりします。

仕様

{
  "id":"abcdef",
  "user":{
    "name":"tarou",
    "age":20,
    "email":"example@example.com",
    "result":true
  }
}

手順

  • スプレッドシートを作成
    • 適当にヘッダとか作っときます。
  • ツール → スクリプトエディタ
  • GASのコードを書く。
    • doPostはPOST、doGetはGETの時に呼ばれます。
    • 今回はPOSTで作成。
function doPost(e) {
  var jsonString = e.postData.getDataAsString();
  var data = JSON.parse(jsonString);

  var id = data.id;
  var name = data.user.name;
  var age = data.user.age;
  var email = data.user.email;
  var result = data.user.result;

  // シート取得
  var ss = SpreadsheetApp.openById(SpreadsheetApp.getActiveSpreadsheet().getId());
  var sheet = ss.getSheetByName("シート1");
  
  // データ入力
  sheet.appendRow([id, name, age, email, result]);
}
  • 保存
  • 公開 → ウェブアプリケーションとして公開
  • プロジェクトバージョン
    • 新規作成
    • コミットコメント
  • 次のユーザとしてアプリケーションを実行
    • 自分
  • アプリケーションにアクセスできるユーザー
    • 全員(匿名ユーザーを含む)
    • ↑に設定することで認証が行われない。
  • 「承認が必要です」というダイアログが表示される。
    • 許可を確認 → 許可
  • 「現在のウェブアプリケーションのURL」をメモ。
  • POST(URLは↑で確認したURLに置換してください。)
curl -v -H "Accept: application/json" -H "Content-type: application/json" -X POST -d '{"id":"abcdef","user":{"name":"tarou","age":20,"email":"example@example.com","result":true}}' https://script.google.com/macros/s/xxxxxxxxx/exec
  • 確認 f:id:yamap_55:20170509025238p:plain

参考

We Are JavaScripters! @6thに参加してきた #WeJS #21cafe

はじめに

4月27日(木)に「We Are JavaScripters! @6th」という勉強会に参加してきた時の自分用メモです。*1

全てLTなので、資料見たほうが早いかと思いますw

概要

「JSの勉強会って、登壇する人がハイレベルな人ばっかりだな〜」
と思ったのがきっかけで作った勉強会、「We Are JavaScripters」!

自分が学んだこと/気づいたこと/面白かったこと/失敗したこと/ハマったこと/挑戦したこと/デバッグテクニック/オススメツール・開発環境/お気に入りのライブラリ/オレオレライブラリ/実はこうだった言語仕様/tips などなど、

お酒を片手に、気軽に発信できる場を目指しています^^/

※誰でも怖がらずに登壇できる空気を作りたいだけだけなので、もちろん玄人のみなさんも登壇大歓迎です!!
  • イベント申込時の主催者アンケートだと、JavaScript初心者が半分くらいだったらしいです。
    • 個人的には怪しいと思ってますがw

LT.1:JSの基本的なことをちょっと掘り下げてみる話 prototype編(やっと) @ta__miyan

LT.2:Elmの話(仮) @boiyaa

関連ツイート↓

LT.3:==と=== @IganinTea

関連ツイート↓

LT.4:そろそろwebpackと真剣に向き合ってみる。 @Nao-bt

  • 公式ページ
  • 大量のJSを書くと死ぬ。
  • 大量のJSのコードをモジュールごとに分ける。
  • 言語仕様としてはモジュールをサポートしていない。
  • ↓の4個を覚えとけ
  • Entry
    • アプリの中で最初に読み込むファイル
  • Output
    • ビルドの結果を出力する設定
  • Loaders
    • ビルドの際にモジュールのソースコードに適用される変換を指定する。
    • testって書かないとエラーとなるのがハマりどころらしい。
  • Plugins
    • ビルド時の設定を行う。
    • ビルドの際にファイルの圧縮だったり、コンパイルエラーを無視?するとか。

LT.5:TypeScriptでDDD~RepositoryとEntity編~ @mrdShinse

LT.6:jsのGCについて @brn0227

  • Javascript Garbage Collector overview
    • 発表資料
  • 関数は会議
  • Stackはホワイトボード
    • 関数単位で割り当てられるので、終了すると自動で廃棄
  • Heapは議事録
    • プログラムで制御

LT.7:はじめてのReact: ES2015の実用 @Jay

  • はじめてのReact
  • HelloWorldの代わりになる自分のやったことの発表
  • セミコロンレスで書いたらしい。

LT.8:オブジェクトの作成とコンストラクタの話 @chikoski

*1:公開が遅れて申し訳ありません。(書いたとばっかり思ってました。。。)

JJUGナイトセミナーに参加してきた(4/24) #JJUG

4/24に開催されたJJUGナイトセミナーに参加してきた際のメモ。(後で追記予定

概要

今回はテスティング特集と称しまして、JUnit他についてその道のプロの方々にお話いただきます!

「Modern unit testing with JUnit 5」

概要

JUnit is the tool of choice when it comes to unit testing in Java. The current version JUnit 4 has been working reliably for many years but despite some advancements it has now reached its limits. JUnit version 5 is a complete rewrite and will be released soon. In the session, we will discuss what is new in JUnit 5 and what needs to be considered when upgrading.

メモ

  • JUnit5の説明。英語セッション。
  • JUnit4と互換性がとられているらしい。
    • そのままで動くとのこと
  • パラメーター渡すテストや、DisplayNameはかなり便利そう。
    • ParameterizedTest
    • 直接値渡す以外に、CSVで渡すこともできる。
  • 逆にタグ付けや、繰り返しは使うタイミングは少なそう。
  • インターフェイスのテストの箇所はよくわからなかったので後で復習。
  • IDEは対応してくれているみたい。
    • NetBeansは?ってなってたw後で誰か補足してくれるかな?
  • Maven、Gradle共にJUnitチームがプラグインを開発しているらしい。
  • Jenkins対応は?ってなってた。XML出力すれば勝手に読んでくれるような気がするけど。。。
  • 現時点ではM4
  • 7月にリリース予定?けど遅れそうなのかな?(笑いが出てた)

アジャイルテスティング -バグ埋め込みを年間1件にまで減らした戦略-」

概要

アジャイル開発におけるソフトウェアテストへの態度に関する発表です。4年間開発しているチームにおける品質向上の取り組みで、次のスライドの再演になります
https://speakerdeck.com/kyonmm/aziyairutesuteingu-bagumai-meip-miwonian-jian-1jian-nimadejian-rasitazhan-lue-number-nagoyatesting

メモ

  • バグの数を年1件にした話。
  • バグの根源はムリからきている。そのバグをテストで取り除こうとするのはムダ。
  • やったこと
    • バグの分析
    • チームの分析
    • 理想像を構築
    • チームを帰る情熱と理論を構築、共有
  • ↑の普通のことをどう進めるのか。
  • ビジョンをはっきり持つ。
    • そのためのリスクは許容する。
    • なんども伝える。(400ー800位言う
  • 基本に立ち返る。
    • 失敗しているなら、まずは基本と違うところを基本に戻してから考える。
    • 基本に立ち返ると比較しやすい。
  • 積極的な暗黙知
    • これはちょっと同意できないけど、どうなんだろうか?
    • チームメンバーのレベルが高いといけるのか?
  • 凄い高品質なドキュメントがあった(作成した)としても、それをうまく使う方法論はない。
  • 最小6分、最大1時間の単位でタスクを全て書き出している。
    • 12ー18分のタスクが多いらしい。

「pact-jvmではじめるコンシューマー駆動契約」

概要

マイクロサービスアーキテクチャーの普及を始めとする近年の開発トレンドの風潮により、サービスのコンポーネントをテストする上でサービス間の依存関係を考慮することが必要とし、テストの難易度が増してきています。このセッションではサービス相互のインターフェースの仕様と実装の妥当性を検証する方法としてコンシューマー駆動契約にスポットをあて、その実装であるpact-jvmを例にして解説します。

メモ

  • pact-jvm
  • よくある話
    • モックが多すぎる
    • テストのメンテナンスが辛い
  • マイクロサービス化の流れがきているが、三層アーキテクチャー(MVC)に縛られすぎている。
  • トーリーではなくジャーニーをテストする
    • 外部に対するサービス呼び出しをモック化。
  • pact-jvmとはPactのJVM言語向け移植版
  • テスト自動化ピラミッドの考え方はコンシューマー駆動契約を導入しなくても有効。
  • ユニットテスト、エンドツーエンドテスト双方を補完する。