プログラミング言語

ReactのuseMemoを理解する

by
useMemo-React

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

ReactのuseReducerを理解する

by
reactのuseReducerを理解する

前回の記事ではReactのuseStateの正しい使い方を説明しました。 今回はReact Hooksのうちの一つであるuseReducerの使い方を説明します。 reducerとは まずは、JavaScriptのreduceメソッドについておさらいしましょう。 reduceは英語で減らすという意味ですね。イメージとして、配列の複数データを操作して１つの値に減らすためのメソッドであると考えてください。 useReducerも同じようにState（状態）を管理できるメソッドになります。 配列の数字をループして加算したい場合はこのようにできます。 これで、ブラウザに合計の60が表示されました。 同じことをreduceメソッドを使って行ってみます。 reduceメソッドは２つのパラメータを受け取ります。 最初のパラメータは関数で、2つ目が初期値（スタートポイント）になります。 これで同じように合計値の60がブラウザに表示されました。 reduce()関数の最初に使う関数では①accumulatorと②currentValueがパラメータとして使えます。 accumulatorはaccumulate(蓄積する)という意味です。つまり、今までの数値を累積（足した）値になります。いわば、前回までの累積値といえます。 2番目に来るcurrentValueは現在の値です。このようにreduceメソッドでは前回までの累積値と現在の値をどうするか、指示することができます。 今回の場合は単純に配列の前回の値（０番目）と現在地（１番目）を足すという指示をしています。 その次に配列の前回の値（０と１番目の累積値）と現在地（２番目）を足す。これを繰り返しているだけです。 これでreduceメソッドの使い方が理解できましたね。 useReducer ReactのuseReducerは基本はこのようになります。 useReducerからは２つの値が返ってきます。それを慣例的にstateと、dispatchと名称を付けて取っておきます。 useReducerがreturn返す値 state：現在の状態。最初のレンダーでは、初期値のinitialArg、もしくはinit(initialArg)が返ってきます。 dispatch：どのようにコンポーネントを再レンダーし、stateを更新するか指示する関数 useReducer関数の引数について reducer：reducerでは、stateがどのようにアップデートされたいのか指示することができます。 initialArg：デフォルト値（データタイプに指定はありません。） init?：オプショナルの引数です。もしinitialArgに何かしらの関数を実行したい場合はここで指示できます。その場合はinit(initialArg)になります。もし空の場合は、initialArgはデフォルト値として渡されます。 useReducerの実例 では下記の実例を見てみましょう。 このようにinputへの入力と同時にstate.nameの状態が更新されコンポーネントが再度レンダーされました。 inputに入力されれるたびにonChangeのdispatchが発火されpayload（データ）が更新されます。dispatchはuseReducerのstateを更新する役目があるので、コンポーネントが更新されたわけですね。 次に、ボタンを作成して、state.namesにnameのデータを追加していきましょう。 …のスプレッド構文を使って、配列に現在のstateを残したまま、新しいデータを追加しています。 これで、データの入力時に今までのデータを付けるので”追加”できるようになります。 このようにuseReducerを使うことで複雑なstate（状態）の管理が可能になります。

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

by
ReactのuseStateを理解する

Reactを学び始めてからSPA（シングルページアプリケーション）の良さが理解できたところでState Management（状態管理）を学んでいる方、useStateが理解できない方、このコンセプトを理解することは、コンポーネントのレンダーにもかかわる重要な部分になります。 Reduxなどのライブラリを使う前にも理解しておきたいです。 State Management State Managementはデータを管理するフロントエンド側のデータ倉庫のようなものです。これらはReact Hookの機能のうちのひとつです。React Hook（フック）はコンポーネントがマウント（読み込み）されたときにフック（実装）される機能と考えてください。 では実際にReactアプリを作成してコードを書きながらStateManagementを理解していきましょう。Reactのプロジェクトの作成の仕方はこちらの記事を読んでください。 まずは、メインのコンポーネントになるsrc/App.jsxの中身を削除して下記のように記述しましょう。 useState()はreactのデフォルトで使えるStateManagementのメソッドになります。これをインポートして App()のコンポーネント内に定義しましょう。const [count, setCount] でuseStateメソッドの最初の値（データになる部分）をcountという名称にしました。 2番目の値useState[1]にあたる部分は、とsetCountという変数名にしました。慣習として２つ目に来るsetterはsetで始まる名称を付けることが通常になります。setterというのはstate（状態）が変わることを指示をする関数になります。 これで<div>内の{count}の部分がデフォルトの10として表示されます。 ではこの１０に１の数字を足す関数を作ってみましょう。 まずは悪い例を紹介します。 ※これは悪い例です。 このボタンをクリックすると、addOne関数が発火されますが何も起きません。。。コンソールを見てみると下記の様なエラーが出ました。 constは再代入できない変数なのでエラーが出ました。 ではこのconst [count, setCount] = useState(10);をletに変えるとどうなるでしょうか？ 。。。。。。 。。。。 何も起きません。 しかもエラーも出ません。 なぜでしょうか。 にletを使って変数の値が変えられたとしてもReact側では、state（状態）が変化されたことが察知されていないからです。 ReactのState Managementの推奨ルールとして、constを使う事が定義されています。それは、Reactがコンポーネントを再レンダーした際に新しい値をconstの変数に読み込むことになるからです。それ以外の時に変数が変わってしまってもReactは理解することができません。ですのでその問題を防ぐためにもconstを使うことをお勧めします。 状態の変化を理解する では状態の変化を理解するために、同じ問題を別のコードで再現してみます。 オリジナルのnewNumはそのまま32と表示されますが、上書きした方のmyNumは０に変更されたものが表示されました。 オブジェクトの場合 オブジェクトを上書きした場合は、元のオブジェクトまで変更されてしまいました。 これは、JavaScriptの特徴でプリミティブのデータ（String、Number、Booleanなど）の場合はデータのコピーを返し、Array（配列）やオブジェクトの場合はReference（参照）できるデータを返します。つまり、オリジナルのデータという事になります。 このコンセプトを理解することが重要になります。 ではすべてオブジェクトにしてしまえばよいのでは？ そう思って、下記の様にオブジェクトにしたところ、Reactがcountの状態が変わったことを察知できなかったので実際にデータが変わったとしてもRe-render（画面の更新）が行われませんでした。 このようにコンソールには正しくcountの値が更新されていますが、Reactではレンダーされません。 そういう事なので、useState()のsetterを使ってuseState()で設定した値を更新すること必須であることが分かりました。 これは、useStateのsetterを使わないとReactがState Managementで管理しているデータの変化を察知できず、コンポーネントの再レンダーができないからです。 Setterを使ってstateを更新する では今までに学習したことをもとに、useStateについてくるSetter（useStateの2番目にあるメソッド）を使ってcountを更新します。 これでボタンを押したときに関数が変わり、Reactが最新の状態に合わせてレンダー（読み込み）してくれました。 prevStateを使った状態管理で解決できること 前回までに記載した現在の状態を操作するsetCount(count + … Read more

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

by
ReactでマテリアルUIを使ってみよう

Material UI（MUI）はフランスの会社でReactをはじめとしたUIデザインのライブラリを提供しています。日本だとユニクロがマテリアルUIを使っているようです。 このUIデザインではGoogleのマテリアルデザインというデザイン言語（テーマ）をもとに洗練されたUIを作ることができます。 今日はReactにMaterial UIをインストールして使う方法を紹介していきます。オープンソースでコードをGitHubで見ることもできます。 Reactのプロジェクトをスタート 今回はViteを使ってReactを始めます。詳しいViteの使い方はこちらの記事を参照してください。今日はReactのプロジェクトを始めるために必要なコマンドだけ紹介していきます。 react >= 17.0.0 でreact-dom >= 17.0.0 以降のバージョンを使用することが前提です。 ではcdのコマンドでReactのプロジェクトフォルダに移動して、npmを使ってライブラリをインストールします。 Material UIをインストール では下記のコマンドでMaterial UIをインストールしていきます。 Material UIはデフォルトでEmotionというスタイルエンジンを使っています。詳しい使い方は後から説明します。これでJavaScriptでCSSスタイルの記述ができるようになったとだけ理解しておきましょう。 似た方法で、styled-componentsのライブラリを使ってスタイリングを記述する方法もあります。今回は省きます。 Robotoフォントのインストール Material UIはデフォルトでRobotoフォントを使用します。 こちらもインストールしておきましょう。もしインストールではなくCDNでフォントを使用したい場合は飛ばしてください。 フォントのCSSのインポートはこのように記述しましょう。 CDNでフォントを使用したい場合 GoogleのCDNで提供されているフォントを使用したい場合は<head>タグ内に下記を記述します。 アイコン 次にマテリアルUIで使用するアイコンをインストールします。 もし、インストールではなくCDNでアイコンを表示したい場合は下記の様に<head/>タグ内にリンクを記載しましょう。 Material UIを使ってみよう では、早速テキストエディタを開いてMaterialUIのボタンを使ってみましょう。 コンポーネントのインポートはimport Button from “@mui/material/Button”;を使用してください。これで、<Button/>コンポーネントが使用できるようになりました。 実際にnpm run devのコマンドで開発用のウェブサーバーを起動するとこのようにボタンができたことが確認できます。 レスポンシブmetaタグ Material UIはモバイルファーストのコンポーネントになります。ですのでPCでスケールアップする際にCSSのMedia Queryを使ってデザインを変えるようにしていきます。 すべてのデバイスで正しくレンダリングされるように<head>タグ内に下記の行を追加しておきましょう。 例としてスライダーもコピペで使えるようになりました。 テーマカラーとスタイリング 次にCSSのカスタムの仕方を見てみます。 各コンポーネントにsxというpropsを流すことができます。これでカスタムスタイリングを設定することができます。 下記の例を見てください。 このようにsxにカスタムしたいCSSを指示していることが分かります。 更に、ThemeProviderを使うことでテーマカラーを変更することができます。これはオプショナルなのでカスタマイズしたいときには使う事もできます。 基本はこれくらいです。 … Read more

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

by
consoleメソッド

フロントエンド開発にあたりconsole.log()は黄金のツールです。しかし、このconsoleオブジェクトにはもっと使えるメソッドがあります。正しく、そして効率よくデバッグを行うためにこのconsoleについて調べていきましょう。 console.logの問題 console.logだけを使っているとコードがconsole.logだらけになり、どのコードを実行しているのかわからなくなり、読みづらくなってしまいます。今日はconsoleで使える９の方法を紹介していきます！ console.table console.tableは表形式でデータを表示してくれるので読みやすいデータを出力することが可能になります。 これを実行すると下記のようにテーブルで結果が返ってきました。 console.group console.groupとconsole.groupEndを使ってネスト化されたアコーディオンでグループになったデータを表示できます。これで階層の違うデータを操作しながら確認することができますね。 このようにクリックしてデータをトグルできるようになりました。 console.time console.timeとconsole.timeEndで指定したコードブロックが実行されるまでの時間を計算することができます。 特にパフォーマンスの検証をする際に使えます。 今回はポケモンAPIのデータ取得にかかった時間をミリ秒で表示してみました。 このようにconsole.time()とconsole.timeEnd()内のストリングが同じ名前になっている部分を計算してくれます。 console.assert assertは断言するという意味になります。つまり、常にtrueになると想定する状況を構築しておきます。もし、指定した状況がtrueでない場合に記述しておいたメッセージを表示することができます。コードが正しく実行されているか確認するために、バグをいち早くキャッチするために有効になります。 この場合は、resuletが50で返ってくる想定として、5で返ってきたためにメッセージが表示されました。 もちろん、result ===5にすると関数が正しく作動していると検証されるのでコンソールには何も表示されなくなります。 console.logのスタイリング soncole.log()で表示させる内容をCSSでスタイリングすることができます。 このようにボールドで、赤文字のテキストが表示されました。 console.trace console.traceはスタックトレースをアウトプットしてくれます。コードが複雑になり、実行される順番を確認したいときに便利になります。 このように、関数bar()を実行した際に発火されたfoo()がどこから呼び出されたか理解することができます。 console.dir console.dirは、オブジェクトを階層ごとで表示することができます。もしオブジェクトをコンソールからみたい場合はこの方法が有効的です。 このようにトグルできるオブジェクトが表示されました。 console.count console.countメソッドでは、指定したコードが何回実行されたのかトラッキングすることができます。 このように、foo(‘hello’)が2回実行されたことが確認できますね。 console.clear console.clearを実行するとコンソールに表示されるデータがクリア（削除）されます。もし、デバッグのアウトプットが多くて対象のものにフォーカスしたい場合は使ってみるものありですね。 このように、clearされたことが表示されて、その後に新しくコンソールを使うことができます。 まとめ console.log()だけでない、consoleの使い方を９つ紹介いたしました。知らないもので今日から使えるものはありましたでしょうか？ 是非、活用してみてください。

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

by
WSL2から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サーバーの環境の確認 これから作業するにあたり、Linuxのコマンドに慣れていない人は簡単な早見表などを見ておくとよいです。 例えばCtl+Lで入力画面が一番上に来るのでキレイに見えます。 他に入力している途中でCtl+iを押すと推測したテキストが表示されます。長いファイル名の場合は最初の何文字か書いてCtrl+iで記入を終わられるのに便利です。 また、過去に実行したコマンドを見たい場合は上矢印で見ることができます。 UbuntuサーバーのIPアドレスを見てみます。 ip addrのコマンドで分かるようにeth0のインターフェースに172.18.173.157のIPアドレスがあることが分かります。 WindowsのホストマシンのコマンドプロンプトからPingをかけてみました。 リスポンスがあったので、ここからデプロイできそうです。 次にPythonが入っていることを確認します。 次にUbuntuソフトウェア、パッケージのアップデートをします。 Ubutnuユーザーをwww-dataグループに追加します。 ※これからの作業の注意点 Ubuntuユーザーを作成した際にsudoの権限がすでについています。rootに切り替えて作業せず、そのままsudo権限のあるユーザーのまま作業を行いましょう。理由はnginxやファイルの実行の際に権限が与えられていないとエラーが発生するからです。 Djangoデプロイに使うライブラリをUbuntuにインストール 下記のコマンドでUbuntuサーバーにグローバルにインストールしていきます。 PostgreSQLのデータベースを作成 ではこちらの参考Djangoのプロジェクトを使用してデプロイさせていくことにします。もしPostgreSQLを使ったことがない人は1時間くらいかけてデータベースのSQLコマンドを練習、理解してみてください。今後データベースのデータの修正やバックアップを取るためにコマンドラインを使っていくことになるので慣れておくとよいです。 postgresをインストールしたときに自動でpostgres というアドミン権限のユーザーが作成されます。 この権限を使って新しいデータベースとユーザーを作成します。 まずは、PostgreSQLのステータスを確認します。 PostgreSQLが起動できたらPostgresのユーザーに切り替えます。 これでユーザーが切り替わりSQLの入力モードになったことが分かります。 では、Djangoのsettings.pyに合わせたデータベースを作成していきます。 セミコロンを忘れずに！ \lのコマンドでDBの一覧が表示されます。 これでpostgresユーザーがオーナーのデータベースが出来ました。 PostgreSQLのコンフィグレーション もしデータベースのオーナーをpostgres以外に設定したい場合は新しいPosgreSQLのユーザーを作成して所有権を移動させてください。 ではpostgresの接続をスムースにするためにコネクションパラメーターを変えます。 まずはエンコーディングをutf-8に変えます。 Postgresのタイムゾーンを日本時間に変えます。 Djangoのタイムゾーンがデフォルト（初期設定）でUTCにセットさせているのでそれを変更していない人はSettnigs.pyから変更しておきましょう。 次に、作成したユーザーにdb（データベース）のアドミン権限をつけます。 postgresは一旦完了なのでquitと入力してでpostgresから抜け出しましょう。 もしくはCtl＋Zでも抜けられます。 Django用に仮想環境を作成 pythonではいくつか仮想環境のライブラリがありますが今回はvirtualenvを使用します。 仮想環境を使ったことがない人は詳しく理解しておいた方が良いですね。 簡単に説明すると同じサーバーで違うバージョンのライブラリを使いたいとき（例えばDjangoの3.0と4.0)に仮想環境をアクティベートして同じマシンでも同時に使用できる様になります。 また、複数人で仕事をするときもバージョンを統一してするために使います。 Pipの準備pipはpythonパッケージマネージャーでpythonのライブラリをインストールする際に使用しますね。 -HのフラグはsudoのコマンドでユーザーのhomeディレクトリではなくrootのHOMEディレクトリにインストールするように指示します。 まずはpipを最新のものにします。 … Read more

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

by
自作ライブラリをnpmに公開する方法

npmはNode Package Manager（ノードパッケージマネージャー）の略で、コマンドラインからJavaScriptのライブラリを簡単にインストール、管理できるアプリケーションです。 ReactもVueもAxiosもすべて、このnpmのライブラリに登録されているパッケージになります。 今日は、自作したnpmパッケージを一般に公開する方法を紹介します。npmを使ったことがない人は先にこちらの動画を見ておいてください。 なぜパッケージを自作すべきか プログラマーのツールの大多数は無料で使えます。Reactも、Linuxもソースコードを公開してオープンソースとして社会に貢献しています。もし、アイディアがあれば、オープンソースのプログラムを公開することはサイドプロジェクトとして最適です。 また、通常、下記の行からライブラリをインポートしますが、実際にその中身がどうなっていることを知ることはとても重要になります。 GitHubのリポジトリを作成 まずはGitHubとGitを準備しましょう。使ったことがない人はこちらの動画でGitのインストールの仕方と、GitHubの使い方を説明しています。GitとGitHubはなくてもできないことはないですが、バージョンコントロールと、リポジトリの管理はプログラマーにとって必須のスキルですので是非覚えておきましょう。 この作業は後からでもできますが、リポジトリが決まっている場合は先に作っておきます。 では、GitHubに行き、リポジトリを作成します。 ここで作成（Create Repository）をクリックするとGitをinit（イニシャライズ）できるコマンドがあるのでそれらをコピペしていきます。 ではコマンドラインから上記のラインを一行ずつコピペしていきましょう。 git push でrefsのエラーが出た場合はセキュリティ対策としてSSHキーが登録されていないと使用できないものになります。 詳しいSSHキーの登録の仕方はこちらの記事を参照してください。 npmパッケージのイニシャライズ では、git initを行ったディレクトリ内にいることを確認して、npmパッケージのイニシャライズを行います。npmがインストールされていることを確認し下記のコマンドを実行していきましょう。 すべてを入力するとおなじみのpackage.jsonが作成されました。 途中で聞かれたエントリーポイントがnpmパッケージのメインのJavaScriptのファイルになります。 早速、index.jsを作成していきます。 もしファイル名を変更したい場合は、package.jsonの中にある”main”の対象先を編集してください。 では、index.jsにサンプルとして、下記の行を書いてみます。ストリングが一致するとtrueを返す関数です。 npm link npmのパッケージができたら、コマンドラインからnpm linkのコマンドを使い{prefix}/lib/node_modules/<package>の場所にリンクさせます。シンボリックリンクといいますが、これで、npmパッケージがインストールされたかのようになり毎回ビルドをすることなくテストを行うことができます。 npmパッケージのテスト では、npm linkを行ったら、適当な場所にフォルダを作成して、テストを行います。 コマンドラインで、テストディレクトリに移動して、先ほどのasameshiパッケージのリンクをインストールします。 コマンドを実行するとnpmのnode_modulesディレクトリが作成され先ほど作成したasameshiパッケージがインポートされました。 ではコマンドラインからJavaScriptファイルを実行します。 画像のようにtrueが返ってきました。これでパッケージが問題なく作動していることが確認できましたね。 npmアカウントの作成 npmのパッケージを公開するためにはアカウントが必要になります。無料でできるので作っておきましょう。 ではnpmの公式サイトからSign Upをクリックします。 では、下記の様にアカウント情報を入力していきます。 これでnpmのアカウントが作成できました！ npmのアカウントをローカルの環境に接続 では下記のコマンドでローカルのnpmにユーザーを追加します。 ではEmailでワンタイムパスワードを確認してnpmにユーザーを追加しましょう。 ちなみに登録したEmailは一般に公開されるので要注意！ npmパッケージの公開 ではnpmにユーザーを追加したところで、下記のコマンドでnpmのパッケージを公開しましょう。 これで下記の様にエラーがでなければ成功です。 ちなみに、パッケージ名がすでに取られている場合はエラーが出るので、ユニークなものにしてください。 公開したnpmを確認 では公式サイトからasameshiのパッケージを確認しましょう。 https://www.npmjs.com/package/asameshi … Read more

NuxtJSをUbuntu/PM2/Nginxでデプロイしよう

by
Nuxtをデプロイしよう

今日はNuxtで試しに作ってみたフロントエンドロードマップのウェブアプリをUbuntuサーバーからデプロイします。 先にVueのデプロイの記事を読んでnginxを使ったサーバーを構築しておきましょう。 ちなみにAWS、Heroku, Digital Oceanなどのサーバーを使う場合は今日のようにプロキシサーバーを設定せずにデプロイできる方法があるそうなので見ておいてください。しかし、今日のNginxの設定はとても良い練習になるのでどのサーバーでも活用してみてください。 準備すること Nuxtビルドのチョイス Nuxtアプリをデプロイするにあたり、２つの方法があります。デフォルトはSSR：サーバーサイドレンダリングされる方法で設定されています。もう一つのnpm run generateのコマンドでstaticの静的サイトとしてビルドしたい場合はNuxtのコンフィグに下記のラインを追加しましょう。静的サイトの場合は普通のHTMLファイルのようにそのままデプロイできるのでプロキシサーバーの設定も不要です。 nuxt.config.ts 今回はSSRで行います。このような場合はNodeサーバーを使うためPM2でNodeのウェブサーバーを常時起動できるようにしておきます。詳しいPM2の説明は後ほど。 PM2 PM2（プロセスマネージャー２）はビルドインでロードバランスの機能がついているアプリケーションになります。このPM2がNodeJS（今回はNuxtJS）のアプリが365日常に起動されるように監視してくれます。 では、PM2をサーバーにインストールしましょう。もしローカルでLinuxで作業をしている場合は、PM２が起動するアプリを確認できるので同じようにPM2をインストールしてもOKです。 ではNuxtのプロジェクトのルート直下にecosystem.config.jsを作成し、下記の行を追加します。nameの部分は自分のアプリ名に変更しましょう。 次に下記のコマンドでPM2を起動し、NUXTのアプリが登録されるか確認してください。 実際にサーバーにコードを上げてから同じコマンドを実行します。 リポジトリをクローン では、UbuntuサーバーにSSHで接続をしたあとに、GitHubのリポジトリからNuxtのプロジェクトをクローンしましょう。もしローカルから直接ファイルを上げたい場合はSFTPなどでアップロードしてください。私はSSHクライアントはいつもMobaXtermを使っています。 Nginxのファイルを作成 Nginxをインストールしてコンフィグファイルを作成します。初めての人は理解するまでに時間がかかるかもしれませんが、それぞれのコマンドが何を操作しているのか調べるようにしましょう。 ではnanoなどのテキストエディタでNginxのコンフィグファイルを書いていきます。ここでとても重要なことを説明します。 今回のデプロイはPM2というプロセスマネージャーを使います。これで、127.0.0.1:3000にNuxtのウェブサーバーを常時起動させます。 それをNginxを使ってプロキシサーバーとしてロカールのPM2のウェブサーバーに飛ばすような形になります。 順番でいうと。。。 では、早速nginxのコンフィグを書いていきます。良い慣習としてetx/nginx/sites/available/にサイト名でコンフィグファイルを作成して下記の行を追加します。 listenはポートになります。通常は80番ポートにしてください。もしユーザーが他のポートでアクセスする場合は普通は、URLの最後にポートが必要になります。例：sankou.com:84 server_nameがホストマシンのIPアドレスです。もしドメインを取得している場合は、代わりにここにドメインを記載します。 proxy_passがPM2のアプリが起動しているURLを記載します。デフォルトで:3000なのでそのままでOKです。 ではNginxのテストをします。 OKがでれば問題なしです。 ファイヤーウォール もし80番ポート以外で設定した場合はポートを開けておくようにしましょう。 デプロイの確認 これでサイトのデプロイができました。 一応、このような感じになりました。 お疲れ様です。

NuxtにPiniaをインストールする方法

by
NuxtにPiniaをインストールする

今日はNuxtJSのウェブアプリのプロジェクトに状態管理システムのPiniaをインストールする方法を紹介します。 VueでPiniaを使ったことがある人、Nuxtのコンフィグファイルを触ったことがある人はなんとなくイメージがつかめると思います。 Piniaのインストール Nuxtのプロジェクトが設定できたところで、Piniaの公式サイトの説明に従いインストールを進めていきましょう。 コマンドラインから下記の通りPiniaをインストールします。 npmを使っている人はERESOLVE unable to resolve dependency tree errorというエラーが出るかもしれません。 その場合は、package.json:に下記の行を追加して、再度試してみて下さい。 次に、NuxtのコンフィグファイルにPiniaを登録します。 setup()の外でPiniaを使う場合 Vueの書き方で<script setup>があります。その外でPiniaを使いたい場合はpiniaオブジェクトをuseStore()に渡してあげるようにしましょう。慣習としてプロジェクトのルート直下にstoresディレクトリを作成してPiniaのファイルを格納するようにするようにします。 Piniaファイルを作成 ではsotesディレクトリ直下にJSファイルでPiniaを作成します。<script setup>に近い方法で書く方法を紹介しているので参考にしてください。この方法だとJavaScriptのやり方で書けるので見やすいと思いました。 イメージとしてはこのような感じになります。 お疲れ様です。

Nuxt3にPrimeVueをインストールする方法

by
Nuxt3にPrimeVueをインストールする方法

PrimeVueはVue.jsのUIライブラリでコンポーネントの数が多くお勧めです。今日は、SSR（サーバーサイドレンダリング）ができるVueベースのNuxtライブラリにPrimeVueを使う方法を紹介していきます。 Nuxtのプロジェクト まずは下記のコマンドでNuxt3のプロジェクトを作りましょう。 PrimeVueのインストール 次にPrimeVueをインストールします。 コンフィグファイルからインポート では、ライブラリをインストールしたところで、nuxt.config.tsファイルを開きます。 デフォルトでは何も記載されていません。 ではここにPrimeVueで使うファイルをインポートしていきます。インポートするファイルはPrimeVueの公式ページにあるので必要に応じて確認してください。 Nuxtのプラグインについて Nuxtではpluginsというフォルダーを認識して自動でVueアプリを作成する際にサーバー側でレンダーするかクライアント側でレンダーするか指定することができます。 フォルダーの構成はこのようにできます。 では公式ドキュメンテーションに従い、ファイルをインポートしていきます。 プロジェクトのルート直下にpluginsというフォルダーを作成して、primevue-plugin.jsファイルを作成しましょう。 例としてボタンのコンポーネントを使いたい場合はここで登録しておきます。Vueアプリのmain.jsと似たような感じですね。 ripple:trueはボタンなどで使われるアニメーションのことでデフォルトではfalseになっているので必要に応じて上記のようにtrueに設定してください。 コンポーネントの作成 では、PrimeVueのコンポーネントが登録できたところで、実際にNuxtでボタンを作ってみましょう。 pages/index.vueファイルを作成してデフォルトのランディングページを作成します。 詳しいページの作り方はこちらを参考にしましょう。 これで、テストサーバーを再起動するとPrimeVueのコンポーネントをFlexがちゃんとロードされていることがわかりましたね。 ではお疲れさまでした。