タグ: npm

検索結果: 10件

article-thumbnail

Node.jsでのディレクトリ・ファイル操作方法まとめ

【概要】Node.jsでのディレクトリとファイルの操作方法についてまとめます。参考としてNuxt.jsでのzipファイルの投稿方法については以下のドキュメントにまとめているので、参考にしてみて下さい。Nuxt.jsでzipファイルをアップロードする方法【初期設定】1. multerとfs-extraとadm-zipをインストールするnpm i multer fs-extra adm-zip2. Node.jsにてmulterとfs-extraとadm-zipを読み込むconst fs require('fs-extra');const multer require('multer');const multerStorage multer.diskStorage({ destination (req, file, cb) { cb(null, '/static'); }, filename (req, file, cb) { cb(null, file.originalname); }});const upload multer({ storage: multerStorage });const admZip require('adm-zip');※ 「multer.diskStorage」メソッドのデフォルト設定では投稿されたzipファイル名がランダムな文字列で保存されます。元のファイル名で保存する場合の処理を記述しているので、不要な場合はメソッド内部で設定されている「filename」部分は削除して下さい。【ディレクトリ確認】・構文fs.existsSync(検索対象パス);存在する場合には「true」を返し、存在しない場合は「false」を返します。・例文下記ではstatic/uploadディレクトリが存在確認をしております。if (fs.existsSync('./static/upload')) { console.log('ディレクトリが存在します。');} else { console.log('ディレクトリは存在しません。');}【zipファイル解凍】・構文let zip new admZip(zipファイルパス);zip.extractAllTo(解凍先のパス, true);先ず、「admZip」メソッドの引数にzipファイルのパスを記述します。「zip.extractAllTo」メソッドで指定したパス先に解凍します。・例文let zip new admZip('./static/zip/sample.zip');zip.extractAllTo('./static/upload/', true);上記は「/static/zip」配下に存在する「sample.zip」を「/static/tmp/」配下に解凍します。【ディレクトリ作成】・構文fs.mkdir(作成対象のディレクトリパス);・例文fs.mkdir('./static/tmp/');staticディレクトリ配下にtmpディレクトリを作成します。【ディレクトリ同期】・構文fs.copySync(同期元パス, 同期先パス);同期元のファイル・ディレクトリが第2引数に設定したパスに同期されます。・例文fs.copySync('./static/tmp/sample', './static/upload/sample');上記は「/static/tmp/sample」配下のディレクトリ・ファイルを「/static/upload/sample」に同期させます。よって、どちらのsampleディレクトリも同じ内容になります。筆者はzipファイル解凍後に、中身のバリデーション等を行う際に使います。【ディレクトリ削除】・構文fs.removeSync(削除対象ディレクトリのパス);・例文fs.removeSync('./static/tmp/sample');上記は「/static/tmp/sample」ディレクトリを削除します。【ファイル削除】・構文fs.unlink(削除対象のファイルパス, (err) { if (err) throw err; console.log(削除対象のファイルパス + ' was deleted');});※ 上記はerrのcatchとlog出力を行っており、不要な場合は削除して下さい。・例文fs.unlink('./static/zip/sample.zip', (err) { if (err) throw err; console.log('./static/zip/sample.zip was deleted');});上記は「/static/zip/sample.zip」を削除しております。

カテゴリ: Node.js 2020-11-25 22:40:50
article-thumbnail

CentOS7にnvmを使用してNode.jsとnpmをインストールする

【概要】CentOS7にnvmを使用してNode.jsとnpmをインストールする方法をまとめます。ここでは最新バージョンや特定のバージョンのインストール等をまとめているのでCentOS7にNode.jsとnpmの環境構築したい方は参考にしてみて下さい。[注意点]下記はrootユーザーでの設定を記載しております。ec2-user等の一般ユーザーにも設定したい場合は同じ事を対象のユーザーで実行して下さい。【詳細】1. rootユーザーになるrootユーザーでインストールを実行したい為、下記のコマンドを実行します。sudo su -2. nvmをインストールするcurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash3. nvmを有効化する・有効化. ~/.nvm/nvm.sh・.zshrcにパスを通すexport NVM_DIR"/root/.nvm"[ -s "$NVM_DIR/nvm.sh" ] amp;amp; . "$NVM_DIR/nvm.sh"※ 「NVM_DIR"/root/.nvm"」はrootユーザー用の設定になっているので、rootユーザー以外で設定する場合は適切なPATHに変えて下さい。4. nvmでNode.jsをインストールするi. Node.jsのインストール可能なバージョンを確認するnvm ls-remoteii. Node.jsをインストールする・最新版のNode.jsをインストールnvm install --lts・バージョン指定してインストールするnvm install v15.0.15. Node.jsとnpmのインストール確認node -vnpm -vこれでNode.jsとnpmのバージョンが出力されれば、インストール成功です。6. nvmでalias設定を行うaliasを状況に合わせて設定すると使用するNode.jsとnpmのバージョンを定義できます。下記ではdefaultのaliasを設定している為、通常時に使用するバージョンはv14.14.0となります。・構文nvm alias default バージョン・例文nvm alias default v15.0.1Cf. インストールしたNode.jsのバージョンをアンインストールする・構文nvm uninstall バージョン・例文nvm uninstall v15.0.1

カテゴリ: CentOS 2020-10-29 00:54:12
article-thumbnail

Nuxt.jsでvue-selectを使用する

【概要】Nuxt.jsにvue-selectをインストールし、フォームのサジェスト機能を作成します。このvue-selectを使用する事でサジェストに存在する値のみ入力可能にする事も可能です。【詳細】1. vue-selectをインストールするnpm install vue-select2. Vueファイルに設定をするNuxt.jsのVueファイルに設定をします。・設定例lt;template lt;div lt;h1パン選択lt;/h1 lt;b-container fluid lt;b-form @submit"onSubmit" lt;b-form-group label"パン:" label-for"bread" class"text-left" lt;v-select id"bread" v-model"form.bread" :options"breadList" placeholder"パン" required / lt;/b-form lt;/b-container lt;/divlt;/templatelt;scriptimport vSelect from 'vue-select';import 'vue-select/dist/vue-select.css';export default { components: { vSelect }, data() { form: {bread: ''}, breadList: ['アンパン', 'カレーパン', 'メロンパン'], }},lt;/script・表示サンプルCf. タグ設定公式:Vue Select API Props以下のようなタグを設定したとします。lt;v-select id"bread" v-model"form.bread" :options"breadList" @input"changeBread" :clearable"false" required /上記のサンプルとは違う点は2つです。1. フォームの値が変更された時に実行するメソッド定義2. フォームの値を削除不可にする(常時いずれかの値が設定されている事)1は「@input」によって設定できます。2は「clearable"false"」によって設定できます。その他の設定に関しては下記の公式ページを参考にしてみて下さい。

カテゴリ: Nuxt.js 2020-10-24 00:37:31
article-thumbnail

Nuxt.jsでvue-cool-selectを使用してフォームのサジェスト機能を作成する

【概要】Nuxt.jsにvue-cool-selectをインストールし、フォームのサジェスト機能を作成します。【詳細】1. vue-cool-selectをインストールするnpm install --save vue-cool-select2. Vueファイルに設定をするNuxt.jsのVueファイルに設定をします。・設定例lt;template lt;div lt;h1パン選択lt;/h1 lt;b-container fluid lt;b-form @submit"onSubmit" lt;b-form-group label"パン:" label-for"bread" class"text-left" lt;cool-select id"bread" v-model"form.bread" :items"bread" :placeholder"form.bread" required / lt;/b-form-group lt;b-button type"submit" variant"primary" class"mt-2"Submitlt;/b-button lt;/b-form lt;/b-container lt;/divlt;/templatelt;scriptimport { CoolSelect } from "vue-cool-select";import("vue-cool-select/dist/themes/bootstrap.css");export default { components: { CoolSelect }, data() { form: {bread: ''}, bread: ['アンパン', 'カレーパン', 'メロンパン'], }},lt;/script・表示サンプル[設定概要]・サジェストリストdata部分で定義しているbreadの配列をcool-selectタグのitemsに渡す事でサジェストにパンのリストが表示されます。・vue-cool-selectをインポートimport { CoolSelect } from "vue-cool-select";import("vue-cool-select/dist/themes/bootstrap.css");ここではBootstrap Vueを使用している事を想定していますが、その他のCSSを使用している場合は下記をインポートする事でCSSが反映されます。import("vue-cool-select/dist/themes/material-design.css");・vue-cool-selectのComponentを設定するcomponents: { CoolSelect},

カテゴリ: Nuxt.js 2020-10-14 01:48:33
article-thumbnail

CentOS6系にnvm・Node.js・npmをインストールする

【概要】CentOS6系統のサーバーにnmvインストールし、Node.jsとnpmをインストールする方法をまとめます。この項目はGitのバージョンが2以上必要です。もしCentOS6にGitのバージョンが1.7等の1系がインストールされている場合は下記のリンクを元にGitのバージョンをアップデートして下さい。CentOS6にGit2系をインストール・アップデートする【nvm・Node.js・npmインストール】1. nvmインストールcurl -o- https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash2. nvmインストール確認nvm --version出力結果例0.33.83. インストール可能なNode.jsのバージョン確認nvm ls-remote4. Node.jsをインストールする下記にバージョンを指定したインストール方法を記載しています。環境に合わせてインストールして下さい。i. 最新のstable版をインストールする場合nvm install stableii. 最新版のNode.jsをインストールするnvm install --ltsiii. バージョン指定する場合nvm install v11.15.0上記は「v14.14.0」をインストールする場合のコマンドです。Cf. インストール済みNode.jsのリストを見るnvm ls5. 使用するNode.jsのバージョンを指定するnvm use v11.15.06. nvmでalias設定を行う・構文nvm alias default バージョン・例文nvm alias default v11.15.0Cf. インストールしたNode.jsのバージョンをアンインストールする・構文nvm uninstall バージョン・例文nvm uninstall v6.8.0

カテゴリ: CentOS 2020-10-12 23:59:19
article-thumbnail

Nuxt.jsのmomentモジュールを使用して任意の日付フォーマットを出力する

【概要】Nuxt.jsで日付フォーマットを使用する方法と現在時刻の出力方法についてまとめています。【詳細】1. モジュールをインストールnpm install --save-dev @nuxtjs/moment2. nuxt.config.jsにmomentを使用する為の設定を記述するbuildModulesにmomentを追記し、moment部分をnuxt.config.jsの下部に作成します。・nuxt.config.jsの設定内容export default { ...省略... buildModules: [ // moment '@nuxtjs/moment', ], ...省略... // moment moment: { locales: ['ja'] }, ...省略...}3. Vueファイルでの読み出し・現在時刻の出力this.$moment().format('YYYY-MM-DD HH:mm:ss');・特定の時刻をフォーマットに合わせて出力引数に日時のデータを持たせます。すると、formatの形に合わせて出力されます。下記の例では「2020-08-14T11:00:00.000Z」を渡しており、期待される結果は「2020-08-14 20:00:00」になります。this.$moment('2020-08-14T11:00:00.000Z').format('YYYY-MM-DD HH:mm:ss');出力結果2020-08-14 20:00:00

カテゴリ: Nuxt.js 2020-10-07 23:47:07
article-thumbnail

Nuxt.jsでenv機能を設定する

【概要】 Nuxt.jsでenv機能を設定する方法についてまとめます。【詳細】1. dotenvモジュールをインストールするnpm i @nuxtjs/dotenv2. .envファイルを作成するプロジェクトのディレクトリ直下に.envファイルを作成します。例として下記を設定内容とします。API_KEY 'This is API_KEY'TEST 'テスト項目です。'※ 基本的にenvファイルに記述されている内容は外部に漏れてはいけない内容です。デフォルトで.gitignoreに.envが記述されている事が多いですが、必ず確認するようにしましょう。3. nuxt.config.jsに設定を行うここではAPI_KEYとTESTという定数名に対してenv設定を行います。export defaultの記述前にenvを読み込む設定を記述します。export defaultの内部にenv部分を作成し、読み込む定数名を記述します。env内容を追加する場合は定数部分(const)とexport defaultのenv部分にカンマ区切りで定数名を追加して下さい。require('dotenv').config();const { API_KEY, TEST } process.env;export default { ...省略... env: { API_KEY, TEST, }}4. vueファイルにて読み込み設定「process.env.定数名」でenvの設定を読み込めます。Nuxt.jsにAPIサーバーを構築した場合でも上記の記法で設定を読み込む事が可能です。試しにindex.vueにて読み込んでみます。・/pages/index.vuelt;scriptexport default { mounted() { console.log(process.env.API_KEY); console.log(process.env.TEST); }}lt;/script5. Nuxt.jsを起動して確認下記のコマンドでNuxt.jsを起動し、ブラウザのConsoleに.envに記述した内容が出力されれば成功です。・出力結果例This is API_KEYテスト項目です。

カテゴリ: Nuxt.js 2020-10-06 03:09:12
article-thumbnail

Nuxt.jsでFont Awesomeを使用する

【概要】Nuxt.jsのFont Awesomeのモジュールインストールから使用方法までをまとめています。【詳細】1. Font Awesomeを使用する為のモジュールをインストールする下記のコマンドでFont Awesomeのモジュールをインストールします。npm i nuxt-fontawesomenpm i @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesomenpm i @fortawesome/free-solid-svg-icons2. nuxt.config.jsにFont Awesomeを使用する為の設定をするmodule部分に追加するのとfontawesome部分を新規で記述する必要があります。詳細は下記になります。・nuxt.config.jsexport default { ...省略... modules: [ ...省略... // Font Awesome 'nuxt-fontawesome', ], ...省略... // Font Awesome configuration fontawesome: { imports: [{ set: '@fortawesome/free-solid-svg-icons', icons: ['fas'] }] },}3. Font Awesomeのアイコンを表示してみる今回は下記URLのcaret-upを使用してみます。Font Awesome: caret-upFont Awesomeで出力されているタグは下記になります。lt;i class"fas fa-caret-up"lt;/iNuxt.jsで使用する際にはVueファイルに下記のように記述します。lt;font-awesome-icon :icon"['fas', 'caret-up']" /ブラウザにてFont Awesomeのアイコンが表示されれば成功です。

カテゴリ: Nuxt.js 2020-10-05 23:46:48
article-thumbnail

Amazon Linux 2にNode.jsとnpmをインストールする

【概要】Amazon Linux2にNode.jsとnpmをインストールする方法についてまとめています。このドキュメントを書いた時はNuxt.jsをデプロイする為に書きました。Nuxt.jsをデプロイする方法については下記の記事を参考にしてみて下さい。pm2でNuxt.jsをデプロイする【詳細】1. rootユーザーになるrootユーザーでインストールを実行したい為、下記のコマンドを実行します。sudo su -2. nvmをインストールするcurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash3. nvmを有効化する. ~/.nvm/nvm.sh4. nvmでNode.jsをインストールするnvm install node5. Node.jsとnpmのインストール確認node -vnpm -vこれでNode.jsとnpmのバージョンが出力されれば、インストール成功です。

カテゴリ: AWS 2020-05-29 04:09:36
article-thumbnail

Node.jsとnpmとyarnをmacにインストールする

【概要】macにNode.js・npm・yarnをインストールします。また、Node.jsのバージョンを指定してインストールする方法とインストールした複数のバージョンを切り替える方法もまとめています。インストールにはbrewコマンドを使用します。まだbrewコマンドをインストールしていない場合は下記のドキュメントを参考にbrewコマンドをインストールして下さい。macにHomebrewをインストールするCf. npm・yarnとはnpmとyarnは両方ともパッケージ管理システムの1つです。npmはNode Package Managerの略称からきています。【nodeとnpmのインストール手順】1. 最新版のnodebrewをインストールするbrew install nodebrew・インストール可能なバージョンの確認nodebrew ls-remote※ もし上記コマンドやインストールコマンドでエラーが出力されたら、下記のコマンドを実行する。mkdir -p ~/.nodebrew/src・最新版のNode.jsのバージョンをインストールするnodebrew install-binary latest・安定版のNode.jsのバージョンをインストールするnodebrew install-binary stable・バージョンを指定してインストールnodebrew install-binary v11.15.0Cf1. インストールされたNode.jsのバージョンのリストを取得するnodebrew list出力結果v13.13.0current: noneCf2. nodebrewコマンドでNode.jsとnpmのバージョンを切り替えるnodebrewコマンドで使用するNode.jsのバージョンを指定するとそのバージョンに合わせてnpmのバージョンも切り替わります。よって、使用したいNode.jsのバージョンを指定してプロジェクト毎に切り替えられます。2. インストールしたNode.jsのバージョンを反映し、確認する・インストールされているNode.jsのバージョンのリストを出力するnodebrew list出力結果例v11.15.0v13.13.0current: v13.13.0ここでインストールされているNode.jsのバージョンは「11.15.0」と「13.13.0」です。適応しているバージョンは「13.13.0」です。・使用するNode.jsのバージョンを指定する構文nodebrew use バージョン「13.13.0」のバージョンを使用する場合nodebrew use v13.13.0・nodebrewコマンドのバージョン確認nodebrew -vnodebrew 1.0.13. パスを通すここでは「~/.zshrc」に追記しますが、使用しているシェルがbashの場合は「~/.bash_profile」に追記して下さい。vi ~/.zshrc追記内容下記のPATH変数に追記という形で入力する。export PATH$PATH:......:/Users/user-name/.nodebrew/current/bin「export PATH$PATH:......」と各種コマンドのパスが記述されているので「:/Users/user-name/.nodebrew/current/bin」で追記して下さい。また、「user-name」部分は個人のmacのユーザー名に合わせて変更して下さい。4. Node.jsとnpmの確認設定を反映する為に一度ターミナルをログアウトします。再度ターミナルを開き、npmとnodeのバージョンを確認します。・Node.jsのインストール確認とバージョン確認which nodenode -v・npmのインストール確認とバージョン確認which npmnpm -v【yarnインストール手順】・yarnをインストールするbrew install yarn

カテゴリ: mac 2020-05-24 22:54:22