悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計（Sass対応）

Grunt is a very popular tool in the JavaScript community. It’s built on top of Node.js, but it’s used even in most front-end only projects. So even if you don’t work with Node.js, many JavaScript developers install Node.js simply to use Grunt. Grunt can achieve many common tasks such as minifying code, linting code, and transpiling code (e.g., changing CoffeeScript into JavaScript). The most commo

リリィ・シュシュのすべて という映画をご存知でしょうか？2001年に公開された岩井俊二監督の作品で、当時は結構好きで何度も観返したものでした。 劇中にて文字がカシャカシャとランダムに動きながら文章が表示されていくエフェクトがあるのですが、これを JavaScript で作ってみました。Flash 全盛のころから Web コンテンツにはよく取り入れられてるエフェクトではありますが、使い所さえ間違えなければ今でも充分に通用するカッコよさを持っています。 今回は jQuery を使わずに素のJavaScript (Vanilla JavaScript) だけでプラグインを作りました。このシリーズの趣旨から大きく外れてますが、そこは仕方ないね。 LetterTicker - 文字をランダムでカシャカシャ動かしながらテキストを表示させる Step.1 | とりあえず動くものを作ってみる まずは動くも

Web Platform Dive into the web platform, at your pace.

IntelliJ IDEA には JSHint が統合されている JSHint は、Node.js で実装されている JavaScript 用コード検査ツールです。 IntelliJ IDEA (WebStorm など ) には JSLint/JSHint が統合されており、コーディング中に構文チェックすることができるので、設定方法を紹介します。( デフォルトでは無効化されているため、設定する必要があります ) 設定方法 [Settings] ダイアログにて [[JavaScript]] -> [Code Quality Tools] -> [JSHint] を選択します。 [Enable] チェックボックスにチェックを入れることによって、JSHint が有効になり、コード検査をするときのルールオプションを細かく設定することができます。 さらに [Use config files] チェッ

In this short blog post we would like to put together all the tutorials we have so far on Node.js development workflow with WebStorm and other JetBrains’ IDEs. Hope that it would help you to get started with Node.js in WebStorm and master your workflow. Running and Debugging Node.js apps Getting started with Express Debugging Express apps Working with Jade templates in Express app List of availabl

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

TypeScript 1.5正式リリース。最新言語仕様を速習しよう！ TypeScriptを使うときに役立つ情報がまとまったチートシート（1クリックで試せるサンプル付き）。 本稿はTypeScript 1.5.3を対象に解説を行います（※2016/11/08追記：姉妹サイトの＠IT Insider.NETで「特集：TypeScript 2.0概説」 を掲載していますので、本稿と併せてご参照ください ）。 早いもので、TypeScript 1.0がリリースされた2014年4月3日から、1年以上が経ちました。今年の頭あたりに本記事のTypeScript 1.0版からの更新の依頼が来た時は、（記事改訂は想定していなかったので）びっくりしました。情報をメンテし、良い情報がWeb上に残るよう運営するのは大変であろうな、と想像に難くないですが、筆者としてはうれしい限りです。 さて、去る2015年3月5

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

ゴールデンウィーク中に5年ぶりにフットサルをしてまだ筋肉痛が癒えてないishidaです。社内でフットサル部を立ち上げてみましたが、参加人数が少ないので横浜近辺で一緒に球蹴りしてくれる人を募集中です。 さて今回は、JavaScriptのコーディングガイドラインを作成してくれるサービスのご紹介です。 JavaScript は HTMLやCSSよりも自由度が高いので、 ガイドライン化してコードを統一するのも手間がかかるかと思います。 また初めてガイドラインを作成する人にとっては、 JavaScriptのどこまでをルール化すればいいのかも悩む部分ではないでしょうか。 そんな時にお手軽でJavaScriptコーディングガイドラインを作成してくれるサービスがありました。 11の項目を設定するだけでJavaScriptコーディングガイドラインが作成できる jsCode http://jscode.org

Animal クラスを継承した Dog クラスです。Dog クラスの constructor メソッド内で super() と実行すると、継承元である Animal クラスの constructor メソッドが実行され、Animal クラスが持つメソッドを Dog クラスのメソッドとして使用できるようになります。 CreateJS のクラスを継承する場合 通常はこの super()メソッドだけで事足りるのですが、CreateJS のクラスを継承する際は super()メソッドではなくinitialize() メソッドを呼び出すことで実現します。 Bitmap クラスを継承した ImageButton クラス class ImageButton extends createjs.Bitmap constructor: (args)-> @initialize(args.img) @x = a

いわゆるソーシャルゲームのゲーム画面で、FlashCC の HTML5 書き出しを使って演出部分を制作し、アプリケーション側との繋ぎ込みを行った際のメモ。 どのゲームかはあんまり大きい声で言えない？ので、もし知りたければ twitter で聞いてもらえば。 今回は基本中の基本で、そもそも FlashCC がどういう形の CreateJS のコードを書き出すのかを細かく書いている。全3回くらいでお送りする予定です。 サンプルコードと言ってもただ MC を数個配置しただけだが一応 Github においてある。 サンプルでは test.fla というファイルを作り、とりあえず4つの各種インスタンス(ムービークリップ、ボタン、グラフィック、ビットマップ)を配置する。(今回は描画部分のみにフォーカスするのでサウンドについては省略) また、合わせてCreateJSの公式ドキュメントにも一通り目を通す、

はじめに スタイルガイド自体は各々のルールでかなりの数が存在しますが、 下記のおすすめ4選を押さえておけば問題ないと思います。 おすすめ４選 Google JavaScript Style Guide Googleによる、最も代表的なスタイルガイドです。 時間のない方は、これだけにでも目を通しておく事をおすすめします。 JavaScriptのBad Partsについても述べられています。 英語：https://google.github.io/styleguide/javascriptguide.xml 日本語：http://www38.atwiki.jp/aias-jsstyleguide2/pages/1.html Closure Linterを使用することで、チームでの統一がしやすくなります。 グーグル製JavaScript文法チェッカー jQuery JavaScript Styl

in Grunt Front Osaka vol.1

bowerを使ってjsをパッケージ管理したかったんです。 でも普通に使うと、bower_componentsから、ファイルを動かしたり、scriptタグをたくさん書いたり、いろいろめんどくさいです。 そんなときに、grunt-bower-concatがものすごく便利です。 このタスクを回すと、bower_componentsの中のjsを取り出し、結合して一つのjsにまとめてくれます。 また、その際、依存関係を解決しながら読み込み順などを設定して結合します。 jsをインストールする際、 bower install hoge grunt bower_concat とするだけで、JavaScriptのインストールが完了します。scriptタグを書いたりしなくても大丈夫。非常にbowerが手軽に扱えます。PHPのComposerくらいお手軽につかえます。 インストール npm install gr