このページの本文へ

Vue.js、Chart.js、D3.js、Reactなどなど

jQueryの後に学びたい最新JSフレームワークまとめ

2016年10月19日 18時00分更新

Web Professional編集部

  • この記事をはてなブックマークに追加
本文印刷

jQueryを「卒業」して次へ進みたいWeb制作者のために、Vue.js、Chart.js、D3.js、Reactなどの最新フレームワークについての記事を「WPJ」の記事の中から紹介します。

1.シンプルで触りやすい、Vue.jsから始めるアプリ開発

01.png

jQueryはもうしんどい…フレームワーク初心者ならVue.jsから始めてみたら?(WPJ)

jQueryは超便利。でも、ちょっとアプリっぽいものを作るには見通しも悪いし、後々のメンテナンスも大変…。Angunlar.jsやReact.jsよりもシンプルで触りやすい、Vue.jsから始めてみてはいかが?

2.シンプルグラフならChat.jsにおまかせ

02.png

カッコいいグラフがむちゃくちゃ簡単に描ける!Chart.js 2.0がスゴい(WPJ)

データビジュアライゼーション系のライブラリーといえば、D3.jsが有名。でも、シンプルなグラフをWebで描くだけなら、もっと手軽なChat.jsを使ってみてもいいかもしれません。

3.デザイナー必見、データの可視化に役立つD3.js

03.png

jQueryの次に学びたい!D3.jsはWebデザイナーの最高の武器になる(WPJ)

え、「D3ってグラフ描くライブラリーでしょ?」ですって? それだけではありません。あらゆるデータを魅力的に見せる「データビジュアライゼーション」は、Webデザイナーの表現の幅をさらに広げてくれそうです。

4.D3.jsはグラフだけじゃない、野菜畑で初心者向け解説

04.png

グラフ描くだけだと思ってない?D3.jsのデータバインディングがやっとわかった(WPJ)

イケてるグラフが描けると人気のJSライブラリー「D3.js」。でも、グラフを描くライブラリーならほかにもありますよね。人気の背景にあるデータバインディングについて、なぜか野菜畑を使って初心者向けの解説を試みてみました。

5.Reactアプリ「高階コンポーネント」の考え方

05.png

Reactアプリのコードを美しく保つ「高階コンポーネント」の考え方とは?(WPJ)

Reactアプリケーションを整理して構築し、保守を簡単にするためにHigher-Order Componentsを使用する方法について説明します。純粋関数でコードをクリーンに保つ方法や、同じ原理をReactコンポーネントに適用する方法を紹介します。

6.D3.jsとReactでリアルタイムアニメに挑戦

06.png

ReactとD3.jsの組み合わせで変わる!JavaScriptアニメーション開発(WPJ)

人気のデータビジュアライゼーションライブラリー「D3.js」をもっと使いやすく、便利にするために。Reactを使ったコンポーネント化に取り組み、リアルタイムで描画されるアニメーションを作ります。

7.React+Three.js+WebGL=3Dゲーム?

07.png

SPAだけじゃない!ReactとThree.jsの組み合わせはゲーム開発を変える?(WPJ)

Reactといえば、SPA(シングルページアプリケーション)のViewに使われるライブラリー。でもThree.jsとWebGLを組み合わせると、3Dのゲーム開発にもメリットがあるようです。

8.ElectronとReactで音楽アプリを作る

08.png

Webデザイナーの仕事が広がる!ElectronとReactでデスクトップアプリ開発(WPJ)

WebデザインとJavaScriptの技術があれば、デスクトップアプリも自在に作れる時代です。ElectronとReactを使って、SoundCloudの音楽を自由に再生できるデスクトップアプリを作ってみました。

まとめ

いかがでしたか? jQueryから次のJavaScriptフレームワークに取り組みたい人に役立ちそうな記事をセレクトしてみました。ぜひ、チェックしてみてください。

Web Professionalトップへ

Web Professionalトップページバナー

WebProfessional 新着記事

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く