いちばんやさしい webpack 入門
webpack is 何? webpack とは、一言で言うと JavaScript 向けのモジュールバンドラーです。 複数の JavaScript モジュールを一つ（またはいくつか）のファイルへバンドル（=bundle: 束にする、包む）してくれます。 複数の JS モジュールを（場合によっては CSS や画像などのアセット類も）一つにまとめる すでに新規開発の終了も伝えられる webpack ですが、「STATE OF JS 2022」ではいまだに利用率 No.1 の地位にあります。 webpack 後継のモジュールバンドラーとしては、すでに Turbopack の開発開始がアナウンスされています。しかし、これがプロダクションレベルに達するまでは webpack がおそらく使い続けられることになるでしょう。 使うメリットは何？ モジュールを 1 つ（もしくは少数）にまとめることでブラウ
もうTypeScriptの補助輪を外そう 明日は//@ts-checkを使う
※近所（同じ港区内）のあのIT企業さんからお声をかけていただきました。登壇予定です。 ※某商業誌さんから執筆依頼がありましたが、有料ですと気が引けるのでお断りしました。 Vimで書いている人はもういないから、そろそろTypeScript（自転車の補助輪）を外していこうという話。 Visual Studio Code は下のリンクからインストールできる。これが前提。 VS Code で // @ts-check が利用できる。 ※Denoの話を知らない人は、これを読むと良い。 DenoがTypeScriptの使用をやめる5つの理由 （Denoは、Node.jsの作者であるライアン・ダールによって作成され、V8 JavaScriptエンジン及びRustプログラミング言語に基づいた、JavaScript及びTypeScriptのランタイム環境である。セキュリティと生産性に焦点を当てている） ※T
VS CodeでJavascriptの型判定を行う - Qiita
はじめに Qiita初投稿。ちょっと緊張するので、豆知識的な軽めな話題で始めてみます。 なんですが、以外にもQiitaでは記事を見かけなかった内容なので、誰かのお役に立てば。 2019/01/19 更新 ES6なしで複数ファイルにまたがった場合 を追加 ローカル変数の型宣言を追加 結論 VS Codeでは、jsファイルに//@ts-checkのコメントを追加すると、TypeScriptとして型チェックをしてくれる Type Checking JavaScript Files VS CodeでJavascriptで型チェックを行う 皆さんJavascriptでの開発中に、しょうもない型間違いでエラーが出ることはないでしょうか。私はあります。 Javascriptは割と適当に書いても動くのは楽でいいんですが、真面目に書き始めると細々したエラーが出てうんざりします。簡単な型間違いぐらいは動かすま
【React も AWS CDK も】何も考えず VS Code に全任せして TypeScript コードをステップ実行デバッグする【できるよ！】 | DevelopersIO
環境構築 「何もしてないのにできた」を実現するため、この記事ではインストール直後の Visual Studio Code と Node.js を使用しています。皆さんは今まで通りの環境で大丈夫です。 各ツール類のバージョンは執筆時点で最新のものを使用しています。 Visual Studio Code 1.52.1 Japanese Language Pack（任意） Node.js v14.15.3 プロジェクト作成 任意のディレクトリを作成し、初期化して必要なモジュールをインストールします。そして VS Code で開きましょう。 mkdir ts cd ts npm init -y npm install typescript ts-node -y code . ここまでいたって普通。特別なことは何もしていません。 コーディング それではステップ実行するためにプログラムを書きましょう。
Visual Studio Code その3 - Google Chromeと連携してJavaScriptをデバッグできるようになりました・Debugger for Chrome拡張のインストールとデバッグ設定
「Visual Studio Code」から「Google Chrome」上で動作するクライアントサイドの「JavaScript」コードを直接デバッグできるようになりました。 デバッガーは「Chrome Debugger protocol」で「Google Chrome」に接続し、「Google Chrome」で読み込んでいるファイルと「Visual Studio Code」で開いているファイルの関連付け（マッピング）を行います。 「Visual Studio Code」で開いている「JavaScript」のソースコードにブレークポイントを設定したり、変数の確認や変数のウォッチを「Visual Studio Code」から行うことができます。 もちろんスタックコールの確認もできますし、ステップ実行やステップイン等の操作も可能です。 Google Chromeのディベロッパーツールと併用でき
VS Codeを使いこなせ! フロントエンジニア必須の拡張機能7選 - ICS MEDIA
「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターへとカスタマイズできます。 本記事では、HTMLコーダーやフロントエンドエンジニアに役立つ拡張機能を紹介します。 1. IntelliCode IntelliCodeはMicrosoft謹製の公式プラグイン。AI支援による次世代のコード補完がJavaScriptやTypeScriptで利用できるようになります。APIの一覧がアルファベット順に提示されるのではなく、利用する可能性の高いAPIがAIによって予測されます。 コード補完の様子を次のスクリーションショットでご覧ください。入力候補の「★」マークが付いているところが、補完候補になっているところです。人工知
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ShowNote:「フロントエンド開発の便利ツール・設定・プラグインなど」を語るフロントエンドTechCafe #2 - HackMD