• , , , ,

    ReactのuseMemoを理解する

    ReactのStame Managementのシリーズでは、useStateを使った簡単な状態管理、useReducerを使った複雑な状態管理の仕方を学びました。 今日はその続きとして、React HookのuseMemoの使い方を紹介します。 これはVueのフレームワークを使ったことがある方ならweatch()メソッドと同じになると理解してもらってOKです。 では、前回行ったreuceメソッドを利用した例を見ていきます。 まずは、こちらのコードを見てください。 ここでnumbers配列の数字の合計値をブラウザに表示しているようにしています。ここで感がれられる問題があります。もし、数字の入っている配列が膨大な数である場合、コンポーネントがレンダーされるたびにreduceの関数が実行されてコンポーネントのレンダーに時間がかかることが想定されます。 そこでuseMemoを使って、dependency（依存するデータ）を教えてあげることができます。 この場合でいうと、numbersの配列が変わらない限り答えは同じになるのでそれを教えてあげるわけです。… 記事を読む

  • , , , ,

    ReactのuseReducerを理解する

    前回の記事ではReactのuseStateの正しい使い方を説明しました。 今回はReact Hooksのうちの一つであるuseReducerの使い方を説明します。 reducerとは まずは、JavaScriptのreduceメソッドについておさらいしましょう。 reduceは英語で減らすという意味ですね。イメージとして、配列の複数データを操作して１つの値に減らすためのメソッドであると考えてください。 useReducerも同じようにState（状態）を管理できるメソッドになります。 配列の数字をループして加算したい場合はこのようにできます。 これで、ブラウザに合計の60が表示されました。 同じことをreduceメソッドを使って行ってみます。… 記事を読む

  • , , , ,

    ReactのuseStateを徹底的に理解する

    Reactを学び始めてからSPA（シングルページアプリケーション）の良さが理解できたところでState Management（状態管理）を学んでいる方、useStateが理解できない方、このコンセプトを理解することは、コンポーネントのレンダーにもかかわる重要な部分になります。 Reduxなどのライブラリを使う前にも理解しておきたいです。 State Management State Managementはデータを管理するフロントエンド側のデータ倉庫のようなものです。これらはReact Hookの機能のうちのひとつです。React Hook（フック）はコンポーネントがマウント（読み込み）されたときにフック（実装）される機能と考えてください。 では実際にReactアプリを作成してコードを書きながらStateManagementを理解していきましょう。Reactのプロジェクトの作成の仕方はこちらの記事を読んでください。… 記事を読む

  • , , ,

    ReactでMaterial UI（MUI）を使ってみよう

    Material UI（MUI）はフランスの会社でReactをはじめとしたUIデザインのライブラリを提供しています。日本だとユニクロがマテリアルUIを使っているようです。 このUIデザインではGoogleのマテリアルデザインというデザイン言語（テーマ）をもとに洗練されたUIを作ることができます。 今日はReactにMaterial UIをインストールして使う方法を紹介していきます。オープンソースでコードをGitHubで見ることもできます。 Reactのプロジェクトをスタート 今回はViteを使ってReactを始めます。詳しいViteの使い方はこちらの記事を参照してください。今日はReactのプロジェクトを始めるために必要なコマンドだけ紹介していきます。 react >= 17.0.0… 記事を読む

  • , ,

    console.logだけではないconsoleの使い方

    フロントエンド開発にあたりconsole.log()は黄金のツールです。しかし、このconsoleオブジェクトにはもっと使えるメソッドがあります。正しく、そして効率よくデバッグを行うためにこのconsoleについて調べていきましょう。 console.logの問題 console.logだけを使っているとコードがconsole.logだらけになり、どのコードを実行しているのかわからなくなり、読みづらくなってしまいます。今日はconsoleで使える９の方法を紹介していきます！ console.table console.tableは表形式でデータを表示してくれるので読みやすいデータを出力することが可能になります。 これを実行すると下記のようにテーブルで結果が返ってきました。 console.group console.groupとconsole.groupEndを使ってネスト化されたアコーディオンでグループになったデータを表示できます。これで階層の違うデータを操作しながら確認することができますね。 このようにクリックしてデータをトグルできるようになりました。 console.time… 記事を読む

  • , , , , ,

    WSL2を使ってWindows11からDjangoをデプロイしよう

    前回の記事では、windowsにWSL2（Windows Subsystem for Linux）をインストールする方法を紹介しました。 では今日はWSL2を使ってDjangoをデプロイする方法を説明していきます。UbuntuサーバーからDjangoをデプロイする方法はこちらの記事を参考にしてください。 ※今回はwindows11で作業を行っています。SWL2であれば問題はないと思いますが、Windows11を使うことをお勧めします。 ※WindowsからDjangoはデプロイできますが、Hyper-VでNATネットワークをUbuntuにアサインしているためにデフォルトでは、Windowsマシン以外からDjangoアプリにアクセスができません。詳しい対応策はMicrosoftのWSLのGitHub　Issueを見てください。 Ubuntuサーバーの起動 では前回の記事でインストールしたUbuntuサーバーを起動します。 Ubutnuサーバーの環境の確認… 記事を読む

  • , , ,

    Windows 11 でWSL2（Windows Subsystem for Linux）を始めよう

    今日はWindowsのPCからLinuxが使えるWSL2（Windows Subsystem for Linux）を紹介します。この機能により、GNU/Linuxを再現し、コマンドラインツール、ユーティリティ、アプリケーションがそのまま使えるようになります。他に似たようなアプローチでは下記の方法があります。 WSL2はWindowsのシステムをそのまま残したまま使えるので状況によっては有利になる場合もあります。しかし、100%のLinuxがそのまま使えるというわけではないので何ができないのか注意しておくことが必要ですね。 WSL2の特徴 WSL2の特徴はこのようになります。 WSL1とWSL2の違い 下記に前バージョンとの違いを比較しました。 特徴… 記事を読む

  • , ,

    自作のnpmパッケージを公開しよう

    npmはNode Package Manager（ノードパッケージマネージャー）の略で、コマンドラインからJavaScriptのライブラリを簡単にインストール、管理できるアプリケーションです。 ReactもVueもAxiosもすべて、このnpmのライブラリに登録されているパッケージになります。 今日は、自作したnpmパッケージを一般に公開する方法を紹介します。npmを使ったことがない人は先にこちらの動画を見ておいてください。 なぜパッケージを自作すべきか プログラマーのツールの大多数は無料で使えます。Reactも、Linuxもソースコードを公開してオープンソースとして社会に貢献しています。もし、アイディアがあれば、オープンソースのプログラムを公開することはサイドプロジェクトとして最適です。 また、通常、下記の行からライブラリをインポートしますが、実際にその中身がどうなっていることを知ることはとても重要になります。 GitHubのリポジトリを作成 まずはGitHubとGitを準備しましょう。使ったことがない人はこちらの動画でGitのインストールの仕方と、GitHubの使い方を説明しています。GitとGitHubはなくてもできないことはないですが、バージョンコントロールと、リポジトリの管理はプログラマーにとって必須のスキルですので是非覚えておきましょう。… 記事を読む