Node.js on Blogenist -ブロゲニスト-

【Scoopで簡単導入】WindowsでNodejsのバージョン管理を可能にしてくれるnvmのインストール方法と使い方

Fri, 22 Mar 2024 21:32:11 +0900

nodejsのバージョンを管理したい

Nodejsを使って開発を行っていると、案件毎に使用しているNodejsのバージョンが異なり切り替えをする必要が出てくると思います。

MacやLinux環境だとnodenvなどを使って簡単に切り替える事が出来るのですが、Scoopを使ってWindowsのパッケージ管理をしている場合、nodenvが対応していないので導入する事が出来ませんorz

【ドキュメントをGit管理可能】mermaid.jsでフローチャートやシーケンス図をマークダウン管理しよう【UML】

Mon, 29 Mar 2021 18:21:49 +0900

MD形式でシーケンス図を描きたい

専用ツールは使いたくない

皆さんはシステム開発をする際にシーケンス図を書いていますでしょうか？

様々なシステムと連携する際に、それぞれの処理フローを明確にするためにはシーケンス図を書く事がとても大事ですよね。

【ホストマシンを汚さずに】docker-composeでvue.jsプロジェクトの開発環境を構築する方法【Vue-CLI】

Tue, 21 Apr 2020 00:04:44 +0900

Vue-CLI+Quasar+Pugで静的サイトを作ってみる

フロントの技術はめまぐるしい変化を遂げてますが、最近はVue.jsに落ち着いた感が出てきている気がします。

The Progressive JavaScript Framework なぜ VUE.JS ? はじめる Vue.js

【TypeScript】「Calls to 'console.error' are not allowed.」の警告が出た時の原因と解決方法まとめ【ビルドエラー】

Thu, 24 Oct 2019 23:51:41 +0900

consoleを使うと警告が出る

TypeScriptを使っている際に、ログ出力のためにconsole.error()などを使うと以下のような警告が出るようになります。

警告内容

WARNING in /Users/blogenist/Develop/sample/src/App.vue
106:9 Calls to 'console.error' are not allowed.
 104 | })
 105 | .catch(err => {
 > 106 | console.error("Copy Error.", err);
 | ^
 107 | });
 108 | }

【Node.js】npmモジュールの「sitemap-generator」でサイトマップの生成を自動化しよう【クローリング】

Wed, 23 Oct 2019 21:12:34 +0900

Sitemapを作りたい

静的サイトを作成している際に、複数ページにまたがる場合はSitemapを作成する必要があります。

サイトマップを使うと、ウェブマスターはサイト内のクロールされるページを検索エンジンに簡単に知らせることができます。サイトマップは、最終アップロード日、通常の更新頻度、サイト内の他の URL との相対的な URL 優先度など、各 URL の詳細メタデータのほか、サイトの URL がリストされている簡単な形式の XML ファイルであるため、検索エンジンでより正確にサイトをクロールできます。 sitemaps.org - プロトコル

【Vue-CLI 3系】Quasarでアイコンが表示されない場合の原因と解決方法まとめ【マテリアルアイコン/FontAwesame/MDI】

Sat, 19 Oct 2019 18:32:05 +0900

アイコンが出ない助けて！！！

表示されない

Quasarを使ってWebシステムやサイトを構築している際に、ドキュメントに「マテリアルアイコン以外にもFontAwesameやMDIなどをサポートしているよ！」という記載があったので使ってみようと思ったところ表示されませんでした。

【vuex-i18n】Vuexで多言語対応をする方法【簡単実装】

Fri, 11 Oct 2019 23:15:13 +0900

多言語化を試してみた

来年の2020年には東京五輪が開幕、また日本の少子化による労働力不足などもあり、今後は日本に多くの外国人がなだれ込んでくると

手順

vuex-i18nのインストール

まずは以下のコマンドで必要なモジュールをインストールしましょう。

【TypeScript】streamやBufferのエラーが出る場合の対応方法【原因と解決方法】

Sat, 05 Oct 2019 23:31:59 +0900

依存ライブラリでTypeScriptエラーが発生

TypeScriptを利用して開発をする際に、様々なライブラリを利用することになると思います。

その際に、依存ライブラリ側でTypeScriptのエラーが出る事があります。

【サイトキャプチャ自動化】NightmareJSを使って大量の画面のキャプチャを自動で保存しよう【PhantomJS】

Fri, 04 Oct 2019 23:27:30 +0900

大量のURLの画面キャプチャを自動化したい

もはやキャプチャ保存は人間のやる作業ではない

サイト開発等をしている場合、開発中の各画面のキャプチャを保存したいというケースがありますよね。

しかし、人力でブラウザで全てのページを開いてキャプチャツールを使って保存、、、なんて作業をするのはとても骨が折れます。

【Canvas】Property 'toDataURL' does not exist on type 'HTMLElement'.の原因と対処方法【TypeScript】

Thu, 03 Oct 2019 23:02:52 +0900

CanvasのtoDataUrlでコンパイルエラー

TypeScriptを使ったプロジェクトの中でcanvasのtoDataUrlメソッドやtoDataURLメソッドを使用すると、以下のようなエラーが発生する事があると思います。

【baseUrl】Vue-CLI3でルートディレクトリ以外にデプロイしたい場合のURLを置き換える方法【publicPath】

Wed, 25 Sep 2019 23:22:24 +0900

Vueプロジェクトをサブディレクトリにデプロイしたい

サイトなどを製作している場合、基本的にはhttp://localhost/{アプリケーション}の形で開発及び動作確認を行うと思います。

そして、いざ実装が終わりデプロイするぞ！！となった場合、レアケースですが、
「ルートじゃなくてサブディレクトリに配置して。」
と言われる事が稀にあります。笑

【TypeScript】FileReaderのevent.target.resultがString型に代入出来ない時の原因と対策【ArrayBuffer】

Tue, 24 Sep 2019 22:32:21 +0900

TypeScriptでコンパイルエラー

TypeScriptを利用して、Formのファイル選択時にサムネイルを出そうと思い、以下のようなコーディングをした際にTypeScriptのエラーが発生しました。

【Vue.js】Vue-CLI3でBootstarp-vueを導入する方法【デザインフレームワーク】

Mon, 23 Sep 2019 14:40:29 +0900

VueアプリでBootstrap4を導入したい

管理システムや簡易なWebサイトを開発する際、そこまでデザインにこだわる必要がなく、とはいえ自分でCSSを作り込む時間をかけたい場合にUIフレームワークを導入することになると思います。

【GithubActions】新機能を使って特定ブランチへのマージをトリガーにS3へファイルを転送するWorkflowを組んでみた【AWS-cli】

Sun, 22 Sep 2019 13:53:39 +0900

GithubActionsを使ってみよう

CI/CDをGithubで完結

皆さんはGithubActions、使っていますか？

GithubAcrtionsとは、2018年10月にβ版として公開されたGithubの新機能の事を指します。

【TypeScript】Vuetifyを入れた際の「implicitly has an 'any' type.」のビルドエラーの原因と解決方法【Vue-cli3】

Sat, 21 Sep 2019 14:32:16 +0900

VuetifyでTypeScriptエラー

Vue-cli3で簡単に導入可能

Vue-cli3を利用すると、簡単にプロジェクトにVuetifyを導入することが可能になります。

vue add vuetify

📦 Installing vue-cli-plugin-vuetify...

yarn add v1.17.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...

success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ vue-cli-plugin-vuetify@0.6.3
info All dependencies
└─ vue-cli-plugin-vuetify@0.6.3
✨ Done in 2.79s.
✔ Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: Default (recommended)

🚀 Invoking generator for vue-cli-plugin-vuetify...
📦 Installing additional dependencies...

yarn install v1.17.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...

success Saved lockfile.
✨ Done in 4.77s.
⚓ Running completion hooks...

✔ Successfully invoked generator for plugin: vue-cli-plugin-vuetify

【universal-analytics】ElectronにGoogleAnalyticsを導入して機能の利用・アクセス解析をする方法【Vue-cli】

Tue, 17 Sep 2019 01:21:10 +0900

ElectronアプリケーションにGoogleAnalyticsを導入したい

簡単に導入出来ると思ってた時期が僕にもありました。

Electronでアプリケーションを作る際に、公開することを見越してアクセス解析を仕込もうと思いました。

ElectronもWebの技術で作成されているので、簡単に入れれるだろうと思っていましたが、結構ハマったので備忘録として記事に残したいと思います。

【簡単瞬殺】vue-cliでpugを導入して記述量を半分以下に減らす方法【Electron】

Wed, 11 Sep 2019 22:22:57 +0900

PugでVue.jsを書こう

Pugについては以前ご紹介しています。

今回はVue-cliを利用して、ElectronプロジェクトにPugを導入する方法をご紹介します。

【Vue.js】Electronのタイトルバーを消す方法【ドラッグ移動も対応】

Mon, 09 Sep 2019 23:01:37 +0900

Electronアプリのタイトルバーを消したい

Electron製のアプリケーションを作るとデフォルトではこのように、アプリケーション名がタイトルバーに表示されます。

しかし、正直なところデザイン的にはタイトルバーは表示されなくても良い情報なので消したいですよね。

【Vue.jsのUIフレームワーク】Electronアプリのデザインフレームワークに「Quasar」をインストール・導入する方法

Sun, 08 Sep 2019 21:02:13 +0900

VueのUIフレームワークは「Quasar」で決まり

沢山あって迷う問題

先日、Vue.jsを使う中で、UIフレームワークを何にするかで悩みました。

Vuetify やBootstrap-Vue 、Buefy 、Element などなど、様々なものがありますが、その中でもQuasarがダントツで使いやすい&コンポーネントの数が膨大だったので使ってみる事にしました。

【自作デスクトップアプリ】Electronにアイコンを設定する方法【Vue.js】

Fri, 06 Sep 2019 22:51:15 +0900

アプリケーションアイコンを設定しよう

前回、Electron + Vue-cliを用いた環境構築方法についてご紹介しました。

今回はビルド時にアプリケーションアイコンを指定する方法をご紹介します。

【デスクトップアプリ】Electron+Vueの環境構築をvue-cliのみで完結してみた【エディターいらず】

Thu, 05 Sep 2019 22:45:08 +0900

Electron使いたい

今時のデスクトップアプリはクオリティが高い

エンジニアの皆さんは、SlackやAtom、VSCode、PostManを使ったことありますか？

使いやすさやデザイン、動作の軽さなどかなり使いやすいアプリケーションだと筆者は思っています。

【SSR】Nuxt.jsで@nuxtjs/axiosを使って外部APIにリクエストを投げてレスポンスを取得・表示してみよう【Vue.js】

Fri, 19 Jul 2019 23:25:08 +0900

Nuxt.jsならAPI呼び出しも簡単

前回の記事では、Nuxt.jsプロジェクトにTypeScriptを導入するところまで進めました。

今回は、Nuxt.js内部で外部APIへのリクエストを行って、そのレスポンスを画面に表示するところまでを作ってみようと思います。

【VSCoe】VisualStudioCodeでDockerのNode.jsにリモートデバッグしてみよう【Nust.js/Vue.js】

Tue, 18 Jun 2019 20:05:38 +0900

Dockerコンテナ内のNuxt.jsをデバッグしてみよう

先日、Docker環境を用いたNuxt.jsの開発環境構築についてご紹介しました。

今回はVSCodeを用いたデバッグ方法についてご紹介したいと思います。

【Nuxt.js】プロジェクトに後から自前でTypeScriptを導入する方法【yarnでサクッと簡単】

Mon, 17 Jun 2019 01:25:25 +0900

TypeScriptを導入しよう

Nuxt.jsを使ってアプリケーションを開発する際、TypeScriptを使った静的型付けを行うのが当たり前になってきています。

JavaScript that scales. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

【Nuxt.js】vueファイルからJavaScript(TypeScript)/CSS(Sass)/Template(Pug)を外部ファイル化して読み込む方法【ベストプラクティス？】

Sat, 15 Jun 2019 16:19:23 +0900

ファイルを細分化しよう

皆さんはNuxt.jsを使って開発をしていますか？

Nuxt.jsを使ってWebアプリケーションを開発していると、デフォルトでは一つのvueファイルの中に様々な記述をすることになると思います。

【pug導入編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリング(SSR)をしてみよう【Vue.js】

Thu, 13 Jun 2019 22:44:59 +0900

おさらい

前回は、Nuxt.jsプロジェクトでsassを取り扱えるようにカスタマイズしました。

今回はpugを使えるようにカスタマイズしていこうと思います♪

【sass導入編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリング(SSR)をしてみよう【Vue.js】

Wed, 12 Jun 2019 23:55:56 +0900

おさらい

前回までで、ローカルでのサーバー起動・動作確認まで行うことが出来ました。

今回は、プロジェクトへのsassの導入を進めていこうと思います。

【プロジェクト作成編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリングをしてみよう【Vue.js】

Tue, 11 Jun 2019 19:56:46 +0900

前回のおさらい

前回は、Dockerを用いてNuxt.jsの開発を行うための環境を構築する所までご紹介しました。

今回は実際にNuxt.jsプロジェクトを作成し、起動して動作確認する所までをご紹介して行こうと思います。

【Docker環境構築編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリングをしてみよう【Vue.js】

Mon, 10 Jun 2019 20:10:49 +0900

Nuxt.jsがアツい

フロントエンド戦争は落ち着き始めている？

近年のフロントサイドの技術は目まぐるしく進化を遂げていますね。

AngularJSからReact、Node.jsなどなど。。。

そして、そんなフロントエンド戦争に終止符を打つべく登場したのが、Vue.jsです。