TypeScriptの型と値とバリデーション
TypeScript は本質的に自分に型が付与されていると思っているだけの JavaScript です。 いくら型を付与しようが、それが実行時に影響を与えることはありません。 コードレビューをしているとここを誤解している人が本当に多いです。何度も解説しているのですが、なかなか浸透しないので、TypeScript におけるバリデーションという視点で記事を書くことにしました。 あと TS でバリデータ使って色々作ろうとしている友人と、プログラミング始めたてで zod と openapi を使っいる友人がいたので、彼らが想定読者です。 型と値の名前空間 TypeScript 上での名前空間(スコープ)は2つに分類できます。 値: 実行時にランタイム上のメモリに存在するもの 型: 静的解析時にのみ参照可能なもの。コンパイル時に完全に消滅する。 TypeScript は基本的に JavaScript
Webブラウザ、レンダリングエンジン、JavaScriptエンジンの整理&図視化 - Qiita
最近、次世代のMicrosoft EdgeがChromiumをベースにするという記事を読んだことがきっかけでブラウザの中身が気になって調べたので、その備忘録として記事にしたいと思います。 ※2020/3/17追記: Microsoft Edgeは既にChromiumベースになりました。 それに伴い記事を更新し、以下のように表記を変更しました。 現世代Microsoft Edge → 旧世代Microsoft Edge 次世代Microsoft Edge → 現世代Microsoft Edge もし変更のし忘れがあった場合はご指摘お願いします。 #Webブラウザとは まずWebブラウザとは ウェブブラウザ（インターネットブラウザ、web browser）とは、 World Wide Web (WWW) の利用に供するブラウザであり、ユーザエージェント (UA) である。具体的には、ウェブペー
async/await 入門（JavaScript） - Qiita
はじめに 今更ですが、JavaScriptのasync/awaitに関する備忘録になります。 「今まで$.Deferred()やPromiseなどで非同期処理は書いたことがあるが、async/awaitはわからない」 「$.Deferred()やPromiseなどの非同期処理の書き方より、もっと簡潔に書ける書き方があれば知りたい」 「今までの非同期処理の書き方と比べて何が良いのかわからない」 といった人達向けの記事です。 $.Deferred()やPromiseなどで非同期処理を書いたことがある前提のため、非同期処理自体に関する説明は記載しておりません。 記載している利用例のコードはChrome（最新）のコンソール上で動きますので、コンソール上で実行して動作を確認してみると理解が深まりやすいと思います。 本記事で用いている用語 Promiseを返す Promiseオブジェクトを返すこと。
JavaScript: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。 - Qiita
本稿では、アロー関数とfunctionキーワードを使って定義される関数を区別するため、functionキーワードを使うほうの関数を「通常関数」と呼ぶことにします。英文で見かけるregular functionの翻訳になりますが、これは公式の用語ではなく、解説の便宜上のものとご理解頂ければと思います。単に「関数」というときは、通常関数とアロー関数どちらも指すこととします。 関数の歴史 歴史的に見ると、通常関数は古くからある言語機能であるのに対し、アロー関数は新しいものです。アロー関数はES2015(ES6)で導入されました。導入にあたっては、関数を短く書きたい、thisを束縛したくないという2つの理由があります。 通常関数とアロー関数の性質の違い 通常関数とアロー関数では、構文が違うというのは見て分かると思います。構文についての違いはここでは解説しません。 ここでは、文法以外の相違点をひとつ
クイックスタート – React
React ドキュメントへようこそ！ このページでは、日々の開発で使用する React のコンセプトのうち 80％ の部分を紹介します。 このページで学ぶこと コンポーネントの作成とネスト マークアップとスタイルの追加 データの表示 条件分岐とリストのレンダー イベントへの応答と画面の更新 コンポーネント間でのデータの共有 コンポーネントの作成とネスト React アプリはコンポーネントで構成されています。コンポーネントとは、独自のロジックと外見を持つ UI（ユーザインターフェース）の部品のことです。コンポーネントは、ボタンのような小さなものである場合も、ページ全体を表す大きなものである場合もあります。 React におけるコンポーネントとは、マークアップを返す JavaScript 関数です。
100秒で理解するPromise
そもそも非同期処理とは？ Promiseについて知るためには、まず非同期処理について知っておく必要があります。 以下の動画で、非同期処理について100秒で解説しているので、そもそも非同期処理をよく知らないなぁという人はぜひ確認してみてください！ Promiseとは では、本題です。 Promiseとは、ES2015で導入された、非同期処理の状態や結果を表現するオブジェクトのことです。 PromiseはES2015で導入された非同期処理の状態や結果を表現するビルトインオブジェクトです。 非同期処理はPromiseのインスタンスを返し、そのPromiseインスタンスには状態変化をした際に呼び出されるコールバック関数を登録できます。 jsprimer - 非同期処理:Promise/Async Function 例えば、出前アプリでピザを注文することをイメージしてみましょう。 ピザを注文すると、
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove
今からでも遅くないconsoleを使いこなそう - Qiita
はじめに この記事では、consoleメソッドについて紹介を行っていきます。consoleメソッドには例えばconsole.log()などが挙げられます。web開発においてconsole.log()を使用する方は多いかもしれません。しかしconsoleにはconsole.log()以外にも様々なメソッドがあるので、状況に合わせて使い分けることで少しでも快適なデバック、開発ライフを目指しましょう。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 consoleについて consoleオブジェクトを用いることで変数の値などをコンソール上に出力することができます。主に出力の確認であったり不具合の原因特定などのデバックするために
デジタル庁でjQueryが何をしているのか - laiso
TL;DR: jQueryはDrupalのバーター リニューアルするたびにWeb界隈の一斉レビューを受けることでお馴染のデジタル庁ポータルサイトがいつの間にかまたリニューアルされていて、フロントエンドがNext.jsからDrupalに変わって話題になっていたので1、私も旅券所持者として国政に関心を持ってゆく また、まわりのフロントエンドエンジニアの間でjQuery氏の入庁について「モダンブラウザ全盛の時代に必要か？」と疑念がとなえられていたので、これも追求してゆきたい どのような変更があったのか システム変更の経緯はプロジェクトの関係者であるHal Sekiさんの発言が正確なところだと思う Drupalが話題ですが、元々CMS側は2年前からずっとDrupalだったんです。設立当初はサイトもシンプルだったのでフロントエンド側はNextjsでヘッドレス構成だったのですが、構成が複雑になってきて
execjs が入っていれば無理に libv8 関連の gem を入れなくても良いっぽい。 | blog.dnpp.org
概要 タイトルで全部言っているんだけど、 therubyracer や mini_racer や libv8 や libv8-node あたりの消耗しがちなやつや問題が起きがちなやつは execjs が入っていればそもそも使わなくていいらしい。 詳細 execjs の README には以下のように書いてある。 ExecJS lets you run JavaScript code from Ruby. It automatically picks the best runtime available to evaluate your JavaScript program, then returns the result to you as a Ruby object. ExecJS supports these runtimes: therubyrhino - Mozilla Rhino
Typescript では !! と Boolean() が完全に同じ動作ではない
🌼 はじめに 皆さんは Javascript である値を boolean に変換するときどういう方法も使いますか？よく使われる方法は!!（二重否定・Double negation）か、Boolean()だと思います。 const hello = Boolean("hello"); // true const world = !!"world" // true Typescript のハンドブックでもその２つを紹介してます。 You can always coerce values to booleans by running them through the Boolean function, or by using the shorter double-Boolean negation. いちおう型の観点では、!!を使ったら型がtrueかfalseになり、Boolean()関数を使った
JavaScript / TypeScript の豆知識 10 選 - Qiita
JavaScript / TypeScript の豆知識 10 選 初めに JavaScript / TypeScript にまつわる豆知識を、10 個ほど集めてみました。 コードは全て TypeScript で書いていますが、内容はほぼ全て JavaScript にも当てはまることです。 少し長めの読み物ではありますが、気軽に当記事を楽しんで頂ければ幸いです。 それでは、以下が目次です。 JavaScript / TypeScript の豆知識 10 選 初めに 1.Nullish と Falsy 関連参考資料_1 2. tsconfig の便利な設定 関連参考資料_2 3. 依存関係の綺麗な図示の仕方 関連参考資料_3 4.正しい XSS のやり方 関連参考資料_4 5.removeChildren 関連参考資料_5 6.数値型を関数の引数として使う時の小技 関連参考資料_6 7.hi
TypeScript 10年の歩み - Qiita
TypeScriptは、2022/10/01に10周年を迎えました。 ということで、それを記念してMicrosoftの中の人が振り返りのエントリーを書いていました。 以下は該当の記事、Ten Years of TypeScriptの紹介です。 Ten Years of TypeScript 2022年10月1日は、TypeScript10歳の誕生日です。 10年前の今日、2012年10月1日に、TypeScriptは初めて公にされました。 The Early Days 初めてTypeScriptが表に現れたとき、それももっともなことでしたが、多くの否定的な意見がありました。 一部のJavaScriptユーザにとって、JavaScriptに型を強制する試みは冗談か邪悪な陰謀のように見えたかもしれません。 しかし、その試みには、多くのメリットがありました。 型チェックのおかげで、ファイルを保存
書いた JavaScript をそのまま動かすフロントエンド開発の未来のために必要なもの
大きめのテーマです。もしかしたら「うちでは書いた JS をそのまま配信してるぜ〜」って人もいるかもしれないでが。 最近の Web フロントエンド開発では、書いた JavaScript をそのまま動かさないことが多い 最近のフロントエンド開発ではエンジニアが書いた JavaScript をそのままブラウザで動かすことはほとんどないかもしれません。 例として最近流行のフレームワークを考えてみましょう。Next.js や Remix、Nuxt.js など、いずれも内部的にトランスパイラやモジュールバンドラを使い、エンジニアが書いた JavaScript を別の形へと変換してからユーザーのブラウザで動かすような仕組みになっています。 一昔前だと Next.js のようなフレームワークが今ほど発展していなかったこともあり、webpack や Babel を直接使っていたと思いますが、それも同じです。
【フロントエンド】プロジェクト初期に手を抜かないで - Qiita
はじめに みなさんは新規サービスを立ち上げたことがありますか？ 技術選定から環境構築、諸々の初期設定。大変なことが多いですよね。 僕はこの4年で、新規サービスを3つ、新規の管理画面系を1つ立ち上げたのですが、このプロジェクトの初動で毎回のように後悔をしてます。 特に、フロントエンド領域というのはJavaScriptという自由な言語の特色を色濃く反映しているのか、非常に自由度が高く、どのようにも書けてしまいます。 そんな僕からのアドバイス。 プロジェクトの初期は最大限頑張ること。 最低限ではなく、最大限を心がけるといいと思います。 今回は、理由とともにどんなことを気をつければいいのかという話ができればと思います。 新規サービスの環境構築は最大限頑張った方がいい理由 1. 人は増える。あなたと他の人を一緒にしてはいけない。 環境構築をするのは1人でも必ずあなたではない誰かがプロジェクトにアサイ
TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜
本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書ついて詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとはJavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセットスーパーセットとは、元の言語との
setTimeout を完璧に理解する
setTimeout は、指定された時間以降に指定されたコードを実行する JavaScript の API です。ブラウザでも Node.js でも広く使われているのですが、実装はまちまちで、色々と特殊な条件も多く、挙動を完璧に理解している人は少ないと思います。この記事では、そんな setTimeout を可能な限り深堀りしてみようと思います。 先に書いておきますが、ものすごくニッチで細かい話ばかり並びます。突然私が、ただ純粋に setTimeout について調べたくなったので、その結果をまとめただけのものです。普通に開発している人には必要のない情報が多くなるでしょう。この記事は基礎から setTimeout を学ぼう、という方には全然向かないと思います。 また、JavaScript のイベントループについてある程度理解していることを前提とします。その詳しい理解には、@PADAone さん
Server Side Renderingについて知るべきこと。Server Side Renderingとは何か？ それによって何が改善されるのか？（前編） ng-japan 2017
Server Side Renderingについて知るべきこと。Server Side Renderingとは何か？ それによって何が改善されるのか？（前編） ng-japan 2017 JavaScriptフレームワークとして知られるAngularのイベント「ng-japan 2017」がAngular Japan User Group主催で6月17日に都内で開催されました。 Angularは基本的にWebブラウザで実行されるJavaScriptアプリケーションのフレームワークですが、一方でサーバサイドでAngularが備えるHTML構成機能を実現する、いわゆるServer Side Rendering機能の開発も「Angular Universal」として進んでいます。 そのため、Server Side Renderingに興味を持つAngularデベロッパーも増えてきました。 ng-
Webpackの後継となる新バンドルツール「Turbopack」が登場。Rust製のネイティブアプリケーションでWebpackの700倍高速に。Next.js Conf 2022
Webpackの後継となる新バンドルツール「Turbopack」が登場。Rust製のネイティブアプリケーションでWebpackの700倍高速に。Next.js Conf 2022 Reactベースのサーバサイドフレームワークとして知られるNext.jsの開発元のVercelは、日本時間10月25日深夜にイベント「Next.js Conf 2022」を開催。Next.jsの最新バージョンとなる「Next.js 13」と、Rust製の高速なバンドルツール「Turbopack」を発表しました。 Introducing Turbopack, the successor to Webpack. ~700x faster than Webpack 10x faster than Vite Native incremental architecture built with Rust Support f
Getting Started – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 新しいクイックスタートガイドでは最新の React がライブサンプル付きで学べます。 このページは React のドキュメント、および関連する資料の概要となります。 React はユーザインターフェースを作成する為の JavaScript のライブラリです。ここのホームページ、またはこのチュートリアルから React がどういうものかを学びましょう。 React を試す React を学ぶ 最新の情報を追いたい人へ バージョン管理されたドキュメント 足りないものがある？ React を試す React は当初より、既存のプロジェクトに徐々に追加していけるようなデザインとなっています。たくさん React を使うのでも、少しだけ使うのでも構いません。触りだ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
