JavaScript

Web開発をする上で一番最初に学ぶプログラミング言語になります。これでHtmlやCSSを操作し、ロジックを追加できるようになります。

また、Node.jsを使うことでバックエンドの構築も可能になりました。

JavaScriptは人気度の上位を争うプログラミング言語です。TypeScriptと合わせて需要も高いので是非、基礎から学んでいきましょう。

Google Map APIを使ってカスタムマップを作成しよう

by
Google Map APIを使ってみる

今日はGoogle Map（グーグルマップ）のAPIを使ってカスタムマップを作成してみましょう！ワードプレスをお使いの方は簡単にプラグインを使って、カスタムマップを作成することができますね。同じことをマニュアルで行います。 これで不動産の物件を地図に表示したり、お店の位置情報を紹介することなどに使えたりすると思います。 完成したコードはGitHubから見てください。 注意 クレジットカードの登録なしでもAPIコールはかけられますが、Googleからのエラーのポップアップが表示されます。もし、一般ユーザー向けにAPIを使用したい場合は、アカウントの登録を完了してください。クレジットカードの登録が必要になります。 2023年の2月時点での参考料金表になります。 今日の環境 サンプルプロジェクトの確認 実際にコードを書く前にどのようなことができるのかデモで確認したい人はこの手順を追ってください。 GoogleマップのGitHubリポをクローンしてGoogleのデモGoogleマップを見てみます。GitとGitHubの使い方はこちらでも説明しています。 これでGoogleマップのデモが開くのでカスタムマーカーを使ったマップもこのように確認することができますね。 Playgroundというボタンをクリックするとコードを見ながら実際にどのように表示されるか試すことができます。 では、早速Google CloudからMAP APIのサービスを使っていきましょう！ JavaScriptのプロジェクト作成 では今日はViteを使ってプロジェクトを作成します。Viteはビルドツールで、ReactやVueのアプリケーションを使う際に使う事がほとんどですが、Vanilla JS（普通のJavaScript）でも使う事ができます。 ではコマンドプロンプト（もしくはターミナル）を開いて下記の様に入力していきます。 では、npm i （installのi）のコマンドでプロジェクトができたらテキストエディタを開きましょう。 また、デフォルトのページをテストサーバーで見たい際はnpm run devのコマンドで確認することができます。 viteで作成されたmain.jsがデフォルトのJavaScriptのエントリーポイントになります。 Google Map APIを作る では、コードに入る前にgoogle Cloudを使ってGoogle MapのAPIキーを作成します。まずは、googleクラウドのページにアクセスします。 右上の無料で利用開始をクリックします。 では、フォームを入力していきます。 では、次のページも完了させ登録を完了させてください。 次にコンソールのページが見れるのでそこから、プロジェクトの選択をクリックします。 次に、新しいプロジェクトをクリックします。 次に、プロジェクト名を適当に入れて、作成ボタンを押します。 プロジェクトが作成できたら、メイン画面の右上にプロジェクトを選択するリンクが表示されるのでそれをクリックします。 次にGoogle Cloudの左上のタブから①APIとサービス、②Google Map Platformの二つを探してピンしておきましょう。ピンはホバーしたときに表示される画びょうのアイコンでショートカットのように上部に持ってこられるので今後探す手間が省けます。 カスタムマップの作成 では、Google Cloudからカスタムマップを作成します。 Google Maps Platformからマップ管理を選択します。 次にCREATE　MAP　IDを選択します。 次に、マップの情報を入力します。 名前は、自分のプロジェクトを適当に入力します。説明も同じように適当に入れます。Map Typeはデスクトップで表示させたい場合は、JavaScriptを選択します。 下にあるRasterとVectorの選択はたデフォルトのRasterを選択します。Vectorでも良いですが、ブラウザによって対応していないものもあるので注意。 … Read more

three.jsを使って360度動画をブラウザ上で再生してみる

by
ブラウザで360動画を再生しよう

今日は、three.jsを使って360度動画をブラウザ上で再生してみます。 さらにマウスを使ってカメラの方向を変えてみます。 今回使う360動画はmp4形式ですが、OggとWebM形式でもブラウザで再生できます。 完成イメージはこんな感じになります。 GitHubで完成したコードはこちらになります。 動画に使っている動画をそのまま再生すると下記の画像のように伸びたような状態になっています。 three.jsを使ってこれを球体に変換してあげます。 その球体の中央にカメラを置いて360度に見えるようにすることが今日の目的です。 今回はthree.jsのサンプルコードを参考にしています。 今日の環境 コードのクローン ではgitを使って完成したコードを自分の環境にクローン（コピー）しましょう。Gitの使い方はこの動画でも説明しています。 ブラウザでhttp://localhost:5173/にアクセスしても、このままだと何も表示されません。 まずは、自分の360度動画を用意してthree.js-360video直下にvideoフォルダを作成して、その中身sample_video.mp4の名称で動画を入れると動画が再生されます。 もし、ファイルパスや動画名を変えたい場合はindex.htmlの下記の行を変えましょう。 これで動画が再生できるようになりました。 コードの中身を理解 では、コードの中身を説明していきます。main.jsを参照してください。 まずはinit()関数です。 前回の記事でも説明したようにthree.jsに必要な要素を作成しinit（イニシャライズ）させます。 必要な要素はカメラ、シーン、物体：geometry（今回は球体　=　SphereGeometry）です。 ここで、球体のgeometryにたいして、videoテクスチャを使用して、360度動画を貼り付けています。 rendererはレンダラーといい、シーンをHTMLにレンダーする役目をします。 ここではHTMLの幅いっぱいにレンダーするように指示しています。 最後に下記のイベントリスナーを加えています。 ではこれらを見ていきます。 onWindowResize関数 onWindowResize()関数では、ブラウザの幅が変わるたびに360動画のサイズを変更するように指示する関数です。 ポインター操作 マウスを使ってカメラの方向を変えます。いわば視線を変える関数になります。 動画の再生 動画の再生は2つの関数からできています。 animateでrequestAnimationFrameとupdateを繰り返しています。 requestAnimationFrameはJavScriptのデフォルトで使えるメソッド（Windowsオブジェクト）になります。これでブラウザが動画をレンダーする際に、update()を繰り返すようにしています。 update関数で使う用語を説明します。 lon：Longitude（経度） lat：Latitude（緯度） phi：poles（極・極座標） theta：equator angle（赤道角） これで、マウスを使って目線を変えるときの位置情報を更新するようにしました。

three.jsを使ってみよう

by
three.js 使い方

今日はJavaScriptライブラリで３Dオブジェクトを使う事ができるthree.jsを紹介します。 今回は基本としてオブジェクトを作成するところまで説明したいと思います。 環境 three.jsをインストール では、公式ドキュメンテーションに沿ってライブラリをインストールしましょう。 ついでにgsapのライブラリもインストールします。 これはブラウザに関係なくJavaScriptのアニメーションを動かしてくれるヘルパーになります。 Viteを使わなくても良いですが、お勧めなのでVanilla JSでもViteを使ってプロジェクトを作成してみましょう。 これでブラウザからデフォルトのぺージが見れるようになりました。 three.jsを始める前に three.jsでは３Dのオブジェクトが使えます。という事はそれに合わせて３Dを出力するための情報が必要になるわけですね。 必要な情報は： ①シーン（scene）：風景。three.jsに何をどこにレンダーするか決めます。 ②キャラクター：モノや、キャラのオブジェクト ③ライト：光の方向や強さなどを調整します。 ④カメラ（camera）：対象物に向けます。デフォルトでは、対象物と同じ位置なので離してあげます。 ⑤レンダラー（renderer）：シーンをHTMLにレンダーしてくれます。 では、下記の例が基本の例です。 これでHTMLに球体が表示されました。 キャラクター それぞれのメソッドに入れる引数で各パラメータを変えることができます。 上記の例では、SphereGeometry()で球体を呼び出しています。公式ドキュメンテーションでパラメータを変えながら実物をビジュアル化して確認することができます。 キャラクター（物体）のコードの例をおさらいします。 SphereGeometryの部分で形を指定します。 他にBoxGeometry（四角・箱型）や、ConeGeometry（コーン、三角の角）の形までいろいろあります。 このSphereGeometry( 15, 32, 16 )のコンストラクタの使い方を説明します。 今回はSphereGeometry（球体）で説明します。デフォルト値や入る値はそれぞれの形で変わるので参考までに理解して、応用してください。 radius — 半径（デフォルトで１）widthSegments — 水平のラインの数（最小値３、デフォルトで３２）多いほどなめらかになります。heightSegments — 垂直のラインの数（最小値２、デフォルトで１６）多いほどなめらかになります。phiStart — （水平のスタートする角度、デフォルトで０） 他に、phiLength、thetaStart、thetaLengthなども指定できますが、省きます。 素材 では、形（シェイプ）を決めたところでその素材（マテリアル）を決めます。これにより、光の反射の仕方やテクスチャ（感触）が変わってきます。 例としてMeshNormalMaterialを使うとこのように書けます。 このマテリアルはベクター素材をRGBカラーに変換してくれます。 素材の種類だけでもこんなにあります。 さらに各素材で指定できるパラメータがあるので必要に応じて確認してください。 これで、シェイプ（形）とマテリアル（素材）を合わせて物体を作成してシーンに追加します。 ライト 次にライトを見てみます。ライトの設定で、先ほど作成した対象物の見え方が変わってきます。 例えば、HemisphereLightを使うとこのように見えます。 このHemisphereLightは上空から照らすライトなのでこのような影が生成されます。 他に、AmbientLightを使うとこのようにグローバルに対象物を照らすライトが全体を明るくしてくれます。 AmbientLightだけだと方向の概念がないために、３Dのように見えませんね。 … Read more

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の使い方を９つ紹介いたしました。知らないもので今日から使えるものはありましたでしょうか？ 是非、活用してみてください。

自作の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番ポート以外で設定した場合はポートを開けておくようにしましょう。 デプロイの確認 これでサイトのデプロイができました。 一応、このような感じになりました。 お疲れ様です。