Async/Await: a Game Changer for Haters of Promise Chaining
If you became a frontend engineer after 2015, chances are that you have used or at least heard about Promise. As I have covered in my previous blog, Promise can help us specify sequential relations between operations in asynchronous programming in a readable and maintainable manner. Promise object in JavaScript has methods, such as then and catch, that can help us organize the sequential execution of operations in a pattern called Promise Chaining....The Whys and Hows of Promise in JavaScript
If you have done any web development after 2015, chances are that you have heard of the concept of Promise. It wouldn’t be an overstatement to claim that Promise is ubiquitous in modern-day front-end codebases. However, many web developers—especially those who do not have much experience in front-end development—have been using Promise without thoroughly understanding its inner working....React Hot Loaderで開発をさらに加速する
こんにちは！ Webエンジニアの吉田です。 先月16日にReact.js meetup × React Native meetupという180人ものエンジニアが集まる大規模なReact関連のイベントにてLT枠トップバッターで発表を行いました。 その時行った発表の「React Hot Loaderの導入」についてこれから詳しく説明します。 React Hot Loaderとは 従来のフロントエンド開発においてはBrowsersyncが一般的に用いられてきました。 Browsersyncはファイルの変更を監視して、自動でブラウザリロードを行い変更を反映させることができます。 しかしReact Hot Loaderはその利便性をさらに一歩前に進めます。 React Hot Loaderはファイル変更を監視して、stateを保持したままReactコンポーネントの変更をブラウザリロード無しで即座に反映する強力なロードモジュールです。 GitHub.io:React Hot Loader stateを保持したままReactコンポーネントの変更を反映をするということがピンと来ないかもしれませんので、まずは以下のデモ動画をご覧ください。 テキストボックスに入力した文字をstateに設定し、その下に表示するだけのシンプルなReactアプリケーションです。 左側のブラウザでテキストボックスに文字を入力した後、右側のエディターでcomponentを修正して保存します。 するとブラウザリロードが発生せずに即座に変更が反映されていることが分かります。 かつテキストボックス下の文字列は残ったままなので、stateの情報は保持されています。 もう一つデモをご覧ください。 今度は親コンポーネントが二つの子コンポーネントを持った状態で、色々とコンポーネントを変更してみます。 stateが保持されているので、子コンポーネントを一旦削除した後復元してもテキストボックスに入力した内容が表示されています。 このようにReact Hot Loaderはstateに依った処理を修正する際に非常に便利です。 なぜならブラウザをリロードすれば当然stateの内容は消えてしまうので、修正した箇所をテストする為にまずstateに設定するための手順を踏まなければいけません。 複数のパターンで修正をして確認したい時は余計に時間が掛かります。 React Hot Loaderを使用すればその手順は不要になるので、よりスピーディーに開発することが出来ます。 React Hot Loaderを導入してみよう では実際に導入してみましょう。 前述したようにReact Hot Loaderはあくまでロードモジュールです。 従ってWebpackなどのビルドツールでロードして使用することが前提となります。 今回紹介するのはgulp+Webpack+Browsersyncを組み合わせて実現する一例です。...勉強会を開催しました!! 「HTML5ゲーム開発ができるPlayCanvas初心者向け勉強会」
こんにちは、深瀬です。 先日、弊社で2回目の外部向けの勉強会を開催しましたので、その様子をご報告させていただきます。 今回は講師として平光氏をお招きして、PlayCanvasを使ってチュートリアルをなぞって簡単なゲームを作りました。 写真は、勉強会開始まで参加者の方々と歓談している弊社運営陣です。 毎回ウェルカムドリンクをお出しして、まったりとした雰囲気でお迎えしています。 内容 HTML5ゲーム開発ができるPlayCanvas初心者向け勉強会 PlayCanvasと平光氏の詳細については、以前投稿しましたのでそちらをご覧下さい。 当日使用した勉強会の資料と、参考リンクは以下となります。 勉強会のスライド デモ画面 ↑↑実際にスマートフォンで動かして見てみて下さい！！ 初めてのPlayCanvas(1) - Qiita 初めてのPlayCanvas(2) - Qiita 短い時間ではありましたが、みなさん真剣に聞いていらっしゃいました。 懇親会の様子 テーブルを囲ってみんなで乾杯！！ 前回のハンバーガーにつづき、今回は万かつサンドを提供させていただきました。 今回ご用意した万かつのかつサンド、絶品でしたよ（＾◇＾） 弊社では、瓶ビールもいくつか種類を取りそろえております。 参加者の皆様にも、好評をいただきました。 弊社代表の中村も参加し、楽しい会を開く事ができました。 弊社に興味を持っていただいた方もいらっしゃったみたいで、大変うれしいです。 皆様ありがとうございました。 おわりに 弊社は今後も社外へ向けた勉強会を開催していく予定ですので、 ご都合のつく際は是非ご参加ください。 勉強会テーマについても、ご希望を多数いただいておりますので、期待していいて下さいね。 最後になりますが、ISAOでは一緒にサービスを作ってくれるエンジニアを絶賛募集中です。 もし少しでもご興味を持っていただけましたら気軽に弊社に遊びにいらしてください。 https://www.colorkrew.com/recruit/...GulpでCSS/JavaScriptコンパイル環境を構築する ─ CentOS編
従来、WEBフロントエンドの主要アセットであるCSSとJavaScriptはソースレベルでなかなか管理しづらく、すぐにカオスな領域に突入して保守しづらくなっていました。そのカオスな領域にあるCSSやJavaScriptをソースレベルでもっと保守管理しやすいように生み出されたのがGruntやGulpというコンパイルビルドの仕組みです。今の世の流れ的に、フロントエンド開発ではSCSS（SASS、LESS等）、CoffeeScriptなどでCSSやJavaScriptのコーディングを効率化しつつ、同時にソースの保守管理をし易くするという開発手法がデフォルトになってきました。 実際にLESSで変数を使ったCSSスタイリングや、コード量が劇的に少ないCoffeeScriptでJavaScriptを書いてみると、圧倒的なコード生産性の高さに、もはや今までのベタなフロントエンドコーディング手法は改めざるを得ないという境地になります。 ──と云うことで、早速CSS/JavaScriptのコンパイルビルドを行う環境をサービス提供用のCentOSサーバに作ってみようかと思います（ローカル開発環境としてのWindowsマシンへの導入はこちらの記事を参照）。 ちなみに、Gulpは「ガルプ」と読みます。私は最初「グループ」とか読んでました…（笑） Node.js のインストール まずはGulpはnode.jsのモジュールなので、node.jsをインストールしないことには始まりません。そんな訳で、node.jsをインストールするのですが、まずはnode.jsやライブラリのバージョン管理モジュールであるnvmからインストールしていきます。 下記のように、nvmをGitHubからクローンして同梱のシェルでインストールします。 $ git clone git://github.com/creationix/nvm.git ~/.nvm $ . ~/.nvm/nvm.sh 次に、node.jsをインストールするのですが、その前に現在のnode.jsの安定バージョンを Node.jsの公式サイト を確認しましょう。TOPページの真ん中あたりに「Current Version: v0.12.2」というように記載されているので、そのバージョンをインストールするのが無難です（2015年4月7日時点のNode.jsの安定バージョンは0.12.2でした）。 インストールバージョンが決定したら、nvmでインストールします。 $ nvm install v0.12.2 $ node -v v0.12.2 バージョン確認してインストールバージョンが表示されればOKです。 最後に、自分のコンソール環境でnode.jsが利用できるように .bashrc に以下の記述を追記しておきます。 $ vim .bashrc $ cat .bashrc # .bashrc # Source global definitions if [ -f /etc/bashrc ]; then ....GulpでCSS/JavaScriptコンパイル環境を構築する ─ Windows編
いまさら感が強いんですが、世の流れ的に、フロントエンド開発ではSCSS（SASS、LESS等）、CoffeeScriptなどでCSSやJavaScriptのコーディングを効率化しつつ、同時にソースの保守管理をし易くするという開発手法がデフォルトになってきました。私はその辺の技術の取り込みがおっくうで、ついついCSSやJavaScriptを素でコーディングしてしまったりしていたのですが、最近やっている Ruby on Rails の開発でCoffeeScriptでJavaScript書いてみて、圧倒的なコード生産性の高さに、もはや今までのベタなフロントエンドコーディング手法は改めざるを得ないという境地に達しました（いやはや、ようやくですねぇ…）。 ──と云うことで、早速CSS/JavaScriptのコンパイルビルドを行う環境を業務マシンであるWindowsマシンに作ってみようかと思います（WEBサービス側のCentOS(Linux)環境への導入はこちらの記事を参照）。 なお、なぜビルドツールをGruntではなくGulpにしたかというと、今どきのトレンドはGulpの方かなぁ…という漠然な理由だったりするんですが、まぁ、Gruntより設定ファイルが記述しやすく、複数リソースの設定があっても設定が煩雑化しないというメリットもあるからです。 Node.js のインストール まずはGulpはnode.jsのモジュールなので、node.jsをインストールしないことには始まりません。そんな訳で、node.jsをインストールします。 インストールは簡単で、Node.jsの公式サイトからインストーラーをダウンロードするだけです。私の業務用マシンは「Windows7（64bit版）」だったので、node-v0.12.0-x64.msi というファイルが対象になります（2015年3月4日時点のNode.jsのバージョンは0.12.0です）。 インストーラがダウンロードできたら、早速起動させます。いくつか対話が発生しますが、特に注意しないといけないようなインストール設定はありません。 イントールが完了したら、コマンドプロンプト（もしくは、パワーシェル）から、Node.jsのバージョンを確認してみます。 > node -v v0.12.0 ついでにバンドルでインストールされているnpmのバージョンも確認してみます。 > npm -v 2.5.1 これでNode.jsのインストールは完了です。 Gulp のインストール 次にGulpをグローバルにインストールします。 > npm install -g gulp > glup -v [**:**:**] CLI version 3.8.11 これでインストール完了です。もしインストールに失敗するようなら、 > npm install -g gulp --mscs_version=2012 ──とオプションを付けてみると上手くいくかもしれません。 次に、ローカルにインストールします。 ローカルにインストールするにあたっては、npmの初期化を行う必要があります。まず任意にgulpを実行したいディレクトリを作成します。この記事では、C:\npm\node_modules\gulp というディレクトリを新たに作成しています。...iframe(スクロールバー無し+クロスドメイン)のページ内リンク
あまり…ほとんど需要が無いと思いますが、以前詰まった iframeのページ内リンクについて書きます。 あるwebサービスで別途作成したhtmlコンテンツを表示させるためにiframeを使用しました。 その際にhtmlコンテンツでページ内リンクが効かないという問題が発生しました。 iframeにスクロールバーがあれば通常の方法でページ内リンクができるのですが、 1枚のページであるように見せるため、スクロールバーを表示させることはできません。 また、クロスドメインの場合、親子間でオブジェクトの操作ができないようです(XSRF防止のため) 色々試した結果、javascriptのpostMessage(子 - htmlコンテンツ)とaddEventListener(親 - 元のwebサービス)の組み合わせで実現できました。 子から親にpostMessageでスクロール先のY座標を通知 ↓ 親がaddEventListenerで登録したコールバック先でスクロール処理 kodomo.html(子) <html> <head> <script type="text/javascript"> $(document).ready(function(){ // 親フレームにスクロール(=ページ内リンク)する命令を送る $(".PageNaiLink").click(function(){ var parentFrame = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined); var target = $(this).attr("href"); if(typeof parentFrame != "undefined"){ // 【メインの処理】 // messageイベントで処理を識別する文字列(この場合は'page_nai_link')と飛び先のy座標を送る // ※この場合、リンク元のタグのhref属性は'#リンク先'のみ parentFrame....フロントエンド開発ツールマップみたいな何か。JavaScriptフレームワーク、AltJS、CSSプリプロセッサ、HTMLテンプレートとかまとめ。
2月1日より社員になりましたくぼたなるひとです。初ブログです。つーかいっそ今日から社員なので初業務です。 ちなみにデザイナーです。でもフロントエンドエンジニアになりつつあります。でもデザイナーです。 はい、意味不明な前置きはやめて本題です。 今日はフロントエンド開発ツールについて概観してみようと思います。 「やっぱりフロントエンドエンジニアじゃねえか！」とか言わないでください。 HTML/CSS/JavaScriptだよね。 フロントエンド開発の人が扱うものといえば、基本はHTML/CSS/JavaScriptという認識ですよね。 その他ツールとしてはブラウザとエディタさえあれば、極端ですが即開発できます。簡単ですね。 およそ間違ってないですね。 こんな感じ。 フロントエンド開発に携わっていない方の認識はざっくりとこんな感じだと思います。 およそ間違ってないですね。(2回目) ベストプラクティスを追い求めてみた。 さて、では開発のベストプラクティスを求めていくとどうなるでしょうか。 ぱーっと思いつく限りで一覧っぽくしてみようと思いました。 こんな感じ は？ 嘘だ・・・・・・夢だろ・・・・・・これ・・・・・・夢に決まってる・・・・・・・・・！ ところがどっこい・・・・・・夢じゃありません・・・・・・！現実です・・・・・・！これが現実です・・・！ フロントエンドエンジニアに求められているものは右肩上がりに増え続けています。もちろんお給料はきっと据え置きです。世の中無情である。 言うまでもなく、技術を追い続けるか、知らんぷりするかは個人の裁量に委ねられる訳ですが。 どうしてこんなことになってるわけよ？ ／)( ◕ ‿‿ ◕ )(＼ わけがわからないよ 要因1 - Webのリッチ化＆モバイル化 Ajax 非同期通信の使用したUI構築技術。ページ遷移せずにデータを持ってこれる。 これのおかげでGoogleMapsが使えると思えば感謝せずにはいられない。 今ではページ遷移しないでいろいろできるなんてふつうの感覚になっているが、それくらい当然のように恩恵を受けている技術です。 他にもすごーくたくさん増えたものがあります。 クロスサイトスクリプティング クロスサイトリクエストフォージェリ SQLインジェクション 厨二病っぽい感じありますね。心がくすぐられます！ 全部セキュリティ問題です。 統計的に見ると3つトータルで1,000件/年間くらい起きてるらしいです。それまでほとんどなかったのに。統計データのグラフとかどっかから引用したかったのですが、じょうほうじゃくしゃなので見つけられませんでした( ◠‿◠ )うーむ 詳しく知りたい人は以下のリンクへどうぞ。とてもよくまとまっています。 Ajaxの脆弱性を理解する - IBM developerWorks HTML5/CSS3の登場 HTML5はこれまでのバージョンと比べて新しい指針を打ち出しました。ウェブアプリケーションのプラットフォームになろうとしています。直近の一例として昨日ついにYouTubeの動画がFlashベースからHTML5ベースに変わるというニュースが発表されました。 さらにCSS3も登場したことで、フロントエンドでできることが増えています。...JavaScriptデバッグ用オブジェクト「console」による落とし穴
[caption id=“attachment_267” align=“alignleft”] ‘console’が宣言されていません(IE8)[/caption] 最近のブラウザはほぼすべてデバッグ用の検証機能が付いていて、インクルードされた外部ファイルや適応されたスタイルなどを見れるうえに、JavaScriptやjQueryなどで動的に変更されたHTMLまでもリアルタイムに見ながら動作確認が行えるのでサイト制作がかなり楽になって来ています。 特にJavaScriptでは、consoleオブジェクトが追加されたことで、今までalert()メソッドで処理をいちいち止めながら動作確認していたところを、デバッグ用の出力をすべて裏のブラウザコンソール側に集約させてフロントエンドの処理を止めずに検証できるようになったのはすごく便利です。 このconsoleオブジェクトですが、今までJavaScriptの開発でalert()メソッドを使って来た人には共感してもらえると思うのですが、かなり使い勝手が良いです。すべて裏側で処理されて出力が表に出ないし、プログラムの流れも止まらない、ブラウザの実装にもよりますが配列やオブジェクトの中身まで簡単に一覧化表示できます。私的にもはやJavaScriptのコーディングには必須のオブジェクトになっています。 ただ、使い勝手が良過ぎるところに「落とし穴」もありまして、デバッグコードをそのままJavaScript内に残したままサイトをパブリッシュしてしまう…なんて事も多いです（…私だけ？）。 そしてそのデバッグ用のconsoleオブジェクトがたった一つ残っているだけで、consoleオブジェクトを持っていない古いブラウザでエラーが起こってしまうのです（当たり前ですが…）。 特にIE8のブラウザはやっかいでして、consoleオブジェクトを持つIE9で動作検証している時などが「落とし穴」にはまります。 というのも、IE9で追加された開発者モード（[F12]で起動します）は便利で、IE7やIE8のエミュレーション機能も持っているのですが、本来IE8では実装されていないconsoleオブジェクトに対するエラーをスルーしてしまいます。元々のブラウザであるIE9がconsoleオブジェクトに対応していて、エミュレーション時に内部的にその辺のスイッチングをしないからなのでしょうが、これがデバッグ用のconsoleオブジェクトがJavaScript内に残っていても正常処理されてしまうため、「IE8でも正常に動くJavaScript」としてそのままパブリッシュしてしまうケースがありえます（実際、私がそうでした）。 ──で、リリース後に純粋なIE8ユーザーからエラー報告が出るわけです。 でも、自分のIE9のエミュレーション機能ではバグらない…「あれ？なんで？」となるわけですね。 純粋なIE8のエラー内容（"「console」オブジェクトが定義されていない"旨）を伝えてもらえればすぐに気がつけるのですが、ユーザーさんはエラーの詳細なんて確認してくれるのが稀なので、「ここが動かない」「ここでエラーになる」というような断片的な報告が来ます。実際はconsoleオブジェクトの記述があることによって、それ以下に記述してある「一部の機能が動かなくなっている」のですが、こういう場合、原因がなかなか特定できずにかなり困惑することになります。 まぁ、consoleオブジェクトに限らず、デバッグ用の記述をリリースするソースコードに残すな！…というのがセオリーなのですが、後で切り戻すかも、機能追加とかあった時にまたデバッグするかも、とか考えてあえて残してしまうということもあるのではないでしょうか？ そんな時のために、consoleオブジェクトに対応していないブラウザでもエラーにならない実装をしておくと安心です。 さらに、consoleオブジェクトの使い勝手も殺さないように独自関数化していつでも呼べるようにしておきます。 [code lang=“js”] function debug(string, enable_flag){ if(enable_flag){ if(typeof console != ‘undefined’){ console.info(string); }else{ alert(string); } } return true; } [/code] そして、呼び出したい場所で、 [code lang=“js”] debug(“表示したい文字など”, true); [/code] と記述すれば、consoleオブジェクトが有効なブラウザならconsole.info()メソッドが実行され、無効なブラウザならalert()メソッドが実行されてダイアログが表示されます。もしデバッグ機能を一時的に無効化したい場合は第2引数に"false"を指定してあげれば、なにも処理されません。...CSS3エディッター
CSS3で追加されたプロパティは構文が長いうえに、ブラウザ毎に実装差異があるためベンダープレフィックスを付けて記述分けする必要などもあって、マークアップするのがなかなかに大変です。「Adobe Dreamweaver」などのCSS3に対応しているオーサリングツールを使えばだいぶマークアップが楽になりますが、ツールを持っていないクライアントの担当者さんやツールの知識がないマークアップエンジニアには対応できません。 そこで、WEBベースで簡単に利用でき、視覚的で、設定が簡単なスタイルシート自動生成ツールを作ってみました。とあるスマートフォン専用のサービスにて、そのデザインテンプレートをWEB上から編集できるように…と開発したので、PC向けサイトやそのサービス以外のサイトに対応したオールラウンドのCSSエディッターにはなっていないのですが、CSS3でマークアップが面倒なグラデーションやボックスシャドウ、丸角などのコードを視覚的にエディットできて自動で吐き出してくれるので、CSSの特定プロパティの補助的な編集ツールとしては使えるかも知れません。 （※CSS3の全てのプロパティには対応していません。CSS2.1以前のプロパティにもいくつか対応しています。） 利用コード：HTML5、CSS3/CSS2.1、JavaScript、jQuery、PHP CSS3エディッター...