2019.12.11

dotenvとcross-envで環境変数を設定して開発環境の処理を切り替える

開発用と公開用で読み込むデータを変更したい、Gitで同じ開発環境を共有しながら一部のデータは作業者のPCで設定できるようにしたい。要件が複雑な案件では、開発環境もより柔軟性のある設定にしておきたいことがあります。たと…

2018.06.13

SassとPostCSSを組み合わせて作るCSS開発環境

突然ですが、僕はずっとPostCSSを誤解していました… このたび晴れて誤解が解けたので、記念に記事を書きたいと思います。 Sassの代わりではないはい、これです。この記事で言いたいことは、これがほぼ全てです。僕は…

2017.10.27

オリジナルのアイコンをアイコンフォント化して使用する機会があったので、gulpでアイコンフォントを作成してみました。フォルダ構成 / ├ package.json ├ gulpfile.js ├ node_module…

2017.10.25

Sketchのスライスめんどくさいなあって思いませんか？Photoshopの画像アセット機能はフォルダ名に.pngとか拡張子をつけるだけでリアルタイムに画像をスライスしてくれるし、Sketchでもリアルタイムにザクザク吐…

2017.03.13

巷で噂の Netlify を使って、静的サイトを公開する手順を紹介します。 Netlify とは https://www.netlify.com/ 簡単にいうと、GitHub や Bitbucket に git push…

2017.01.16

HTMLのコーディングをするとき、メタ情報やヘッダーのような共通部分を効率的に管理するためにPugというテンプレートエンジンをよく使っています。最初は「導入コストが高い」と考えていましたが、それ以上のメリットがあると感じ…

2017.01.06

ものすごくニッチな内容です。ものすごーくニッチな内容です。ものすごーーくニッチな内容です。同じ悩みを持つ人が世の中に1人くらいいるかなと。今回はその1人のためだけに書きます。とある案件で、 htmlでテンプレー…

2016.11.16

CSSのプリプロセッサはSassがデファクトスタンダードになっています。個人的にもずっとSassを使っていて、CSSをうまく管理するためには必要だと思っています。ただ、Sassの機能はCSSの仕様から外れた独自のもので…

2016.11.08

前回の記事では、JavaScriptの検証ツール「ESLint」を使用して基本的な検証を始めるまでの手順をまとめました。下記のコマンドで個別にJSファイルの検証を行うことも可能ですが、手動で検証を行うのは大変です。 e…

2016.06.22

JavaScript の新仕様である、ECMAScript 2016 (以下ES2016) がリリースされました。 ES2015 はもう普通にバリバリ使ってるよという方も多いと思いますが、まだ手を出していない、って人も結…