皆さん、こんにちは。LINEでフロントエンド開発を担当しているUIT1室のシュウと申します。 今回、年に一度の企画「LINEのお年玉」キャンペーンにて JavaScript の部分を担当させていただきました。LINEのお年玉は多くのトラフィックが流れる大規模かつ短期間の企画となります。 技術的な挑戦をするためのプロジェクトとしてもちょうど良いサイズ感であったため、今回多くの挑戦を行いましたので、連載形式で紹介していければと思います。 初回である今回は、Vue.js と TypeScript を併用した開発についてです。 なぜ TypeScript を使うのか? これまで LINE のプロジェクトでは、JavaScript をメインの言語としてフロントエンド開発を行ってきました。ですが、時代の流れもあり、現在では新規プロジェクトの多くが TypeScript を採用しています。 月並みですが
#TypeScript #react 2019/10/05 この記事のミッションステートメント TSの型に疲れて生JSに戻ろうとしている人の足首を掴み、世の中にある生JSを一つでも減らす 対象読者 JSよりはちょっと硬いものを使いたい人 TSのd.ts定義で疲れてしまった人 TSは面倒と思っている人 非対象読者 「なんでこんなもの必要なの?」と思った人 多分それは幸せな環境です。大切にしましょう。 @ts-ignoreとは あらゆる型の不整合を握りつぶす。 // @ts-ignoreとコメント形式で書くことで、次の行の型チェックがスルーされる eslint-ignoreなどに近い 構文エラーは潰せない babelなどを通してどうしてもOptional Chainingを使おうとしたことがあるが、やっぱりこれは無理 危険なのでは? 安全でないのは間違い無い 用法用量を守って正しく使いましょう
TL;DR https://github.com/notakaos/typescript-node-base にアクセスして「Use this template」をクリックすると、以下の手順をベースとしたリポジトリが新規作成されます。 この記事の趣旨 以下の設定を適用した TypeScript + Node.js のプロジェクトを作成します。 項目 パッケージ
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
Termux + Flutter + dart ffi で .so リロード対応し Android C/C++ + GUI アプリ開発を効率化するメモAndroidNDKFlutterTermux 背景 C/C++ がメインの Android アプリを開発している(GLES/Vulkan グラフィックス, レイトレーシング, 画像処理, 機械学習など) 実機で動かして実際のパフォーマンスを知る必要がある, エミュレーターでは実行が対応していない or 実行が遅すぎる PC で NDK でクロスコンパイル -> apk 転送 -> 実行がめんどい グラフィックや機械学習系だと lldb デバッグはなかなかフィットしないし, デバッグとしては画像などを出したい その上で, C/C++ メインアプリに UI や, Android のカメラ画像などの取得が欲しい(カメラ画像に対するリアルタイム S
新人「先輩、TypeScriptのコーディングできました!」 先輩社員「どれどれ」 先輩社員「いやそこら中コンパイルエラーだらけ...なのは型システムが働いてる証拠だ!」 先輩社員「そうだろ?」 先輩社員「型は...ガードレールだ」 先輩社員「進むべきじゃない場所へ進もうとしたら、ちゃんとブロックしてくれる...」 (ぺこぱ風) ってことで、静的型付言語って良いですよね。 今回はTypeScriptを使ってみて嬉しかったことを書いてみます。 登場人物 ワイ・・・ワイ(36歳) 社長・・・社長 ハスケル子・・・インターンの中学2年生 今日から新しいプロジェクト開始 社長「おーい、やめ太郎、ハスケル子ちゃん」 社長「新しいお仕事を獲得してきたで」 社長「技術記事投稿サイトを作る案件や」 ワイ「おお〜、さすが社長はんや」 社長「おおきにやで」 社長「ほんで、そのお仕事の話なんやけど」 社長「クラ
はじめに JavaScriptの基礎をある程度終え、次の開発環境がReactをTypeScriptで書くということだったので一通り学んでみました。 今回は羽山 博さんのTypeScriptで学ぶJavaScript入門を参考にしてまとめました。文章やコードはサイトから引用したものになります。2014年から2015年に連載されたものなので情報が古い点があるかもしれません。プログラミング初学者向けに書かれた記事だったので大変わかりやすかったです。 詳しい内容などは、サイトを参考にしてください。全部まとめたので結構長いです。 3、4日かけて読みました。 TypeScriptとは ・マイクロソフトが開発したスクリプト言語である。 ・オープンソースである。 ・TypeScriptのソースコードはJavaScriptのソースコードにコンパイルされる。 JavaScriptから追加された点 ・変数のデー
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を編集し、実行される内容を変更することも可能です。
TypeScript の Promise の型 だと、型パラメータが Promise#then 側しかなくて、 Promise#catch 側の型が any になってしまって不便だ。 もし、catch 側の型についても型引数で指定できたなら、より安全なプログラミングができる。 そこで、catch 側の型を指定していない理由について考察してみた。 理想 const promise: IdealPromise<T, E> = getPromise(); promise .then((x) => { /* x は T 型 */ }); promise .catch((e) => { /* e は E 型 */ }); 実際 const promise: Promise<T> = getPromise(); promise .then((x) => { /* x は T 型 */ }); prom
この記事では面倒なので名前に .js が付いているものは省きます。例えばNext.js は Next と表記します。 まず結論から日本ではVueはReactと二分する人気があるように観測されますが、世界的な数字で人気・シェアを見るとReactが圧倒的です。 シェアだけで見るとAngularとAngularJS(Angular系の1.x系)の合計値はVueよりも高いですが、「今後はもう採用したくない」と考える率が高く、Angular/AngularJSの人気が低下しているということは間違いありません。 ※追記: Angularのシェア、人気度に関しては、Angular及びAngularJS両方を含む数値であり、AngularJSとAngularは別物であるものが混ざってカウントされているため、Angularのシェア及び人気度はあやふやかもしれません。他の数値に関して信頼性を疑うべきかどうかは
JSer.info #468 - Ember 3.15がリリースされました。 Ember.js - Ember 3.15 "Octane" Released Ember.js 3.15での大きな変更点としてOctane Editionのリリースが含まれています。 EditionはEmberでのプログラミングモデルを表わす概念で、今の所Octane Editionのみとなっています。 An edition represents a cohesive programming model, and releasing a new edition represents a shift in the programming model due to new features and concepts being added to Ember. Ember Octane is the first ne
2019年のOSS活動の振り返り記事です。 今までの振り返り。 今年のOSS活動振り返り @ 2018 | Web Scratch 今年のOSS活動振り返り @ 2017 | Web Scratch 今年のOSS活動振り返り @ 2016 | Web Scratch 今年のOSS活動振り返り @ 2015 | Web Scratch 今年のOSS活動振り返り @ 2014 | Web Scratch 2019年のGitHubのContributionsは7000~10000ぐらいを推移していました。 ちょっとプライベートリポジトリのコミット比率が上がって、原因はasocial-bookmarkでのブックマークシステムな気がします。後は、仕事のリポジトリがPrivate比率多い。 GitHubのCurrent Streakは2246日で6.153424658年コミットは続いています。 データ
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
JavaScriptは、Webブラウザで実行されるプログラミング言語として代表的な存在だ。しかし、JavaScriptで大規模アプリケーションを開発するのは難しいとして、代替のプログラミング言語、JavaScript風プログラミング言語、JavaScriptのスーパーセットとして開発されているプログラミング言語が存在している。これらの中からどれを選択すればよいかを判断するのが難しい状況にあるが、多くのユーザーは「TypeScript」を代替言語として使う動きが出てきているようだ。 State of JavaScriptは、2019年におけるJavaScript関連の調査データとして、「The State of JavaScript 2019」を公開した。調査の対象にJavaScriptの代替言語に関するものがあり、他の言語を引き離してTypeScriptが強い人気を示している。 TypeS
今年2019年も去年と同じような感じであれですが、2019 年の Vue.js における状況、そして大きい出来事をまとめつつ、Vue.js アドベンドカレンダの最後を締めくくりたいと思います。 Vue.js の状況今年も The State of Javascript から JavaScript 周りのアンケート調査の結果が出されました。 2019 年の Vue.js に対する満足度状況としては以下のような結果になっています。 Vue.js の満足度ですが、「使ったことがありまた使いたい」という結果は、2018 年は 20.8% だったのに対して、2019 年は 40.5 % という数値結果になっています。2019 年も前年 2018 年と同様に Vue.js に対する認知と利用ユーザーが伸びていることが分かると思います。 Vue.js 3.0 に向けた RFCs が公開された2019年1
この記事は Recruit Engineers Advent Calendar 2019 の 23日目の記事です。 TypeScript のプロジェクトで React コンポーネントを書いていると、コンパイラに怒られることがたびたびあります。ネット上にあるサンプルコンポーネントが JavaScript で書かれていると、プロジェクトにもってきたときにコンパイルできないということはよくあるんじゃないでしょうか。any でコンパイラを黙らせることもできますが、せっかく TypeScript を使っているので、安全に解決したいよねってことでこのような記事を書きました。 型定義は @types/react@16.9.17 にしたがっています。目次をみて、この程度のことはもう知っているよという方は react-typescript-cheatsheet をみてください。React + TypeScr
TypeScript Advent Calendar 2019 - Qiita 14日目の記事です。 type-festというTypeScriptの便利な型を集めたnpmパッケージがあります。 今回はtype-festの中から特に複雑なUtilitiesの型の紹介とそれらの型パズルのような型定義について解説したいと思います。 この記事がMapped TypesやConditional Typesを使った複雑な型パズルの理解への一助になれば幸いです。 github.com 長いので前後半に分けました。後半はまた後日公開します。 前提知識 Utility Types Mapped Typesを利用したUtility Types Conditional Typesを利用したUtility Types type-fest Except Mutable Merge MergeExclusive Re
$ npm -v 6.13.2 $ node -v v12.13.1 $ yarn -v 1.21.0 $ create-nuxt-app -v create-nuxt-app/2.12.0 darwin-x64 node-v12.13.1 $ create-nuxt-app tutorial create-nuxt-app v2.12.0 ✨ Generating Nuxt.js project in tutorial ? Project name tutorial ? Project description My super-duper Nuxt.js project ? Author name chibi929 ? Choose the package manager Yarn ? Choose UI framework Buefy ? Choose custom server fr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く