#JavaScript
18 件の記事
資産推移シミュレーターを作った
個人の資産形成を考えるためのツールとして開発した「資産推移シミュレーター」を紹介する記事。積立や運用による資産の推移をシミュレーションできるツールをつくった経緯や、その使い方・考え方を整理する。
Jestのスナップショットテストのデメリット
Jestのスナップショットテストのデメリットを解説。テストの脆さやアサーションの不明瞭さ、なぜアサーションテストの方が良いのかを紹介します。
マークダウン形式のファイルをPDFファイルに変換する（mermaid・emoji・toc対応）
マークダウン形式のファイルをPDFへ変換する仕組みを紹介。mermaid・emoji・目次（toc）に対応したシンプルなドキュメント管理ツールです。
Jestで始めるJavaScriptのテスト
JestでJavaScriptのテストを始める方法を解説。ESモジュール設定、babelのセットアップ、実践的なテストファイルの書き方を紹介します。
モダンなJSの話──Proxy
JavaScriptのProxyオブジェクトを解説。トラップハンドラ、対象のラップ、値のバリデーションといったES2015の使い方を紹介します。
モダンなJSの話──async function
モダンなJavaScriptにおける非同期処理を解説する記事です。async functionの定義の仕方や、Promiseの完了を待つawait式の使い方を中心に、Promiseベースの非同期処理をより読みやすく書くための仕組みを、具体例とともに紹介します。
ReactとHistory APIを使ってrouterを自作する
ReactとHistory APIのpushState・popstateを使い、ライブラリに頼らずSPAのルーターを自作する方法を解説します。
モダンなJSの話──Promise
モダンなJavaScriptのPromiseを解説。非同期処理、.then()によるチェーン、エラーハンドリング、コールバック地獄の回避を紹介します。
モダンなJSの話──アロー関数
JavaScriptのアロー関数について解説する記事です。アロー関数の基本的な構文や、通常の関数式との違い、レキシカルに決まるthisのバインドの振る舞いなど、ES2015で追加されたこの関数式の特徴を、具体例を交えて紹介します。
モダンなJSの話──クラス
JavaScriptのES6（ECMAScript 2015）で導入されたクラス構文について解説する記事です。ECMAScript6以前の書き方との違いから、コンストラクタの定義、getter/setterの書き方、クラス内で有効になるstrictモードの振る舞いまでを、具体例を交えて紹介します。
モダンなJSの話──Destructuring assignment（分割代入）
モダンなJavaScriptの分割代入（Destructuring assignment）について解説する記事です。配列やオブジェクトのデータをそれぞれ別個の変数に取り出す書き方を、デフォルト値の指定や、別名（エイリアス）を付ける方法などの実例とともに紹介します。
モダンなJSの話──importとexport
JavaScriptのES6 import/export文を解説。名前付きエクスポート、デフォルトエクスポート、モジュールの構成方法を紹介します。
モダンなJSの話──var/let/const
JavaScriptのvar・let・const宣言を解説。スコープの種類、巻き上げ（hoisting）、Temporal Dead Zoneの挙動を紹介します。
Reactでマークダウンエディタをシャッとつくる
markedライブラリを使って、入力した内容をその場で表示できるライブプレビュー対応のマークダウンエディタを、Reactでサクッとつくる方法を解説する記事です。ビルド環境のセットアップを簡単に済ませつつ、Markdownを変換して表示するエディタを実装する手順を紹介します。
Google ExtenstionのPluginをつくってみた
manifest.jsonとJavaScriptで、初めてのGoogle Chrome拡張機能プラグインをつくる手順を解説した記事。英語版のGoogleで検索したいという身近な動機から、拡張機能の基本的な構成と作り方を実際の例とともに紹介する。
ES6のExportとImportについて
ES6のexport・importを解説。名前付きエクスポート、デフォルトエクスポート、ワイルドカード、エイリアスでJavaScriptモジュール化を構成し保守性を向上させる実装ガイドです。
Laravel+React+ES6+Browserify
BrowserifyとBabelのトランスパイルでReactをLaravelに組み込み、モジュール対応のモダンなES6コードを書く方法を解説します。
dotEnvの環境変数をクライアントサイドでも使えるようにする - dotenv-webpack
dotenv-webpackを使い、webpackでdotEnvの環境変数をクライアントサイドでも利用する方法と、セキュリティ上の注意点を解説します。