この記事では面倒なので名前に .js が付いているものは省きます。例えばNext.js は Next と表記します。 まず結論から日本ではVueはReactと二分する人気があるように観測されますが、世界的な数字で人気・シェアを見るとReactが圧倒的です。 シェアだけで見るとAngularとAngularJS（Angular系の1.x系）の合計値はVueよりも高いですが、「今後はもう採用したくない」と考える率が高く、Angular/AngularJSの人気が低下しているということは間違いありません。 ※追記: Angularのシェア、人気度に関しては、Angular及びAngularJS両方を含む数値であり、AngularJSとAngularは別物であるものが混ざってカウントされているため、Angularのシェア及び人気度はあやふやかもしれません。他の数値に関して信頼性を疑うべきかどうかは
同じTypeScriptという言語を利用する場合においても、トランスパイラによってTypeScript自体の機能制限がかかったり、思わぬトラブルを招く場合があります。それぞれのトランスパイラの特徴を踏まえた上で、それにより生じる問題も見ていきましょう。 1-1. tsc TypeScriptの開発元であるMicrosoft純正のTypeScriptトランスパイラです。TypeScriptを利用する際に typescript パッケージをインストールする必要がありますが、それに同梱されています。 公式ツールなだけあって最も早く最新バージョンのTypeScriptに対応したり、言語すべての機能を利用することができる一方で、バンドラではないためminifyやchunkの設定はできません。また、Path Aliasesの未解決や旧ESへの互換性が不完全であることが欠点として挙げられます。 tsco
この記事は npm へ公開可能なパッケージを TypeScript で作成しながら、JS/TS 開発で良く使われるツールを紹介する記事です。 typescript-npm-starter という名前の Hello, world! パッケージを公開するという体で話を進めます。
Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちはお久しぶりです。岡部和昌（@kzms2）と申します。 今回お話しする内容はタイトルでほぼ全部述べているのですが、PC 版 Yahoo! JAPAN のトップページを 2019 年 10 月 1 日に刷新、主に開発環境をアップデートした経緯と採用した技術に関してのお話です。 見た目に関しては特に大きな変化はなかったので、気が付かなかった方も多いのではないでしょうか？ なぜ刷新したか Yahoo! JAPAN トップページは 2008 年 1 月 1 日に大規模なリニューアルを行いました。その頃からある程度の改修はあったものの、基本的にはコードの継ぎ足しで修正を加えている状態でした。 （参照；Yahoo! JAPAN トップ
TypeScriptを効率的に独習しよう！ 無料で学べる「TypeScript Deep Dive」日本語版の翻訳者が学習法を解説
TypeScriptは近年JavaScriptに代わってWebフロントエンド開発で利用されているプログラミング言語です。TypeScriptは開発生産性および開発者体験に優れていることから、開発現場で広く採用されています。TypeScriptを学ぶことは、今後のWebフロントエンド開発では、ほぼ必須といって良いでしょう。この記事ではTypeScriptを使うメリット、ならびに「TypeScript Deep Dive 日本語版」を活用してTypeScriptを短期間で学習する方法を紹介します。 はじめに 筆者はSIer出身のITエンジニアです。ゲーム開発会社などを経由して現在は一般企業でエンジニアとして勤務しています。はじめてTypeScriptの重要さを知ったのは、2018年ごろに「TypeScript Deep Dive」を読んだときでした。そして、今後必ず多くの人に役立つと考え、オリ
最新フロントエンド技術の総復習！ React Hooks、GraphQL、TypeScript、AMPなど紹介 - Bonfire Frontend #4 レポート
最新フロントエンド技術の総復習！ React Hooks、GraphQL、TypeScript、AMPなど紹介 - Bonfire Frontend #4 レポート こんにちは。 今年の4月にヤフー株式会社にデザイナーとして新卒入社した、三好 健太（@three4c）です。9月3日（火）にヤフーのセミナールームで「Bonfire Frontend #4」を開催しました！ このイベントの目的はフロントエンドが抱える課題を共有し、フロントエンドについて熱く語る会です。 今回のテーマは「最新のフロントエンド技術 〜夏休み総復習〜」。初心者の方でも理解しやすい内容となっており、デザイナーの私も多くの知見を得ることができました。 ヤフーからは浜田と内藤が登壇し、ゲストスピーカーとしてサイボウズ株式会社より向井 咲人さん、株式会社ディー・エヌ・エーより吉井 健文さんにお話しいただきました。 これからは
2年ぶりくらいに業務で TypeScript をやることになったので、個人的なおさらい用です。 TypeScript とは JavaScript は現在 Web アプリケーションの開発で最も使われているものの、JavaScript 独特の癖や、型の認識が緩いこと、ブラウザによって挙動に違いがあります。 それらを補うために altJS というアプローチがあります。JavaScript の機能を拡張し、よりメンテナンスしやすく、高機能にするものです。 それをトランスパイル（変換）することでブラウザによる挙動の違いを吸収したピュアな JavaScript が吐き出され、安全に JavaScript にはまだ無い機能を擬似的に使えるようにすることができます。 その中で現在デファクトスタンダードとなっているのが、TypeScriptです。 なぜ TypeScript が人気なのか 近年の Web 開
はじめに Reactを中心としたフロントエンド開発において、以下のような構成を見かけることが多いと思います。 UIライブラリとしてReact 型のある言語としてTypeScript スタイル定義としてstyled-components コンポーネントの開発環境としてStorybook LinterとしてESLint FormatterとしてPrettier この記事では、各種ライブラリについて紹介したのち、それらを使う場合の環境構築についてハンズオン形式で説明します。 ※ アプリケーションを開発する際に必要になる設定が抜けていたので、追記しました。 各種ライブラリの紹介 まず、各ライブラリがどのようなものなのかを簡単に紹介します。 ライブラリの使い方などは公式ドキュメントなどを参照するようにしてください。 ドキュメント ReactはUI(ボタンやフォームなど)コンポーネントを作成するための
TypeScript Tutorial For Beginners: Your Friendly Guide
What is TypeScript and why you may want to use it? Learn more with this TypeScript tutorial for beginners and start adding types to your JavaScript code! TypeScript tutorial for beginners: who this guide is for The following guide is a TypeScript tutorial for JavaScript developers interested in learning more about TypeScript. That means a decent knowledge of "vanilla" JavaScript is appreciated, ev
この記事は Recruit Engineers Advent Calendar 2019 の 23日目の記事です。 TypeScript のプロジェクトで React コンポーネントを書いていると、コンパイラに怒られることがたびたびあります。ネット上にあるサンプルコンポーネントが JavaScript で書かれていると、プロジェクトにもってきたときにコンパイルできないということはよくあるんじゃないでしょうか。any でコンパイラを黙らせることもできますが、せっかく TypeScript を使っているので、安全に解決したいよねってことでこのような記事を書きました。 型定義は @types/react@16.9.17 にしたがっています。目次をみて、この程度のことはもう知っているよという方は react-typescript-cheatsheet をみてください。React + TypeScr
Go 言語の IDE 機能を得る為に何か知る必要はありません。Java の IDE 機能を得る為に何か知る必要はありません。HTML の IDE 機能をインストールする為に npm コマンドの使い方を覚えたり、LaTeX の IDE 機能をインストールする為に、配置場所を考える必要もありません。もしインストールを実行しても動かなかったら、それは vim-lsp-settings のバグです。 以前まででれば vim-lsp を導入すると Language Server の登録が必要でした。 if executable('gopls') au User lsp_setup call lsp#register_server({ \ 'name': 'gopls', \ 'cmd': {server_info->['gopls']}, \ 'whitelist': ['go'], \ }) au
Google、「Flutter 1.9」リリース、Webアプリ生成機能を統合。Flutterは単一コードでネイティブアプリとWebアプリを開発できるフレームワークに
Google、「Flutter 1.9」リリース、Webアプリ生成機能を統合。Flutterは単一コードでネイティブアプリとWebアプリを開発できるフレームワークに Googleは今年5月にFlutterからWebアプリケーションを生成できる「Flutter for Web」を発表。テクニカルプレビューとしてきましたが、Flutter 1.9でこの機能を正式にFlutterに統合しました。 参考：Google、「Flutter for Web」発表。FlutterからWebアプリを生成。Flutterはマルチプラットフォーム対応のフレームワークに。Google I/O 2019 FlutterはもともとiOS/Android対応のネイティブアプリケーションを開発するためのUIフレームワークとして、Dart 2とともに2018年3月に登場。2018年12月にバージョン1.0に到達した段階で、
react-admin-template https://github.com/delprzemo/react-admin-template react-admin-templateの特徴 「react-admin-template」は、以下で構成されたオープンソースの管理画面です。巨大なリファクタリング/クリーニングを回避するため、コア機能のみ提供するコンセプトになっています。 ・React ・jQueryなし ・TypeScript ・React Hooks ・Redux react-admin-templateをインストールします $ git clone https://github.com/delprzemo/react-admin-template.git React-Admin-Template # リポジトリをダウンロード $ cd React-Admin-Template
※2019/11/8: 無料サンプルと目次を記事内に追加しました。 2019年4月に開催された技術書典６で頒布した「レガシーフロントエンド安全改善ガイド」ですが、このたびインプレスR&D社さまより商業版を刊行することになりました。 自分が商業版の技術書を書く日が来るとは思わなかったのでビクビクしています。 メディア: この商品を含むブログを見る nextpublishing.jp 表紙イラストは同人版と同様、鍋料理さんに描いていただきました。「安全な感じで！」という相談から、カワイイ工事現場が仕上がりました、とても気に入ってます。工事現場本と呼んでください。 タイトルに「迷わない！困らない！」という強気ワードが付いててちょっぴり恥ずかしいですが、迷わず困らない内容になってる・・はずです！ 同人版との違い / 加筆・修正した点 紙の本で比較すると、ページ数が110ページ程度→200ページ超と
「Dart 2.5」が登場。GitHubのコードから機械学習させた賢いコード補完をVSCodeなどに提供 Dart 2.5では「ML Complete」と呼ばれる、機械学習を用いてより賢いコード補完をさまざまなコードエディタへ提供する機能がプレビュー版として追加されました。 Dartをはじめとする型付き言語では、コードエディタによる補完機能が働きやすいという利点がありますが、それでもAPIの種類が増えるにつれて、多数表示される補完候補のなかから適切なものを選ぶ手間は増えていきます。 ML Completeはそうした状況を改善するために開発が進められていると説明されています。 ML Completeの学習データにはGitHub上のオープンなDartのコードが用いられ、TensorFlow Liteによってプログラマが開発中のコードに対して適切な補完のための候補が選ばれます。 下記のツイートに
モダンなWebフロントエンドの技術とAMP
モダンなWebフロントエンドの技術とAMP モダンなWebフロントエンドのフワームワークやツールとAMPについて紹介します。 リクルートテクノロジーズ兼リクルートライフスタイルのASGチームに所属しているフロントエンドエンジニアの可児です。本記事は、リクルートライフスタイルアドベントカレンダー４日目の記事です。 本記事では、リクルートライフスタイルで取り組んでいる新規Webサービスのモダンなフロントエンド開発に関することとして、Next.jsやAMPについて紹介します。 目次 はじめに モダンなWebフレームワーク React/Next.js TypeScript styled-components AMP AMPとは AMPの開発パターン Next.jsとAMP AMPキャッシュ AMP と 非AMP の共存 検索結果カルーセルとSEO AMPの開発における注意点 まとめ はじめに リク
Microsoft、組み込みデバイスをターゲットとしたTypeScriptの高速サブセット”Static TypeScript”を発表
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
gRPC-Web + React + Node.js + TypeScriptでシンプルなチャットサービスを作る - Qiita
概要 かねてよりgRPCおよびgRPC-Webに興味があり、これを用いてシンプルなリアルタイムチャットサービスを制作し、公開した。 本稿では、その開発工程について解説する。 ゴール gRPC-Webを用いて「わいわいチャット」を作る。 https://waiwai-chat-2019.aanrii.com/ ※2020年9月現在、公開停止しました。 内容はシンプルなチャットアプリケーションだ。サイトを開くとまず過去ログが表示され、ほかの入室者の投稿が随時流れてくる。任意の名前で入室すると投稿欄が出現し、発言ができる。発言した内容はサイトにアクセスしている全員に、即座に共有される。過去ログは無限スクロールで遡ることができる。 フロントエンドはReactを用いたSPAとし、Netlifyを使って静的サイト生成・配信する。また、バックエンドはGKE上で動くNode.jsアプリケーションとし、かつ
はじめに JavaScriptのコードを一括で変換したり修正したい場合、正規表現などを使い置換しますか？ シンプルなケースであればそれでも問題ないですが、複雑な変換であればASTベースでコードを自在に変換できる「jscodeshift」が便利です。 jscodeshiftを利用すると、以下のようなことができます。 例) functionで書かれた関数をアロー関数に一括で変換 target/arrow-function/index.js const fn = function() { console.log("foo"); }.bind(this); [1, 2, 3].map(function(v) { return v * v; }); Promise.resolve() .then(function() { console.log("foo"); }) .then(function()
はじめに こんにちは、フロントエンドエンジニアのall-userです！ これはdelyアドベントカレンダー9日目の記事です。 昨日はプロダクトデザイナーのkassyさんプレゼンツ「デザインとエンジニアリングをつなぐために重要な3つのこと」でした。 dely.design 開発現場でも直面することの多いコミュニケーションの問題と、それに対して心掛けていることについて書かれていて、うんうんとうなずきながら読んでしまいました。ぜひこちらもご覧ください！ それでは、TypeScriptを使ったクラシルのフロントエンド開発の中で、思わずへ〜となったトリビアたちを紹介したいと思います。 目次 はじめに 目次 1. 循環依存のエラーを回避する方法 どうしてエラーになってしまうのか？ エラーを回避する方法 どうしてエラーにならないのか？ 全てのエラーを回避できるわけではない Parcel, Rollup,
デコレータ使わない Vue.js + TypeScript で進んだ「LINEのお年玉」キャンペーン
皆さん、こんにちは。LINEでフロントエンド開発を担当しているUIT1室のシュウと申します。 今回、年に一度の企画「LINEのお年玉」キャンペーンにて JavaScript の部分を担当させていただきました。LINEのお年玉は多くのトラフィックが流れる大規模かつ短期間の企画となります。 技術的な挑戦をするためのプロジェクトとしてもちょうど良いサイズ感であったため、今回多くの挑戦を行いましたので、連載形式で紹介していければと思います。 初回である今回は、Vue.js と TypeScript を併用した開発についてです。 なぜ TypeScript を使うのか？ これまで LINE のプロジェクトでは、JavaScript をメインの言語としてフロントエンド開発を行ってきました。ですが、時代の流れもあり、現在では新規プロジェクトの多くが TypeScript を採用しています。 月並みですが
「発生し得ない値」などのように説明されるnever型。 概念としては分かるのだが、実際にどのようなケースで使えばよいのかイメージできずにいた。 neverを使ったテクニックを調べていて多少のイメージは掴めてきたので、整理しておく。 動作確認は TypeScript のv3.7.5で行っている。 never 型の特性 まずはnever型がどういった型なのか、理解する。 決して発生し得ない値や型は、never型になる。 例えば以下のif文では、elseブロックは絶対に実行されないため、そのなかではfooはneverになる。 const foo = true; if (foo) { foo; // const foo: true } else { foo; // const foo: never } 「存在し得ない値」なので、どんな値も代入することはできない。 const foo: never
もともとは動的なWebサイト開発のために仕方なく(※もちろん人による)書かされていた感のあるJavaScriptですが、ES6以降の進化はめざましく、表現力の高さは他の言語に全く引けを取らないようになりました。 V8エンジンによるパフォーマンスの恩恵も相まって、私はWeb用途以外にもちょっとしたスクリプトを書く時などにも積極的にNode.jsを活用しています。 一方でかつてのJavaScriptのイメージから食わず嫌い的に避けてしまったり、そもそもJSや周辺エコシステムの進化に関心がない人も多く見られます。 そこで今回は「どうすればNode.jsの敷居を低くして、便利さを知ってもらえるか」の観点から役立ちそうな知見をまとめてみました。 動的型付けなのにかなり早い 詳しくは各ベンチマークの結果を見ていただければ分かりますが、Node.jsは動的型付け言語としてはかなり実行速度が早い部類に入り
React Hooksの正式リリース（2019年2月）からそろそろ一年が経とうとしています。Hooksの登場によってReactのコンポーネントは関数コンポーネントが一気に主流になり、クラスコンポーネントが新規に作られる機会は激減しました。 また、React 17.x系ではConcurrent Modeの導入とともにさらに2種類の新フックが追加される見込みであり、いよいよ関数コンポーネントの能力がクラスコンポーネントを真に上回る時代が来ることになります。 この記事では、フックの一種であるuseReducerに焦点を当てて、どのようなときにuseReducerが適しているのかを説明します。究極的には、useReducerによって達成できるパフォーマンス改善があり、ときにはそれがコンポーネント設計にまで影響を与えることを指摘します。 useStateの影に隠れたり、なぜかReduxと比較されたり
この前、以下のツイートを目にして、面白いな〜と思いました。たしかにフロントエンドの仕事は、サーバーからJSONとして返ってきたデータを人向けに表示するという仕事が多く、雑に言い表せてる感じが面白い。 湯婆婆「フン。フロントエンドエンジニアというのかい？」 フロントエンドエンジニア「はい」 湯婆婆「贅沢な名だねぇ。今からおまえの名前は "JSON色付け係" だ。いいかい、 "JSON色付け係" だよ。分かったら返事をするんだ "JSON色付け係" ！！」— ぷーじ (@YuG1224) 2019年9月15日 上のはジョークだと思うんですが、とはいえ真面目に考えてみると、JSONを人に見やすくする作業をひたすらやっているのだから、もう少し仕事楽になってもいいんじゃないか？なんでJSON色付け係は相変わらず大変なんだ？という疑問が湧いてきます。それについて、自分なりに考えを整理しておきたいと思い
【TypeScript】TS初心者の、TS初心者による、TS初心者のためのTS入門 - ecbeing labs（イーシービーイング・ラボ）
はじめに ブンブン Hello world. どうもこんにちは。開発です。 前回「もし新人プログラマが「プリンシプル・オブ・プログラミング」を読んだら」の記事を書かせて頂いたあの開発です。 プログラマ界隈では「1年に1言語」とは言いますが、かくいう私も一念発起して新しい言語を学ぼうと思った次第でございます。 しかし、ただ学ぶだけではペースも落ちますし、やる気の上下も大きいと考えました。 そこで、”学んだ内容を記事にする”というタスクを自分に課すことで学習効率を無理やり持ち上げようと画策致しました 。 そんなわけで今回は、「新人プログラマがどのように未収得の言語を学習するか」について津々浦々と文字列を列挙したいと思います。 はじめに What's TypeScript 概要 JavaScriptとの違い 詳細 文法 型宣言 型推論 実際にやってみた 何はともあれ書いてみましょう 差分進化(D
こんにちは。ナビタイムジャパン Android/iOSアプリ開発担当の KSK です。 最近流行りのFlutterの流れに乗ってみたい一心で Flutterをプロダクションに導入したお話をしたいと思います。 はじめに FlutterとはGoogle製のクロスプラットフォームのアプリ開発フレームワークです。2018年12月に正式版として1.0がリリースされて以降、徐々にプロダクションに採用する企業が増えてきました。弊社でも2019年に入り、複数のプロダクトにFlutterを採用・リリースしましたので、その経緯などをご紹介します。 どのプロダクトに採用したのか？ 新規アプリケーションで採用しました。みなさんがご存知の「NAVITIME」や「乗換NAVITIME」は既に大規模なネイティブアプリが運用されており、これをFlutterで置き換える選択肢は今のところありません。既存のアプリをFlutt
Web版ExcelでTypeScriptベースの「Office Scripts」提供開始。ユーザー操作を自動で記録可能
Web版ExcelでTypeScriptベースの「Office Scripts」提供開始。ユーザー操作を自動で記録可能 マイクロソフトは、Web版Excelの新機能「Office Scripts」をプレビュー版として提供開始したと発表しました。 Office ScriptsはTypeScriptベースのスクリプト言語。Web版Excelでユーザーが操作した内容をスクリプトとして記録する機能を備えています。Windows版Excelのマクロ記録のように、操作に合わせて自動的にOffice Scriptsが生成されます。 生成されたOffice Scriptsを実行すれば、同じ操作が再現されます。 Office Scriptsが搭載されたWeb版ExcelにはTypeScriptエディタも内蔵されており、これを用いてOffice Scriptsを編集し、実行される内容を変更することも可能です。
なぜGoogleはKotlinが広まり始めたのにまた別のFlutter (Dart) を広めてるんですか？今からAndroidやるにはReactNative等含め、どの手法が良いと思いますか？
回答 (5件中の1件目) Flutterの公開(2017年5月12日)は、GoogleによるKotlinのAdroid開発言語への採用(2017年5月17日)より僅かに前です。Dartの公開(2011年11月)は、Kotlinの公開(2011年7月)より僅かに後ですが、Androidの開発言語へのKotlin採用よりもずっと前のことです。より重要なことは、Kotlinと異なり、FlutterもDartもGoogle謹製であり、Googleによって広めるために生まれてきたことです。従って、Googleが今になってまた別のものを広めている、という認識は的を得ていないと思います。 ここで、F...
Expressでサーバ立てたいなと思ったので、 TypeScriptではじめるときにやったことの備忘録。 TypeScriptの設定 まずは、package.jsonから。 # package.jsonの生成 $ npm init # typescriptのインストール $ npm i -D typescript @types/node # バージョン確認 $ npx tsc -v # ts初期化: tsconfig.json生成 $ npx tsc --init tsconfig.jsonの設定する。 // tsconfig.json { "compilerOptions": { "target": "ES2019", "module": "commonjs", "sourceMap": true, "outDir": "./dist", "strict": true, "esModul
コーディング不要でGraphQLサーバが作れるPrismaを触ってみて可能性を感じた - SMARTCAMP Engineer Blog
スマートキャンプのエンジニア瀧川です。 弊社では昨年からエンジニア合宿を企画していまして、今年は10月15日から17日までの2泊3日で実施しました！ 合宿のテーマや全体感は別記事でまとめるかなと思いますが、3日の限られた時間で1チーム(4人)1つのプロダクトを作り、成果として発表する必要がありました。 この条件だとあまり技術的なチャレンジもできないな...と感じてはいたのですが、どうしてもチーム内でGraphQL触りたい欲求が高まってしまったので、なんとか負荷があまりかからない形で導入できないか調べて見つかったのがPrismaというツールでした！ 本記事ではPrismaを試した際のメモ、Tips、所感を書いていきます！ (公式でPrisma2がアナウンスされてますが、ほぼ別物なので今回はPrisma1について書いています) (多分最終的な成果物の進捗は、慣れ親しんだツールを使った場合とほぼ
この表を上から読みつつ多少言葉で説明すると以下のようになります。 const foo = bar + 3;はStatementListItemである。なぜなら、DeclarationはStatementListItemの一種であると定義されているから。 const foo = bar + 3;はDeclarationである。なぜなら、LexicalDeclarationはDeclarationの一種であると定義されているから。 const foo = bar + 3;はLexicalDeclarationである。なぜなら、LetOrConst, BindingList, ;が並んだものはLexicalDeclarationであると定義されているから。 constはLetOrConstであると定義されている。 foo = bar + 3 はBindingListである。LexicalBind
いい感じのグラフをTypeScriptなNuxt.jsとvue-chartjs(chart.js)で書いてみた - Qiita
Nuxt.jsで開発しているWebサービスで、 棒グラフとか線グラフを使いたいなと思い、いろいろ調べた備忘録。 vue-chartjsを使うと、いい感じのグラフが簡単にできた(´ω｀) こんな感じで使ってます!! 登録されている本の総額と総冊数の推移を棒グラフと線グラフで表示!! 色も文字も変えられて、いい感じに(´ω｀) vue-chartjsの使い方 全体の流れはこんな感じ。 1. インストール 2. コンポーネントを作る 3. コンポーネントを配置する 1. インストール まずはインストール <!-- Template Tag can not be merged... --> <script lang="ts"> import { Component, Vue, Prop, Watch, mixins } from "nuxt-property-decorator"; import
Vue.js 3.0で搭載される Composition APIをリリースに先駆けて試してみた - SMARTCAMP Engineer Blog
スマートキャンプでBiscuetのエンジニアをしている中川です。 本記事はスマートキャンプ Advent Calendar 2019 - Qiitaの19日目の記事です。 現在弊社のプロダクトであるBOXILとBiscuetは、そのどちらの開発チームもVue.jsを使用して開発しています。 Vue.jsの学習コストの低さやコンポーネント指向は少人数のチームでユーザーに素早く価値を届けていきたい弊社の開発においても重宝しています。 さてそんなVue.jsですが、2020年のQ1にバージョン3.0が正式リリースされることが予告されており、正式リリースに先駆けて目玉機能のひとつであるComposition APIが公開されました。 Composition API RFC | Vue Composition API ドキュメントやAPIリファレンスのみならず、バージョン2系でプラグインとして利用で
We’re thrilled to announce the release of TypeScript 3.7, a release packed with awesome new language, compiler, and tooling features. If you haven’t yet heard of TypeScript, it’s a language based on JavaScript that adds static type-checking along with type syntax. Static type-checking lets us know about problems with our code before we try to run it by reporting errors if we do something questiona
とても簡単にドラッグアンドドロップが実現できる Vue-draggable を使ってみた ｜ Developers.IO
西田@大阪です 以前 v-kansai Vue.js/Nuxt.js meetup #13 に参加させていただいた時に気になっていた Vue.js でドラックドロップでリストを入れ替えることができる Vue-draggable を使ってみました SortableJS/Vue.Draggable: Vue drag-and-drop component based on Sortable.js プロジェクトの作成 Vue.jsのプロジェクトを作成します。今回は今流行りの TypeScript を選びました $ vue create vue-draggable-sample ? Please pick a preset: Manually select features ? Check the features needed for your project: TS ? Use class-s
複数のモジュール形式(CommonJS, ES Modules, UMD)をサポートしたnpmパッケージの作り方 in TypeScript - dackdive's blog
はじめに npmパッケージを開発するとき、パッケージ利用者の実行環境に合わせて適切なモジュール形式のファイルをパッケージに含め、提供する必要があります。 具体的には、たとえば以下のようなバリエーションが考えられます。 Node.js環境であれば CommonJS 形式 (module.exports / require() ) ブラウザ環境で、webpackやRollupなどのモジュールバンドラーを前提とするならば CommonJS や ES Modules 形式 (export / import ) ブラウザ環境で、モジュールバンドラーなどは使わず<script>タグでファイルを読み込んで利用するならば UMD 形式 このとき、パッケージ提供側はどういったファイルをパッケージに含めるべきなのか、またそれを TypeScript でどのように実現できるのかがあまりよくわかっていなかったので
Vanilla JavaScript and HTML - No frameworks. No libraries. No problem.
Vanilla JavaScript and HTML - No frameworks. No libraries. No problem. Are you using Vue, React, Angular, or Svelte to create web apps? I am, and if you are too, I bet it's been a while since you've written an app that renders content without these fine tools. Armed with only what comes with the browser. Years ago, this is exactly how many of us wrote web apps. While today's tools help abstract th
新人「先輩、TypeScriptのコーディングできました！」 先輩社員「どれどれ」 先輩社員「いやそこら中コンパイルエラーだらけ...なのは型システムが働いてる証拠だ！」 先輩社員「そうだろ？」 先輩社員「型は...ガードレールだ」 先輩社員「進むべきじゃない場所へ進もうとしたら、ちゃんとブロックしてくれる...」 （ぺこぱ風） ってことで、静的型付言語って良いですよね。 今回はTypeScriptを使ってみて嬉しかったことを書いてみます。 登場人物 ワイ・・・ワイ（36歳） 社長・・・社長 ハスケル子・・・インターンの中学2年生 今日から新しいプロジェクト開始 社長「おーい、やめ太郎、ハスケル子ちゃん」 社長「新しいお仕事を獲得してきたで」 社長「技術記事投稿サイトを作る案件や」 ワイ「おお〜、さすが社長はんや」 社長「おおきにやで」 社長「ほんで、そのお仕事の話なんやけど」 社長「クラ
TypeScirptの動向を少し熱心に追っている方ならば、8月頭にAnders HejlsbergさんがTypeScriptリポジトリに次のプルリクエストを出したことは記憶に新しいでしょう。 Assertions in control flow analysis これはTypeScript 3.7で導入される予定の機能で、関数の返り値の型宣言においてasserts x is T （xは引数名でTは型）という構文を書くことが可能になるというものです。 この機能はたいへん面白いのですが、誤った使い方をするととても危険です。そこで、この記事では、assertsという新しい型述語1を正しく使いこなせるように皆さんをガイドします。 3行でまとめると assertsによる宣言はTypeScriptにより正しさがチェックされるわけではありません。 よって、assertsを使う場合安全性を保証する責任はコ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSフレームワーク事情2020年始め｜erukiti
TypeScriptをプロダクト開発に使う上でのベストプラクティスと心得 - Qiita
この TypeScript が Hello, world! のくせに慎重すぎる - Qiita
10分でわかる「今更だけどTypeScriptってなに？」 - Qiita
Reactを使ったモダンなフロントエンド開発の環境構築 - Qiita
TypeScript で書く React コンポーネントを基礎から理解する - Qiita
Big Sky :: Vim をモダンな IDE に変える LSP の設定
React+TypeScriptでできたミニマルな管理画面「react-admin-template」
「レガシーフロントエンド安全改善ガイド」を商業出版します #技術書典 - memo_md
「Dart 2.5」が登場。GitHubのコードから機械学習させた賢いコード補完をVSCodeなどに提供
JavaScriptのリファクタリングツール「jscodeshift」の使い方 - Qiita
思わずへ〜ってなったTypeScriptのトリビア10選 - dely Tech Blog
never 型を使った TypeScript のテクニック - 30歳からのプログラミング
Node.js(TypeScript)を食わず嫌いしてる人にオススメするときに役立ちそうな知見まとめ - Qiita
useReducerの本質：良いパフォーマンスのためのロジックとコンポーネント設計 - Qiita
JSON色付けたいへん問題 - 旧gaaamiiのブログ
Flutterをプロダクション導入しました。 - Qiita
Express+TypeScriptをはじめるときにやったこと - くらげになりたい。
JavaScriptの「カバー文法」とは何か - Qiita
Announcing TypeScript 3.7 - TypeScript
TypeScriptを使って嬉しかったこと - Qiita
TypeScript 3.7の`asserts x is T`型はどのように危険なのか - Qiita
helentech.jp
item.rakuten.co.jp
magcomi.com
jbpress.ismedia.jp
www.kyobun.co.jp
www.arabnews.jp