SvelteではじめるWeb Components開発 - Qiita
はじめに あまり知られていないかもしれませんが、Svelteを使ってWeb Componentsを開発することができます。 本記事ではSvelteを使ってWeb Componentsを開発するやり方を紹介したいと思います。 Web Componentsとは webcomponents.orgから引用 Web Componentsは、WebプラットフォームAPIのセットで、WebページやWebアプリケーションで使用する、新しいカスタム、再利用可能な、カプセル化されたHTMLタグを作成することを可能にします。カスタムコンポーネントとウィジェットはWeb Componentsの標準に基づいて構築され、モダンブラウザで動作し、HTMLで動作するあらゆるJavaScriptライブラリやフレームワークで使用することができます。 Web Componentsは、既存のWeb標準をベースにしています。We
新規サービスのバックエンド開発で3ヶ月経ったので、試した技術や取り組みをまとめてみた
こんにちは、AIShift バックエンドエンジニアの石井(@sugar235711)です。 AIShiftでは去年の11月からAI Worker[1]という新しいサービスの開発が始まりました。（以下AI Worker） 本格的に開発が始まり3ヶ月弱経ったので、その間に試してきた技術やチームの取り組みについてまとめてみたいと思います。 はじめに この記事では、AI Workerのおおまかな概要・設計を説明し、それらのバックエンドを実現する上でどのような技術を試してきたのか、技術以外でのチームの取り組みについてまとめます。 少し分量が多いので、ライブラリについての情報を求めている方は、目次から気になる部分を読んでいただければと思います。 何を作っているのか ざっくりまとめると、Microsoft Teams/Web上で動くAIを活用した業務改善プラットフォームを作成しています。 GPTとRAG
フロントエンドとSPA職人の目指したものの歴史と概略
年末年始にフロントエンド論みたいな記事をいくつか見たが、僕ら古のSPA職人がやってきたフロントエンドという職域と目指していたものが失伝しかけている気がするので、ここに時代ごとに何を考えていたか、雑に書き殴る。 注意点として、 2004から始まるが、自分がプログラミングを始めたのが2010, 業務としてコードを書き始めたのが 2012 なので、解像度が高いのはそれ以降になる。 tl;dr 2004: 動き出す HTML 2011: 構造化のはじまり 2015: 贅沢品としてのSPAとコミュニティ分化 2017: 貧者のSPA 2019: 守破離としてのパフォーマンス 2004: 動きだす HTML AJAX の時代。要は XMLHTTPRequest で取得したコンテンツに応じて、動的書き換えをDOM書き換えを行うこと。今では名付けるほどでもない操作だが、HTMLが静的なものをやめたことは、
TypeScript CDN の jQuery を使いたい - かもメモ
テンプレートエンジンで直接 script を呼ぶ古代の環境の開発をしています。 前回 TypeScript を babel + webpack でトランスパイルできるようにしたのですが、なんとこのプロジェクトでは古の jQuery が使われていました！！！！ CDN から読み込まれている jQuery を使用している箇所で TypeError になってしまうので TypeScript で CDN で読み込まれている jQuery を扱えるようにしたメモ (レガシー環境過ぎて誰得なんだ…) Webpack で bundle しないための設定 Externals The externals configuration option provides a way of excluding dependencies from the output bundles. Instead, the cre
ESLint 設定を作成する技術
ESLint は関連するパッケージが多く、また、活発に開発されていることもあり、設定するのに一苦労ということも多いツールです。そういった方向けに ESLint の設定を作るための基礎的な説明を書いてみました。 設定ファイルの拡張子 設定用のファイルとしてプロジェクトのルートディレクトリーに .eslintrc.yml もしくは .eslintrc.json を作成しましょう。一般的な開発用途であれば YAML か JSON で事足りるからです。 YAML と JSON のどちらを選ぶかはお好みでどうぞ。ちなみに ESLint は .eslintrc.* もしくは package.json 内の eslintConfig 設定を読んでくれます。 また、 package.json 内に設定を書くのは避けましょう。様々な理由で package.json は変更されるため、 Git 管理下において
Typescript環境で、ESLintとprettier入れてみた
なぜESLintとprettierを入れようと思ったか。 ・下記のtypescriptの本を読んでいた時に名前が出てきたのがきっかけ ・その後個人的に、Typescriptの勉強のため環境構築のやり方を調べていた際にも、色んなサイトで推奨されていて、ついでに入れてみようと思った ・自分の会社でもESLintとprettierはパッケージインストールされているがあまり使用したことはなかったので、余計に気になった ESLintとprettierとは？ ESlint JavaScriptのための静的検証ツール（コードを実行せずに解析を行うことができる） 構文エラーやコーディング規約を定義することができ、システム全体のコードの一貫性を維持することができる prettier 決めたルールに従い、ソースコードを適切に整形してくれるツール プロジェクトごとにルールを設定可能 実際に入れてみる バージョン
tsconfig/bases の紹介！
{ "extends": "@tsconfig/strictest/tsconfig.json", } 以上です！ tsconfig.json ってどんなふうに書いていますか？？ tsconfig.json をこんな感じで書いている人はいないでしょうか { "compilerOptions": { "strict": true, "allowUnusedLabels": false, "allowUnreachableCode": false, "exactOptionalPropertyTypes": true, "noFallthroughCasesInSwitch": true, "noImplicitOverride": true, "noImplicitReturns": true, "noPropertyAccessFromIndexSignature": true, "noU
プロを目指す人のためのTypeScript 本の感想 #ブルーベリー本
自分も教える事が多いので、読み手にどういう風に学んでほしいか、自分がどういう風に伝えるべきか、という視点で読んだ。 1章・イントロダクション そもそもTypeScript とはなにかみたいな話。 コンパイルエラーが出ている状態ではプログラムが完成したとは言えません。 力強い コンパイルエラーをただ避けるのではなく、利用する気持ち で TypeScript プログラミングに臨みましょう。 初心者に型違反の向き合い方を諭す話。IDEの補助になるとか。 TS年表で取り上げてるのが特徴的。exactOptionalProperty を取り上げてたり。 TSの型はランタイムに影響しない、という話を何度も解説している。これは初心者の誤解がとても多いので、必要だと思う。何度いっても、伝わって欲しい人に伝わらないのだが… enum や namespace については意図的に解説しない。過去のTS独自路線だ
Configuration Languages | webpack
Webpack accepts configuration files written in multiple programming and data languages. The list of supported file extensions can be found in the node-interpret package. Using node-interpret, webpack can handle many different types of configuration files. TypeScriptTo write the webpack configuration in TypeScript, you would first install the necessary dependencies, i.e., TypeScript and the relevan
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 2021年度リクルート エンジニアコース新人研修講義資料 - Speaker Deck
2021年度リクルート エンジニアコース新人研修の講義資料です
最新版TypeScript+webpack 5の環境構築まとめ(React, Three.jsのサンプル付き) - ICS MEDIA
TypeScriptはMicrosoftが開発するプログラミング言語です。JavaScriptのスーパーセットという位置づけで、静的型付けなど強力な言語機能を備えています。TypeScriptは高度なウェブアプリケーションの開発で使われることが多く、Google社内の標準言語として2017年に採用されるなど、注目が高まっています（参考記事『Google社内の標準言語としてTypeScriptが承認される － Publickey』）。 ▲TypeScriptの公式サイト TypeScriptはコンパイラによってJavaScriptのコードが得られますが、TypeScriptのコンパイラにはECMAScript Modules（ES Modules = importやexport文のこと）をまとめる機能が提供されていません。そのため、ES ModulesのJSファイルをまとめるモジュールバンド
Svelte + TypeScript のベストプラクティスを考える
自分で Svelte + TypeScript を色々と書いてみたが、情報がまとまってなかったので、ここでまとめていく。 なぜ Svelte + TypeScript か Svelte + TypeScript はセマンティクスが単純で型が付く軽量な Vue として気に入っている。ビルドが軽量で他と混ぜやすいのが特に気に入っていて、React や Vue の他のシステムに対しても、末端のコンポーネントとして混ぜやすい。Vue は歴史的経緯でデータバインディングの仕様が混沌としているが、Svelte はESM First で構文解析時の処理に仕様を寄せてるので、とてもシンプル。 webcomponents として配布するモードがあるのも気に入っている。Vue React は単体のビルドサイズが大きすぎて webcomponents の末端にするのは難しい。 やりたいこと <script la
マイクロソフト発のオープンソース言語「TypeScript」、生みの親が語る開発当初や背景
今やTypeScriptはウェブアプリ開発時に最初に検討される言語となっているが、開発が始まった2010年頃は、まだオープンソースに恐れを抱いていたMicrosoft文化のなかで、ゆっくりと歩を進めていく必要があった。 TypeScriptの共同創案者であり、デンマークのソフトウェアエンジニアであるとともにMicrosoftのテクニカルフェローも務めているAnders Hejlsberg氏は米ZDNetに対して、Steve Ballmer氏が同社の最高経営責任者（CEO）だった2010年に、JavaScript開発者の心をつかむ唯一の道はオープンソース戦略だという決断をチームが下した際のことを語ってくれた。 Ballmer氏は2001年に、LinuxがMicrosoftの知的財産すべてを脅かす「ガン」だと発言しており、Microsoftの幹部らは2010年時点でも、オープンソースが依然とし
レガシーなフロントエンド環境をリプレースするためにチームでやっていること｜食べログ フロントエンドエンジニアブログ
はじめに はじめまして！食べログFE（フロントエンド）チームの金野と申します。 普段は、食べログフロントエンドの設計・開発や、新規事業・食べログテイクアウトの技術サポートなどを行っています。 食べログテイクアウトについては、Nuxt.js + TypeScriptの開発について記事を書いているので、興味がある方はぜひ御覧ください。 さて、以前の記事でご紹介したように、食べログFEチームではレガシーシステムのリプレースをReact/TypeScriptで行っています。 今回は、新しいシステムについてもう少し詳しい技術スタックや、どのようなプロセスで開発しているのかを紹介します。 開発効率化のための取り組みリプレースのお仕事はただひたすら実装するだけではありません。 「壊れにくいアプリケーション」「メンテナビリティが高いアプリケーション」にするために、アーキテクチャや採用する周辺技術について、
OpenAPIとTypeScriptで作る！チーム開発に適したWebアプリケーションの作り方
はじめにこんにちは！ フィフス・フロアの開発チームリーダーのnotozekiです。 最近、OpenAPIという技術を知りました。 OpenAPIは、いわゆる「Web API」の仕様を形式的に記述するためのフォーマットです。 OpenAPIに関連するツールもいくつか提供されており、たとえばOpenAPIのフォーマットに従って書かれた仕様から、開発用のAPIのスタブサーバを自動生成するツールなども存在します。 Web開発が多い弊社では、Web APIの仕様管理は長年の課題でした。 特に開発メンバーが増えてくるにしたがって、以下のような課題が浮かび上がってきています: 仕様に関する情報源がないため、「実装が仕様」のような状態になってしまっています。また、新しくプロジェクトに加わる人に、都度仕様を説明する必要があります。手動でのAPIドキュメントの整備も試みましたが、開発に比べて整備が後回しになり
TypeScriptの型チェックと仲良くする – kanejaku.org
TypeScript のコンパイルエラーを一時的に抑止したい場面は多々ある。この記事では、自分が型エラーを回避するのに便利だなと思っている機能を状況に応じて 3 つ紹介したいと思う。想定している文脈は、趣味プロジェクトで、フレームワークを使わない素のフロントエンド開発。 Type Guards 状況: このエレメントは<foo>なんだからbarっていう属性があるのに TypsScript はそれを分かってくれない。 例えばオーディオを再生するページを静的に記述したとする。 このオーディオに対して再生位置をリセットするスクリプトを書きたい。書いている側からするとmy-audioはHTMLAudioElementであることが分かっている。getElementById('my-audio')の返り値はHTMLAudioElementだからと思って以下のように書くとコンパイラに怒られる。 cons
webpack.configをTypeScriptで書く - Qiita
参考記事 TypeScriptでフロント書く機会もちょっとずつ増えてきている感があります。きっとWebpackでバンドル、というのが一般的なのではないでしょうか。 上記参考記事にもありますが、Webpapckの設定ファイルを書いていると、バージョン1と2の両方の書き方を混在させることができて混乱の元です。いちいちここのセクションはどんなキー名だったっけ？ 配列だっけ？ハッシュだっけ？となってドキュメントを行ったり来たりすることが多いかと思います。 このWebpackの設定ファイルもTypeScriptならコード補完やエラーがあればすぐに指摘してくれてもっと快適なんだけどなぁ、と感じたことのある人はきっと少なくないと思います。 これが実は特に面倒なことをせずともできる、というのでやってみました。 ファイル構成はこんな感じです。 . ├── dist ├── node_modules ├──
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今日から始めるSvelte入門
TypeScriptを振り回せ！
