JavaScriptの代入において時々現れる、括弧で囲まれた変数名は何なのか
JavaScriptの全貌を知るには、人生は短すぎます。大まかに把握したと思っていても、少し時間が経つと、またわけのわからない構文が現れます。 特に最近増えてきた記法として、代入の左辺に、括弧が使われているというものがあります。今回は、これの正体を探ってみましょう。 括弧のついた代入たち JavaScriptにおいて、代入とは一般に以下のようなものを指します： const myNumber = 100; しかし、モダンなライブラリを使用していると、以下のようなサンプルコードを見かけることがあります： const [job] = client.exec(); また、Node.jsにおいて、以下のような構文を見かけることも増えてきました： const {SampleClass} = require('sample-lib'); どちらも少し不思議です。左辺の変数名が括弧（[]または{}）で括ら
Revised Revised 型の国のTypeScript | Revised Revised TypeScript in Definitelyland
Revised Revised 型の国のTypeScript 本書について 本書はJavaScriptにコンパイル可能な言語のTypeScriptについて解説した本です。TypeScriptの基本的な知識（型の使い方）やコンパイラのオプション、型定義ファイルの作り方やエコシステムについて解説します。 対象読者は新しめのJavaScript、いわゆるECMAScript 2015とそれ以降*1について理解しているユーザです。Node.js環境やnpmの使い方、OOP (Object Oriented Programming)の効能や利点をある程度理解していることが望ましいです。 本書に登場するすべてのサンプルコードは次のTypeScriptコンパイラでコンパイルできることを確認しています。 Version 2.4.2 本書はC87、C90で頒布した『型の国のTypeScript』の改訂（C9
TypeScriptの型入門 - Qiita
TypeScriptは型がついたJavaScriptです。プログラミングにおいて型があることの恩恵は大きく、近頃AltJSの代表格として人気を集めています。TypeScriptはもともと型のないJavaScriptで書かれるコードに型を付けることを使命としていることもあり、たまに変な型が追加されます。例えばTypeScript2.8で追加されたconditional typesはずいぶん注目を集めました。これによってTypeScriptの型システムの表現力が広がりましたが、一方でTypeScriptを書いている人の中には、よく分からない型が増えてついて行けない、一部の人たちが長くてよく分からない型定義を書いて喜んでいるだけと思っている方もいるのではないでしょうか。実際、健全にJavaScriptを書いていれば、自分でそのような変な型を書くことはあまり多くありません。 そこで、この記事ではT
TypeScriptのenumを使わないほうがいい理由を、Tree-shakingの観点で紹介します
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは。LINE Growth Technology UITチームの慶島(@pittanko_pta)です。 この記事では、TypeScriptのenumを使わないほうがいい理由を、Tree-shakingの観点で紹介します。 検証環境 TypeScriptからJavaScriptへのトランスパイルは https://www.typescriptlang.org/play (TypeScript 3.9.2 / targetはESNext) で行いました。 Tree-shaking の挙動については https://rollupjs.org/repl/ にトランスパイルしたJavaScriptコードを貼り付けて検証しました
TypeScriptのInterfaceとTypeの比較 - Qiita
こういうコンパイルエラーにぶち当たった。 Interfaceだとコンパイルエラーになったのが、Typeなら問題なく通る。 declare function numMapToVoid(obj: {[key: string]: number}): void; // interfaceだとコンパイルエラー interface IObj { a: number } const iObj: IObj = {a: 1}; numMapToVoid(iObj); // エラー // typeだと問題なし type TObj = { a: number }; const tObj: TObj = {a: 1}; numMapToVoid(tObj); // OK これは不思議...というのがきっかけで、TypeScriptのInterfaceとTypeの機能上の違いを調べてみた。 比較まとめ TypeSc
そろそろJavaScriptに採用されそうなOptional Chainingを今さら徹底解説 - Qiita
みなさん、Optional Chaining使ってますか？ 私は先日出たTypeScript 3.7 Betaを小さいプロジェクトに導入して使ってみました。これはとても快適ですね。 例によって、Optional ChainingはECMAScriptに対するプロポーザルの一つです。つまり、もうすぐ入りそうなJavaScriptの新機能です。プロポーザルはたくさんの種類がありますが、その中でもOptional Chainingはその高い有用性からこれまで多くの注目を集めてきました。Optional Chainingは2019年6月のTC39ミーティングでStage 3に上昇し、いよいよ正式採用が近く期待も高まってきたところです。TypeScript 3.7にも導入されたため、TypeScriptユーザーの方々は11月上旬に正式リリースが予定されているTypeScript 3.7を今か今かと待
Viteで爆速なフロントエンド開発環境を作る
概要 Viteというビルドツールの紹介とReact + Typescript環境からの移行手順です。 導入したプロジェクトでは開発サーバの起動からページロードまで大体40秒くらいかかっていたものが、サーバは300ms程度で起動し(2回目以降)、ページロードまで大体2~3秒ぐらいに短縮されました。 非常に開発体験が良く、導入手順もそこまで複雑ではないため、技術スタックが合えば導入を検討しても良いかもしれません。 Viteとは？ ViteはVue.js作者のEvan You 氏が開発しているノーバンドルのビルドツールです。 Native ESModulesのimportを利用し、ブラウザから直接モジュールを読み込むことで高速な開発サーバを提供します。 プロダクションビルド時はRollupでバンドルし、静的アセットを出力します。 Vue.jsだけでなく、ReactやSvelteなどもサポートされ
はてなブログで使われているフロントエンドのテストツールを統一した話 - Hatena Developer Blog
はてなでエンジニアアルバイトをしているid:wafuwafu13です。はてなブログのフロントエンドで使われているテストツールの統一を2021年11月頃から進めてきましたが、この8月に完了したので振り返りたいと思います。 はてなブログのフロントエンドに残された秩序の乱れ テストツールを統一する理由とツールの選定 移行をどう自動化したか（しなかったか） 余裕のあるスケジュールで小分けして作業を実施 はてなエンジニアのアルバイトは通年で募集中！ はてなブログのフロントエンドに残された秩序の乱れ 2020年のid:nanimono_demonaiさんの活動により、はてなブログのフロントエンドのテストはPhantomJSとKarmaを撤退し、Jestに移行されました。 はてなブログのフロントエンドに秩序はもたらされたのか - Speaker Deck これによって秩序がもたらされたものの、Node.
【実録】フロントエンジニアとして実務現場で働くまで(2021年最新版)
(この記事は2022年2月に更新) 今回はフロントエンジニアとして働くまでに、自分が学習してきた中でよかった教材や学習法をロードマップ形式でまとめました。 本記事の主な対象者 ・HTMLとCSSを使った簡単なwebサイトは作成できる ・今後フロントエンジニアとして働きたい ・ 実務現場でも通用する土台を学びたい ・ ポートフォリオを作成したい 自分のエンジニアとしての簡単な実務経歴を紹介すると、 渋谷の自社開発系企業で、フロントエンジニアとして1年半程、働いています(現在進行形)。 主な使用言語は「React」「TypeScript」「Next.js」で、最近ではRailsを用いてバックエンド側の実装も担当しています。 自分は、今までに3つの新規プロジェクトと2つの既存自社サービス開発でフロント側の実装を行ってきました。 実際の実務現場を通して、自分が学習してきた中でよかった教材をロードマ
TS Playground - An online editor for exploring TypeScript and JavaScript
Popular Documentation PagesEveryday TypesAll of the common types in TypeScript Creating Types from TypesTechniques to make more elegant types More on FunctionsHow to provide types to functions in JavaScript More on ObjectsHow to provide a type shape to JavaScript objects NarrowingHow TypeScript infers types based on runtime behavior Variable DeclarationsHow to create and type JavaScript variables
プログラミングの幅を広げよう！一段上のPromise活用テクニック - ICS MEDIA
ES2015で登場したPromiseとES2017で追加されたasync/awaitによってJavaScriptのコーディングスタイルは大きく変わりました。Promiseの基本的な使い方を理解していることは「脱初心者」のひとつの指標にもなっているようで、網羅的で優れた解説も数多く存在します。 では、基本をおさえた後の活用方法はどうでしょうか？ 実際のところ実務ではライブラリやフレームワークから返却されたPromiseをそのままawaitするだけ…という使い方がほとんどかもしれません。しかし、これらのライブラリやフレームワークの中で利用されているような高度なPromiseの活用法をマスターすれば、もっと自由なプログラミングができるようになります。 この記事ではPromiseを活用した実践的な例を3つ紹介します。いずれもライブラリやフレームワークに類似の機能を持つものはありますが、仕組みを理解
TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜
本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書ついて詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとはJavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセットスーパーセットとは、元の言語との
jq コマンドで JSON を CSV に変換する
jq can mangle the data format that you have into the one that you want with very little effort, and the program to do… とっても優秀な jq コマンドは、ご丁寧にフィルターで加工した値をCSV形式で出力する機能を用意してくれています。 > jq -r '<CSV 形式で出力したい要素を取り出すフィルター> | @csv'最期の|@csv が重要です。 簡単な例を使って、振る舞いを確認してみます。 出力(1) サンプルデータ(sample1.json)の内容の確認> cat sample1.json [ {"key1": "value11", "key2": "value12", "key3": "value13"}, {"key1": "value21", "key2":
8年運用したJavaScriptでの開発を段階的にTypeScript移行していくためにやっていること | CyberAgent Developers Blog
CyberAgent Developers Advent Calendar 2021 – Adventar 16日目の記事です。 マッチングアプリ「タップル」のバックエンド開発を担当している上村です。 タップルで現在進行中のTypeScript移行について、取り組む事を決めたモチベーション、移行の進め方について紹介します。 目次 TypeScriptとは 開発現場の背景 なぜ今までTypeScript移行が進められなかったのか？ なぜTypeScriptへの移行を決断したか？ TypeScript移行を進めるにあたっての課題 TypeScript移行の方針 タップルでのTypeScript移行の実際の勧め方 実際にTypeScript移行を進めてみた結果 TypeScriptとは 公式サイトに「TypeScript is JavaScript with syntax for types.」
TypeScriptの導入で開発現場はどう変わる？ Sansanの事例に見るメリットとコスト
開発に使ってみた所感 良かった点 開発効率の向上を実感できた TypeScriptで書かれたコードに⼿を加える場合、JavaScriptの場合と⽐べて格段に開発効率が上がっているのを実感しました。⼀度これを体験すると、新規のコードはTypeScriptで書いていきたいという気持ちが強くなります。また、通常の開発に追われてなかなか⼿につかない既存コードの移⾏も、今後の開発効率が向上することを確信できれば、積極的に⾏っていきたいという意識が⽣まれます。なにより、型によってコードの挙動を把握しやすいため、安⼼して開発を⾏うことができるようになりました。 移⾏はコツを掴めば進めやすい 既存コードのTypeScript移⾏は難しそうだと思われますが、難易度の低い部分から進めて慣らしていけばそれほど難しくありません。そもそも移⾏⾃体は、拡張⼦を変更して型エラーを解消していくだけの単純作業です。移⾏を難
kintoneのフロントエンド刷新に向けた取り組み - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。kintone開発チーム Webエンジニアの村田です。 本記事では kintone のフロントエンドの刷新をはじめるに至った経緯と、その取り組みについて紹介します。 はじめに なぜフロントエンドを刷新するのか 小さくはじめる Proof of Concept リリース戦略を考える 移行前と移行後の技術スタック 既存資産の再利用 Closure Library製の複雑なコンポーネントを再利用する E2Eテストを再利用する スタイルを再利用しない 開発体制 フロントエンドエキスパートチームの支援 アクセシビリティチームの支援 生産性向上チームの支援 これからの活動 おわりに はじめに 現在 kintone 開発チームでは、フロントエンドの開発に使用している Closure Tools (Closure Compiler、Closure Library、Closure Templat
TypeScriptを雰囲気で使っていたので勉強し直したら知らなかったこと
は同義である。JSでいうところのobjectを定義すると{ name: string }という型が暗黙的に定義されたことになる。 リテラル型 値を指定する型のこと。決まった値しか使わせたくない場合に使用する。
ES2021／ES2022を知ろう | フューチャー技術ブログ
こんにちは、2017年入社の柏木です。この記事はフロントエンド連載の4記事目です。 少し前にES2021にて変更される新機能が発表されました。 JavaScriptを扱う上では知っとくべき！と意気込んだもののECMAScriptが何者なのかすら曖昧な理解だったので、この機会に学んだことをまとめてみようと思います。 この記事のゴール ECMAScriptがJavaScriptにとってどのような役割を持つのかを知る ここ最近のECMAScriptの動向を知る 記事の想定読者 JavaScriptは触ったことがあるけど、記法のことは詳しく知らない人 ES2021/ES2022とは ESは ECMAScript（エクマスクリプト）の略称で、JavaScriptの標準規格のことです。2021や2022というのはその規格がリリースされる年度のことで、たとえばES2021は今年リリース、ES2022は来
移行のメリットはコストを上回るか？ JavaScriptのTypeScript化で気をつけるべき5つのポイント
技術とノウハウを武器に、膨大かつ複雑なデータの「検索」「分析」「可視化」といった課題を解決するフォルシア株式会社が「FORCIA Meetup #2」を開催しました。2回目の今回のテーマは「2020年度にエンジニアが取り組んだこと」。東川翔氏は、マイクロサービスをJavaScriptからTypeScriptに移行したときの気づきについて発表をしました。 JavaScriptからTypeScriptへの移行プロジェクトが始動 東川翔氏（以下、東川）：「JavaScriptからTypeScriptの移行のプロジェクトに関して気を付けた点」について話していきます。 まず自己紹介です。東川と申します。新卒の2年目で新規旅行アプリの開発をしています。興味のある言語はTypeScriptやPostgreSQLです。最近はクライアントアプリケーションの構築にも興味があって、Next.jsに関してアドベン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptエンジンから見るランタイム / 2024-04-25
