asdf node.js / npm のバージョン管理方法
Contents はじめに 作業環境 node.js のインストール node.js のバージョン確認 npm (node.js package manager) のバージョン確認 node.js を他のバージョンに切り替える場合 おわりに References 愛用品 はじめに 本記事は asdf を使った node.js のバージョン管理方法についての紹介です。 まだ asdf をインストールしていない方は、asdf のインストール方法 をお読みください。 作業環境 筆者の作業環境は以下の通りです。 システム バージョン OS MacOS 10.15 Shell zsh node.js のインストール 以下のコマンドを実行すれば node.js v13.10.1 がインストールできます。 他のバージョンをインストールしたければ、他のバージョンに書き換えてください。 brew insta
Denoがついに1.0になるので、特徴をまとめた
Deno 1.0 will be released immediately! Deno 1.0に関する記事を見ました。 JavaScript/TypeScriptが好きな僕は、Denoを作るということが発表された時「すごい面白いものがくる！」と思いました。僕の中で、Node.jsはよく出来たツールだったので、それと同じようなものが生まれようとするとは思っていなかったのです。 面白いと思ったのは僕だけではなく、当時たくさんの人がそう感じたはずです(このissueからもそう感じました)。 あれから二年弱、ついにDeno 1.0がリリースされるということで、深夜についその記事を読みふけってしまいました…。 本記事では、Deno 1.0に関する記事に書かれていたことと、denoのドキュメントを眺めて集めた情報をまとめます。 超訳も一部取り入れようと思ったんですが、記事のコメントを見ると、記事自体の
npm trends: Compare NPM package downloads
Sick of boring JavaScript newsletters?Bytes is a JavaScript newsletter you'll actually enjoy reading. Delivered every Monday, for free.
静的なHTMLのためのコンポーネント駆動開発―その導入を振り返って
ここ数年で、「デザインシステム」はウェブ開発やデザインのコミュニティでとても人気の話題になりました。そして「コンポーネント」として定義される一連のデザイン成果物を開発・メンテナンスするために、StyleguidistやStorybookといったツールが多くのプロジェクトで一般的に使われています。このプロセスはデザインシステムという概念の一部として、コンポーネント駆動開発（Component Driven Development）と定義することができるでしょう。 さて、コンポーネント駆動開発にまつわる資料のほとんどは、ReactやVue、Angularといった、フロントエンドのビューのためのメジャーなライブラリを利用することについてのものです。しかしもっとトラディショナルな技術スタックの場合はどうすればいいでしょう？ 例えば私たちスタンダードデザインユニットでは、静的なHTMLとCSSのアセ
Clean CSSだけ
CSSの書き方が昔風になりつつある。SassにもPostCSSにも依存しない書き方だ。その上で、あってもなくても良い処理を、また別の安定した独立ツールに任せるようにした。その独立ツールとしてはClean CSSが優秀なので、これに任せてあとは気にしない。 もちろんこのウェブサイトのCSSのような小さな規模での話で、規模が大きいならどちらかは使う。小さな規模では、多くの環境でそのまま動くように書く。大きな規模では、その状態になるようにSassやPostCSSを使って書く。 SassやPostCSSだけでどうにかしようとすると、ともすればコードが奇抜なCSSのような何かになりがちだ。日常的にそうした環境に浸かっていると、普通のCSSが書けなくなるどころか、読めなくなる。CSSのデバッグ環境が開発者ツールにまだ依存している現在、読めなくなるのはかなりまずい。 小さな規模では、普通のCSSとして書
SVGスプライトをnpm-scriptsで作ってみる - Photosynthesic blog
GWの中日、如何お過ごしでしょうか。仕事をしなきゃなんだけど、これっぽっちも気力が沸いてこない私はお勉強タイムに充てることにしました。 ターゲットはSVG。 ココの処ずっと、あーSVGに移行しなきゃなーと思いつつ、gulpか・・・という気持ちになって中々腰が上がらなかったのですが、gulpに出来ることがnpm-scriptsに出来ないはずが無いと思って調べてみました。 結果、凄い分かりやすいページを発見！これをいわゆるSVGスプライトと言っていいかは謎ですが。 Workflow for creating SVG sprites with NPM scripts – Oleg Varaksin – Medium で、ほぼまるっとコレを参照しつつ、パスとか書き出し方をコソコソ自分好みに変えただけなのですが色々学べたのでメモしておきます。 必要なパッケージ ejs … みんなの救世主、テンプレー
node.jsでxmlからJSONに変換、JSONからxmlに変換するxmljsonモジュールの使い方
ECMA Script6（JavaScript）のnew Date()をUTCからJSTに変換する方法(AWS Lambdaで注意)
最新版で学ぶwebpack 4入門 – JavaScript開発で人気のバンドルツール - ICS MEDIA
webpack（ウェブパック）とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない･･･なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2023年3月現在のwebpack 5（2020年10月リリース）以上で解説しています。 本記事で解説しているこ
Grunt/Gulpで憔悴したおっさんの話 | MOL
先人たちが1年前に通った道で、いろいろいまさらかよって話なんですが。基本的に以下の記事読んだら分かります。要はGulpとかGruntといったモノ使わずにnpm run hogehogeでビルドしよーぜって話です。 task automation with npm run オレ的Gruntに対する最新の気持ち - from scratch Node - npm で依存もタスクも一元化する How to Use npm as a Build Tool // package.json "scripts": { "start": "npm run start-serve & npm run watch", "test": "stylestats public/files/css/maple.css", "start-serve": "browser-sync start --server publ
dependencies と devDependencies の違い - 主に技術的なことを書くブログ
npm install するときに、--save-dev と --save の2つあって、ふとこの違いってなんやと思って調べたので引用。 jsonを見ると、dependenciesやdevDependenciesなどの項目があります。大まかには以下のような感じです。 dependencies - パッケージ（≒プロジェクト）の実行に必要なパッケージの定義 devDependencies - パッケージの開発に必要なパッケージの定義 optionalDependencies - インストールできる限り使うパッケージの定義 開発中のプロジェクトが、npmのパッケージとして成立していない（nodeプロジェクトでない）のであれば、dependenciesのみに記録しても大丈夫です。 nodeプロジェクトだったり、よりお行儀良く管理するのであれば、gruntのプラグインなど開発環境系は、devDep
Gulp concatでファイルをまとめて、uglifyでmin化してファイル名を変更して出力したい。 - かもメモ
最近gruntよりgulpの方が熱い！という噂を聴いてバリバリgrunt派だったのですがチャレンジしてみました。 インストールとかは同じnode関連なのでnpm使えば簡単にできるので、この辺りgruntと大差なく導入できるなぁ〜って印象でした。 gruntで言うところのwatchがgulp自体に含まれてるっぽいので、gruntより最初の段階でnpm install する量は少なくて済みますね。ﾊﾗｼｮｰ!! インストール関係はこちらを参考にしました。 liginc.co.jp いつもやっている、javascriptの結合とmin化をするタスクを書いてみました。 プロジェクトのpackage.jsonを作る。 node.jsが必要なので、インストールされてない場合は下記リンクなどを参考にインストールしておいてください。 Macにnvm + Node.jsをインストールする - Qiita プ
npmでnode.jsのpackageを管理する
このTopicはWeb ApplicationのfrontendのProjectを管理するTopicの2つ目です。 node.jsのversionを管理するためにnodebrewを利用する npmでnode.jsのpackageを管理する grunt.jsを使って、frontendのビルドを行う 前提条件として、僕の環境はMac OSです。 ##npmとは？ npmはnode.jsのpackageを管理するためのツールです。 node.js自体はJavaScriptで出来たWeb Serverですが、frontendを管理するためのtoolもたくさんあります。 npmはnode.jsのpackageを管理すためのツールです。 Javaが分かる方は、mavenのようなものだと想像していただければ、分かりやすいかと思います。 ##npmでpackageをインストールする npmでpackage
2016年版 Node.jsで幸せになれる10の習慣 - Qiita
はじめに Herokuのブロク記事10 Habits of a Happy Node Hacker (2016)を、「洋の東西を問わず、みんな『10のなんとか』って好きなんだな」と思いながら眺めていたら、結構面白かったので内容をピックアップしてみます。 以前、Go言語で幸せになれる10のテクニックというのをあるブログ記事を元にして書いた時には、原題の "Ten Useful Techniques in Go"を意訳して「幸せになれる」としたのだが、今回は原題にシッカリ"Happy"が入っているというおまけ付き。 なお、「2016年版」と言っているのは2013(2014？)年版があるから。これらを読み比べてみるのもまた面白いが、とりあえず今回は最新の2016年版のご紹介。 1. 新しいプロジェクトは npm init で始めろ 新しいプロジェクトはこう始めようよ、と言っている。
PDFKit
PDFKit A JavaScript PDF generation library for Node and the browser. Description PDFKit is a PDF document generation library for Node and the browser that makes creating complex, multi-page, printable documents easy. The API embraces chainability, and includes both low level functions as well as abstractions for higher level functionality. The PDFKit API is designed to be simple, so generating com
gulpのアプローチ
gulpのGetting Startedにもあるように、gulpを使うにはグローバルインストールとローカルインストールが必要になる。なんで同じものを2つインストールするのか、不思議に思ってソース読んで「へー」と思ったのでまとめてみる。 Gruntの場合 Gruntの場合はgrunt-cliをグローバルにインストールしてgruntはローカルにインストールする。grunt-cliはローカルにインストールしたgruntを呼び出すためだけのモジュールだ。タスクを走らすgruntと、そのgruntを実行するgrunt-cli、2つのモジュールは明確に役割が切り離されている。 Gruntがこうなってる理由は、異なるプロジェクトで使ってるgruntのバージョンが違うと、グローバルにインストールされてるgruntのバージョン次第で、そのタスク（Gruntfile）が動かせない可能性が出てくるから。 （参考
npmのあまり知られてない機能 10選 - from scratch
なんか最近Twitterとか職場でも「npmの機能でそんなのあったんだ」って言われること多いので、説明していきます。 ちなみにタイトルにとりあえず10選って書いたけど、あんまりたくさん思いついてないのに、10選って書いてしまったので最後の方は微妙かもしれません。 1. npm installは npm i でも同じことができる まぁ単純なショートカットですね。isntallとかtypoしてても空気読んでくれるんですが、短いほうがいいよねってことで。 # npm installって書くのも $ npm install socket.io #npm i って書くのも同じ $ npm i socket.io # ちなみに --saveは -S, --save-devは -D にできる $ npm i socket.io -S $ npm i mocha -Dショートカット小ネタ。 2. npm
gulpの使い方 Win/Mac対応
作成：2015/06/22 更新：2018/05/27 Mac > Web制作 Web制作に欠かせなくなった「Node.js」。デザイナーさんやフロントにおいてもgulpの環境を整えるのがトレンドとなっています。 node.js やgulpを何に使うのか分からないけど、まだインストールしてない、もしくは入れなおしたい、何となく流れを知っておきたいという人向けに、ザックリと「初歩的な部分を数時間で使える」ための手順をメモしておきます。Win/Mac対応。 エンジニア速報は Twitter の@commteで配信しています。 もくじ Node.jsとは Node.jsをインストールする Mac版バージョン管理ツール：nodebrew Windows版バージョン管理ツール：nodist パッケージマネージャー npmの使い方 gulp（ガルプ）のインストールと使い方 Node.jsとは ご存知な
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
svg-spriteで無駄の無いSVGスプライトを生成する - DeNA Design
gulp-ejs-monster
localhost:3000