はてなブックマーク

html-webpack-plugin、css-loader、mini-css-extract-plugin、ejs-compiled-loaderを使い、分割したejsをテンプレートにして、ブラウザキャッシュを回避できるCSS、JavaScriptを読み込ませたHTMLを出力できるようにする。 # html-webpack-pluginとは html-webpack-plugin (opens new window)とはwebpackのプラグインで、webpackで生成したJavaScriptやCSSを埋め込んだHTMLを生成する。 webpackで生成したJavaScriptやCSSにユニークな識別子を付与することでブラウザキャッシュを回避したり、テンプレートとなるHTMLをカスタマイズすることができる。 # html-webpack-pluginでJavaScriptを読み込んだHT

PythonでGraphQL (opens new window)サーバーを構築する。 GraphQLサーバの構築にはPythonのGraphQLライブラリであるGraphene (opens new window)を使う。 # GraphQLとは GraphQLは、RESTに代わるAPIの仕様だ。 APIは、クライアントがサーバーからデータを取得する方法を定義する。 GraphQLクライアントはGraphQLクエリ言語(GraphQL query language)によりデータを絞り込み、GraphQLサーバから必要なデータを取得する。 GraphQLサーバは、固定のデータ構造を返す複数のエンドポイントではなく、単一のエンドポイントのみを公開し、クライアントが要求したデータを返す。GraphQLスキーマ言語(GraphQL schema language)によりデータの追加や変更、型を定

# Python3.7でenumを定義し、文字列からEnumを生成する、Enumの値から文字列を取得する、一覧を取得する、振る舞いを持たせる HTTPリクエストで送られてくる文字列の取りうる値が決まっている。そういう場合に、サーバー側で取りうる値が限定されていることを示すために、文字列からEnum(列挙型)に変換したい。 また、レスポンスはEnumから文字列にして値を返したい。 そこで、PythonにおいてEnumをどう扱えばいいか見ていく。 なお、確認したPythonのバージョンはPython 3.7.3である。 まずはEnumの定義と値の取得、比較を確認したあとに、一覧の取得方法、振る舞いの持たせ方を見ていく。 # Enumの定義とname、value Enumはenum.Enumを継承することで作成する。 列挙されている値の左にある定数として定義しておきたいものがname、右の値がv

Pythonで意味のある単位にファイルを分割してWebアプリケーションを作成したい。 どうやら、Pythonにはあるファイルから他のファイルを読み込む際のパターンが複数あるようなので、まとめておく。 # Pythonにexportはない Pythonにおいてあるファイルから他のファイルを読み込む場合、関数やオブジェクトを提供するファイルにexportのような記述をする必要はない。 したがって、読み込む方法だけ確認しておけば、ファイルを意味のある単位に分割して開発していける。 # 読み込みのパターン MECE(漏れなくダブりなく)じゃないけど、読み込みのパターンはおおよそ以下の通り。 import モジュール import モジュール as モジュールの別名 from モジュール import 変数、関数、クラス、モジュール from モジュール import 変数、関数、クラス、モジュール

2018年12月20日に、Google App EngineでPython3.7が正式版(generally available)としてリリース (opens new window)された🎉 この記事ではGoogle App Engineのローカル環境での動かし方、そしてデプロイの方法を記載する。 # Macでローカル環境のFlaskが動くようにする こちらにMacにpyenvとpipenvを使ってPythonが動く環境を構築する方法を記載している。 pipenvでFlaskをインストールし、templatesディレクトリ下に静的ファイルを確認するためのindex.htmlを用意する(中身はなんでもよい)。 ディレクトリ

Rollupで複数のファイルを1つにまとめる際にrollup-plugin-commonjs、rollup-plugin-node-resolveプラグインが使われる。この2つのプラグインはいったいどんな役割があるのだろうか。Rollupの概要をおさえた上で、環境をつくり動きを確認していく。 # Rollupとは Rollupとは、モジュールバンドラ(module bundler)だ。 モジュール(module)は機能ごとに分割されたファイルのことで、バンドラ(bundler)はそれらのモジュールをまとめることだ。RollupはES2015(ES6)をベースにしている。つまり、特に設定しなくてもimport、export文をつかって複数ファイルを1ファイルにまとめることができる。 # Rollupのインストール さっそくRollupが動く環境を準備していく。 package.jsonを用意

JavaScriptでMarkdownをHTMLに変換したいときには、markdown-itが使える。VuePressでも使われているので、そのデフォルトの挙動とプラグインをいれることで何ができるようになるのかを確認していく。 [[toc]] markdown-itとは markdown-itはMarkdownパーサーだ。 Markdown(マー ...

Internet Explorer 11において、Vue.jsのinputイベントがselectタグで発火しない。 原因 Vue.jsの問題ではなく、Internet Explorer 11では、次のように記述してもselectタグでinputイベントが発火しない。(ChromeやFirefoxでは発火する)

JavaScriptの日付操作には罠が多く、業務では日付操作を簡単かつ安全に操作するライブラリが使われる。日付操作のライブラリの中でもMoment.js (opens new window)(Star数40,601)はよく知られているが、ファイルサイズが大きくパフォーマンス改善の妨げになることがある。 そこでこの記事ではより軽量でMoment.jsの代替となるdayjs (opens new window)(Star数19,872)を紹介する。 # dayjsとは dayjsとは、日付操作を簡単にするJavaScriptのライブラリだ。Moment.jsのAPIと広く互換があり、gzip圧縮されたサイズは2.71KBと軽量なのが特徴だ。 # インストール dayjsが十分Moment.jsの代わりになり得るのか確認していく。 まずはインストールして、業務で使われる日付操作をみていく。

# Babel 7.4.0で非推奨になった@babel/polyfillを使わず、core-js@3で環境構築する @babel/polyfill (opens new window)のページにBabel 7.4.0から非推奨になったと書かれている。 As of Babel 7.4.0, this package has been deprecated この記事ではwebpack4でBabel7.4を使った環境構築の方法を記載する。 # 環境構築 # インストール @babel/polyfillではなくcore-jsとregenerator-runtimeをインストールしているのがポイント。 Polyfillはcore-jsにまとめられており、async-awaitを動かすにはregenerator-runtimeが別で必要になる。 そのほか、BabelやWebpackでビルドするために必