ライトに使うVue.js | CodeGridこのシリーズではこれからVue.jsを使う人や、Webアプリケーションのプログラミングは担当しないけれど、Webサイトでもう少し複雑な仕組みを提供したい人向けに、気軽に導入できるVue.jsの使い方をご紹介します。
おすすめライブラリつまみ食い | 第16回 date-fns
おすすめライブラリつまみ食い 第16回 date-fns JavaScriptで日付を簡単に扱うことができるライブラリ、date-fnsを紹介します。似たような機能を持つライブラリのMoment.jsと比較すると、ビルドサイズや処理コストなどの面で利点があります。
TestCafe入門 | 第1回 TestCafeとは
TestCafe入門 第1回 TestCafeとは TestCafeはJavaScriptのEnd-to-Endテストを行うフレームワークです。ブラウザでの操作を自動化してテストを行いますが、WebDriverの個別インストールが不要で、環境構築が容易です。 はじめに TestCafeは、E2E（End-to-End）*でブラウザテストを自動化するためのフレームワークです。この記事では、TestCafe（テストカフェ）の紹介とテストの実際について解説します。 *注：E2Eテスト E2Eテスト（結合テスト）については、過去の記事を参考にしてください。 JavaScript開発のためのテスト入門 - 結合テスト | CodeGrid TestCafeの特徴 TestCafeは最初のコミットが2015年の4月、最初のリリースが2016年10月と比較的新しいE2Eテストフレームワークといえます。
一から始めるFirebase | CodeGrid
Googleが提供しているアプリケーションのためのバックエンドサービス、Firebaseの利用方法を解説するシリーズです。WebアプリケーションのバックエンドとしてFirebaseを使う方法を紹介していきます。
Falcorで実現する効率的なfetch | 第1回 Falcorとは
Falcorで実現する効率的なfetch 第1回 Falcorとは FalcorはWeb APIに対して新しいアプローチを試みるJavaScriptライブラリです。クライアントとサーバー間のデータのやり取りを、これまでよりも少ないリクエスト回数で、そして最低限のデータ量で行えるようになります。それはなぜか？ まず仕組みを解説します。 はじめに FalcorはNetflixによって開発されているJavaScriptライブラリです。このライブラリを導入することで、主にSPA（シングルページアプリケーション）形式のWebアプリケーションにおいて、クライアントとサーバーの間で行うデータのやり取りを、これまでよりも少ないリクエスト回数で、そして最低限のデータ量で行えるようになります。 Falcor: One Model Everywhere 導入には、クライアントサイドとサーバーサイド両方の対応が必
AWSを使った静的Webサイトの公開 | 第1回 Amazon S3の利用方法と料金
AWSを使った静的Webサイトの公開 第1回 Amazon S3の利用方法と料金 さまざまな場面で利用されるAmazon Web Services。このサービスの中から、フロントエンド・エンジニアにとっても扱いやすいAmazon S3を利用して静的なWebサイトを公開する方法を紹介します。まずはそのサービス概要と料金形態について詳しく見てみましょう。 はじめに 最近は、さまざまな場面でAmazon Web Services（以下、AWSと表記します）が利用されるケースが増えてきました。しかし、多くのサービスから構成されるAWSはどのように使ったらよいか、わかりづらいと思っている方も多いのではないでしょうか。 今回はAWSが提供しているサービスの一つであり、フロントエンド・エンジニアにとっても扱いやすい Amazon Simple Storage Service（Amazon S3、以下S3
仕様書の読み方 CSSプロパティ編 | 第1回 仕様表を読んでみよう
仕様書を読めると何がいいのか W3Cにある、CSSの仕様書を読んだことはありますか？ 実際にW3Cのサイトに見にいってみたはいいものの、英語がずらっと並んでいて思わずタブを閉じてしまった経験はないでしょうか？ この記事が、そんな苦手意識を持つ方が、CSSの仕様書を読み始める手助けになれば幸いです。 仕様書を読めるようになると、新しい仕様で何ができるようになるのかをいち早く知ることができます。また、安定した仕様ではあってもブラウザ間の動作が異なる場合に、正しくはどうあるべきなのかを知ることができ、場合によってはブラウザのベンダーにバグ報告をできたりします。 それと、これは気持ちの問題ですが、仕様を読んで身に付けた知識は、我流やサイトをちょっと読みかじったその場しのぎの知識より、自信を持って使えるという点がいちばん大きいと私は思います。 仕様書を読んでみよう W3Cのドキュメントは「仕様書」で
ECMAScript 2015の新機能 | 第10回 Symbol 1
HTML・CSSのコーディング、後にJavaScriptの設計や実装を主業務として経験を積む。キャンペーンサイトやコーポレートサイトの、動きと操作性に工夫を凝らしたUI実装を多く手がけている。複雑なWebアプリケーション実装における、コンポーネント的な考え方を念頭においたJSの設計を得意とする。2021年、退社。 著書に『JavaScriptエンジニア養成読本』（共著：技術評論社、2014年12月11日）がある。
ECMAScript 2015の新機能 | CodeGrid
このシリーズでは策定されたECMAScript 2015から新たに搭載された新機能のうち、今後、実装に影響を与えるようになるであろう注目の機能を解説していきます。（『ECMAScript 6の新機能』より改題）
実践！スマホサイトのviewport設定 | 第1回 viewportとはなにか？
実践！スマホサイトのviewport設定 第1回 viewportとはなにか？ viewportとは普段聞き慣れない言葉です。スマートフォン端末独特のページの表示方法に深くかかわっていて、デスクトップ環境では、意識する必要のなかった概念なのです。まずは、viewportの概念を理解するところからはじめましょう。 viewportとはなにか？ viewport（ビューポート）とは、日本語に訳すと「表示領域」という言葉がしっくりくると思います。 例えば、デスクトップ環境（PCなど）のブラウザなどでは、ブラウザウインドウの表示領域がviewportになります。 ページがviewportからはみ出た場合は、スクロールをしてviewportを変えます。 スマートフォンの場合はどうでしょうか。どのように表示されるのでしょうか？ デスクトップ環境と異なり、スマートフォンのディスプレイは相対的に小さく、1
そこが知りたい、Flexbox | 第1回 仕様を知る 1
Flexible Box Layoutでカラムレイアウト たとえば、左右にカラム分けされたレイアウトを作りたいとします。これをCSSで実現する方法は何通りも存在します。 過去にCodeGridで紹介したような*table-cellやinline-blockを利用したカラムレイアウトであったり、単純にfloatを使用したものであったり、display: grid;であったり……。 *注：これまでに紹介した記事 「display: tableの活用：フレキシブルな段組みレイアウト」 「display: tableの活用：フィットする特性と均等配置」 「display: tableの活用：流し込む方向の制御」 「inline layoutを使いこなす：カラムレイアウト」 方法は挙げればきりがないのですが、今回はCSS Flexible Box Layout Module（以下、Flexbox）に
できる！中央寄せ | 第1回 左右中央寄せ 1
Web制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。数多くのWebサイト、WebアプリケーションのHTML、CSS、JavaScript実装に携わってきた。受託案件を中心にフロント周りの実装、設計、テクニカルディレクションを行う。スケーラビリティを考慮したHTMLテンプレート設計・実装、JavaScriptを使った込み入ったUIの設計・実装を得意分野とする。 著書に『改訂版 Webデザイナーのための jQuery入門』（技術評論社、2014年11月14日）がある。 CSS Nite 2011ベストセッションにおいて、全170セッションの中から、ベスト10セッションに、CSS Nite 2013ベストセッションでは、全278セッション中、ベスト20セッションに選出。
ECMAScript 2015の新機能 | 第5回 Class構文 2
ECMAScript 2015の新機能 第5回 Class構文 2 Class構文を使ったクラスの継承の方法について解説します。ES6はClass構文があるため、従来の方法よりも、クラス継承のコードの書き方がとてもシンプルになっているのがわかります。
現場で使えるgulp入門 | 第1回 gulpとは何か
現場で使えるgulp入門 第1回 gulpとは何か さまざまな作業を自動化するビルドシステムgulpの基礎を解説します。第1回目は、gulpとは何か？ 自動化のメリットはどこにあるのか概観。インストールから簡単なタスクを走らせてみます。 はじめに このシリーズでは、JavaScriptで書かれたビルドシステムであるgulp（ガルプ）について、導入から使い方など、基本的な部分を解説します。 なお、記事執筆時点のgulpのバージョンは3.8.7です。 第1回目では、まず、なぜgulpのようなツールが必要なのか、ツールの背景に触れます。さらにgulpの概要と、環境設定を中心に解説します。 gulpとは gulpはNode.jsをベースとしたビルドシステムヘルパーです。以前CodeGridでも紹介したGruntと似た目的を持って作られたツールで、gulpを使えばさまざまな作業を自動化することができ
賢く使うBrowserify | CodeGrid
BrowserifyはNode.js製のツールで、Node.jsやnpmのモジュールをブラウザで実行できるようにするもの。現在ではモジュール間の依存解決などを行うためのビルドツールとして使います。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これから始めるVue.js 2.0 | CodeGrid
Webアプリ頻出実装を考える | 最終回 リクエストとデータキャッシュの最適化
そこが知りたい、Flexbox | CodeGrid
表の幅指定 | 第7回 CSS2.2の表幅の仕組み 2
マークアップ・エンジニアのためのSVG入門 | CodeGrid
