2021年になってJavaScript、TypeScript、Node.jsの勉強を始めました。 この記事では、読んで良かった本、記事、公式ドキュメントなどをまとめていきます。 ※2021/03時点の情報です。 個人的なリンク集ですが、「これも読むと良いよ」というものがあればぜひ教えてください。 ECMAScript ECMAScriptの仕様は、EcmaのTC39で策定されている Ecma TC39 GitHub organization ep78 TC39 | mozaic.fm Node.jsの各バージョンでのECMAScriptサポート状況 JavaScript Misreading Chat - #86: JavaScript: the first 20 years JavaScript 二十年の歴史についての回 JavaScript チュートリアル | MDN JavaScri
卒業証書 2021年4月にプログラミングスクールのWebデザイナー向けプログラミングコースを卒業しました。 受講していたのはRailsプログラマーコースだったのを、途中からメンターさんに相談してWebデザイナー向けにカリキュラム内容をカスタマイズしてもらって、受講してました。 受講していたスクールでははじめての試みだったということで、同じデザイナーの人でプログラミング勉強したいと考えている人向けに記事を残すことにしました。 プログラミングを勉強しようと思った経緯は以前投稿した記事に書いているので、そちらを参照してください。 ksmxxxxxx.hatenablog.com スクールでやったこと 通っていたのはフィヨルドブートキャンプというプログラミングスクールになります。 実際に進めたカリキュラムは以下になります。 Linuxの基本 Terminal Debianをインストール ファイル操
Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】準備編｜Yuu's Memo
皆さんこんにちは！！ 今日から何回かに分けて、Laravel8とVue.jsを使用して「スケジュール管理アプリ」を作成したいと思います。 簡単に言えば、「Googleカレンダーのクローン」を作成していくチュートリアルです。 WEBアプリケーションにスケジュール管理機能を組み込む場合、「FullCalendar」を利用することが多いと思いますが、今回はFullCalendarなどは使用しません。 LaravelとVue.jsは非常に人気が高いので、多くの解説記事やチュートリアルが出ています。 ただ、どれも小さなサンプルを作ったり、解説が断片的で、実際の開発に活かせないものが多いです。 今回から皆さんと作る「Google Calendar Clone」は、LaravelやVueを触ったことがない方には少し難しいかも知れませんが、中規模のアプリケーションを開発することで、LaravelやVue.
この記事はNuco Advent Calendar 2023の1日目の記事です。 はじめに 2023年最新のフロントエンド開発環境についての紹介記事です。 分野別に、おすすめツール群と、その特徴などを紹介していきます。 デファクトスタンダードとみなせるようなツールや、最近盛り上がりを見せているものなどをラインナップしました。 これからフロントエンド開発を始めたい人はもちろん、長くご経験のある人にもプラスになる情報がきっとあるため、ぜひ参考にしてもらえると嬉しいです。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 フロントエンド開発おすすめツール集 エディタ エディタやIDEは好みの問題も大きいので、メジャーなものを簡単
会社の支給PCがMacBook Pro M1なので、新しく開発環境を構築した話 - 食べチョク開発者ブログ
こんにちは。 今年の年始からジョインした遠藤です。 さて、入社したところ会社支給のMacBook ProがM1チップのものでした。 はい、現状は開発環境で苦労するとか色々噂を聞くやつです。 実際に試したのですが、 現状の開発環境構築スクリプト、手順書が一切使えない VitualBox, Vagrantは利用不可 Dockerは利用可能ではあるが、一部イメージが対応されてない 古いパッケージは動かす手段がない などなど、通常ではぶつからない問題にぶつかります。 食べチョクでは、 Ruby Node.js MySQL Redis ElasticSearch Kibana を利用しています。 この辺りをメインに話つつ、Intel版とこんな風に違うのかっていう辺りの雰囲気を感じ取っていただければと思います。 どこに開発環境を構築するか まず、どこで開発環境を構築するかを考えてみたいと思います。 ロ
そもそもnpmからわからない
はじめに やっぱりwebpackがわからない（エピソード1）、エピソード2を公開しているのですが、そもそもnpmからわからない、という人もいると思いますので、今回はnpmに関して説明します。 なお、やっぱりwebpackがわからないではViteに関して触れていますが、Node.jsもDenoという新しいランタイム環境が登場しています。ですが、やはりまだ開発現場で使用するには難しいと思いますので、Node.jsを使用するうえでnpmはちゃんと理解しておいた方がいいです。 npmとは npm とはNode.jsのパッケージを管理するシステム、所謂パッケージ管理システムです。アプリケーションを作成する際、便利なパッケージをそのプロジェクトにインストールして、使用することができます。 ところで、パッケージとは一体何なのでしょうか？ パッケージとは システム開発ではモジュール、パッケージ 、ライブラ
2024年 React 環境構築 with Vite
はじめに 書いていて気づいたのですが、この記事に特に目新しいものはありません。コピペで最速環境構築をしたい方向けです。それぞれのツールについて細かい解説はしていないため、詳細は公式ドキュメントをご参照ください。 リポジトリはこちら。 Node.js この記事では Node.js のバージョン管理に volta を使用しますが、nvm や nodebrew などでも問題ありません。パッケージマネージャーには pnpm を使用したいところですが、2024 年 1 月現在、volta の pnpm サポートは実験段階のため、今回は npm を使用します。(そこまでして volta を使用したい理由はないのですが...) curl https://get.volta.sh | bash source ~/.zshrc # or ~/.bashrc volta install node # LTS版
今年は文章校正の環境を整えられなかったことが大きな課題でした。いままで、秀丸のハイライト……はMacに乗り換えたのでお別れしたり、miを使って表記ルールを入れ込む……は用語統一を登録するので精一杯で実用的にはならなかったりといった具合で、なかなか「これ！」という校正・校閲環境に持って行けていませんでした。 そんなとき見つけたのがtextlintというもの。ATOKのような文章チェックをしてくれるものとイメージしてもらえたらよいかなと思います。 Markdown などのテキストファイルを特定のルールにしたがってチェックするツールです。 ルールは作者の azu さんを始め、多くのルールが公開されています。 （textlintとVSCodeで始める文章校正） で、textlintはVSCodeというエディタで動かせます。VSCode（Visual Studio Code）は、マイクロソフトが提供
TypeScript Deep Dive とは TypeScript Deep Diveとは、TypeScriptはもちろん、JavaScript（ES6）/ サーバーサイドJavaScript（Node.js）/ Reactなどで使うJSX など、TypeScript周辺技術を包括的に学ぶことができるTypeScriptの入門サイトです。 TypeScript Deep Dive TypeScript Deep Dive 日本語版 GitHub TypeScript Deep Dive 日本語版 TypeScript環境構築 TypeScript Deep Diveで勉強を始めるための、環境構築を行なっていきます。 環境 項目 バージョン 1. Node.jsのインストール HomeBrewを使って、nodebrewをインストールします。 $ brew install nodebrew
Node.jsのバージョン管理はVoltaに決定
Voltaとは Rust製の2020年12月に正式版が公開された比較的新しいNode.jsバージョン管理ツールです。 Volta公式では「手間のかからないJavaScriptツールマネージャー」と説明されていて、以下の特徴が挙げられています。 ⚡️速い Rust製なのでどんなJavaScriptツールもとても速くインストールして動かせる ⚡️信頼できる プロジェクトメンバー全員が同じ環境を作れることを保障してくれる ⚡️万人共通 パッケージマネジャーやOS違いでも共通のコマンドを使える 新しいツールなのにGithubのスター数は既に7.4kで人気があり、 最新リリースも2022年10月1日、その前が2022年6月2日とメンテナンスも頻繁にされている印象です。 そもそもなぜ Node.js が必要なのか Node.jsとはブラウザ上で動くJavaScriptをサーバーサイドでも動かすためのソ
プロジェクト間で必要とされる node.js のバージョンが違うことはままあり、そのために皆さん nvm や nodebrew などのツールを使っておられることだろうと思います。 今回それ系統で Volta というツールを知ったので紹介いたします。 Volta - The Hassle-Free JavaScript Tool Manager Volta の特徴 セットアップが比較的簡単 Rust製で速いらしい 実行する node のバージョンなどをプロジェクトのディレクトリに入るだけで自動で切り替えてくれる npm や yarn でグローバルインストールした時も、どのディレクトリでインストールされたかを自動で記録するため、コマンドラインから直接コマンドを実行できつつもプロジェクト毎に違うバージョンを使うことができる node だけでなく npm や yarn もプロジェクト毎に固定できる
この記事は Node.js Advent Calendar 2019の16日目の記事となります。 qiita.com 今回は Node.js 13.3.0から導入されたWebAssembly System Interface (WASI)モジュールに関して紹介します。 WASIについて wasi.dev github.com WASI APIはWebAssembly System Interface(WASI)の仕様の実装を提供するものです。WASIはPOSIXライクな関数を介してOSへのアクセスを行うためのサンドボックスWASMアプリケーションを提供します。 WebAssemblyおよびWASIに関しては、あまり詳しくなかったのですが、下記の記事を読んで理解が深まりました。 inzkyk.github.io hacks.mozilla.org Node.js v13.3.0から、コード上
2020年版、Node.js入門！使い方〜環境構築までを丁寧に解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIG Philippines Inc.のセイトです。 先日久しぶりにNode.jsを書く機会があったんですが、PCを変えたばかりだったので環境構築から始めました。 そして、速攻ハマりました。 あれ、うまくいかねえぞ……と。 調べてわかりましたが、結論、2019年のMac新OSであるCatalinaにおいては、従来のやり方では十分なNode.js環境を構築できません。 そして、これについて書いてある情報を少なくとも僕は見つけられませんでした。 というわけで、Node.jsを書きたいみなさん、おまたせしました。 2020年版、Node.js入門！使い方〜環境構築までを丁寧に解説します。 知識ゼロの方にもわかるよう進めていきたいと思います。 ちなみに、この記事と同じ内容をYouTubeでも解説しています。動画で勉強したい方はぜひこっちを観てね！ Node.jsとは？ そもそもNod
GitHub Codespaces環境でDenoを使ってSlack Botを作ってみよう！（Deno基礎知識 + 環境構築編） - BASEプロダクトチームブログ
この記事はBASE Advent Calendar 2021の4日目の記事です devblog.thebase.in ごあいさつ はじめましての人ははじめまして、こんにちは！フロントエンドエンジニアのがっちゃん（ @gatchan0807 ）です 今回は、フロントエンドエンジニア界隈で話題になっているDenoについて調査し、プラスでSlack Botを書いてみることで現時点のDenoはどんな感じで使えるのかを検証したので、その経験をシェアできればと思っています！（実際にSlack Botを書くのは次回の記事の予定です） つらつらとDenoを触っていて気になったポイントを書いたためにかなり長い記事になってしまいましたが、お付き合いいただけますと幸いです！ Denoの基礎知識 DenoはNode.jsの作者、Ryan Dahl（ https://github.com/ry ）さんがNode.j
webpack の基本的な使い方 以下は webpack のインストール方法や webpack.config.js の設定方法、Loaders ローダー、Plugins プラグイン、splitChunks、webpack-dev-server、v5 で導入された Asset Modules などの基本的な使い方の覚書です。 Node.js がインストールされていることを前提にしています。 ※ webpack5 (バージョン 5) 用に内容を更新しました（2021年12月31日）。 以下で使用しているパッケージのバージョン node: 16.13.2 npm: 8.1.2 webpack: 5.65.0 webpack-cli: 4.9.1 webpack-dev-server: 4.7.2 関連ページ： nvm を使って Node.js を Mac にインストール Node.js を Ma
MacBookAir2020買いましたヽ(=´▽`=)ﾉ そしてMacBookAir 2020年版も到着！ 商売道具は3年毎に変えないとね（・∀・） 裏側のAppleロゴが光らないのはやっぱり寂しいけど、今のところ満足度は高い。今週は設定祭りだなー。 pic.twitter.com/72e9Tm5TN5— 勝部麻季人 💦👏 (@katsube) 2020年4月20日 1年以上前から買い換えようと何度も店頭に足を運んだのですが、バタフライキーボードが全然しっくり来ない、価格的にもそれならPro買うわといった感じでコスパも今ひとつ。そんなときに突然発表された2020年版がそれらの悩みをすべて解消した神モデルということで迷わず購入。新型コロナが蔓延する情勢不安な中でしたが商売道具をケチってはいけませんｗ 一体どうしたんだAppleらしくないぞｗ 顧客の要望を足蹴にし阿鼻叫喚に叩き落とす経営方
こんにちは。虎の穴ラボのH.Hです。 今回はWebサービスの自動テストを試作したので、作ったアプリケーションについて書こうと思います。 なぜ作ろうと思ったか 虎の穴ラボでは、とらのあな通販やFantiaなど多くのWebサービスの開発を行っています。 日々様々な機能の追加や変更が行われています。 変更した機能は関連する既存機能を含めてテストを行い、本番の環境にリリースしていきます。 既存部分のテストに関して、簡略化できないかと考え自動でテストを行うツールを作ろうと思いました。 そもそもWebサービスのテストはなぜ簡略化が必要か テストは機能追加をしていくと、次に挙げる問題のためにテストにかける時間が増えていきます。 【問題１】機能追加を行う毎に確認項目が増える 何かの検索を行うサービスを考えると、１つの検索機能は様々な条件を元に該当するデータを取得します。 何か変更があれば既存の検索結果に影
Electronの使い方 Web開発の技術でデスクトップアプリを作ろう | フューチャー技術ブログ
TIGの伊藤真彦です。 最近Electronを用いたアプリケーション開発を行っています。技術ブログで今まで取り扱った事のないテーマであるため、まずは入門記事を書いてみました。 ElectronとはElectronは、GitHubが開発したオープンソースのソフトウェアフレームワークです。 ChromiumとNode.jsをコアとして採用する事で、Web開発と同じようにHTML,CSS,JavaScriptを用いて開発したものを、デスクトップアプリケーションとしてビルドすることが可能になります。クロスプラットフォームであることも利点の一つであり、同一のソースコードからmacOS、Windows、Linuxへのアプリケーションビルドが可能です。 つまりWeb開発の技術でデスクトップアプリが作成できるものです。 Electronを使って開発されているもの。Electronを使って開発されているアプ
nodenvコマンド早見表はこちら プロジェクトごとにNode.jsのバージョンを管理できる nodebrewだとnodebrew use [バージョン番号]みたいに切り替えるのが大変ですが、nodenvだと簡単にできるっぽいのでこっちを使ってみます。 いろいろなプロジェクトに関わってくるとこういうのがすごくありがたい。 開発者の方に感謝です。 インストールの流れ Homebrewのインストール anyenvのインストール nodenvのインストール Node.jsのインストール ・Homebrew HomebrewはMac用のパッケージマネージャ。 ツールのインストールとか諸々を管理してくれます。 http://brew.sh/index_ja.html nodebrewをインストールするためにHomebrewを使います。 ・nodenv 順番前後しますが、これがメイン。Node.jsの
Node.js のバージョン管理ツールはいくつかありますが、最近リリースされた Volta という Rust 製のバージョン管理ツールが良さそうだったので使ってみました。今までは Node.js のバージョン管理ツールに nodebrew というツールを使っていましたが、Volta を見つけせっかくだし乗り換えて見ようと思ったのがきっかけです。 Volta とは Volta は Rust で作られた OSS の Node.js のバージョン管理ツールです。Rust 製で静的バイナリとしてビルドされるため早いです。また、Volta を使えば、複数プロジェクトでバージョンが違う Node.js プロジェクトがあった場合に、手動で切り替えなくても、プロジェクトを移動することで自動的にバージョンが切り替わってくれます。 機能 特徴的な機能としては以下のようなものがあります。 プロジェクトごとのシー
nodeのバージョン管理ツールをvoltaに決めました【2022年5月現在】 - Link and Motivation Developers' Blog
こんにちは、リンクアンドモチベーションでアプリケーション開発をしております。岡田です。 普段は新規のプロダクト開発で主にフロントエンドの開発をしております。 以前に記事も書いてますのでよろしければこちらも御覧ください。 link-and-motivation.hatenablog.com 先日、広木さんのこの様な記事が公表されました。 僕もテックブログの運営をしていますが、肩肘張らず普段の思考をテックブログに落としていこうと思います。 newspicks.com さて、現在僕は新規のプロダクト開発に携わっています。しかしまだまだ、プロダクトもチームもプロセスも黎明期です。 ライブラリのアップデートをしようと色々触っていたら、チームでnodeのversionも管理していなかったので、まずはここからだなと思いnodeのversion管理をすることになりました。 そこで諸々選定したのでそれを記載
はじめに 試行錯誤が長くなったので先に結論だけ書いておきます。 以下の３点をチェックしてみてください。 ※いずれにも当てはまらない場合は当方とは異なる事象かと思います… ①caskコマンドの使い方が変更になった 旧) $ brew cask install xxx ↓ 新) $ brew install xxx --cask 新しい環境で古いコマンド、古い環境で新しいコマンドを使用していたりしないでしょうか？ ②brew updateができない homebrewのリポジトリというかGitHubが、”shallow cloneをやめようぜ”、って流れらしく、今までshallow cloneしていた人(恐らくデフォルト)はフェッチし直さないといけないらしいです。 (この辺の背景はあまり自信ないですが…) 以下のコマンドを実行すれば解決するはずです。 $ git -C /usr/local/Ho
Web系エンジニアなら知っておきたいツール5選。ハマりポイントも解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はいさーい！ 2021年11月にジョインしたうーまーです。沖縄からフルリモートでバックエンドとフロントエンドのお仕事をさせてもらってます。 入社直後って、先輩たちの顔を覚えたり社内文化にとまどったり、まっさらなマシンを受け取って初期設定したりと割と大変ですよね。特にマシンの設定なんて、一度してしまったらなかなか変更することないので、基本的なことを忘れてしまってたりしますよね。 ということで、転職したての僕がLIGに入って最初つまづいた事例を交えながら、転職前に押さえておきたいツール5選を紹介したいと思います。 Web系エンジニアが使うツールの話なので、転職希望者だけでなく、就職・組織で働くのが初めてって方にも刺さる内容になっています。 1.コマンドプロンプト（ターミナル） windowsで言うコマンドプロンプト、macだとターミナル。いわゆる黒い画面。 少し前（と言っても10年くらい）まで
あるとき.zprofileというファイル名を見かけて、そんなファイルあるのかなと疑問に思い、自分のターミナルで調べたら確かにあった。 中身を見たら、nodeのPATHだけ書いてあった。 export PATH=$HOME/.nodebrew/current/bin:$PATH 前にrbenvをインストールしたときは.zshrcにPATHを追加したので、 nodeも.zshrcに書いたと思ったら.zprofileにPATHを書いていた。 記事をいくつか見ると.zshrcに書くパターンと.zprofileに書くパターンの半々。 どっちに書けばいいんやら..... 使い分けは？ bashの記事引用、 .bash_profile 基本的に デフォルトのまま一切いじらない 端末操作以外でも設定しておく必要がある環境変数のみ設定する .bashrc .bash_profileに書いた設定以外はすべてこ
npm の基本的な使い方
npm とは npm（Node Package Manager）は、Node.js のパッケージ（Package）を管理するツールです。 npm はパッケージをインストールする際に各種ライブラリなどの依存関係を管理・解決してくれ、パッケージの検索や更新、バージョン管理、アンインストールなどもできます。 また、npm を使ってインストールした複数のパッケージの環境を簡単に複製することができます。 npm は Node.js をインストールすると自動的にインストールされるので、使用するには Node.js をインストールする必要があります。 関連ページ： nvm を使って Node.js を Mac にインストール Node.js を Mac にインストール（nodebrew の使い方） Node.js がインストールされていれば、ターミナルで以下を実行して npm のバージョンを確認すること
npm入門 - とほほのWWW入門
ヘルプを表示します。 $ npm help $ npm --help $ npm help コマンド $ npm -h コマンド npm のバージョンを表示します。 $ npm -v $ npm --version $ npm version npm で管理するプロジェクトディレクトリを作成します。package.json ファイルが生成されます。 $ mkdir my-app $ cd ./my-app $ npm init (略) package name: (my-app) [Enter] version: (1.0.0) [Enter] description: [Enter] entry point: (index.js) [Enter] test command: [Enter] git repository: [Enter] keywords: [Enter] author:
bash_profileを更新して設定を反映させる。 source ~/.bash_profile セットアップ。これやらないとインストールできない。 nodebrew setup バージョン指定してnodeをインストールする インストール可能なバージョンを確認 nodebrew ls-remote nodeのインストール nodebrew install-binary <version> ※ nodebrew installでインストールするとスゴイ時間がかかるので、上記のコマンドが良いらしい。 現時点だとv10.15.0が最新なので、これをインストール nodebrew install-binary v10.15.0 インストールしたバージョンを確認 nodebrew ls 使いたいバージョンを指定 nodebrew use v10.15.0 もう一度nodebrew lsを叩いて、c
はじめに 「Gulpってなに？」 「便利だと聞くけれどどうやって導入したらいいのかわからない」 そう悩まれているかた多いと思います 何故なら多くの記事が、古いGulpのバージョンの記述方法で書かれていたり、Node.jsのインストール方法が違ったりして、初心者にとっては、何が正解で、どの記事をあてにしたらいいのかわからないからです ただ、それで挫折して導入をあきらめるのは本当にもったいないです なので、初学者の方や少し勉強された方、これから導入を考えている方に向けてこの記事を書きたいと思います Gulpは最新の4系を採用しています gulpfile.jsの書き方も最新のものとなっています また、Sass公式推奨のDart Sassで記述しているので安心して読み進めていただけます Gulpとは？ 簡単にGulpについて説明します Gulpを使うと以下の作業を全部自動化してくれます（本当はもっ
はじめに この記事は自分がNode.js未経験の状態からNode.jsのプロジェクトに携わって学んだことを忘れない様にメモしておくための記事です。 今はプロジェクトを離れてNode.jsに関わっていないため、思い出すためのメモとしてまとめました。 各ツールの役割を解説する事で、開発時に知識として必要なキーワードを効率よく知る事を目的としています。 私自身常に最新の情報を追えていた訳ではないので、情報としては古い可能性があるかもしれませんのでご注意を。 また、ツールの導入の仕方はバージョンアップによって変わる事があり、都度公式の最新の情報をチェックすべきであり、かつ今回の趣旨ではないため省略します。 実際こちらの記事を記載中にバージョンアップによって色々と変わったツールが散見されました。 より詳しい情報が欲しい方には 私はある程度自力で試行錯誤しながら学んだ後でこの本に出会ったので、本の内容
![[メモ] Node.jsで開発するにあたっての基礎知識まとめ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/ced7c0d184111fdd588a0bdce08fb5da51968e0b/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUUzJTgzJUExJUUzJTgzJUEyJTVEJTIwTm9kZS5qcyVFMyU4MSVBNyVFOSU5NiU4QiVFNyU5OSVCQSVFMyU4MSU5OSVFMyU4MiU4QiVFMyU4MSVBQiVFMyU4MSU4MiVFMyU4MSU5RiVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MSVBRSVFNSU5RiVCQSVFNyVBNCU4RSVFNyU5RiVBNSVFOCVBRCU5OCVFMyU4MSVCRSVFMyU4MSVBOCVFMyU4MiU4MSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NjhjZTg4YWZmNWQxZDBkM2E5MTlmNWI2NmQ3YTM0YjY%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBmcm9tX1Vua25vd24mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWNjNTMxNzdmYzUxYjIwMzM0ODRjZjVjOWIyNDI2Y2Rl%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g44Oi44OT44Or44K55qCq5byP5Lya56S-%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D9e3c940b1445f71d660ab89c87d9a553)
はじめに npm installでしょっちゅうエラーにぶち当たるので備忘的に残しておきます。 npmってなんぞ？って方はこちらの記事とか参考になるかと思います。 とりあえず確認しとく項目 1. nodeとnpmのバージョンを見直す 2. node_modules フォルダとpackage-lock.json（場合によっては node-gyp も）を削除 3. npm install 実行するディレクトリを変える 各詳細は後述します。今回はdockerとlaravelを使用して環境構築しています。 発生したエラー docker-compose up -dでコンテナ作成したあと、 npm installコマンド実行しようとしたら出たエラー。 $ docker run -it --rm -v $(pwd):/app -w /app node npm install ... gyp ERR! bu
MacにNode.jsの開発環境を用意しよう 公開日 : 2021.08.18 最終更新日 : 2022.10.05 コーディング こんにちは、AndHAコーディング部です。 新しいPC環境に「Node.jsを導入しよう！」と思った時、たくさんの情報があり、どの方法でインストールしようか悩んだことはないでしょうか。。。 そこで本記事では、AndHAコーディング部が実践している導入方法として、ご紹介します！ 今回ご紹介する場合の環境はmacOS Catalina 10.15.7となります。 また、Mac環境はまっさらな状態を想定して解説しています。 Homebrewを導入しようまず、下記のパッケージマネージャーを導入しましょう。 macOS（またはLinux）用パッケージマネージャー — Homebrew サイトにアクセスするとインストール用のコードが掲載されています。コードの記載右側のアイ
Node.js初学者向けにpackage.jsonハンズオンを実施しましたので、その時に作ったハンズオン資料を公開します。 npmコマンドやpackage.jsonに慣れることが目的のハンズオンの資料ですので、Node.jsとは何か？といった説明はしません。ご了承ください。 文章の手順通りに進めていけば、npmコマンドやpackage.json編集が体験できます！ 事前準備 Node.jsのインストール 事前にNode.jsのインストールをお願いします。（すでにNode.jsがインストール済の方は飛ばしてください。） Windowsの場合 Windowsの方は、こちらの記事をご参照ください。Chocolatey > Nodist > Node.jsの順番でインストールします。 Windowsで、Chocolateyとnodistで、バージョン切り替え可能なNode.jsの環境を構築する M
はじめに CX事業本部の中安です。まいどです。 主にiOS担当のモバイルアプリエンジニアをやっている身として、Swiftの記事をよく書いているのですが、 「たまには他のこともやらないとなー」と思いまして、React.jsを始めてみることにしました。 この記事は、その奮闘記と思ってくださいませ。 Reactとは あらためて「Reactとは」というお話をすると、 React (リアクト) は、Facebookとコミュニティによって開発されているユーザインタフェース構築のためのJavaScriptライブラリである。React.jsまたはReactJSの名称でも知られている。 Reactはシングルページアプリケーションやモバイルアプリケーションの開発におけるベースとして使用することができる。複雑なReactアプリケーションでは通常、状態管理（英語版）・ルーティング・APIとの対話のための追加のライ
![[React] よーし! いっちょReactやってみっか! #1 環境構築編 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/406d924d7d4c6327201a8281e75820982243f551/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F01%2Freact.jpg)
フロントエンド開発で気をつけていること忘備録
はじめに 本業がSIerの身分からフロントエンドに足を踏みいれてしばらくが立ちました。自分の忘備録も兼ねて、私がフロントエンド開発で気をつけていることを技術要素ごとにまとめてみました。 HTML 用途に応じた適切なタグを利用する。SEO対策やアクセシビリティ向上の効果があり、開発者にとってもHTMLの構造を把握しやすくなる。 aタグやimgタグのalt属性やrole属性、label属性などを適切に設定することでアクセシビリティの向上を図る。 CSS 余計なプロパティは書かないこと。画面の表示に影響がなくとも、後から追加した要素に予期せぬ悪影響を与えるリスクある。また、後でcssを見返したとき理解に苦労する。(普通はプロパティ１つ１つにコメントは入れないと思うのでなおさら) 複数のプロパティを記述する順番を統一する。 (Vscodeの拡張機能でできる） 余白の取り方について、兄弟要素間にはm
WordPress 関連リンク JavaScript ビルド環境のセットアップ（@wordpress/scripts） @wordpress/create-block パッケージ ブロックの作成 チュートリアル（create-block） JavaScript Build Setup（英語） @wordpress/create-block（英語） Create a Block Tutorial（英語） @wordpress/scripts (wp-script) npm 関連リンク @wordpress/scripts @wordpress/create-block 関連ページ Node.js を Mac にインストール（nodebrew の使い方） npm の基本的な使い方 webpack の基本的な使い方 React を使ってみる（基本的な使い方） このページ以外にも以下のようなブロッ
こちらはCAM advent calendar 2021の14日目の記事です。 ｜はじめに CAMでWebフロントエンドエンジニアをしている三好です。 Node.jsのバージョン管理ツールはnvmを筆頭に様々なものが存在しています。 私が直近でNode.jsの環境を作った際に結局どのツールを使うべきか悩んだため、各ツールを比較した上で私がどのツールを使うに至ったか、各ツールの使うべき状況を書かせていただこうと思います。 記述されている情報は2021年11月執筆現在の情報です。 ｜今回扱うツールについて 今回は以下のツールを扱います。 ・nvm ・n ・nodenv ・nodebrew ・fnm ・asdf ・Volta ｜ツール選定条件 以下の条件を私が選ぶツールの最低条件としました。 1. macOSとWindowsに対応している ・普段自分でどちらのOSも使用しているため、両方に対応し
npm install でエラー。gyp: No Xcode or CLT version detected! - Qiita
No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'. No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'. No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'. gyp: No Xcode or CLT version detected! ←「ココ」 gyp ERR! configure error gyp ERR! stack Error: `gyp` failed with exit code: 1 gyp ERR! stack at ChildProcess.onCpExit (/Users/mac/.nodebrew/node/v12.16.2/lib/nod
Node.jsをインストールすることで同時にnpmもインストールされます。 Homebrewをインストールする 今回Homebrewを使ってインストールしていきます。なので入っていない場合はインストールしましょう。 Homebrewのインストール方法は以下の記事で解説しています。ですが実際には1行コマンドを叩くだけで大丈夫なので載せておきます。 【簡単】MacにHomebrewをインストールする方法と基本的な使い方HomebrewはmacOS用のパッケージ管理システムです。Homebrewを使うことでターミナル上でソフトウェアやライブラリを簡単にインストールすることができます。今回はHomebrewのインストール方法と基本的な使い方を誰でもわかるようにまとめていきたいと思います。... /usr/bin/ruby -e "$(curl -fsSL https://raw.githubuse
中山です この記事はApp2Containerをとりあえず触ってみた、チュートリアル的な記事となります。 App2Containerとは App2Containerは、ASP.NETおよびJavaアプリケーションをコンテナ化するツールです。 AWS App2Container の発表 - アプリケーションをコンテナ化して AWS クラウドに移行する これによって、既存のアプリケーションをAWSのコンテナプラットフォームサービスであるECSもしくはEKSに簡単にデプロイできるようになります。 やってみた 公式のチュートリアルに沿って試していきたいと思います。今回は、tomcat上で動作するアプリケーションの移行をやってみます。 Containerizing a Java application on Linux 動作要件 動作要件は以下の通りです。 移行元の環境を用意する際にこれらが満たされ
概要 ずっと使っていたnodebrewをやめて、ディレクトリごとにnodeのバージョンを切り替えられるnodenvに乗り換えました。 nodenv/nodenv きっかけ firebaseを使った開発をしてて、フロント側とclound functionsで対応するnodeのバージョンが違う事案が発生しました。 nodebrewだとディレクトリでバージョンを切り替えられなかったので、探した末nodenvにたどり着きました。 導入手順 nodebrewを削除 まずはnodebrewを削除します。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2021年にJavaScriptやNode.jsを勉強し始めたので、読んで良かった資料をまとめる
プログラミングスクールを卒業しました - ksmxxxxxx.hatebu
2023年度版フロントエンド開発環境構築徹底解説 - Qiita
非エンジニアが文章校正のためにVSCodeとtextlintを導入するまでの記録
TypeScript Deep DiveでTypeScriptに入門する | DevelopersIO
Node 系ツールのプロジェクト間のバージョン管理に Volta を使い始めてみた
Node.js のWASIモジュールについて - kakts-log
webpack の基本的な使い方（入門）
MacBookAir2020を買ったのでHomeBrewで色々入れる - ねこの足跡R
Puppeteerを使ってWebサイトの自動テストツールを作ってみた - 虎の穴開発室ブログ
MacにNode.jsをインストール（anyenv + nodenv編） - Qiita
Node.js のバージョン管理ツール Volta を使ってみる | DevelopersIO
いつの間にかbrew caskが使用できなくなっていた話
zshrcとzprofileについて - gallardo diary
NodebrewでNodeをインストールする - Qiita
【DartSass対応】どこよりも詳しいGulp 4環境構築【Mac編】 | TipsWeb
[メモ] Node.jsで開発するにあたっての基礎知識まとめ - Qiita
npm installでエラーが出た時にとりあえずやってみること - Qiita
MacにNode.jsの開発環境を用意しよう | AndHA Blog
初学者向けpackage.jsonハンズオン - Qiita
[React] よーし! いっちょReactやってみっか! #1 環境構築編 | DevelopersIO
WordPress Gutenberg ブロック開発の環境構築
Node.jsのバージョン管理ツールおすすめ | 株式会社CAM
【Mac】HomebrewでNode.jsとnpmをインストールする｜新卒エンジニアの開発日記
App2Containerでtomcat環境をコンテナ化してみた | DevelopersIO
nodebrewからnodenvに乗り換えた - Qiita