すべてのカテゴリ

Web開発を学んでいると、よく出てくる「npm」という言葉。初心者にとっては「結局なんなの？」と思うことが多い用語です。この記事では、npmの意味と役割をわかりやすく解説します。npmとは？npm（エヌピーエム）とは Node Package Manager の略で、JavaScriptのライブラリやツールを管理するための仕組みのことです。簡単にいうと「Web開発に必要な便利ツールや機能を、インターネットからダウンロードして使えるようにするサービス」です。npmには次の2つの意味があります。パッケージ管理ツールコマンド（例：npm install xxx）を使って、ライブラリをインストール・更新・削除できるツールのこと。パッケージの公開サービス世界中の開発者が作ったライブラリ（パッケージ）が公開されていて、誰でも自由に利用できる巨大なプラットフォームのこと。つまりnpmは「仕組み」と「サービス」の両方を指しています。なぜnpmが必要なのか？Web開発では、自分ですべての機能を作るのは効率が悪いため、多くの人は既存のライブラリを組み合わせて開発します。例えば：サイトのデザインを効率的に整える → Tailwind CSSビルドや自動化を行う → Viteフレームワークを利用する → React や Next.jsこれらはすべてnpm経由でインストールして使えるようになります。npmがあることで、開発者は「車輪の再発明」をせず、必要な機能をすぐにプロジェクトへ導入できるのです。具体的な使い方npmを使うには、まず Node.js をインストールします。Node.jsを入れると、自動

Windows で NodeJS を使うNodeJS は基本的に、コマンドラインで利用するアプリです。Windows のコマンドラインは、Linux や MacOS とは違うタイプの物を使っています。この記事では、Windows で NodeJS を使う場合について紹介しています。Web 開発でよく利用される NodeJSNodeJS に含まれている「npm」、Javascript のパッケージ管理のためのアプリです。 NodeJS を使わなくても、Web 開発は可能ですが、Vue や React などを利用して開発する場合、殆どの場合は、パッケージ管理のアプリを使って開発するのが一般的です。 この連載でも、Vue を利用するやり方として、NodeJS に含まれる、「npm」を利用するやり方を以前の記事で紹介しています。「npm」を利用すると、Vue や React などのフレームワークの仕組み以外にも、インターネット上で公開されている沢山の基本機能のパッケージ（モジュール）も簡単に自分の開発プロジェクトに取り込んで利用する事ができます。こうした、理由もあって「npm」は Web 開発では広く利用されているアプリになっています。「npm」を含めてソフトウエアの開発用のアプリの多くが、「Unix」という OS をベースに開発されていて、無料で公開されています。Linux や MacOS は、Unix ベースの OS なので余り問題はないのですが、Windows は、少し系統の違う OS なので若干の違いがあります。この記事では、Windows で Web 開発を行う場合のやり方に

便利な外部モジュールの取り込みプログラミングをする上でよく利用される機能、例えば、ネットワーク経由のアクセスなどは別の人が既に作成したモジュールがインターネットで公開されている場合が多く、改めて自分で作らなくても簡単に自分のアプリに取り込んで利用する事ができます。取り込み方はいろいろありますが、Web アプリの場合はインターネットの接続があるのが前提なのでインターネット経由でも取り込む事ができます。この記事では外部モジュールを利用する際に自分のプログラムに取り込む方法を紹介します。インターネット接続が前提の Web アプリWeb アプリとは、Web サイトの形で、Web ブラウザを使って利用する形式のアプリです。当然ですが、Web サイトにアクセスして利用するのでインターネットの接続が前提になっています。 既に紹介していますが、Web アプリの場合、必要な情報は Web ブラウザを介してインターネット経由で Web サーバーから取り込んでいます。Web ページの中で、HTML で書かれた Web ページの基本情報だけではなく、そのページが利用している Javascript やイメージファイルなども一緒に取り組むようになっています。Javascript は HTML ファイルの中に記述することも可能ですが、大きなプログラムの場合、別のファイルで記述して、HTML ファイルの中から呼び出す形で読み込む場合が多くなります。要は、ある Web ページが読み込まれた場合に、必要な外部モジュールのファイルも読み込むことで、外部モジュールが提供する機能をそのページで利用できるという点では、自

前提1. homebrewがinstallされていることnodebrewをインストール-- nodebrewのinstall% brew install nodebrew-- インストールできているか確認% nodebrew -v-- インストールしたいバージョンを指定してインストール% nodebrew install-binary {バージョン}インストールできるバージョンの確認% nodebrew ls-remote最新版のインストール% nodebrew install-binary latest安定版のインストール% nodebrew install-binary stableインストール時にエラー発生する場合↓下記コマンドを実行して再度インストールコマンドを実行する% nodebrew setupインストールしたバージョンの確認% nodebrew lsv5.10.1     <- インストール済みのバージョンcurrent: none <- 実際にローカルで使用しているバージョン(まだ指定してないのでnone)使用するバージョンの指定% nodebrew use {バージョン}nodeコマンドが使えるようにパスを通すbashの場合% echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile% source ~/.bash_profilezshの場合% echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH'

Facebook投稿支援アプリにReact/Vueは必要か (6)？WebアプリやWebサービスを開発するのにフレームワークがどこまで必要なのかをシンプルなアプリを例にして考える企画を実施しています。 これまでに、HTMLファイルをベースとした実装例として、シンプルなHTMLとJavascript、jQuery、CDNをベースにしたReactとVueの実装例を紹介してきました。前回の記事でまとめたように、ReactやVueを使う場合、「npm」を利用してReactやVueのプロジェクトを作成して開発した方が便利です。ReactやVueを利用した開発の殆どは、CDNではなく、「npm」が利用されています。この記事では、「npm」を利用したReactの実装例を紹介しています。パッケージを管理する「npm」Node.jsをインストールすると、合わせてインストールされるのが「npm」というパッケージ管理ツールです。このツールを利用すると、インターネット上で公開されているNode.js（Javascript）のパッケージを自分のWebアプリやサービスに取り込んで簡単に利用できます。少し規模の大きなWebアプリやサービスの場合、そうした既存の公開されているパッケージを利用できるので開発の効率が向上します。もちろん、CDN(Contents Delivery Network)で、HTMLファイルから読み込めばこうしたパッケージも利用できるのですが、規模が大きなアプリやサービスの場合、npmで取り込んでしまった方が便利です。Node.jsは、オフィシャルサイトからダウンロードして簡単にインスト

gulpが急に動かなくなった時にやったことをメモしておくthrow new Error(errors.missingBinary());$ npm run gulpを実行した時に発生したエラーいろいろエラーの内容が表示されて混乱するがちゃんと見れば書いてある$ npm rebuild node-sass上記コマンドを実行したらgulpが動くようになりました🎉