はてなブックマーク

はじめに React（v16.12.0）のReact.memo、useCallback、useMemoの基本的な使い方、使い所に関しての備忘録です。 「React でのパフォーマンス最適化の手段を知りたい」 「なぜReact.memo、useCallback、useMemoを利用するのかわからない」 といった人達向けに書いた記事です。 デモは CodeSandbox 上に置いてあります。編集して動作を確認してみると理解が深まると思います。 本記事で用いている用語 メモ化 計算結果 メモ化 計算結果を保持し、それを再利用する手法のこと。 キャッシュのようなものだとイメージすれば良いと思う。 そのため、以下の言葉の意味は大体同じ。 「メモ化された値」=「計算結果が保持された値」 「メモ化する」=「計算結果を再利用できるように保持する」 メモ化によって都度計算する必要がなくなるため、パフォーマン

はじめに 今更ですが、JavaScriptのasync/awaitに関する備忘録になります。 「今まで$.Deferred()やPromiseなどで非同期処理は書いたことがあるが、async/awaitはわからない」 「$.Deferred()やPromiseなどの非同期処理の書き方より、もっと簡潔に書ける書き方があれば知りたい」 「今までの非同期処理の書き方と比べて何が良いのかわからない」 といった人達向けの記事です。 $.Deferred()やPromiseなどで非同期処理を書いたことがある前提のため、非同期処理自体に関する説明は記載しておりません。 記載している利用例のコードはChrome（最新）のコンソール上で動きますので、コンソール上で実行して動作を確認してみると理解が深まりやすいと思います。 本記事で用いている用語 Promiseを返す Promiseオブジェクトを返すこと。

はじめに 今更ですが、Reduxに関する備忘録になります。 Reduxの基本的な考え方や公式のサンプルコードを読み解いていき、基礎を理解することを目的とした記事です。 そのため、公式ドキュメントで基礎を理解できるのであればこの記事を読む必要はありません。 Reduxの入門記事ですので、Reactは出てこないです。 Reduxとは state（状態）を容易に管理をするためのフレームワークのこと。Reactと相性が良いため、セットで紹介されていることが多いが、Redux自体は独立したものなので単体で利用することも可能。 redux（GitHub） Redux（ドキュメント） stateとは? 以下のようなViewに表示されているデータやUIの状態などのアプリケーションが保持している情報のことを指す。 そのため、「stateの変更」はViewに表示されているデータやUIの状態などが変更されること

Babel 7でTypeScriptをトランスパイルしつつ型チェックをする 〜webpack 4 + Babel 7 + TypeScript + TypeScript EsLint + Prettierの開発環境を構築する〜JavaScriptTypeScriptwebpackESLintbabel ##はじめに 表題の通りですが、Babel 7でTypeScriptをトランスパイルをするための、webpack 4 + Babel 7 + TypeScript + TypeScript ESLint + Prettierの開発環境構築に関しての備忘録です。 記事本文に記載している開発環境はGitHubに置いてあります。 hira777/webpack-babel7-with-typescript webpackやPrettierなどを理解していることを前提とした記事ですので、基礎知識を習

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

2019/06/21 追記 記事内容を Babel 7.4.0 に対応したものに更新しました。 主に追記した箇所は以下に関してです。 @babel/polyfill が非推奨になった（Babel 7.4.0 から） @babel/preset-envのuseBuiltInsを利用して、core-js@3から必要な polyfill のみを import できるようになった（Babel 7.4.0 から） Stage 4 未満のプロポーザルの polyfill も import する（Babel 7.4.0 から） （補足）@babel/polyfill と core-js@3 で、「どのブラウザでどの polyfill を import する必要があるかを判別するために利用するデータ」が異なる はじめに 今更ですが、Babel 7 の主な変更点をまとめた備忘録です。 ほとんどの内容は公式ド

はじめに webpack の Tree Shaking に関する備忘録です。以下を目的とした記事になります。 Tree Shaking とは何か、なぜ Tree Shaking をするのかを理解する webpack を利用して Tree Shaking するためにはどうすれば良いのかを理解する Tree Shaking 以外の「デッドコードをバンドルさせない」ための手段を理解する 解説に利用しているコードの最終形態は GitHub 上にあります（hira777/webpack-tree-shaking-example）。 webpack を理解していることを前提とした記事ですので、基礎知識を習得したい方は webpack 4 入門をご覧ください。 Tree Shaking とは webpack などでファイルをバンドルする際に、デッドコード（利用されていない不要なコード）を除去してファイル

はじめに 先日リリースされたwebpack 4でCommonsChunkPluginは廃止されました（CommonsChunkPluginの解説はこちら）。 その代わりとした追加されたoptimization.splitChunksの基本的な使い方、使い所に関しての記事です。 optimization.splitChunksを利用すればサイトパフォーマンスの改善（詳細は後述）ができるため、利用する機会が多い設定（機能）です。 解説に利用しているコードの最終形態はGitHub上にあります。 hira777/webpack-split-chunks-example webpackを理解していることを前提とした記事ですので、基礎知識を習得したい方はwebpack 4入門をご覧ください。 optimization.splitChunksとは 「複数のエントリーポイント間で利用している共通モジュール

お知らせ（2021/05/26 追記） 以前はeslint --fixなどで ESLint を実行時に Prettier でコードを整形し、整形したコードに対して構文チェックが実行されるようにすることが推奨されていました。 ESLint で Prettier を実行するためには、ESLint の Plugin が必要でしたが、これを利用することが公式で推奨されなくなりました（詳細はこちら）。 そのため、記事を更新して Prettier と ESLint をそれぞれ実行させるような内容に変更しました（ついでに husky のバージョンも上げており、それに関する内容も更新しています）。 更新前のコードや記事は以下にありますので、必要に応じてご確認ください。 はじめに Prettier（v.2.3.0） に関しての備忘録です。 「Prettier の何が便利なのかよくわからない」 「ESLint

2018/05/08追記 記事内容をv1.1.0からv1.8.1に対応したものに更新しました。 はじめに Parcelというモジュールバンドラを触ってみたので、その備忘録になります。 webpack時代の終わりとparcel時代のはじまり 結論から言いますと、機能がシンプルすぎて自分の実務での利用は難しいと感じました。~~~~そのため、2017/12/10時点（v1.1.0）ではwebpackの代わりにはならないです。 2018/05/08時点でv1.8.1になり、様々な機能が追加されました。しかし現在もwebpackで利用している機能がParcelにはないため、実務での利用は難しいです。 とは言えども設定ファイルなしでReact、Vue、ES2015などをビルドできるようになっているため、個人でちょっとしたコードを書いてビルドしたい時はこちらを使っていくと便利だと思いました。 そのため

はじめに 「Babelとは」でググってみると 記事によっては**「BabelはES2015をコンパイルするコンパイラ」と説明されており、 また別の記事によっては「BabelはES2015をトランスパイルするトランスパイラ」**と説明がされています。1 「本来それぞれの言葉の意味は違うはずでは…?」と混乱したため、 どちらの説明が正しいのか、それともどちらも正しいのかざっくり調べて自己解釈した備忘録です。 まずはBabelのサイトを見てみる そもそも本家ではどのような説明をしているのか。 ということでBabelのサイトを見てみると Babel is a JavaScript compiler. と記載されており、またこちらページでは Babel comes with a built-in CLI which can be used to compile files from the comm

はじめに ハイブリッドアプリの解説記事はよく見かけますが、そもそもどのような仕組みで、何故動いているのかよくわからなかったため、ハイブリッドアプリの仕組みやCordovaなどのフレームワークが何をしているかに関しての備忘録になります。 私みたいな**「ハイブリッドアプリってあれでしょ。Webとネイティブアプリが組み合わさったものでJSとかでアプリ作れちゃうあれでしょ!?」**という方が読めば、更に理解を深められるかもしれません。 ※ハイブリッドアプリの概要や仕組みに関しての記事のため、開発方法やコードは書いておりません。 ハイブリッドアプリとは? HTML5、CSS、JavaScriptなどのWeb技術で開発しており、且つカメラやGPSなどのデバイスのネイティブ機能を利用しているアプリのこと。 ブラウザ上で動作するWebアプリとは異なり、Android OSやiOSに標準で組み込まれている

#2018/3/15追記 先日リリースされたwebpack 4で、CommonsChunkPluginは廃止され、代わりにoptimization.splitChunksが追加されました。 詳細は記事に書きましたのでwebpack 4を利用している方は以下をご覧ください。 webpack 4 の optimization.splitChunks の使い方、使い所 〜廃止された CommonsChunkPlugin から移行する〜 それ以前のバージョンでは有用なツールだと思いますので、まだ移行できない方はご覧いただければと思います。 はじめに webpackのプラグインであるCommonsChunkPluginに関しての基本的な使い方、使い所に関しての記事です。 CommonsChunkPluginを利用する機会はそこそこあると思うですが、日本語の解説記事をほとんど見かけなかったため本記事を

Webhookを利用した記事はよく見かけますが、そもそもWebhook自体が何なのか、何を指しているのかよくわからなかったため、それに関しての備忘録です。 Webhookとは？ アプリケーションの更新情報を他のアプリケーションへリアルタイム提供する仕組みや概念のこと。 イベント（リポジトリにプッシュなど）発生時、指定したURLにPOSTリクエストする仕組みのこと。 Webhookの説明を見ると**「通知する、Webhookを送る」などの言葉が用いられているが、 これはPOSTリクエストのことを指している**。 Webhookを利用すると何ができるのか？ GitHubやSlackなどのサービスのWebhookを利用すると、ユーザーはサービス側がPOSTリクエストするURLを指定できる。 つまりサービスがPOSTリクエストしたパラメータに対しての処理（パラメータをSlackに通知など）を自由に

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? お知らせ（2020/08/25 追記） Udemy で「webpack 最速入門（10,800 円 -> 2,000 円）という講座を公開しました。 本来の価格は10,800円ですが、上記リンクからアクセスすると2,400円で購入できます。 どんな内容？ webpack を利用したフロントエンド開発環境が構築できるようになる、ハンズオン形式の講座です。 詳細は上記のリンクのプレビュー動画で詳しく説明しています。 記事との内容の違い 記事の内容に、以下の内容や特徴が追加された感じです。 実務で利用できる開発環境を徐々に構築していくので、記

はじめに 今更ですが、ES2015(ES6)で追加された機能や構文に関する備忘録です。 「JSは書けるけどES2015(ES6)はわからないっす...!」といった人達向けの記事です。 入門記事のためイテレータやジェネレータ等のわかりづらかったり、 説明が長くなりそうな機能や構文は割愛しております。 ES2015(ES6)とは ECMASCriptの6th Editionのこと。ECMAScript 6th editionの6を取ってES6と呼ばれていたが、 2015年に標準化されたため正式名称はES2015になった。 正式名称がES2015ならES6という名称を使うのは間違いなのか どちらの名称でも問題はない。 ES6の名称の方がエンジニアコミュニティに中では浸透しているらしく、ES6と記載されていることが多い。 詳細は以下を参考。 ES6 or ES2015 ? 〜WEB+DB PRES

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。 「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。 デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。 デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは 要素をアニメーションさせる

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

// canvas要素を取得 var c = document.getElementById('canvas'); var cw; var ch; // canvasサイズをwindowサイズにする c.width = cw = window.innerWidth; c.height = ch = window.innerHeight; // 描画に必要なコンテキスト(canvasに描画するためのAPIにアクセスできるオブジェクト)を取得 var ctx = c.getContext('2d'); // AudioNodeを管理するAudioContextの生成 var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); /** * 音声ファイルローダー */ var Loader = function(

Web Audio APIを利用してオーディオビジュアライザを制作したので、それに関する備忘録です。 まとめて書くと内容が長くなり、複雑で解りにくなりそうなので分けて書いています。 その1は簡単な概要と音声データを読み込んで音を出すところまでです。 Web Audio APIとは Audioを扱うAPI。 AudioNodeを接続して、音(信号)に対して様々な操作ができる。 AudioNodeとは 音量の調整、周波数の解析、フィルタをかけたりと音(信号)に対して様々な操作ができるノード。(モジュールのようなもの) AudioNodeはいくつでも接続することができ、最終的にはAudioDestinationNode(出力)に接続して音を出す。 現実世界で言うとマイク(入力)、エフェクタ(フィルタ)、スピーカー(出力)をコードで繋げていくのと同じ。 とりあえず音を出す デモ(ページを開くと音が

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

2017/06/23追記 今更ですが、本記事のサンプルコードをあげました soarflat-prototype/pug-template サンプルコードは以下の点で記事内容と異なります。 拡張子がpug mixinを利用する必要がなかったため利用していない 現在のバージョンだと"http://#{metas.url}"のような"#{}"がサポートされていないため修正 はじめに Pugの勉強のためにHTMLのテンプレート的なのをJadeで書きました。 Pugで書くとこうなる もとのHTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" conte