注意 この記事に書いてあることは古い情報になっている可能性があります 最近ReduxToolkit周りの進化がめざましく、更に追加されたReduxのドキュメントの項目がかなりわかりやすく書かれているため、基本的にこちらを推奨します 既にRTKなどの概要を知っているひとは特に Tutorials > Redux Essentials のセクションを読んでほしいです こんにちは、すずです Reactを使い始めて2年半経ち、その間に3つのサービス(SPA)を立ち上げてきました その経験から、 React や Redux を実務でしっかり使ってく上でのノウハウを紹介していきます （この記事ではある程度ReactやReduxの記事・ドキュメントを読んだ初学者を対象としています） 序 フロントエンド、モノを作ったはいいものの、「変更しづらい」「スケールしない」「この作りではパフォーマンスが出ない」って

型宣言と型アサーション TypeScriptにおいて、変数に対して型を与える方法は、型宣言とas(以下、型アサーション)の2通りがあります。 今回は、型アサーションではなく型宣言をできるだけ使うのが良い理由について説明します。 まず簡単に両者の使い方をみてみたいと思います。 以下のようなインターフェースを使用しながら、変数に値と型を代入してみます。

コンストラクター関数とは、new式を使用して新規オブジェクト（インスタンス）を作成する関数です。 次のスクリプトコードは、コンストラクター関数の定義と使用法の一番簡単な例です このコードでは、次のことをおこなっています。 関数a内で、オブジェクトthisのxプロパティに、値をセットしている。オブジェクトthisをリターンしている。new式で、関数aを呼び出しているこのとき関数aは、コンストラクター関数と呼ばれます。 このコードで何が起こっているのか、順番に見ていきます。 コンストラクター関数をnew式で呼び出すと、コンストラクター関数のprototypeプロパティを継承したthisという名前の新規オブジェクトが作成される。これは、JavaScriptの内部処理でおこなわれます。 参考記事： ■【JavaScript】 new演算子は何をやっている？ 関数内コードで、thisに新規のプロパテ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに type-challenges は TypeScript の型システムでユーティリティ型を実装する問題集です。 型システム版の競技プログラミングといってもいいでしょう。 この記事では type-challenges を遊んで知った TypeScript の tips のうち、勉強になったり面白いと感じたものをまとめました。 type-challenges に挑戦して詰まったときに参考になれば幸いです。 注意 動作確認には、typescriptlang.org の Playground を利用しました。 TypeScript のバージョンは v4.8.4 （執筆時現在の最新バージョン）を使っています。 各セクションごとに書いているコードの Playground のリンクは添付しているので、動作も確認していただけます。 この記事の内容は、 type-challenges の問題を解く

この記事は Laravel Advent Calendar 2020 - Qiita 最終日の記事です。 TL;DR DDD や "真の" クリーンアーキテクチャは， Web 業界における大抵の現場ではオーバースペックだし，導入しても全員がついてこれるとは限らない app/UseCases ディレクトリだけ切って，ドメインごとに単一責務なクラスを置くと使いやすいよ ActiveRecord 指向のフレームワークで Repository パターンを無理に導入すると死ぬので， UseCase で Eloquent Model の機能を使うことを恐れるな はじめに Zenn では初投稿です。日本の Laravel コミュニティではもうお馴染みのようで実はあまり顔を出していない（？） @mpyw と申します。オンラインサロンの火付け役となった Synapse が最初の仕事でしたが，就職後すぐ会社が

実務1年半が転職ドラフトで、指名18件＆約700万内定を獲得した話【web試験・コーディング試験・面接対策あり】ポエム転職転職活動面接転職ドラフト 初めに タイトルにもあるように、Web開発の実務経験１年半程だった私が 2022年の某月回の転職ドラフトに初参加したところ、まさかの 指名18件獲得 年収約700万円の内定獲得 を実現することができました。 当初は、せめて指名が3件程きて願わくば年収500万円の内定を獲得できれば嬉しいな・・くらいの温度感だったのでこれは正直かなり予想外でした。 転職ドラフトを実際に利用してみて、非常に素晴らしいサービスだと感じたので、 今回は転職ドラフトでの転職体験と、面接やコーディング試験の対策をどのようにしたのか等をご共有できればと思います。 どの程度のスキル感でどのような指名が来るのか・・等、 転職ドラフトでご転職を考えられている方のご参考になれば幸いで

最初に書いたようにthisの挙動は、Arrow Functionの関数定義とそれ以外（functionキーワードやメソッドの短縮記法）の関数定義で異なります。 そのため、まずはArrow Function以外の関数やメソッドにおけるthisを見ていきます。 Arrow Function以外の関数におけるthis Arrow Function以外の関数（メソッドも含む）におけるthisは、実行時に決まる値となります。 言い方を変えるとthisは関数に渡される暗黙的な引数のようなもので、その渡される値は関数を実行するときに決まります。 次のコードは疑似的なものです。 関数の中に書かれたthisは、関数の呼び出し元から暗黙的に渡される値を参照することになります。 このルールはArrow Function以外の関数やメソッドで共通した仕組みとなります。Arrow Functionで定義した関数やメ

最近JavaScriptを学習する上で、thisの参照先についてややこしく感じたので、この記事ではthisの参照先について基本的なパターンを整理してみました。 thisとは thisとはJavaScriptに最初から用意されている特別な変数のことです。 条件(実行場所)によって参照先が異なり、この条件によって参照先が変わることで意図しない値(undefined)になることが多いです。 紹介パターン 今回は「非厳格モード」を前提に、下記のパターンについてまとめました。 １．何にも含まれていない状態 ２．関数内 ３．メソッド内 ４．constructor内 ５．グローバルオブジェクトに格納されているメソッド内 ６．thisの参照先を指定する方法 １．何にも含まれていない状態 クラスや関数内など何にも含まれていない状態でthisを呼び出すとブラウザのグローバルオブジェクトであるwindowを参照

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 npm に初めて触れるときは、package.json がどういう役割をもっているのか、パッケージをインポートするとはどういうことなのかなど分からないことだらけであり、筆者も少しずつ調べては試すことを繰り返した記憶がある。これから Node.js を学ぼうという人にはこのような部分でつまづいてほしくないため、この記事では npm を使う上で必要な概念的知識を説明する。この記事を読めばスムーズに Node.js の学習が始められると思われる。 NPM とは NPM と名のつくものは実は 2 つあり、ひとつはオンライン上のパッケージレ

2024 2024-12-31: 2024年の振り返り 2024-12-10: WebKit(JavaScriptCore)に100個のPull Requestがマージされた 2024-11-24: [JSConf JP 2024 感想] Unicode 15.1でU+200CとU+2004がID_Continueに入ったことによってECMAScriptがちょっと更新されていたことに気がついた 2024-10-29: 標準偏差さんとsksatのツイートから学ぶABI(Application Binary Interface) 2024-10-22: VueFes Japan 2024の「次世代フロントエンドクロストーク」の感想ともっと聞きたかったこと 2024-10-16: Intl.DurationFormatの最大値を規定する仕様について 2024-08-19: WebKitのコミッタ

TypeScript の構造的部分型という概念は、直感的で分かりやすい。 だが一方で、Freshness やプリミティブ型の挙動など、よく理解しておかないと戸惑ってしまうような挙動も多い。 例えば、なぜ以下のコードがエラーにならないのか、最初は分からなかった。 const number: {} = 1; const string: {} = 'a'; const boolean: {} = true; const symbol: {} = Symbol('a'); また、下記のコードでbarだけがエラーになるのも分かりづらい。 const point = {x: 1, y: 1}; const foo: {x: number} = point; // OK const bar: {x: number} = {x: 1, y: 1}; // Error const empty: {} = {

はじめに こんにちは、モチベーションクラウドの開発にフリーのエンジニアとして参画している@HayatoKamonoです。 この記事は、「モチベーションクラウド Advent Calendar 2018」15日目の記事となります。 概要 モチベーションクラウドのフロントエンド開発では、JavaScriptのフレームワークとしてVueを採用しています。 私がモチベーションクラウドの開発にジョインしたのは2018年7月です。 それまで私はReactを使ったフロントエンド開発を2、３年ほど行なってはいたものの、Vue自体は未経験の状態でした。 今回は、そんなVue未経験だった私が、この５ヶ月弱の間に、実務や日々の学習を通して蓄積してきたVueのパターンや小技、また、Reactコミュニティーから拝借したパターンなどを簡易的なサンプルコードとともに、共有させて頂きたいと思います。 v-modelのカス

プログラミングの型システムに関する記事を読んでいると、共変や反変といった用語が出てくることがある。 TypeScript や Flow についての記事でも、見かけることがある。 それらは TypeScript を使う上で必須の知識ではないが、把握しておくに越したことはない。 この記事では、TypeScript を題材にして、変性について説明していく。 TypeScript に関する議論を理解できるようになることがこの記事の目的であり、より詳細な、学術的、数学的な内容には踏み込まない。 この記事の内容は、TypeScript のv3.9.5で動作確認している。 変性 変性（variance）とは、任意の型Tに対してどのような性質を持つのか示したものであり、以下の 4 種類がある。 不変性（invariance） Tそのものが必要 共変性（covariance） Tそのものか、そのサブタイプが

モチベーション Vue2系サポート終了(23年末予定)を踏まえて、今後はVue3に触れる機会が増えそう 現在Vue2を使っているけどVue3へリファクタする予定があり、慣れていく必要が出てきた 記事の内容 Vue3を取り巻く環境とかエコシステムなど整理 Vue3に慣れる為に知っておくべきことを整理 移行に伴う破壊的変更の内容などは記載してない ある程度Vue2を触った事があるのを前提で書いてる部分が多いです なぜVue3に慣れる必要があるのか 1. Vue2のサポート終了 Vueの公式によるとVue2系が2023年の末に終了されることが告知されています。 Vue2系は2022年6月にリリースされた2.7系が最後で、今後は新しい機能などは追加されず、セキュリティ対応など最低限のアップデートのみの対応となります。 それに伴ってVue2からVue3へリファクタ等の対応する必要があります。 2.

オブジェクトの中に、定数をフラットに列挙しただけの定数ファイルを書いていませんか？ 私は、フロントエンドの開発において、 JavaScript の簡潔なオブジェクト記法 TypeScript による型チェック / IDE 等による入力補助 を活用した保守性の高い定数ファイルの書き方を日夜研究しているので、4つのポイントに着目して解説しようと思います。 ▼ Enum 的な記述についてまとめた記事です。本記事を読んだあとで、こちらもチェックしてみましょう。 （2024/10/15 訂正）「オブジェクト-キー」形式（genre.name）より 「疑似的な名前空間」形式（genre_name）が無難 この記事においては、以下のようなオブジェクトに定数たちをまとめることを推奨していました。この形式を 「オブジェクト-キー形式」 と呼ぶことにします。 object.key の形式にすることによって、E