はてなブックマーク

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

JavaScriptでMarkdownをHTMLに変換したいときには、markdown-itが使える。VuePressでも使われているので、そのデフォルトの挙動とプラグインをいれることで何ができるようになるのかを確認していく。 markdown-itとは markdown-itはMarkdownパーサーだ。 Markdown(マークダウン)は文書を記述するための記法の1つだ。ヘッダー、太字、箇条書きなどの書式を簡単に設定できる。 そして、markdown-itはMarkdown記法で書かれた文字列をHTML形式に変換(パーサー)できる。 markdown-itインストール それでは、さっそくmarkdown-itを試せる環境を作っていく。 $ npm install markdown-it --save package.json { "dependencies": { "markdown-

Internet Explorer 11において、Vue.jsのinputイベントがselectタグで発火しない。 原因 Vue.jsの問題ではなく、Internet Explorer 11では、次のように記述してもselectタグでinputイベントが発火しない。(ChromeやFirefoxでは発火する) <select @input="updateValue"> 対応 @inputではなく@changeを使用すればよい。 <select @change="updateValue"> v-modelはv-bind:valueとv-on:inputの組み合わせと等価とは限らない 以前v-modelは:valueと@inputイベントを組み合わせたものと等価という記事を読んだことがあった。 しかし、公式サイトにはv-modelがtextやselect、radioによって異なるイベント、値を

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

Babel 7.4.0で非推奨になった@babel/polyfillを使わず、core-js@3で環境構築する @babel/polyfillのページに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でビルドするために必要なモジュールをインストールする。 npm ins