2020-01-07

フロントエンド開発勉強日誌 4

フロントエンド開発勉強日誌の続きです。

Polyfillを設定する

IE11とかの古いブラウザに対応するためにPolyfillを設定します。

core-jsとwhatwg-fetchを入れる
Polyfillの設定をする
- webpack.config.jsのentryにPolyfill用TypeScriptを設定
- polyfill.tsを用意
polyfill.bundle.jsをHeadに設定

$ npm i core-js whatwg-fetch

// webpack.config.js
// 前略
module.exports = (env, argv) => {
  return {
    mode: argv.mode || 'development',
    entry: {
      polyfill: './src/core/polyfill.ts',
      sample: './src/sample/entry/entry.ts'
    },
// 後略

// src/core/polyfill.ts
import 'core-js/features/symbol';
import 'core-js/features/promise';
import 'core-js/features/map';
import 'core-js/features/weak-map';
import 'core-js/features/object/assign';
import 'core-js/features/url-search-params';
import 'whatwg-fetch';

Buildしてできたpolyfill.bundle.jsをHEADに追加します。

<head>
  <title>top page</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script src="/static/polyfill.bundle.js" crossorigin="anonymous" defer=""></script>
  <script src="/static/sample.bundle.js" crossorigin="anonymous" defer=""></script>
</head>

IE11とか持っていないのでテストできないですが、これで大丈夫ですよね、多分 😑

https://github.com/zloirock/core-js
https://github.com/github/fetch

2020-01-06

フロントエンド開発勉強日誌 3

フロントエンドプログラミング雑記

フロントエンド開発勉強日誌の続きです。

npm-scriptsを設定する

Buildのたびに $ ./node_modules/.bin/webpack とかタイプするのが面倒なので npm-scriptsにBuildとexpressの起動コマンドをpackage.jsonに設定します。

{
  "scripts": {
    "build": "webpack --mode=development"
  }
}

これで $ npm run build でBuildできるようになり万事めでたし。前回が長かったので今回は短め。

2019-12-31

Spring Boot 2.2.1以降でWebClientを利用して巨大なResponseを受け取るとDataBufferLimitException が発生する

Kotlin Spring Boot

Spring Boot 2.2.1 (Spring 5.2.1) から、WebClientで256KBを超えるJsonを扱うと DataBufferLimitException が発生するようになりました。Spring 5.1.11 以降でも発生すると思います。 (こっちは自分で試していません)

issueはこちらになります。詳細は公式リファレンスを参照ください。多分このcommitによるものだと思います。

対策として、application.ymlの設定でデフォルトのサイズを変更することができます。これが一番簡単でオススメ。

spring.codec.max-in-memory-size: 2MB

https://docs.spring.io/spring-boot/docs/current/reference/html/appendix-application-properties.html

WebClient作成時に設定することもできます。

val webClient = WebClient.builder()
    .exchangeStrategies { builder ->
        builder.codecs {
            it.defaultCodecs().maxInMemorySize(2 * 1024 * 1024)
        }
    }
    .build()

公式リファレンスはこちら

また、Spring Boot 2.2.2 (Spring 5.2.2) では mutate methodを使って再設定することができます。commitはこちら

val webClient = WebClient.builder()
    .exchangeStrategies(
        ExchangeStrategies.withDefaults().mutate().codecs {
            it.defaultCodecs().maxInMemorySize(2 * 1024 * 1024)
        }
    )
    .build()

ただし、issueを読む限りcloneとmutateは現状の問題を解決するための一時的な処置で、future releaseではなくなる可能性があるため注意する必要がありそうです。(英語読解に多大な不安があるので間違っているかもしれません)

大抵の場合デフォルトで十分ですが、レガシーなAPIとかで巨大なJsonを返してくる場合はカスタマイズが必要になります。commitを見る限りProtocol Bufferなどでも同様にLimitがあるみたいなので注意が必要です。

2019-12-30

フロントエンド開発勉強日誌 2

フロントエンドプログラミング雑記 TypeScript

フロントエンド開発勉強日誌の続きです。前回は Thymeleaf 導入までやっています。

今回はTypeScript開発環境を作ります。

TypeScript開発環境を作る

やることは以下

事前勉強
Node Install
ProjectにScript実装用のDirectoryを用意する
package.json用意
Library Install
TypeScript実装
- view
- container
- action
- entry
設定ファイル
- tsconfig.json
- webpack.config.json
build
ThymeleafのHeadにJavaScriptを設定
express (proxy)

やること多い...多くない？

2019-12-27

クソ雑魚バックエンドエンジニアのフロントエンド開発勉強日誌 1

Kotlin プログラミング雑記フロントエンド

Thymeleaf

HTMLを用意するためにThymeleafを入れます。そこからかよって感じですが、過去にフロントエンド開発をしたときに使っていたフレームワークがCatalyst (Perl製のフレームワーク) で、Thymeleaf経験すら皆無なのでやむなし。

Presenter class

テンプレートエンジン内でなんらかの制御やロジックを入れる際、処理は全てPresenter classで行います。テストコードを書いたりデバッグするのに便利で、template file内にビジネスロジックが混入することを防ぐことができます。

presenter

class FrontPracticePresenter(
    private val response: Response
) {
    fun fooLabel() = response.foo.toUpperCase()
}

後は適当に設定をしていきます。

gradle

// versionはdependency managementで管理
implementation("org.springframework.boot:spring-boot-starter-thymeleaf")

controller

@Controller
class FrontPracticeController {
    @GetMapping("front/practice")
    fun sample() = mono {
        Rendering
            .view("front/practice/main")
            .modelAttribute("view", FrontPracticePresenter(Response("foo", "bar"))) // ResponseをPresenterでWrapする
            .build()
    }
}

data class Response(
    val foo: String,
    val bar: String
)

template

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ja">
<head>
  <title>top page</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div>
  <p>Presenterで出力を加工する</p>
  <p th:text="${view.fooLabel()}" />
</div>
</body>
</html>

中身のない感じですが、とりあえずここまで

2019-12-26

クソ雑魚バックエンドエンジニアのフロントエンド開発勉強日誌 0

プログラミング雑記フロントエンド

モダンなフロントエンド開発の知識皆無の雑魚ですこんにちは。

今までずっとバックエンド側の開発ばかりしており、フロントエンドの勉強を放置していましたが、ここ最近チームのチケットの7割がフロントエンドのものになり、このままだと社内ニート待ったなしなのでこっそり勉強をすることにしました。TypeScriptが面白そうという理由もあります。「あれ、意外とフロントもいけるじゃん」と同僚に認められるところまでが目標

だったのですが、年明けからDevOps的なチームに行くことになり、こちらもほぼ未経験なので勉強の優先度が変わりました。せっかくなのでやったところまでメモします。内容は雑魚なのでお察しで。

勉強前のフロントエンド経験

jQueryを使ったことがある
scssを使ったことがある
オライリーのHTML5入門書を読んだことがある
前職で「デザイン会社と折衝するのが面倒」という理由で、上記の知識だけでWebサービスをフロントエンド、デザイン、バックエンドを全部1人で開発してリリースしたことがある (今見に行ったらリプレースされていた。残当)

2019-12-19

Slackのリアクションemojiを非表示にする

プログラミング雑記日記

あるSlack嫌いエンジニアの悩み

私はSlackが好きではないので、普段からなるべく見ないようにしています。しかし、会社はSlackに完全に依存しているため、どうしても1日数回は見る必要があり、その際は給料のために我慢しています。
Slack嫌いな理由は色々あるのですが (メールより個人の時間を取られる、とか、チームが依存しすぎてコミュニケーション不全に陥る、とか)、極めて個人的な理由の1つに「動くリアクション」があります。

最近、Parrot が職場で流行ってしまい、本当に困りました。

ネット上のアニメーション広告とか、点滅する広告とかを疎ましく思う人は多いと思いますが、 Slackのアニメーションリアクションについて言及されているところを自分は寡聞にして知りません。(みんな平気なのでしょうか)
自分は神経質なため、とても辛いです。

「個人的に鬱陶しいからなるべく使わないでください！」と言い放つ度胸も、職場上の信頼も、コミュニケーション能力も、権利も、権限も持っていない雑魚のため、なんらかの手段で自衛する必要がありました。

Stylusでリアクションを隠す

ということで Stylus を導入して Chrome上のSlackをカスタマイズすることで自分の精神を守っています。 Appでも内部コードを書き換えればできそうな気もしますが、よくわからないので諦めました。

/* reactionを隠しまくる */
.c-emoji, .c-emoji__medium, .c-emoji--inline {
    visibility: hidden;
}

button.c-reaction {
    display: none;
}

span.emoji-outer {
    display: none;
}

span.emoji-sizer {
    display: none;
}

これでemojiを完全に駆逐することができました 🤗 (Parrot以外も消えますが)

結果として

Slack上のリアクションに参加する回数が極端に減り、社内の文化についていけないこととなり、孤立の度合いをより深めることになりました！やったぜ！

すきま風

勉強したことのメモとか