jsの主要ライブラリ・フレームワーク7選徹底解説 ウェブ開発の世界では、さまざまなライブラリやフレームワークが存在し、それぞれが特定のニーズに対応しています。JavaScriptはウェブ開発において中心的な役割を果たしており、Angular、Vue、Nuxt、React、Next.js、Node、Socket.ioはその代表的な例です。これらのツールはウェブアプリケーションの開発を容易にし、異なるアプローチで開発者をサポートします。 Angular 大規模アプリケーションの強力なフレームワーク Angularは、Googleによって開発された強力なフレームワークで、主にシングルページアプリケーション（SPA）の開発に用いられます。TypeScriptをベースにしており、データバインディング、依存性注入、ルーティングなどの機能を提供します。 ビジネスアプリケーションに最適 モジュラー構造：再
このようにさまざまなデコレータが用意されていますが、今回はサンプルで利用するデコレータに絞って説明します。他のデコレータについては、NestJSの公式ドキュメントなどを参照してください。 依存性注入（DI） 依存性注入（DI、Dependency Injection）とは、クラスの依存関係を解決する仕組みです。NestJSでは、依存性注入を使ってクラスの依存関係を解決します。 クラスの依存関係とは、クラスが他のクラスに依存している関係のことです。例えば、次のようなクラスAがあったとします。このクラスは他のクラスに依存していません。@Injectable()デコレータを使って、サービスを定義します。 @Injectable() class A { constructor() {} } そして、次のようなクラスBがあったとします。このクラスは、@Inject()デコレータを使って依存性を注入し
世間に死ぬほど色々な方法があるのはわかっているがとにかくまっさらな状態から最短手順で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 '("\\.
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
「JavaScriptを勉強したいけど、何から始めれば良いかわからない」 このように悩んでいる方も多くいると思います。 この記事では、以下の内容について解説していきます！ JavaScript学習本の選び方のコツ JavaScript学習におすすめの本 本を利用した学習方法 レベル別に紹介しているので、自分に合った本を探してみてください。 ##本を選ぶときのポイント JavaScriptの学習をするには、体系的に学べる本を利用することがおすすめです。 ただし、自分のレベルに合わない本を選ぶと挫折の原因になりかねません。 以下のポイントを抑えて、本を探してみてください。 図解が多い 初めてJavaScriptを学習する際に、コードばかり記載されている本を読み進めるのは困難です。 イラストや操作画面と共に解説された本であれば、視覚的にイメージが湧くのでJavaScriptの学習が捗ります。 専
この記事は Zenn の Book の方で公開している『イベントループとプロミスチェーンで学ぶ JavaScript の非同期処理』で収録済みのチャプターから記事として切り出したものになります (チャプター単体でも記事になるものとして判断して公開しています)。 この記事は JavaScript の非同期処理を学習した人間が Promise や非同期処理を介して逆に TypeScript の型注釈を理解しようという試みの記事になります。 実は Promise の型注釈や TypeScript の非同期処理の解説については以下のように既にいくつも有用なリソースがあります。 Promise / async / await | TypeScript入門『サバイバルTypeScript』 イベントループと TypeScript の型から理解する非同期処理 今回は初学者の目線からアウトプットを兼ねて自
はじめに タイトルで大きくふろしきを広げてしまいましたが、結論から言うといろいろと試してみた結果、現時点ではまだ着地点を見出せていません。現時点での自分なりの最適解として、useQuery、usePrefetch、useMutationと楽観的更新の実装例についていくつか紹介させていただきます。 モチベーション 現在、Redux Sagaをふんだんに利用したアプリケーションのメンテナンス・機能拡張に携わっているのですが、ページ数やAPIエンドポイントが多数あることからコード量が多く構造も複雑になっており、メンテナンスコストの増大が懸念されるようになってきました。そこで今後のメンテナンス性の向上、また新規に参画するメンバーにも入りやすいようRedux SagaをはがしReact Queryへ少しずつ移行してくための検証を兼ねてReact Queryの使い方を探っています。 React Que
この記事はコードの書き方について、書き方そのものを推奨するものではなく、このような書き方も出来るという紹介です。コメント欄まで一緒にみていただくと学びになります。 ※記事はいただいたコメントを反映しましたので、当時のコメントと記事の内容に差分があります 1.破壊的メソッドを避ける 破壊的メソッドとは、元の配列の要素を変えるメソッドです。以下の例ではconstで宣言した変数numbersが、pushメソッドにより更新されています。 対応前 const numbers = [1, 2, 3] numbers.push(4) console.log(numbers) // [1, 2, 3, 4] この場合、元の配列の要素を更新するのではなく、スプレッド構文を使って新しい変数に代入します。変数はなるべくイミュータブルにしておくと、意図しない不具合やプログラムの可読性や保守性が向上します。push
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
JavaやKotlin、Swiftなど、多くのオブジェクト指向言語では、this はクラス内メソッドなどで利用され、そのインスタンス自身を指します。 JavaScriptでは挙動が異なります。 本記事では、JavaScriptにおける this の仕様をまとめます。 りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】を参考にしています。 めちゃくちゃ良書で、JavaScript・TypeScript、Reactについて深堀りされているのでおすすめの本です！ this に関するおすすめルール りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】では、下の２つを守ることが推奨されています。 this はClass構文内でしか使わない Class構文内では、メソッドを含めたあらゆる関数の定義をアロー関数
import が増えてくると、その順序が気になってきます。 外部ライブラリからのインポートは上にあって欲しいし、reactからのインポートはさらに上に固定したくなりませんか？ ESlint のeslint-plugin-importというプラグインを使えば簡単にソートできます。 使うのはeslint-plugin-importのimport/orderというルールです。 設定も色々あって、ある程度の自由度で順序を決めることもできます。このルールは fixable なのでeslint --fixコマンドで自動ソートが可能です。 公式の解説もあるのですが分かりにくい個所や誤っている個所もあるためこの記事を作成しました。 ソートした例 早速eslint-plugin-importのimport/orderを使ってソートした例です。 上が下のようにきれいになります。 ソート後はreactからのイン
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はコンポーネントのマウント
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 で消耗してますか？ 私は消耗しています。 なぜ lodash で消耗するかというと、とにかく思考停止でインストールされ、 node_modules 下で大量に重複します。サイズが大きいlodashが複数バンドルされてビルドされると、重篤なパフォーマンス上の問題を引き起こします。 lodash には実装上の問題もあり、異様に丁寧に、そして富豪的に作られており、その結果ビルドサイズが無駄に大きいです。丁寧に作られて入るのですが、現代のフロントエンド水準や一般的なポリフィルと噛み合っていません。というわけで、常々やめたいと思っています。 ちゃんとES201xを追ってる人からすると、ほとんどの lodash のメソッドは不要に見えるはずです。本エントリは、思考停止で lodash で実装しようとする人に、ちょっと考え直しては？ と投げつける用の記事になります。 現代におい
_.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を書いたことはないけれど、新プロジェクトでは書くことになったみたいな方を想定して記述しています。 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 以外が真っ当な選択肢にならなかったか 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
これ僕らの物語であり、僕と君の物語であるかもしれない。 数日前、友人が言った。「久しぶりに Rails を書いたけれど、Node.js の良さに敵わない」と。 その言葉に同意しながらも、他方で少し不思議に思う。 いつから僕らは Node.js しか使わなくなったのか。あれだけ話していた Rails などの多くの Web 技術にときめかなくなったのか。と。 もちろん、使えないというわけではない。寧ろ今現役で十分な活躍をしているフロントエンドの人間は、等しく皆「主役であるバックエンドのサブとして存在するフロントエンド」を経験してきている。 書こうと思えば書ける。だがその中で、敢えてフロントエンドとその技術を選んできた。 だけど今はどうだろう。フロントエンドエンジニアはもはや「JavaScript を扱うソフトウェアエンジニア」となり、一般的なバックエンドは勿論、Node.jsが一級市民として存
JavaScript Primer 迷わないための入門書 Tweet Watch Star Twitterのハッシュタグ: #jsprimer これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。 プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるように書かれています。 初めてのプログラミング言語としてJavaScriptを学ぶ人は、まずは「はじめに」から読んでみてください。 書籍版 このウェブサイトの内容はアスキードワンゴから書籍として出版されています。 書籍版の内容はウェブサイト版と同一ですが、本として読めるように最適化されています。 書籍版は次のサイトから購入できます。 Amazon 達人出版会（電子書籍版
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
