用語 レポ(repo) Gitのリポジトリ。 シングルレポ(single repo) ベーシックなレポ。typescriptやeslintなどの開発ツールの設定もひとつだけで管理がかんたん。ただし、レポに対応するNPMパッケージは1個だけになるので、パッケージを部分的に使いたいユーザーもパッケージ全体をインストールしないといけない。 マルチレポ (multi-repo) 複数のGitレポジトリに別けた形態。シングルレポから再利用可能なモジュールをNPMパッケージとして独立させられるので、ユーザーは必要なパッケージだけをインストールできる。ただし、Gitリポジトリが分かれるため、開発ツールの統一的管理は面倒。 モノレポ(monorepo) ひとつのGitリポジトリで複数のNPMパッケージを扱う形態。シングルレポの開発ツールの統一的管理の良さと、マルチレポの再利用可能なモジュールを切り出してリ
概要 タイトルの通りですが、自作したReactComponentをnpm packageとして公開するまでの手順を記載します。 private packageなのに公開という日本語を使っているのは少々違和感がありますが、GitHub Organization内で共通利用できる状態にすると考えていただければ問題ありません。 この記事で説明すること GitHub OrganizationのGitHub Packagesにprivate npm packageを公開する手順を説明 公開されたprivate npm packageをVercel、GitHub Actionsで利用する方法を説明 GitHub Packagesへの公開をGitHub Actionsで行なう方法を説明 プロジェクトの作成手順とサンプルコード 以下は具体的な手順になります。 下記は最終的なプロジェクト構造になります。 こ
React.jsを学習してそのアウトプットとして簡単なWEBアプリを作ってサクッと公開したい。 まずReactチュートリアルをやってみました。 create-react-appというコマンドを利用してとても簡単にローカル環境ができて感動しました。 チュートリアルの内容もなんとか終え、この調子で自分の作りたいものは作れそうですが、関門となるのは公開。無料でサクッと公開する方法はないかと調べたところGitHub Pagesが良さそうなので試した履歴です。 １．create-react-appでアプリを作成する reactチュートリアルの「オプション 2: ローカル開発環境」の手順通り進めました。 ⬇以下のコマンドでreact環境を一発で構築。 npx create-react-app my-quiz 作成されたファイルの中のREADME.rbを見ると、必要なコマンドが書いてあります。 ⬇ローカ
先日の記事で Windows で Playwright 動かしたら Webkit のバイナリが落ちてきた件の続きです。Windows 版 Safari が廃止され、 Chromium が Blink になってから Windows で Webkit が動かすのは難しいと考えていたのですが、 Playwright 動かしてたらあっさりと動いていたのでもう少し調べてみることにしました。 アイキャッチは WHAT’S MY USER AGENT? のキャプチャです。 バイナリを直接立ち上げてみる playwright をインストールすると %userprofile%\AppData\Local\ms-playwright にブラウザのバイナリが自動でインストールされるのですが、その中に webkit も含まれます。 その中の Playwright.exe が webkit のブラウザになっているよ
本業はiOS開発なのですが、6月頃から個人開発でWebフロントを触っています。 Webフロントに入門するときに、開発の前提知識・専門用語が多すぎて、脳が処理しきれない状態になりました。 これでも数年前のより混沌としてた時期よりは安定してきているように思うんですが、それでもやはりカオス感は否めませんでした。 Webフロントエンド開発の見取り図があればいいのにと思ったので、自分でちょっとつくってみようと思いました。 個別の技術要素の情報は豊富にある（ありすぎると言ってもいいかもしれません）んですが、全体像がよくわからないので、 たとえば「TypeScriptで開発した方がいいのか？」とか、「Babelとかwebpackってインストールしなきゃいけないの？」とか、 そういう素朴な疑問が学習進めて行っても、なかなか解消できなかったので、いい感じのざっくり感でまとめられたらと思います。 この記事で全
概要 みなさんは React のプロジェクトでアイコンが必要な際はどのように実装していますか？ SVG の埋め込み？それとも Font Awesome？ 私は、主に「React Icons」という React 用のライブラリを使用しています。 React Icons は、豊富な種類のアイコンが揃っておりシンプルで使いやすいため、大変重宝しています。 この記事では、React Icons の紹介とその使い方について解説しています。 それでは、早速みていきましょう。 React Icons とは React Icons は、Font Awesome や Material、Codicons（VSCode のアイコン）などのアイコンを簡単に利用することができる React 用のライブラリです。 npm パッケージとして提供されているため、npm installを使用してプロジェクトに導入します。
やっぱりwebpackがわからない（エピソード2）、そもそもnpmからわからないを公開しました。 webpackがわからない 最近はViteが注目されだして、実際にとても良いビルドツールです。Vue.jsのEvan Youさんが開発しただけのことはありますね。ネーミングもイカしてます。しかし、だからといって、では開発環境にViteを採用しようと簡単にはできないのが、業務の辛い所です。新しい技術を採用して、「わしが全責任を引き受けるぜよ」というThe 男気！な人はなかなかいません。 したがって、当分はwebpackを使い続けることになるのですが、これが未だによくわからないという人が意外と多いです。フロントエンドプログラミングの初心者に近い人などは、この段階でつまずくことにより、すっかり自信をなくしてしまうこともあります。 ですが一先ず安心してください。webpackを含むこれらフロントエンド
quaggaJS Changelog (2017-06-07) Browser Support Installing Getting Started API Configuration Tips & Tricks Sponsors What is QuaggaJS? QuaggaJS is a barcode-scanner entirely written in JavaScript supporting real- time localization and decoding of various types of barcodes such as EAN, CODE 128, CODE 39, EAN 8, UPC-A, UPC-C, I2of5, 2of5, CODE 93 and CODABAR. The library is also capable of using getU
はじめに 僕はNode.js製のこんなソフトを開発しているのですが、このソフトをユーザーの方に使っていただくには... ユーザーにNode.JSをインストールしてもらわないといけない 設定ファイルにパスワードがべた書きでセキュリティに不安がある そもそも導入長ぇ！ ...と、到底使ってもらえそうなものではありません。 そこで今回は、 ユーザーにNode.JSをインストールしてもらわないといけない 設定ファイルにパスワードがべた書きでセキュリティに不安がある を解決するためにNW.jsを使ってネイティブアプリ化をしていきます！ NW.jsとElectronの比較 NW.jsとは、JavaScriptを用いてWindows上で動作するアプリケーションを実装できるフレームワークです。似たようなものではElectronがVisual Studio Codeなどでも利用されており、こちらのほうが有名
◆ package.json の bin で追加されたコマンドを実行できる ◆ npx はその場でダウンロードして実行もできる ◆ yarn は yarn2 の dlx コマンドでできるようになる binnpm パッケージはインストールするときに package.json の bin に設定されたコマンドが使えるようになります npm にテスト用を置くのは気がすすまないので Gist にテスト用のパッケージを作りました package.json はこうなっています { "name": "test-command", "version": "1.0.0", "bin": { "test-comm1": "./cli.js", "test-comm2": "./cli.js" } } これをインストールします yarn add gist:f403bc36fbdecc9199a3919a022e
初心者に向けての答え package-lock.json について、とりあえず以下を守ればプロジェクトに迷惑をかけません。 直接編集してはいけません 基本的に無視していいファイルです 削除してはいけません npm install コマンド実行時に変更されることもありますが、そのときに発生する変更は気にしなくて大丈夫です マージリクエスト（プルリクエスト）する際に package-lock.json に変更があった場合は、その変更も含めて提出します ※ これは package.json についても同じことが言えます。 もうちょっと知りたい人に向けての答え package-lock.json は npm install 実行時に新規作成・更新される package-lock.json には npm install で実際にインストールしたパッケージ情報が記載されている package-lock
どうも、らこです。 Angular 2の開発リポジトリでは型定義ファイルの依存解決に関して、最初はtsdだったのが途中でtypingsに移り、そして最近またtsdに回帰していたのですが、ついにtsdすらも使わず、npmだけですべてを解決するようになってました。 いったいどうやって？というのが今回のお話で、結論から言うと @types スコープから公開されているパッケージがdevDependenciesとして依存されるようになっていました。 @types typesという名前のユーザーで、明らかにbotだけど中身はMicrosoftの人らしい。(メールアドレスから) どのパッケージもだいたい 2016/5/17 に最初のpublishがされているらしく、最近始まった取り組みのようです。 現在1700超のパッケージが公開されてますが、すべて型定義ファイルのパッケージです。型定義は https:
スライド 当記事は以前勉強会でLTしたものです。 スライドは下記にあります。 フロントエンド覚えること多すぎ問題 モダンなフロントエンド開発で、入門記事を探そうとすると、 まずwebpackやTypeScript, Babelによるビルド環境構築から始まる記事が多くヒットします。 ですが、Node.jsの初心者がいきなり複数のツールを習得しようとすることが 挫折の原因になっていると感じています。 ですので、まずNode.jsをインストールした直後から、必ず使うことになる、 npmの機能をまず覚えておきましょう。 フロントエンド開発で覚えるべき３つのコマンド 以下の3つだけ覚えておきましょう。 npm init npm install npm run これだけ覚えれば、ひとまずフロントエンド開発を進めることができます。 完璧なワークフローを構築するのは、書いているアプリが大きくなってきてから
タイトルの通り。 npm install --save なり --save-dev なりして package.json に書き込まれたパッケージのバージョン、どうやって定期的にアップデートしていけばいいかわからなかったので。 新しいバージョンがリリースされているかどうかの確認と、実際にどのように新しいバージョンにアップデートすればいいのか調べてみた。 今回サンプルに使う package.json package.json の例として、以前、React のチュートリアルをやったときのリポジトリを使う。 { "name": "react-es6-tutorial", "version": "1.0.0", "description": "React Tutorial written in ES6", "main": "index.js", "scripts": { "test": "echo
http-server: a simple static HTTP server http-server is a simple, zero-configuration command-line static HTTP server. It is powerful enough for production usage, but it's simple and hackable enough to be used for testing, local development and learning. Installation: Running on-demand: Using npx you can run the script without installing it first: npx http-server [path] [options] Globally via npm n
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
