jsの主要ライブラリ7選を徹底解説 - Qiita
jsの主要ライブラリ7選を徹底解説 ソフトウェア開発において、Angular、Vue、Nuxt、React、Next.js、Node、Socket.ioは異なるツールやフレームワークです。それぞれがウェブ開発やアプリケーションの構築に役立ちます。 Angular Angularは、Googleによって開発されたJavaScriptフレームワークです。Angularはウェブアプリケーションの構築に使用されます。Angularを使うと、ウェブアプリケーションを構築するために必要な多くのツールや機能が提供されます。Angularは、大規模なアプリケーションの開発に適しており、コンポーネントベースのアーキテクチャを採用しています。 Vue Vueは、ウェブ開発に使用できるJavaScriptフレームワークです。Vueは、シンプルで使いやすい構文を提供し、小規模なプロジェクトから大規模なアプリケーシ
NestJSをゼロから学ぶ - TypeORMの活用などをREST APIの実装から身に付けよう【Node.jsフレームワークの基本】｜ハイクラス転職・求人情報サイト AMBI（アンビ）
このようにさまざまなデコレータが用意されていますが、今回はサンプルで利用するデコレータに絞って説明します。他のデコレータについては、NestJSの公式ドキュメントなどを参照してください。 依存性注入（DI） 依存性注入（DI、Dependency Injection）とは、クラスの依存関係を解決する仕組みです。NestJSでは、依存性注入を使ってクラスの依存関係を解決します。 クラスの依存関係とは、クラスが他のクラスに依存している関係のことです。例えば、次のようなクラスAがあったとします。このクラスは他のクラスに依存していません。@Injectable()デコレータを使って、サービスを定義します。 @Injectable() class A { constructor() {} } そして、次のようなクラスBがあったとします。このクラスは、@Inject()デコレータを使って依存性を注入し
EmacsでTypeScript/React開発する2023 - たごもりすメモ
世間に死ぬほど色々な方法があるのはわかっているがとにかくまっさらな状態から最短手順でEmacsでJSX/TSXが書けるようになりたい! という話。VSCodeとかそういう話には目を背ける。 tsxファイルはweb-modeで起動するようにすればシンタックスハイライトとインデントはうまくいくので、あとはlspを起動するようにすれば快適です！— つかもとたけし (@itometeam) 2023年1月23日 自分で調べつつ試行錯誤したんだけど、最終的にはこのtweetで教えてもらった通りになった。メジャーモードとしてweb-modeを使いつつflycheckとLSPで開発支援。 macOSにインストールしたEmacs*1、およびMELPAにあるパッケージだけで、以下のようになった。 (require 'web-mode) (add-to-list 'auto-mode-alist '("\\.
Just JavaScript
Explore the JavaScript UniverseRebuild your mental model from the inside out. On a good day, programming feels like magic.You patiently enchant the machine with a tapestry of digital spells. With a few confident keystrokes, you breathe life into the colorful dots on the screen. Oh, what a marvellous illusion you have created! It works… Except when it doesn’t. It strikes you just as you were about
【2022最新】JavaScriptの学習におすすめの本11選【初心者〜中級者】 | High Career Blog
「JavaScriptを勉強したいけど、何から始めれば良いかわからない」 このように悩んでいる方も多くいると思います。 この記事では、以下の内容について解説していきます！ JavaScript学習本の選び方のコツ JavaScript学習におすすめの本 本を利用した学習方法 レベル別に紹介しているので、自分に合った本を探してみてください。 ##本を選ぶときのポイント JavaScriptの学習をするには、体系的に学べる本を利用することがおすすめです。 ただし、自分のレベルに合わない本を選ぶと挫折の原因になりかねません。 以下のポイントを抑えて、本を探してみてください。 図解が多い 初めてJavaScriptを学習する際に、コードばかり記載されている本を読み進めるのは困難です。 イラストや操作画面と共に解説された本であれば、視覚的にイメージが湧くのでJavaScriptの学習が捗ります。 専
TypeScript の基礎から Promise の型注釈まで駆け登る
この記事は Zenn の Book の方で公開している『イベントループとプロミスチェーンで学ぶ JavaScript の非同期処理』で収録済みのチャプターから記事として切り出したものになります (チャプター単体でも記事になるものとして判断して公開しています)。 この記事は JavaScript の非同期処理を学習した人間が Promise や非同期処理を介して逆に TypeScript の型注釈を理解しようという試みの記事になります。 実は Promise の型注釈や TypeScript の非同期処理の解説については以下のように既にいくつも有用なリソースがあります。 Promise / async / await | TypeScript入門『サバイバルTypeScript』 イベントループと TypeScript の型から理解する非同期処理 今回は初学者の目線からアウトプットを兼ねて自
React Queryを使いこなすために試したこと
はじめに タイトルで大きくふろしきを広げてしまいましたが、結論から言うといろいろと試してみた結果、現時点ではまだ着地点を見出せていません。現時点での自分なりの最適解として、useQuery、usePrefetch、useMutationと楽観的更新の実装例についていくつか紹介させていただきます。 モチベーション 現在、Redux Sagaをふんだんに利用したアプリケーションのメンテナンス・機能拡張に携わっているのですが、ページ数やAPIエンドポイントが多数あることからコード量が多く構造も複雑になっており、メンテナンスコストの増大が懸念されるようになってきました。そこで今後のメンテナンス性の向上、また新規に参画するメンバーにも入りやすいようRedux SagaをはがしReact Queryへ少しずつ移行してくための検証を兼ねてReact Queryの使い方を探っています。 React Que
JavaScriptのコードには、こんな書き方もある
この記事はコードの書き方について、書き方そのものを推奨するものではなく、このような書き方も出来るという紹介です。コメント欄まで一緒にみていただくと学びになります。 ※記事はいただいたコメントを反映しましたので、当時のコメントと記事の内容に差分があります 1.破壊的メソッドを避ける 破壊的メソッドとは、元の配列の要素を変えるメソッドです。以下の例ではconstで宣言した変数numbersが、pushメソッドにより更新されています。 対応前 const numbers = [1, 2, 3] numbers.push(4) console.log(numbers) // [1, 2, 3, 4] この場合、元の配列の要素を更新するのではなく、スプレッド構文を使って新しい変数に代入します。変数はなるべくイミュータブルにしておくと、意図しない不具合やプログラムの可読性や保守性が向上します。push
NestJSでinterfaceに対してDIする
NestJSはmoduleクラス周りでのDIの実装がとても優れているなと感じており、moduleクラスによって依存関係がまとまるので、可読性も高いなと感じています。 そんな中で1点、特定のクラスに対してinterfaceを噛ませて実装したいと思った時に、少し詰まったので、それの解決策です。 やりたいこと DemoServiceに対して、DemoRepositoryInterfaceを実装したDemoRepositoryをDIしたい。 import { Injectable } from '@nestjs/common'; import { DemoRepositoryInterface } from './demo.repository.interface'; @Injectable() export class DemoService { constructor( private rea
JavaScriptにおける this を完全に理解する - Qiita
JavaやKotlin、Swiftなど、多くのオブジェクト指向言語では、this はクラス内メソッドなどで利用され、そのインスタンス自身を指します。 JavaScriptでは挙動が異なります。 本記事では、JavaScriptにおける this の仕様をまとめます。 りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】を参考にしています。 めちゃくちゃ良書で、JavaScript・TypeScript、Reactについて深堀りされているのでおすすめの本です！ this に関するおすすめルール りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】では、下の２つを守ることが推奨されています。 this はClass構文内でしか使わない Class構文内では、メソッドを含めたあらゆる関数の定義をアロー関数
ESlint で import を自動ソートする
import が増えてくると、その順序が気になってきます。 外部ライブラリからのインポートは上にあって欲しいし、reactからのインポートはさらに上に固定したくなりませんか？ ESlint のeslint-plugin-importというプラグインを使えば簡単にソートできます。 使うのはeslint-plugin-importのimport/orderというルールです。 設定も色々あって、ある程度の自由度で順序を決めることもできます。このルールは fixable なのでeslint --fixコマンドで自動ソートが可能です。 公式の解説もあるのですが分かりにくい個所や誤っている個所もあるためこの記事を作成しました。 ソートした例 早速eslint-plugin-importのimport/orderを使ってソートした例です。 上が下のようにきれいになります。 ソート後はreactからのイン
初心者でも簡単にわかるReact useEffect, useLayoutEffectの使い方 | アールエフェクト
React useEffectとは useEffectは関数(Functional)コンポーネントのみで利用することができるHookです。useEffectのEffectは”Side Effect”(副作用)を意味しています。Side Effectにはfetch関数を利用して外部のリソースからデータを取得したり、DOMの更新、ロギング(console.logも含む)などの処理が含まれます。 useEffectを理解する上でclassコンポーネントに関する機能との比較は重要ではないかもしれませんが、useEffectはReact ClassコンポーネントのライフサイクルcomponentDidMount, componentDidUpdateとcomponentWillUnmountの3つと同様な処理を行うことができるHookです。 componetDidMountはコンポーネントのマウント
TypeScriptをインストールして自動的にコンパイル＋実行できるようにする（開発環境構築）【JavaScript】
Node.jsをインストールする まずはNode.jsをインストールします。以下のサイトから最新のLTSをダウンロードしてインストールします。 LTSをダウンロードします Node.jsをインストールするとパッケージ管理ツールのnpmもインストールされます。 インストールされた場所はwhichコマンドで確認できます。 # Node.jsのコマンドのフルパス $ which node /usr/local/bin/node # npmのコマンドのフルパス $ which npm /usr/local/bin/npm バージョンは-vオプションで確認できます。 # Node.jsのバージョン確認 $ node -v v16.13.0 # npmのバージョン確認 $ npm -v 8.1.0 package.jsonを作成する nodeのパッケージを管理するためpackage.jsonをコマンド
lodash やめ方 - Qiita
みなさん、 lodash で消耗してますか？ 私は消耗しています。 なぜ lodash で消耗するかというと、とにかく思考停止でインストールされ、 node_modules 下で大量に重複します。サイズが大きいlodashが複数バンドルされてビルドされると、重篤なパフォーマンス上の問題を引き起こします。 lodash には実装上の問題もあり、異様に丁寧に、そして富豪的に作られており、その結果ビルドサイズが無駄に大きいです。丁寧に作られて入るのですが、現代のフロントエンド水準や一般的なポリフィルと噛み合っていません。というわけで、常々やめたいと思っています。 ちゃんとES201xを追ってる人からすると、ほとんどの lodash のメソッドは不要に見えるはずです。本エントリは、思考停止で lodash で実装しようとする人に、ちょっと考え直しては？ と投げつける用の記事になります。 現代におい
Lodash Documentation
_.chunk(array, [size=1])source npm package Creates an array of elements split into groups the length of size. If array can't be split evenly, the final chunk will be the remaining elements. Since3.0.0 Argumentsarray (Array): The array to process.[size=1] (number): The length of each chunkReturns(Array): Returns the new array of chunks. Example
JestのTips集10選。サーバーサイドでNode.jsのJestを書いたことない人向け
対象 業務レベルでサーバーサイドでJestを書いたことはないけれど、新プロジェクトでは書くことになったみたいな方を想定して記述しています。 Jestについては中々ベストプラクティスが集まりにくいので、経験的にこう書くと「きれいに」・「早く」・「正確に」書けるよというTipsを集めてみました。もし、よろしければお読みください。 前提 TypeScript Node.js Jest DBアクセスありの状態を想定しています 1. it文内では、必ず1回は、expectをつかって検証をする JestのPRをレビューしてるとたまに見受けるのですが、expectを使ってないケースがあります。 // NG it('userを正常に、作成できること', async() => { await createUser({ name: 'Mike' }); }); // OK it('pdfが正常に削除できること
Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか
Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか https://d.potato4d.me/entry/20220405-nodejs/ へのアンサーソング。 プログラミング言語としての JavaScript の話をする。 2010年頃、Python 2 でプログラミングを学習した自分にとっては Node.js + CoffeeScript が Better Python だった。 CoffeeScript は当時の JS(ES3~5) に足りない機能を補ってくれて、Python と同じく空白制御のオフサイドルールなのが気に入った。見た目が少しだけ Ruby っぽいので当時全盛だった Rails の人間に訴求するにも有利だった。 Node.js のモジュールシステムである Commonjs は Pytho
僕らを縛る Node.js という呪いについて
これ僕らの物語であり、僕と君の物語であるかもしれない。 数日前、友人が言った。「久しぶりに Rails を書いたけれど、Node.js の良さに敵わない」と。 その言葉に同意しながらも、他方で少し不思議に思う。 いつから僕らは Node.js しか使わなくなったのか。あれだけ話していた Rails などの多くの Web 技術にときめかなくなったのか。と。 もちろん、使えないというわけではない。寧ろ今現役で十分な活躍をしているフロントエンドの人間は、等しく皆「主役であるバックエンドのサブとして存在するフロントエンド」を経験してきている。 書こうと思えば書ける。だがその中で、敢えてフロントエンドとその技術を選んできた。 だけど今はどうだろう。フロントエンドエンジニアはもはや「JavaScript を扱うソフトウェアエンジニア」となり、一般的なバックエンドは勿論、Node.jsが一級市民として存
JavaScript Primer - 迷わないための入門書 #jsprimer
JavaScript Primer 迷わないための入門書 Tweet Watch Star Twitterのハッシュタグ: #jsprimer これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。 プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるように書かれています。 初めてのプログラミング言語としてJavaScriptを学ぶ人は、まずは「はじめに」から読んでみてください。 書籍版 このウェブサイトの内容はアスキードワンゴから書籍として出版されています。 書籍版の内容はウェブサイト版と同一ですが、本として読めるように最適化されています。 書籍版は次のサイトから購入できます。 Amazon 達人出版会（電子書籍版
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - you-dont-need/You-Dont-Need-Lodash-Underscore: List of JavaScript methods which you can use natively + ESLint Plugin
