Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は

成田(@nariyu)さんにお奨めされた Gulp 始めました。 圧倒的な Node.js の知識不足の中なんとか実践で使える感じになってきたので忘れないようにメモ。 Gulp.js gulpjs.com “Automate and enhance your workflow” だそうです。 gulp/docs/getting-started.md gulp/docs/API.md Gulp でしたいこと JavaScript を concat, minify, source map, JSDoc Compass で CSS 作成, source map, minify 画像ファイルを最適化 リリースファイルの抽出 Gulp 開発環境準備 Sass / Compass Sass, Compass をインストールあるいは最新状態か確認し必要ならアップデートします。

もーいーくつねーるーと～、おーしょーうーがーつー♪ という所で、今年も残り 10 営業日を切りましたね・・・・！早いですね！ 皆さまいかがお過ごしでしょうか♪ 世間はクリスマスなムード一色ですが、皆さまお忘れになってはいないでしょうか。 大掃除という名の一大行事を！！終えない限りはクリスマスを迎えられませんよね（鬱 今週こそはきっと・・・ほほほ。。 自分を追い込んでみたところで、本題に入りたいと思います！ こちらは、ソニックムーブ Advent Calendar 2014 12日目の記事になります！ 目次 なぜ gulp なのか 目標 ディレクトリ構成 基本設定 タスク設定 トラブルシューティング 参考URL なぜ gulp なのか 当記事は grunt から gulp に乗り換えを考えているユーザーを対象としているので、Node.js のインストール方法の説明を省かせていただきます・・・

Gulp はフロントエンドまわりのあれこれを自動化してくれるタスクランナー、ビルドツールです。同じようなツールとして Grunt がありまして、僕はいつも Grunt のほうを使っていたのでこれまでにもいくつか記事を書いています。 どうも最近 Grunt よりも Gulp のほうが軽くて良いぞという声をちらほら聞いていたのでちょっと試してみました。 準備など… 僕はVCCWでローカルの WordPress 環境を作成しており、Gulp を含めたファイルの配置は以下のようになっています。 - /PATH/TO/DIR - vccw/ - www/ - wordpress/ - wp-content/ - themes - mytheme - scss/ - style.scss - style.css - gulpfile.js - mysql/ < gulp でデータベースをエクスポートし

普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs

バイト先で「新ゆとり世代」と言われました。れこです。 HTML、CSSを省略して書けるZen-Codingの後見、 Emmetについて書こうと思います。 やれCoffeeだTypeScriptだSassだ〜と手をつける前に、 もっと簡単に、デメリット無く作業効率をあげられます。 CoffeeScriptやSassなどのプリプロセッサ系とは違い、 CoffeeやSassの知識を開発メンバー全員が持ってないとならず、 結局自由が効かなくなる、ということはありません。 個人から使えて、チームで使ってもなお良し。 さらに、展開後のカーソルの位置がいい感じだったりと、 細かい気配りまで完璧です。 そんなEmmetを 僕が頻繁に使っている機能に焦点を当てて、紹介したいと思います。 Emmetの導入 Emmetは各種エディタ・IDEのプラグイン形式で配布されています。 お値段は無料です。 Web系の人が

こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh

BEM Advent Calendar 2013 1よ…13日目の記事です。 BEM Advent Calendar 2013が14日時点で18日の記事がアップされていたり、逆に13日の記事が14日にアップされたりと時空が歪んていますが、気にしないことにします。 この記事では、BEMを取り入れたマークアップがどんなものになるのか、Qiitaのホーム画面(ログイン後)を元に考えていきます。 なお、BEM自体についての説明は、BEM Advent Calendarの各記事やBEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号、CodeGridのBEMによるフロントエンドの設計 - 基本概念とルールを見ていただけるようお願いします。 これから載せるソースのガイドライン BlockとElementの区切りにはアンダースコア2個(__)を使用 block__elemen