JavaScript

webpack-serve v2 を動かすまでのメモ

春先にwebpack-serveのv1 が出てたと思ったけど、気がつけばv2のbeta版の話がGithub上でされてて、忙しくて追うのを放置してたらいつの間にかv2が公式リリースされてたので簡単に触ってみたメモ npmでインストールしておくもの 必須 - webpack - webpack-cli…

mapbox-gl.jsでOSMを表示

mapbox-gl.jsのサンプルを検索すると、大抵はVector Tileのサンプルが多くヒットしてしまう。 ただ、これまで利用していたOSMなどのRaster Tileをベースに表示したい場合もある。 mapbox-gl.js でRaster Tile今回はOSMを表示する例 ※ 実行する際にmapboxのサ…

Google Maps Platform Maps Embed APIを利用してみる

Google Maps Platformの新料金体系になったので、少しずつ利用してみる。 今回はMaps Embed APIを利用してみる。(どれだけ利用しても無料なので) 料金については、公式の料金表を参照して頂きたい。 cloud.google.com Embed APIの課金体系が2種類あるので…

express-generatorでtemplate engineを指定しないでアプリ雛形を作成

最近、Expressを利用してるのですが、 express-generator の情報を探すとhtmlのtemplate engineが指定した情報が多い。 defaultは、jade (指定しないと、 jade ) が指定される。 個人的にはExpressはWeb APIが中心なので、アプリの雛形にはtemplate engine…

Express実装時のauto-reload

ちょっとやっては、また忘れた頃にちょっとExpressを触るという感じで、どっぷりやってる訳ではないのでExpressとかは入門レベルからなかかな脱せない… Expressでauto-reload コードを編集して、確認するのに毎回アプリを再起動してたので他のプログラミング…

Webpackでmodule bundle時の環境変数

以前に自分でJSの環境変数の扱いについてのblogを書いたのですが、Webpackで環境変数を使用する際はこちらのライブラリの方が良いと思い試しみた hinoshita.hatenadiary.com webpack-dotenv webpackでjs等をbundleする際に、API KeyやHOST名など環境や開発時…

webpack-serve試してみたメモ

webpack-serve webpackの開発用web serverとして webpack-dev-server が多く利用されていると思う(webpackの公式にも記載されてるし)のですが、webpack-dev-server は、現在メンテナンスモードのみとなって機能追加等は今後行われない模様です。 代替とし…

Leaflet.jsをWebpackでbuildする

今年始めてのブログなんですね。(今年が既に3ヶ月過ぎようとしてるのは…) なんどか同じような話題を書いてるような気がしますが。 Leaflet.js もnpmで管理されてるのに、公式ページ やGithubに利用方法が明記されていないようなのでメモ (もしかしたら、…

webpack-dev-server利用時のauto-reloadについて

作業していて、webpack-dev-serverを利用時にHTMLファイルを更新しても、auto-reloadが行われなかたので対応メモ webpack.config.jsの設定 module.exports = { entry:{ … }, output: { … }, resolve: { … }, devServer: { contentBase: path.join(__dirname,…

npmのアップデート

たいしした話ではないのですが、 npm install すると、最後になんか出てくる。 Update available 5.4.2 → 5.5.1 Run npm i -g npm to update npm のバージョンが古いから上げてねってお知らせなのですが、npm のバージョンアップを npm で行なうという。 npm…

開発時のJavaScriptの環境変数などの管理

最近JavaScirptでAPI key取扱いをどうしようかと思い、ちょっと試してみたこと。 最初行っていたのは自分のマシンの環境変数を設定して、 webpack.config.jsのpluginsで読み込む方法。 この方法でも実装は可能なんですが、複数人で作業とかする時に環境依存…

HTMLファイルだけでReactを実行

Reactだけではないのですが、最近のJSフレームワーク系を始めようとすると、そのフレームワークだけでなくES2016/ES2017・Webpack・babel・npmなどと覚えることが多くて、大変そうってのはよく聞いたり。 確かに公式のドキュメントやいろんなブログやQiita見…

yarnでleafletを取得し、Webpackでbuildして、表示するまで。

少しバタバタしてしまったのもあるので、約2ヶ月ぶりのブログです… まぁ、定期的に書くというよりも、動作確認とかした内容とかをメモしていくブログだから定期的な必要はないんだけど、まとめてる余裕もなかったのです。 っで、本題です。 内容的には前回と…

Svelteを使ってみる(2)

Svelteを使ってみる(1) - hinosita's diary で、「Svelte」の導入と簡単なコンパイルの行い方をやってみたので、公式ドキュメント的には次はComponet APIの説明ですね。 各APIの概要と説明は Learn Svelte を読んで頂だければよいかと思うのですが、各API…

Svelteを使ってみる(1)

最近ちらほらと名前を聞く「Svelet」というフレームワーク? の導入の仕方のメモ (個人的にはコンポーネント トランスファという方がしっくり来るんだが) おそらく話題になってる経緯は、 In 2017 expect... · Front-end Developer Handbook 2017 に「Svel…