本連載では、Webページのユーザーインタフェース（UI）フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回はWebページの一部分を部品として再利用できるコンポーネント機能を説明しました。今回は、Webページの入力内容や表示内容といった状態を集中管理できるVuexストアについて説明していきます。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）フレームワークであるVue.jsに、Webページの作成に必要なUI以外の追加機能をまとめて提供するフレームワークです。 Webページを複数のコンポーネントに分割できるJavaScriptフレームワークでは、あるコンポーネントの状態（入力／表示内容）を他のコンポーネントで利用する場合、不整合なく状態を共有する仕組みが必要とな
こんにちは@watildeです。Node.jsでは、主にWHATWG/URLあたりの実装を担当しています。 今回は、2020年10月20日に新しいメジャーアップデートとしてリリースされたv15の変更点のうち、筆者が気になった代表的なものについて紹介します。全てはカバーできていないので、下記にて他の方の解説記事が出たら随時リンクを追加してブログ記事をrequire()していきます。 https://shisama.hatenablog.com/entry/2020/10/21/004612 各変更の紹介では、なるべく参考リンクを付けているので詳細が気になった際はリンクから一次情報に飛んで読んでみてください。また、情報に誤りがあった場合はTwitterにて教えていただけると助かります。 背景 Node.jsは半年に一度メジャーアップデートを実施しており、4月は偶数のバージョン、10月は奇数のバ
WinterCG
WinterCGWeb-interoperable Runtimes Community Group WorkFAQGitHubCharterThis community group aims to provide a space for JavaScript runtimes to collaborate on API interoperability. We focus on documenting and improving interoperability of web platform APIs across runtimes (especially non-browser ones). This is done through discussions among runtimes, proposals in specification venues (WHATWG, W3C)
最近になって M1 Mac 入手したので環境構築の tips をメモ。 Node.js v16 以上では M1 Mac 向け arm64 バイナリが公式に提供されているが、v15 以下では提供されていない。 M1 Mac で nodenv を使って Node.js をインストールする場合、v16 ではもちろん arm64 バイナリをダウンロードするが、v14 では x86_64 バイナリをダウンロードして Rosetta で動かすのではなく、ソースをダウンロードしてローカルでコンパイルが始まってしまう。 この挙動は厳密に arm64 バイナリが欲しい人には嬉しいかもしれないが、ちょっとした動作確認をしたいだけなのに数分かけてビルドされても困る。 そういう場合、arch コマンドを使うことで nodenv で x86_64 バイナリをインストールできた。
この本の概要 Node.jsの入門書です。Node.jsは今やWebアプリケーション開発には欠かせない存在です。 本書には，Node.jsで実際にアプリケーション開発をはじめるための知識がまとまっています。 基礎知識，環境構築，重要文法，非同期，CLIツール開発，Expressを用いたサーバーサイドの開発やフロントエンド（React）との連携などNode.jsの全体像が学べます。 現場で活躍する第一人者が，Node.jsのアプリケーション開発の指針やノウハウを教えます。 こんな方におすすめ Node.jsを学びたいエンジニア JavaScriptへの基本的な知識のあるエンジニア，サーバサイドもある程度しっかりやりたい人 他言語でサーバサイド開発の経験があり，Node.jsも身につけたいエンジニア この書籍に関連する記事があります！ 人気のNode.jsをはじめよう 本書には、Node.js
I learned to code in the Javascript stack [1] and am building a Javascript based product [2]. I never questioned this stack: many companies default to it, JS everywhere seems good, and the community is big. But for my new side project I decided to try Rails because despite some perception that Ruby on Rails is ‘over’, people in HN comments say it was somehow more enjoyable than the newer Node base
🎉More great news! Node.js 12 to LTS and Node.js 13 is here!🎉 https://t.co/JmDiMlHgmr— Node.js (@nodejs) 2019年10月22日 Node.jsのv12がLTSになり、v13がcurrentとしてリリースされました。 今回はNode.js v13の主な変更点を紹介したいと思います。 ダウンロードは公式ページから行えます。 nodejs.org 以下リリースノートにあるNotable Changesからいくつかピックアップします。 nodejs.org assert (PR: #28263) assert.throws()またはassert.reject()でthrowされたエラーの検証にコンストラクターが使われた場合、throwされたエラーの代わりにAssertionErrorがスロー
Node.jsの色々
2020-07-15 OWASP Sendai Node.js の色々 OWASP Kansai board member はせがわようすけ 長谷川陽介 (はせがわようすけ) (株)セキュアスカイ・テクノロジー 取締役CTO hasegawa@securesky-tech.com https://utf-8/jp/ 千葉大学 非常勤講師 OWASP Kansai ボードメンバー OWASP Japan ボードメンバー CODE BLUEカンファレンス レビューボードメンバー OWASP Kansai Chapter 自分たちの直面するWebセキュリティの問題を 自分たちの手で解決したい！ 日本で2番目の OWASP Local Chapter Webセキュリティの悩み事を気楽に相談し情報共有できる場 スキル、役職、業種、国籍、性別、年齢に関係なし vol.16 OWASP Ka
概要 npmプロジェクトで利用しているnpmパッケージ(依存パッケージ)でvulnerability(脆弱性)が見つかったときの対処フローについて記載します。 （GitHub等が親切に"We found potential security vulnerabilities in your dependencies."のように通知してくれるので便利）
webpack 5にアップデート - Qiita
webpackを ^4.44.0 -> ^5.0.4にマイグレーションしましたので、 その際の作業の覚書です。 migrationの仕方 https://webpack.js.org/migrate/5/ 基本的に上記の公式を読みつつ、エラーが出たらその都度エラー文を元に対応していく形で進めました。 元々のwebpackの設定にもよって対応も変わってくるかと思いますが、 主要な変更箇所と実際に私が変更した箇所を紹介しておきます。 loaderとuseの厳格化 【参考】 https://blog.hiroppy.me/entry/webpack5 rules.loaderとrules.useの使用ルールが厳格になったことで、 環境によってはエラーとなる可能性があります。 optionsを使用しない場合は use、 optionsを使用する場合はloaderとなるように設定を見直しましょう。
コンテナだけじゃない。AWS App RunnerでWebアプリをソースコードから簡単デプロイ | DevelopersIO
オペレーション部の加藤(早)です。 当ブログDevelopersIOにもすでに何件かブログが上がっていますが、 Webアプリケーションを簡単にデプロイできる新サービス AWS App Runner がローンチされましたね！ App Runnerではコンテナイメージを用意することなく、GitHubに置いてあるソースコードも直接デプロイできるようなので試してみました。 感動レベルに簡単操作だったのでよかったらやってみてください。 アプリケーション GitHubにリポジトリを作成します（今回のサンプルはこちら）。 極めてシンプルなexpressのWebアプリを用意しました。 const express = require('express') const app = express() app.get('/', function (req, res) { res.send('Hello App
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
GitHub - Yord/shargs: 🦈 shargs is a combinator library for building command-line argument parsers.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
@security-alertというGitHub Security Alertを扱うコマンドラインツール群を作りました。 GitHub Security Alertは、リポジトリに含まれるnpmやgemなどのパッケージの脆弱性情報を通知した一覧管理できる仕組みです。 詳しくは次のドキュメントで紹介されています。 About security alerts for vulnerable dependencies - GitHub Help このGitHub Security AlertからDependabotを使った修正PatchのPull Requestを作成できるようになっています。 一方で、Pull Requestしか作れないため、そのAlertに対してメモや議論するためのIssueを作るのが面倒でした。 そのため、GitHubにGitHub Security Alertの内容を含んだ
A Complete Guide to Pino Logging in Node.js | Better Stack Community
Pino is a powerful logging framework for Node.js that boasts exceptional speed and comprehensive features. In fact, its impressive performance earned it a default spot in the open-source Fastify web server for logging output. Pino's versatility also extends to its ease of integration with other Node.js web frameworks, making it a top choice for developers looking for a reliable and flexible loggin
WebAssembly というやつは便利で一度コンパイルしてしまえばブラウザでも Node.js でも実行できる。 でも .wasm のファイルをどうやって読み込むのか、というのがブラウザと Node.js では違う。 色々やり方はあると思うけど、一番素直なやり方を考えてみる。 まずブラウザの場合は main.wasm みたいなファイルを適当な場所に配置しておいて fetch で内容を取得して WebAssembly.instantiate に食わせるとかになると思う。 const response = await fetch("main.wasm"); const buf = await response.arrayBuffer(); const { instance } = await WebAssembly.instantiate(buf);
Firebase Authenticationのバリデーション等を新機能「blocking functions」を用いて拡張する - Flatt Security Blog
こんにちは。 セキュリティエンジニアの@okazu-dm です。 この記事は、Firebase Authenticationに2022年7月ごろに追加されたblocking functions という機能についての紹介です。 詳細は後述しますが、blocking functionsはFirebase Authenticationの登録、サインイン処理を拡張するための機能で、この記事では、blocking functionsの概要やリリースされた経緯を紹介し、実際のユースケースも一部サンプルコードと共に例示します。 また、Flatt SecurityではFirebaseで構築されたサーバーレスなアプリケーションへの効果的な脆弱性診断メニューを提供しています。 ご興味のある方はぜひ事例インタビューをご覧ください。 blocking functionsについての概要 blocking funct
Node.js コアモジュールの import/require には `node` schemeがつけられる - from scratch
Node.js アドベントカレンダーの 3 日目の記事です。空きを埋める形で始めました。 qiita.com www.codegrid.net CodeGrid でも書かせていただきましたが、 Node.js で ES Module / CommonJS を使ってコアライブラリのロードをする際、 node から始まる scheme を付けることが可能になっています。 nodejs.org // ESM import fs from "node:fs/promises"; // CJS const http = require("node:http"); これにはいくつかのメリットがあります。基本的につけておくことが望ましいです。 今回はメリットをいくつか紹介します。まだこれがデファクト・スタンダードになっている訳ではありませんが、これから付けてもらうように推奨していきたいと思います。 メリ
こちらは Node.js Advent Calendar 2020 の24日目の記事です。前日は @euxn23 さんによるTypeORM と比べながら Prisma を触るです！そして明日は @yosuke_furukawa さんによる締めくくりです 導入 こんにちは 趣味でNode.jsのCore Collaboratorをしている@watildeです。今年は後半に時間を作ってNode.jsに21コミット行い、合計78コミットで終わりそうです。最近は本業でOSSのWeb/Mobileアプリ開発フレームワーク Amplify (公式サイト) の改善に集中をしていますが(JSerな人たちぜひ使ってみてください！)、来年は100コミット超えを目標に引き続きコミッター活動を続けていきたいと思っています。 さて、今回はNode.jsのv14.5.0で入ったworkerの新機能 “Broadcas
はじめに esbuild のビルド時間の速さに感動して、個人プロダクトで使っている AWS Lambda (Node.js) をなるべく速く更新できるようにしたいな、と思ってやってみた投稿です。 おことわり タイトルに2秒と書いていますが、当然どんな環境でも2秒でできるわけではありませんのでご注意ください。 使用するソースコードの内容によって、デプロイする時間も変わります インターネットの回線速度やAWSリージョンによって、デプロイする時間も変わります 参考までに、私の通信速度はこのぐらいでした。 その他 AWS の状況などの要因でも変わるかもしれません。 「参考：私の個人環境の場合」の章にも書いていますが、私が実際に使っている Lambda 関数は約4.2秒でアップデートできます。 高速にデプロイしたい理由 ローカルでも AWS Lambda の環境をある程度まで再現して開発することは可
Working with GitHub Actions
Image credit: GitHub's Hubot from the Octodex GitHub Actions are still in beta and are changing quickly. But if you are looking to get started the possibilities are endless. This guide is mostly about pointing to documentation and exploring some fun ways to use GitHub Actions. In this post we’ll create a repository which contains a GitHub Action - built in TypeScript - and an associated workflow.
はじめに - "C# で SPA を作る Blazor とは?" 「C# で SPA が作れるって、どういうこと?」 「C# で SPA が作れたら何がうれしいの?」 「Blazor って、クライアントサイド版とサーバーサイド版があるって聞いたんだけど」 そんな話題については、下記スライドなどが参考になろうかと思います。 改めて - Blazor をお勧めできる人は誰か? C# で SPA を実装できる Blazor ですが、当然のことながら、"銀の弾丸" では、まったく、ありません。 ではどういった人たちであれば、Blazor をお勧め出来るのか、考えてみました。 条件1. C# で書きたい/書くのがふさわしい人 まず、そもそも、C# でプログラムを書くことを好む人が対象となるでしょう。 すでにサーバー側 Web アプリ実装で ASP.NET を使用している人はもちろんなのですが、Xam
Security Best Practices Intent This document intends to extend the current threat model and provide extensive guidelines on how to secure a Node.js application. Document Content Best practices: A simplified condensed way to see the best practices. We can use this issue or this guideline as the starting point. It is important to note that this document is specific to Node.js, if you are looking for
Big changes Chromium 79.0.3942.0 (r706915) Puppeteer now requires Node.js v8+; Node.js v6 is no longer supported page.screenshot now clips elements to the viewport (#5080) New APIs: page.emulateTimezone(timezoneId) page.emulateMediaType(type) (superseding the old page.emulateMedia(type) API) page.emulateMediaFeatures(features) API changes New API: page.emulateTimezone(timezoneId) (#4949) New API:
3 行で Node.js >= v14.14.0 であること rimraf dist は node -e 'fs.rmSync(`dist`, {recursive:true, force:true})' で置き換えられる rimraf dist/*.bundle.js みたいな glob を含むものは置き換えできない 長い説明 npm scripts で不要なキャッシュやビルドの出力ファイルを削除したい場合は rimraf というパッケージを POSIX の rm -rf の代わりに使うことが多いと思います。これは Windows で npm run の実行に使われる コマンドプロンプト (cmd.exe) に rm がないのを始めとした環境依存の問題を避けるためです。 とはいえパッケージなしではディレクトリの再帰的削除もできない、というのはちょっと困るので、v12.10.0 で fs.
GitHub - smeijer/unimported: Find and fix dangling files and unused dependencies in your JavaScript projects.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - graphql-nexus/nexus: Code-First, Type-Safe, GraphQL Schema Construction
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Node v20.6.0 (Current) | Node.js
Notable changes built-in .env file support Starting from Node.js v20.6.0, Node.js supports .env files for configuring environment variables. Your configuration file should follow the INI file format, with each line containing a key-value pair for an environment variable. To initialize your Node.js application with predefined configurations, use the following CLI command: node --env-file=config.env
Hello, Modules!
It has already been available for some time in modern browsers, but we can now finally use it in Node.js, thanks to Node.js 10 becoming obsolete. As I wrote about earlier this year, I have personally been waiting for this day for 10 years. Here’s a good overview of JavaScript Modules. What are the benefits of JavaScript Modules over CommonJS?Unified syntax. Helps with teaching.Browser compatibilit
delete-github-branchesというブランチの命名ルールを定義して、そのルールにあっていないブランチを削除するCLIツールを書きました。 delete-github-branchesはCLIですが、GitHub Actionsのcron処理と合わせれば、ルールにあってないブランチをGitHubから自動的に削除できます。 不要なブランチを削除することで、リポジトリからノイズとなるブランチを減らすのが目的です。 Pull Requestなしで放置されてるブランチが単なる消し忘れ以外であることは少ないので、そのようなブランチを減らすことでpullした時のノイズやサイズを減らすの目的です。 (活発なリポジトリだと放置ブランチがconflictだらけになるのでマージが難しいです。またGitHubにはDraft PRもあります) CLIの使い方 delete-github-branche
npm installとnpm ciの動作確認を簡単にやっておいた - Mitsuyuki.Shiiba
先週、npm installとnpm ciについて調べて考えたことを書いたのだけど、ドキュメントを読んで、頭の中で考えたことをまとめただけなので、これだけだとちょっと気持ち悪いなと思って。簡単ではあるけど実際の動作を確認することにした。 bufferings.hatenablog.com 結果 だいたい想像どおりだった。今回のサンプルプロジェクトで実験した結果は次のとおり。 (1)と(2)は、キャッシュがない場合のnpm ciとnpm installの速さ。想像では「npm ciの方が多少速いのかな？」と考えていたけどほぼ同じだった。node_modulesがない状態から始まるので、npm ciはnpm_modulesを削除する必要がない。一方で、npm installも既存のnode_modulesをチェックする必要がなくて、package.jsonとpackage-lock.jsonの
Secure your dependencies. Ship with confidence.Socket is a developer-first security platform that protects your code from both vulnerable and malicious dependencies.
Background Image Courtesy: Photo by Joshua Sortino on UnsplashImagine you have a pile of bricks somewhere. And you want to build a wall with those bricks here. Let’s say you have a friend to help move the bricks. To start building, you now have two options. You can either wait until your friend brings the whole pile of bricks to you, or you can start building as soon as you have a few bricks to st
npm/yarn/pnpm/bunを同じコマンドで扱えるni.zshに、npmで配布されているマルウェアを間違ってインストールするのを防ぐ機能を追加しました。 ni.zshについては、次の記事を参照してください。 npm/yarn/pnpm/bunを同じコマンドで扱える ni のzsh実装を書いた | Web Scratch npmパッケージのマルウェア npmパッケージとしてマルウェアをpublishして開発者を狙うサプライチェーン攻撃が最近多くなっています。 たとえば、次の記事ではemails-helperというもっともらしいパッケージ名でマルウェアが配布されていました。 NPM Package Masquerading as Email Validator Contains C2 and Sophisticated Data Exfiltration 他にもtyposquatting
About `npm:` support of Deno
Deno の復習をしつつ、Deno に新しく入った `npm:` 機能の概要や、開発経緯の話をします。
GitHub - octokit/authentication-strategies.js: GitHub API authentication strategies for Browsers, Node.js, and Deno
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
PLAID で i18n おじさんエンジニアしてる kazupon です。 この記事は plaid advent calendar 2019 の 17日目の記事です。 はじめに 筆者は、PLAID のプロダクト開発以外にも、オープンソースソフトウェア (以下 OSS )開発者として vue-i18n といったオープンソースプロジェクトを持っており、Node.js においては npm または yarn といったパッケージマネージャーと呼ばれるもので、Node.js そして必要に応じてブラウザ向けに動作するコードをパッケージにして OSS として配布しています。 npm / yarn で配布する OSS は、一般的には semver のようなセマンティックバージョンニングの仕様に沿った形で、バージョンをリリース毎に発行して管理して、npm publish や yarn publish によって
GitHub - ehmicky/nve: Run any command on specific Node.js versions
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Node.jsのマスコットキャラクターが2月に決まり、発表されていました。 先週発表されたNode.js 22の記事を書くに当たり、資料を調べているうちに気がつきましたので紹介したいと思います（「Node.js v22 で変わること - Speaker Deck」というスライドで知りました。ありがとうございます）。 Node.jsのマスコットキャラクターはGitHubのIssue「Have a mascot · Issue #828 · nodejs/admin」で議論されて……
Raspberry PI + Node.js + Nuxt.jsで30秒の間に光っているボタンが何回押せるかを競うゲームをDIYした - Qiita
作ったもの まずはこの動画を見てください。 このようなゲームを子供の頃体験しませんでしたか？30秒の間に光っているボタンが何回押せるかを競うゲームです。なかなか大きいものですし、市販されていません。なければDIYで作る。ということで作りました。 アーキテクチャ概要 全体図は上図のようになります。 まずはボタンの機構を確認してみる ボタンを開けて確認してみると、ちゃんと回路的には別になっています。 これなら好きな場所を光らせたり、押されたところを判別することができますね。 これをボタンに入れるとこんな感じ。 LEDとRaspberry PIとの通信 LEDに関してはGPIOという仕組みを利用してピンのモードを出力（OUTPUT）にし、回路の電圧をHIGHにしたりLOWにすることでLEDを光らせたり、消したりすることができます。 出力 LEDの状態
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webページの状態を集中管理できる「Nuxt.js」のVuexストアを使いこなそう
10月20日にメジャーアップデートとしてリリースされたNode.js v15の紹介
M1 Mac で nodenv から Intel 版 Node.js をインストール
実践Node.js入門 ―基礎・開発・運用
From Node to Ruby on Rails | DUNK
Node.js v13の主な変更点 - 別にしんどくないブログ
npmパッケージのvulnerability対応フロー - Qiita
GitHub - vasanthv/jsonbox: HTTP-based JSON storage.
GitHub Security Alertを元にIssueを作成するCLIを書いた
ブラウザからもNode.jsからも import できるWebAssemblyライブラリを作る
Node.js v14.5.0に入ったBroadcastChannelについて
esbuild を使って AWS Lambda (Node.js) を2秒でアップデートする
Blazor をお勧めできる人は誰か? - Qiita
Node.js — Security Best Practices
Release v2.0.0 · puppeteer/puppeteer
npm scripts で rimraf を使わずディレクトリを再帰的に削除する
ルールに沿っていないGitHubのブランチを削除するツール/GitHub Actions
Socket - Secure your dependencies. Ship with confidence.
A Visual Guide to NodeJS Streams
ni.zsh: npmインストール時のサプライチェーン攻撃を検知する機能を追加
Ship.jsでリリースフローを改善する - Qiita
Node.js、ロケットに乗った亀「Rocket Turtle」が正式マスコットに