Vue.jsでカッコいいグラフを手軽に作るChart.jsのラッパー3つ
Webアプリを作るときに便利なグラフ描画ライブラリ「Chart.js」。最近人気のVue.jsでChart.jsを使うための3つのラッパーをデモを交えて紹介します。 現代のWebサイトとWebアプリにおいてチャートは重要な位置を占めています。チャートは、文字だけでは表せない情報を表現して、理解しづらいデータの意味を分かりやすく表現します。 Chart.jsとVue.jsを用いて、さまざまな型のチャートでデータを表現する方法を解説します。 Chart.jsはシンプルで柔軟性に富んだ開発者、デザイナー向けのJavaScriptのチャート作成ライブラリーです。HTML5のcanvas要素でいろいろな種類のチャートが描けます。Chart.jsを復習するならこちらがオススメです。 Vue.jsはプログレッシブなJavaScriptフレームワークです。ここではChart.jsと一緒にチャートを作成しま
ノンプログラマーがJavaScriptを初めて学ぶときにありがちな9つの失敗 - WPJ
Webデザイナーにとってもっとも身近なプログラミング言語といえばJavaScriptですよね。ところがいざ勉強を始めたものの挫折してしまった…という人のために、典型的な失敗例と学習のコツを教えます。 JavaScriptの学習をしても挫折する人の多くは、「JavaScriptは分かりにくい」「自分はWeb開発に向いていない」と言います。悲観的になってあきらないでください。アプローチの仕方を変えることが大切です。 この記事では、多くの人が学習中に経験する失敗の対処法を取り上げます。JavaScriptだけではなく、Web開発全体に当てはまる内容なのでぜひ活用してください。 失敗その1：始める前にあれこれ調べすぎる JavaScriptの学習を始める前に、たくさんのことを調べたくなるかもしれません。ちょっと調べるだけでJavaScriptがどれだけすばらしいものか、逆にいかに悪いものかといった
あなたが知らないJavaScriptの便利すぎるショートハンド19選
日頃書いているJavaScriptをもっと短く書く方法を知っていますか？ 目からうろこ、すぐに使えるJavaScriptのショードハンドを紹介します。 JavaScriptを使うすべての開発者に向けて、私が長年かけて身につけたJavaScriptのショートハンド（短縮記法）を資料にしました。コードの違いが分かるように通常の記述方法も併記しました。 1．三項演算子 if-else文を1行に収めた短縮記法です。 通常const x = 20; let answer; if (x > 10) { answer = 'is greater'; } else { answer = 'is lesser'; } ショートハンドconst answer = x > 10 ? 'is greater' : 'is lesser'; 従来のif文を1行に収めることも可能です。 const big = x >
実用段階に来た次世代CSSレイアウト「Grid Layout Module」ってなに？
ChromeとFirefoxにデフォルトで実装された、CSS Grid Layout Module（グリッドレイアウトモジュール）。その基本的な機能と使い方を、デモを交えて。 Webアプリケーションはいよいよ複雑化してきています。そのためフロートを使ったハック的なソリューション抜きで、もっと自然に、簡単に高度なレイアウトを実現できる方法や、手間の省けるテクニックが必要とされています。CSS Grid Layout Moduleを使って、レイアウト作成における期待の新しいソリューションを実現できます。 本記事ではこの比較的新しいCSS機能について紹介します。現時点でのブラウザーの対応状況を説明し、例を使ってCSS Grid Layout Moduleがどのように動作するかを説明します。 CSS Grid Layout Moduleとは？ Grid Layoutの背後にある中心的な概念は、We
こんなにあった！UIデザイナー向けアニメーションライブラリー最新ベスト9
Webサイトをおしゃれに、かっこよく演出するアニメーション系JavaScriptライブラリー。デザイナーにも使いやすいライブラリーをまとめました。デモを見るだけでもアイデアがひらめくかも？ Webデザインはこの10年間で大きく変わりました。2007年頃は雑誌のように静的なレイアウトが主流でしたが、2017年には数千のパーツが連動して伸縮しながら移動するデザインも可能になりました。 これから、優れたUIデザイナーになるにはWebアニメーション技術に関する知識も必要です。 この記事ではUIデザイン向けの良質なアニメーションライブラリーを9つ紹介します。現時点での最新の情報と、各ライブラリーの強みや弱み、向き不向きをまとめたので、タスクに適したライブラリーを選んでください。 「コーディングプロ級」の開発者ではなくコーディングもこなせるUIデザイナーの視点で各ライブラリーを評価しました。CSSだけ
10年遅れたJavaScriptの知識をざっくり10分でアップデートしよう
久しぶりにJavaScriptを勉強しようと思ったら、すっかり浦島太郎状態だった……なんて人も多いのでは？ モダンなJavaScriptの知識をコンパクトにまとめました。 JavaScriptを取り巻く環境がどんどん変化しています。新たなツールやフレームワークが生み出されているだけでなく、言語そのものがES2015（ES6）の登場で大きく変わりました。JavaScript開発の学習がいかに難しいか愚痴をこぼす記事がたくさんありますが、無理もないことです。 本記事ではモダンJavaScriptを紹介します。JavaScriptの進展を解説し、フロントエンドWebアプリケーションを作るために使われているツールや手法の全体像を確認します。JavaScriptを学び始めたばかりの人や、以前は使っていて数年間離れたため変化を知りたい人はぜひ読んでください。 Node.jsについて Node.jsは
片隅からの大逆転劇～Twitter・異例の新聞記事・地方の劇場で高齢者にも届いた (1/4)
〈前編はこちら〉 親子三代で鑑賞する光景も。高齢者にまで届いた理由は？ 映画のヒットの仕方に変化が起きている。かつては映画のヒットには、宣伝と映画館というリソースを大規模に展開することが不可欠だった。ところが、近年は、口コミで徐々に評判が広がり、それに応じて上映規模を拡大しロングラン上映になっていくケースも多い。『ガールズ＆パンツァー 劇場版』『KING OF PRISM by PrettyRhythm』『聲の形』など、アニメジャンルにおいては特に顕著だ。提供側があらかじめ充分なリソースを用意するのが“トップダウン型”だとすれば、観客側からの反応で徐々に拡大していくのは“ボトムアップ型”だと言える。 『この世界の片隅に』も、観客からの発信が顕著だ。プロジェクトは監督と数十名のファンから始まり、上映館数も63館というスタートだった。 それがなぜ上映館数累計300館超、観客動員はおよそ200万
いまさら聞けない、HTML5カスタムデータ属性の基本と使いどころ
HTML5のマークアップ仕様で追加された「カスタムデータ属性」。でも何のためにあるのか、どう使うのか、説明できますか？ この記事ではHTML5カスタムデータ属性の使い方を説明します。また、Web開発者の仕事に役立つユースケースも紹介します。 なぜカスタムデータ属性か？ 多くの場合、DOM要素が異なれば、それに応じた情報を格納する必要がでてきます。そういった情報は読者にとっては不必要かもしれませんが、開発者にとっては簡単にアクセスできれば仕事がずっと楽になります。 たとえば、Webページにいろいろなレストランを載せたリストがあるとします。レストランで出される食事のタイプやレストランまでの距離についての情報を格納する場合、HTML5が登場する前は、 HTMLのclass属性を使っていたと思います。もし、ユーザーが特定のレストランについて知るために、レストランのidも格納する必要が出てきたらどう
フロントエンド開発者が実践したい、アクセシビリティに配慮したJSを書くコツ
JavaScriptを使うことが当たり前になったいま、HTMLだけでなくJavaScriptを書くときにもアクセシビリティに配慮する必要があります。 JavaScriptコンポーネントのアクセシビリティを高め、ユーザーがWebサイトやWebアプリをより快適に使用できるようにするためのコツを紹介します。 以前の記事『Writing HTML with accessibility in mind（アクセシビリティに配慮したHTMLを書く）』で、どうしてWebアクセシビリティについて考えるようになったのか、また、どのように学んだのか説明しました。そして、マークアップを改善して、Webサイトのアクセシビリティを高めるためのコツを紹介しました。中には基礎的な内容も含まれていますが、どれも価値のあるものです。こうしたコツをすべてまとめると、フロントエンド開発において特に重要な2つの不文律ができあがりま
JavaScriptの2016年：フロントエンド開発者が押さえるべき重大トピック
相次ぐモダンなフレームワークの登場、脱jQueryの動き、ECMAScriptの進化など、SitePointの常連ライターが2016年のJavaScript事情を振り返ります。 2016年は、見方によっては歴史的であり、奇妙でもあり、楽しくもあり、恐怖でもあった年でした。JavaScriptだけに絞ると、ほかの大きな出来事に比べれば取るに足りない変化に見えますが、開発者にとっては重大な出来事でしょう。 JavaScriptの人気はとどまるところを知りません。すべての人に好かれる言語仕様ではありませんが、10年前のように馬鹿にされることはほとんど無くなりました。個人的にはJavaScriptが大好きです。そう、あのもどかしかった初期の頃からです。C++やJava、あるいはPHPから移ってきた人は最初は戸惑うでしょう。JavaScriptは取っ付きやすく見えますが、実はそうではありません。でも
ReactとAngularのいいとこ取り？ 2017年こそ学びたいVue.jsの始め方
Angular、Reactと並んで海外で人気が高まっている「Vue.js」。ReactとAngularの開発経験がある著者がVue.jsをチュートリアルを通じて特徴をまとめました。2017年、新しく学び始めるきっかけにどうぞ。 2016年9月、人気のJavaScriptフレームワークVue.jsがv2をリリースしました。それ以来ぜひ使ってみたい、どのようなものか知りたいと思っていました。AngularとReactを使い慣れた者の1人としては、Vueが似ているところや違うところも知りたかったのです。 Vue.js 2.0はすばらしいパフォーマンスを誇ります。データサイズが比較的小さく（バンドルされるVueのランタイム版は一度最小化してgzip圧縮したら16KBしかありません）、Vueのvuexや、vue-routerのような付属の状態管理ライブラリーもアップデートされました。1つの記事ではと
ASCII.jp：1位は意外なあのライブラリー!? 2016年話題になったJavaScript関連記事ベスト20
React、Vue.jsなどの人気ライブラリから、エラー処理やコメントの書き方まで。いろいろあった2016年のJavaScript関連の人気記事、ベスト20をKADOKAWAが運営するオンラインメディア「WPJ」からアクセス人気順に紹介します。気になる1位は……？
便利すぎてしびれた！あなたが知らないCSS関数トリック8選
どんどん進化するCSSの中でも、意外と知られていないのがCSS関数。アイデア次第で実用的で応用の効くCSS関数を、もっと使ってみませんか？ CSSはWeb開発者が思っているよりもっとたくさんの可能性を持っています。スタイルシート言語は年々大きく進化を続け、JavaScriptなしでもブラウザーでさまざまな機能をさせるまでになっています。この記事では、JavaScriptをまったく使わない8つのCSS関数の賢いトリックに注目します。 1.軽量CSSツールチップ たくさんのWebサイトがツールチップを実装するのにまだJavaScriptを使っていますが、実はCSSのほうが簡単です。一番シンプルなのはツールチップテキストをHTMLコード内のデータ属性に記述する方法です（例：data-tooltip="…"）。このマークアップを使って、次のコードをCSSに記述すれば、attr()関数に与えられた値
セミコロンは省略？人気スタイルガイドに学ぶJavaScriptのコーディング規則
インデントにタブとスペースのどちらを使うのがいい？ JavaScriptにセミコロンは付けるべき？ JavaScript Standard Styleを使えばそんな論争にけりがつくかもしれません。 最近、注目を集めている@ferossのJavaScriptスタイルガイド、JavaScript Standard Styleを紹介します。チーム内での開発が円滑になり、プログラミングがより楽しくなります。 JavaScriptスタイルガイドのコーディング規約は、タブとスペースのどちらが良いかといった不毛な議論を無くし、コードに一貫性を持たせてくれます。JSLintやJSHint、ESLintといったLinterで使用できる多くのスタイルガイドのうちの1つです。 もしLinterが分からなければ、SitePointの記事『A Comparison of JavaScript Linting Too
Ruby超入門（前編）
こんにちは。 この連載では、ちょっと変わったRuby入門を書いていきます。 想定読者は、Rubyを学びたいプログラミング初心者です。 Ruby以外の言語でプログラミングしたことがあると理解がはかどると思いますが、 Rubyを知らなくてもわかるように、なるべく丁寧に説明していくつもりです。 Rubyをある程度知っている読者には、最初の数回は退屈かもしれませんが、 回を重ねていくにつれ、より深くRubyを知ることができるはずです。 Rubyとは？ Rubyは「プログラミング言語」です。 プログラミング言語とは、コンピュータにやらせたい仕事を書くための言語です。 つまり、Rubyを覚えて、Rubyでコンピュータへの指示を書けば、 コンピュータはその指示を実行してくれます。 この指示書のことを「プログラム」と言い、特にRubyで書かれたプログラムを「Rubyプログラム」と言います。 ところで、Ru
「うわっ、そのコード変態的すぎ…」と叫びたくなるCSSトリック10選
多少複雑なデザインでも、画像や JavaScript には頼らず、CSS で実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。 https://speakerdeck.com/ixkaito/bian-tai-de-css-torituku ということで、「変態的CSSトリック」が流行っているようなので、JavaScriptや画像を使わない変態的なCSSテクニックを探してみました。何を持って変態的とするかは個人の性癖によるところが大きいので、あくまでも主観ですが。 CSS counterで数字を計算 実はCSS 2からあるcounter系のプロパティ。順番に番号を振れる便利なプロパティですが、意外とマイナーな存在では？ 次のデモは、リンクの数だけページネーション番号を自動的に付与するもの。うん、便利ですね。 え、でもこれだとノーマルっぽい？ じゃあこちらでどうでしょう。
WordPressコアコントリビューターに聞く「ぼくのかんがえた最強の開発環境」
WordPressで開発をするなら、いまどきどんなツールを使うのがいい？ WordPress専門のデベロッパーであり、コアコントリビューターでもあるMatt Geriさんがおすすめるする、最高の開発環境とは？ 近年、WordPressによる開発は大きな進展を遂げています。特に、ツールに関しては。以前は、WordPressでサイトを構築しようものなら、ほぼ確実にMAMP/WAMPのローカルホスティングの設定をしなければならず、それはもう悩みの種でしたよね。ひょっとしたら、本番の状態でサイトの開発を進めなければならなかったりしました。 そう、私もその一人でした。 幸い、時代は変わり、いまではそんな頭痛の種や反復作業を取り除くツールが出てきました。 WordPress開発業者としてフルタイムで開発をしていた私は、WordPressから離れて丸3年後の2015年12月、再びフルタイムのWordPr
やばっ！CSSの先祖返りで消耗したデザイナーにはビジュアル自動化テストがおすすめ
CSSを修正したらデザインがいつの間にか先祖返りしていたり、別の部分に影響して崩れてしまったり…そんなトラブルを防ぐのが、ビジュアルリグレッション（回帰）テスト。変更したらテスト。これからの常識になりそうです。 重要な開発プロジェクトに携わるときに、あなたはテストの重要性に気づくようになるでしょう。経験の度合いによって突然、もしくは時間をかけて徐々にその重要性に気づくかもしれません。テストにはさまざまな方法があり、独立したコードをテストするときのユニットテストから、システムの各パーツがどのように同時に動作するかを確かめるための結合テストや機能テストまであります。 この記事では一般的なテストの概要ではなく、やや特殊で比較的新しい取り組みである「ビジュアルリグレッション（回帰）テスト」について説明します。 ビジュアルリグレッションテストは、Webページをテストする方法の1つです。ある要素やテキ
jQueryの次に学びたい！D3.jsはWebデザイナーの最高の武器になる
え、「D3ってグラフ描くライブラリーでしょ？」ですって？ それだけではありません。あらゆるデータを魅力的に見せる「データビジュアライゼーション」は、Webデザイナーの表現の幅をさらに広げてくれそうです。 本記事はMichaela Lehr、Tim Severienが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。 D3.jsはデータに基づいてドキュメントを操作するJavaScriptライブラリです。D3.jsはHTML、SVG、CSSを使ってデータを活用します。 私がおすすめする、Web制作者が学ぶべきJavaScriptライブラリーは、jQuery、Underscore.js、そしてD3.jsの3つだけです。この3つのライブラリーは、新しい方法でコードを考えることができます。jQueryを使うと少ないコードでDOM
もうすぐIoT案件がやってくる!?フロントエンド開発が備えたい5つの視点
「IoTなんて自分の仕事とは関係なさそう」なんて言わないで。スマートフォンの登場がWeb制作の常識を変えたように、IoTだってフロントエンド開発者やデザイナーが扱う仕事になるかもしれません。 Word Wide Webは日々進化し、27年におよぶ歴史の中でその形は変化してきました。その歴史の中でコンテンツの表示やスタイリングの方法もしばしば移り変わってきました。最近ではレスポンシブWebの登場が大きな変化として挙げられるでしょう。レスポンシブWebは、さまざまなブラウザーとデバイスのサイズに適応させる、1つのWeb（One Web）のアプローチです。 Internet of Things（IoT：モノのインターネット）に対応したデバイスは常に増え続けています。たとえば、Raspberry Pi、スマートウォッチ、声だけで操作できるモバイルデバイスなど、たくさんあります。レスポンシブWebの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
