Chromatic で素早い UI レビューサイクルの構築とリグレッションテストでコンポーネントの成立を担保する
React.js
Chromatic を使って UI レビュー環境を素早く用意し、かつ、リグレッションテストにてコンポーネントが成立することを担保していきます。
JavaScript
19本
React を学びたいなら Next.js チュートリアルがおすすめ。
React.jsReact を使ってみたいと思っていたところ友人のフロントエンドエンジニアに Next.js のチュートリアルが良いと薦めていただいたので試してみたが、その体験がとても良かったので記録に残します。
Nuxt.jsをインストールしVue.jsアプリケーション開発環境を構築する入門編
Vue.jsNuxt.js（ナクスト）は、Vue.jsアプリケーションを構築する為のフレームワークです。Nuxt.jsをでの開発環境を構築するにあたり、２つのインストール（プロジェクト作成）方法を見ていきます。
プリレンダリングを用いてVue.jsのSPAをビルドする導入から設定まで
Vue.jsプリレンダリングを用いてVue.js＋Vue Routerで構築したSPAを事前描画した状態でビルドします。ところで「プリレンダリング」とは何でしょうか？なぜプリレンダリングが必要で、いつプリレンダリングが使えるのか、そこも交えて解説します。
VueRouter基本ルーティング記法まとめ
Vue.jsVue.jsでSPA（シングルページアプリケーション）を開発する際にVueRouterを利用する事で、HTML5 History APIを用いたHistory管理と、SPAでありながら画面切り替えの挙動を持つ事が出来ます。そんなVueRouterの基本的なルーティングパターンを見ていきます。
VueRouterの基本とルーティングを構築するはじめの一歩
Vue.jsVue.jsでSPAを開発していくにあたりURL履歴イベントをブラウザ内に構築する為のVueRouterというライブラリが提供されています。今回はVueRouterを用いたVue.jsアプリケーション開発の基本（ルーティングなど）を見ていきます。
Vuexを用いたVue.jsアプリケーションのシンプルな状態管理とデータフロー
Vue.jsVue.jsでは、シンプルに状態管理を行えるようにVuexという状態管理のライブラリが提供されています。Vuexを導入する事でデータフローを一方向に整理でき、シンプルな状態管理を実現する事ができます。
Vue.jsのtransitionアニメーションとSassの導入
Vue.jsVue.jsでの開発にSassを導入し、transition/transition-groupコンポーネントによるアニメーションを実装します。
Vue.jsでのAPIリクエストをaxios＆RepositoryFactoryパターンで実装する
Vue.jsVue.jsに限らずJavaScriptフレームワークでフロントエンドを実装していると、アプリケーションによってデータを取得したりなど、外部のAPIなどと通信を行う機会も多く発生します。今回はVue.jsでのAPIリクエストをaxios＆RepositoryFactoryで実装してみます。
Vue.jsアプリケーションの状態管理をシンプルなstoreパターンで実装する
Vue.jsVue.jsでの状態管理といえばVuexですが、今回はそれを使わずに状態管理を実装しましょうというお話です。シンプルなVue.jsアプリケーションの状態管理を簡単なstoreパターンで行います。
Vue.jsで画像やファイルの入力フォームを実装する（プレビュー・ドラッグアンドドロップ機能など）
Vue.jsVue.jsを導入しインタラクティブなフロント画面を構築するにあたり、アンケートや登録画面などの入力フォーム類も良く作られる機能の１つです。今回はファイル入力フォームに焦点を当て、様々な機能を実装していきます。
Vue.jsでドラッグアンドドロップによる要素の並べ替えと移動を実装する
Vue.jsVue.jsを用いてアプリケーションを構築するというのは、サスティナブルかつ拡張性に優れたコードを実現しながらも、ユーザーに快適な動作や体験を提供するという目的もあると思います。そんな優良なユーザー体験を提供する為のフロントエンド実装において、ドラッグアンドドロップ（以下、dnd）を用いた要素移動インタラクションは有効なアプローチの１つです。
Vue CLIでVue.jsの開発環境をサクッと構築する（Vuex/VueRouter/SFC）
Vue.jsVue CLIを使ってVue.jsの開発環境を構築していきます。Vue CLIを用いると、簡単に開発環境を整える事ができるので便利です。
webpackインストール後のセットアップパターンまとめ。Babel/ESLint/SASSなどを用いてフロントエンド開発環境を整える
webpackwebpackインストール後のセットアップパターンをまとめました。Babel/ESLint/SASSなどを用いてフロントエンド開発環境を整えていきます。
webpackをインストールしモダンなフロントエンド開発環境を整える
webpackWebアプリケーションのフロントエンドには、JSやCSSなどのたくさんの技術が集約されています。そしてそれらを惜しみなく活用した場合、記述したソースコードでは動作せず、コンパイルが必要になる事がほとんどです。今回は、モジュールバンドラであるWebpackを導入し、レガシーからモダンまでをカバーできるフロントエンド開発環境を整えていきます。
JavaScript（jQuery）による継承とプロトタイプチェーンの基本と利点
jQueryJavascriptはES6でclassキーワードが導入されましたが、糖衣構文（シンタックスシュガー）であり現状ではプロトタイプベースのオブジェクト指向言語であると分類されています。そんなJavaScriptのオブジェクトは、プロトタイプオブジェクトのプロパティを遡るようにして保持しています。今回は、JavaScript＆jQueryを使って、コンパイルが不要（ES6不使用）の範囲でのPrototypeチェーンを実装していきます。
jQuery UIを使った要素のドラッグアンドドロップ（複数選択も）
jQueryjQueryには数えきれないくらいのライブラリが開発されており、便利なものがたくさんありますが、jQueryプロジェクト、いわゆる公式のjQueryチームが開発したjQuery UIというライブラリがあります。今回はjQuery UIを使って、要素のドラッグアンドドロップを実装します。
jQueryでドラッグ＆ドロップによる要素の並び替えとそれをCookieで記憶する仕組みを作る
jQueryJavaScriptのフレームワークjQueryとライブラリを使い、ドラッグアンドドロップで要素の移動を行います。また、応用として、それらをCookieに保存し、ページ遷移・リロードを行っても変更を保持できる仕組みを構築します。