いつも忘れてしまうので書き留めておきます。macOS Monterey（12.4）で確認をして内容を更新しました。この記事で紹介しているツール「n」もv8.2.0になりました！ Node.jsのアップデート n という便利なバージョン管理ツールがあるので、これを使ってバージョンを確認してアップデートします。nの詳しい使い方はこちらの記事 あたりをご参照いただくと良いと思います。n を使う際の注意点もしっかり説明されています。 nのインストール $ npm install -g n Node.jsのバージョンの確認 1行目の「–stable」でStable（推奨版）のバージョン、2行目の「–latest」で最新版のバージョンが確認できます。 $ n --stable $ n --latest Latestのインストール $ n latest latestは最新の機能を搭載した最新版へのアップ

Vite + React で新規プロジェクトの開発環境を作ろうViteは2020年に発表されたフロントエンドのビルドツールです。最初「ヴァイト」と読んでたんですが、「ヴィート」と読むみたいですね。フランス語で「速い」という意味だそうです。絶賛Reactのお勉強中なので、ViteでReactの環境を作る流れを備忘録的にまとめておきます！ この記事は動画でも解説しています。動画派の方はぜひご覧ください！ Vite とは？Viteを使えばベースのプログラムを予め準備しておいてくれているので、開発をすぐに始められるようになります。スターターキットとか、テンプレートみたいなものですね。他にも複数のファイルをひとつにまとめたり、Sass を CSS に変換するなどの作業を爆速でできるようになります。 また、ファイルを保存すると同時に、確認画面も自動的に更新されます。ホットリロードと呼ばれるものですね。

スライド 当記事は以前勉強会でLTしたものです。 スライドは下記にあります。 フロントエンド覚えること多すぎ問題 モダンなフロントエンド開発で、入門記事を探そうとすると、 まずwebpackやTypeScript, Babelによるビルド環境構築から始まる記事が多くヒットします。 ですが、Node.jsの初心者がいきなり複数のツールを習得しようとすることが 挫折の原因になっていると感じています。 ですので、まずNode.jsをインストールした直後から、必ず使うことになる、 npmの機能をまず覚えておきましょう。 フロントエンド開発で覚えるべき３つのコマンド 以下の3つだけ覚えておきましょう。 npm init npm install npm run これだけ覚えれば、ひとまずフロントエンド開発を進めることができます。 完璧なワークフローを構築するのは、書いているアプリが大きくなってきてから

RailsやDjango、LaravelなどWeb開発のフレームワークはいくつかありますが、JavaScriptだけで実装が可能なNode.jsも選択肢の1つ。Node.jsに関心がある方、初めてWeb開発をやってみようという方に、翔泳社から9月25日に発売した『入門Node.jsプログラミング』がいかがでしょうか。今回は、本書を使ってどのように学んでいけばいいのか、抜粋して紹介します。 本記事は『入門Node.jsプログラミング』の「LESSON 0 Node.jsとJavaScriptエンジンの準備」から抜粋したものです。掲載に当たり、一部を編集しています。 本書で学ぶこと 本書の目標は、Node.jsというプラットフォームで、JavaScript言語を使って、Webアプリケーションを構築する方法を学ぶことです。本書は、前章までに学んだ概念や開発スキルに基づいて進行します。 順番にレッ

静的サイトジェネレータ「VuePress」の導入からデフォルトテーマの簡単な設定までを紹介します。 Node.jsがインストール済みで少しコマンドが入力できさえすれば、Vueの知識がなくてもそれっぽいドキュメントがすぐ作れるような形で紹介しているので、興味ある方は試してみてください。 Node.js（Ver 8以上）が必要になるので、使っている覚えのない方や使用しているバージョンが古い方は、Node.jsをインストールまたはアップデートをしてください。 コマンドで$ node -vを入力すれば、インストールの有無やバージョン確認ができます。 「Getting Started」ではYarnとnpmそれぞれのコマンドで紹介しますが、それ以降は基本的にYarnを用いた形で紹介しているので、npmを利用している場合は置き換えてください。 紹介している内容は、VuePress Ver 0.14.8を

こんにちは、エンジニアののびすけです。 さて、今回はDrone（ドローン）の話です。注目されてますよね〜。 以前、株式会社フォークの石射さんにParrot DroneをNode.jsで制御するやり方を教わりました。その後、自分で購入して少しずつ触っています。 そして、初めてDroneを飛ばしたときに感動したので、その勢いで社内勉強会も実施しました。 参加者はディレクターやデザイナーといったエンジニア以外の職種の人のほうが多かったのですが、Droneを問題なくプログラム制御することができました。 今回は、社内勉強会でやった内容をもとに、 ノンプログラマな読者のみなさんもDroneをプログラムで制御できるようになる7つのステップを紹介してみたいと思います。 ▼ テクノロジーをおもしろがれ！

今回はFacebook認証を実装していきたいと思います。 前回のソースに追記していく形となりますので、node.jsの準備、プロジェクトの作成は前回の記事を参照ください。 それでは、早速進めていきましょう！ Facebook Developerにアプリケーション登録 まずは、こちらのURLにアクセスします。 https://developers.facebook.com/ また、Facebook連携をするときのアプリケーション登録はほとんどこの方法でできるので、今回以外の場合にも役に立つかと思います。 新しく、アプリケーションを登録するので、上部メニューの「My Apps」から「Add a New App」を選択します。 プラットフォームはウェブサイトを選択します。 アプリ名は今回適当に設定しますが、本番ではドメインやサービス名を登録します。 カテゴリも同じく、サービスにあったものを選択し

Electron（旧Atom-Shell）とは、Web開発者がHTML5とNode.jsでMac、Windows、Linuxのデスクトップアプリを作れるクロスプラットフォーム実行環境です。Electronはオープンソースで無料で使える上に、MITライセンスであるため、商用利用も可能です。開発元はGitHub社です。 最近はJavaScript、HTML5の進化によって、多機能なWebアプリケーションが増えてきました。それに伴い、モバイルでは、WebViewやApache Cordovaなどを使ったハイブリッドアプリも注目されています。Electronはその流れの中から生まれた新しい実行環境です。 ElectronはChromiumブラウザを内蔵しているのが一番の特徴です。Chromiumブラウザは、Google製のChromeブラウザのオープンソース版にあたります。ウェブ開発者がChrom

はじめに 本連載では、注目を集めるNode.jsを使って、Webアプリケーションを様々なクラウド環境で動かすことを最終目的にしています。Node.jsに触れたことがないJavaやPHPなど普段サーバサイドで開発されている方を主な対象として、まずNode.jsの概要から紹介していきます。 Node.jsとは Node.jsとは、ブラウザGoogle Chrome用に開発されたJavaScriptエンジンV8がサーバ上でプログラムを実行できるように、ファイルやネットワークI/Oなど多くの機能を追加したものです。軽量で効率よく多くのリクエストを処理するネットワークアプリケーションの構築ができるプラットフォームになっています。いわゆるサーバサイドJavaScriptの代名詞として注目を集めています。 Node.jsでは“⁠軽量で効率良く⁠”というのを実現するために次の2つのモデルを採用しています。

こんにちは、エンジニアなのにダンクができないのびすけです。今月から記事を書かせていただきます。 さてみなさん「Node.js」って知っていますか？ 僕も最近Node.jsの勉強を始めたので「Node.jsを使ったことがないけど使ってみたい」と思っている人に向けて、Node.jsの入門的な内容を紹介したいと思います。 ▼2020年最新版はこちら！ Node.jsとは 一言で言うとアツいJavaScriptです。 通常、JavaScriptはユーザーのブラウザで動作するプログラミング言語ですが、Node.jsはサーバー側で動作するJavaScriptであり、Web業界ではかなり注目されています。大量の処理に対応するために、ノンブロッキングI/Oというモデルを採用しています。 例えば、データベースから大量の情報を取得してWebページ上に表示をする処理をおこなう場合、通常はデータベースへアクセスし

こんにちは。ディレクターのエリカです。こちらはNode.jsという言葉を聞いて「何となくはわかるけど、実際にどんなものか触ったことがない」という初心者の方に向けての記事になります。 今回はNode.jsのインストールからはじめ、簡単なチュートリアルまでを紹介します。Node.jsを勉強したいと思っている人のキッカケや第一歩になれば幸いです。 準備するもの 何と言ってもNode.jsの準備が必要になります。 こちらの記事「いまアツいJavaScript！ゼロから始めるNode.js入門〜5分で環境構築編〜」を参考に、準備をしてください。 learnyounode のインストール 次に、チュートリアル用のモジュール「learnyounode」をインストールし、実行します。 $ sudo npm install learnyounode -g $ learnyounode すると以下の画面が表示

Node.js完全初心者が、モジュールを作成して、ディレクトリを非同期で読み取り、ファイルをコンソールに出力する方法 こんにちは。ディレクターのエリカです。 こちらは、Node.jsという言葉を聞いて「何となくはわかるけど、実際にどんなものか触ったことがない」という初心者の方に向け、チュートリアル用モジュール「learnyounode」でエクササイズをしていくコーナーの第6回目です。 前回は、ディレクトリを非同期で読み取りファイルのリストを出力する問題について紹介しました。 今回は、これまでのエクササイズで便利だった「モジュール」というものを作ることになります。 Node.jsを勉強したいと思っている人のキッカケや第一歩になれば幸いです。それでは早速はじめていきましょう MAKE IT MODULAR（Exercise 6 of 13） 「learnyounode」のインストールがまだの方

こんにちは。エンジニアののびすけです。最近周囲で結婚ラッシュがきており、漠然と焦っています。 さて、私は業務上Node.jsを触ることがあるのですが、今日はnode-webkitで少し違ったNode.jsの活用法をお伝えしていきたいと思います。 node-webkitとは 「node-webkit」はNode.jsとChromiumを利用してネイティブアプリを作ることができる、ランタイム/開発フレームワークです。 ダウンロードは下記よりおこなうことができます。 rogerwang/node-webkit – GitHub https://github.com/rogerwang/node-webkit HTML/CSS/JavaScriptでアプリを作ることができる HTML/CSS/JavaScriptと聞くと、Webブラウザ上で動作するWebアプリケーションをイメージしますが、node

2〜3年前までは JavaScript といえばWebブラウザで動くあれ、 というイメージが強かったですが、 仕事でもWebだけのそれではない JavaScript に触れる機会が出てきて、 いよいよ本格的に JavaScript の時代に変わってきていると感じています そんな JavaScript について調べると、 node.js がどうこうというトピックをよく見るので、 どんなものかを確かめるべくいろいろと使ってみています そこで今回は、node.js のインストールについてまとめました そもそも node.js ってなに？誰がうれしいの？ という点については後日改めて記事を書こうと思います この記事では、 0.nvm ってなに？ 1.git のインストール 2.node.js のアンインストール 3.nvm のインストール 4.nvm を利用した node.js のインストール 5

本連載では、このTech-Sketchから「コレは！」というテーマをピックアップし、加筆修正して皆様にお届けいたします。 リアルタイムWebとSocket.IO 栄えある連載第1回は、リアルタイムWebとSocket.IOについてお届けいたします。Tech-Sketchに掲載した元ネタはこちらです。 JavaScriptとDynamic HTMLによる「動的に表示内容が更新されるWebサイト」は、JavaScript内から非同期にサーバへ接続しデータを取得する技術、いわゆるAjaxが利用できるようになったことを皮切りに、爆発的に広がりました。Google Mapsなどがその代表例です。 このGoogle Mapsは、表示する場所や縮尺を変更するといった「利用者の操作」を契機として新しいデータをサーバへ取りに行く仕組みになっています。そのためサーバ側でデータが変更されたとしても、次にデータを

neu.NodeはiOS上で動作するnode.jsサーバです。 iPhoneアプリ同士で通信しようと思った場合、幾つかの選択手段があります。Bluetoothを使うもよし、一台がサーバ化しても良いでしょう。そこで使ってみたいのがneu.Node、iOSで動作するnode.jsサーバです。 幾つかのデモが用意されています。 単純にHello Worldを返却するサンプル。 telnetでつなげられるサーバ。 入力した文字をそのまま返します。 こちらはチャットサーバの例。 デモ動画 neu.NodeはHTTPサーバ以外でも動作します。node.jsサーバとあって、Webサーバとはまた違う楽しみ方が見いだせそうです。 neu.NodeはObjective-C製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る 何とも夢が広がりそうなツールです。アプリ内に組み