Almost four years ago, I was a new TypeScript user, amazed by the possibilities that this freshly learned JavaScript dialect opened up to me. But just like every TypeScript developer, I soon ran into some hard-to-debug problems. In TypeScript land, those problems usually stem from the programmer's lack of understanding about the language itself. I'd like to introduce you to one of these early prob
TIP This FAQ assumes prior experience with Vue - in particular, experience with Vue 2 while primarily using Options API. Composition API is a set of APIs that allows us to author Vue components using imported functions instead of declaring options. It is an umbrella term that covers the following APIs: Reactivity API, e.g. ref() and reactive(), that allows us to directly create reactive state, com
はじめに ブンブン Hello world. どうもこんにちは。開発です。 前回「もし新人プログラマが「プリンシプル・オブ・プログラミング」を読んだら」の記事を書かせて頂いたあの開発です。 プログラマ界隈では「1年に1言語」とは言いますが、かくいう私も一念発起して新しい言語を学ぼうと思った次第でございます。 しかし、ただ学ぶだけではペースも落ちますし、やる気の上下も大きいと考えました。 そこで、”学んだ内容を記事にする”というタスクを自分に課すことで学習効率を無理やり持ち上げようと画策致しました 。 そんなわけで今回は、「新人プログラマがどのように未収得の言語を学習するか」について津々浦々と文字列を列挙したいと思います。 はじめに What's TypeScript 概要 JavaScriptとの違い 詳細 文法 型宣言 型推論 実際にやってみた 何はともあれ書いてみましょう 差分進化(D
リクルートテクノロジーズ兼リクルートライフスタイルのASGチームに所属しているフロントエンドエンジニアの可児です。本記事は、リクルートライフスタイルアドベントカレンダー4日目の記事です。 本記事では、リクルートライフスタイルで取り組んでいる新規Webサービスのモダンなフロントエンド開発に関することとして、Next.jsやAMPについて紹介します。 目次 はじめに モダンなWebフレームワーク React/Next.js TypeScript styled-components AMP AMPとは AMPの開発パターン Next.jsとAMP AMPキャッシュ AMP と 非AMP の共存 検索結果カルーセルとSEO AMPの開発における注意点 まとめ はじめに リクルートライフスタイルでは、じゃらんやホットペッパーグルメ、ホットペッパービューティーといった従来のWebサービスだけではなく、
GitHub Action を TypeScript で作成したので,覚え書きがてらどうやって作ったかについて書きます. github-action-benchmark という Action をつくりました. 紹介記事:継続的にベンチマークを取るための GitHub Action をつくった Action とは 今年9月に GitHub Action v2 がリリースされました.GitHub Action は GitHub が提供する CI/CD サービスです. 既存のサービスと大きく違う点は,処理を汎用的に Action として切り出して再利用できることです. 例えば,GitHub からのリポジトリのクローン actions/fetch や Node.js のセットアップ actions/setup-node などの基本的な実行ステップも Action として実装されています. Acti
Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. Key Takeaways TypeScript enhances JavaScript development by boosting developer confidence, catching errors before they hit production, simplifying code refactoring, reducing the need for unit tests, and enhanci
Optional Chaining Playground Optional chaining is issue #16 on our issue tracker. For context, there have been over 23,000 issues on the TypeScript issue tracker since then. At its core, optional chaining lets us write code where TypeScript can immediately stop running some expressions if we run into a null or undefined. The star of the show in optional chaining is the new ?. operator for optional
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
2年ぶりくらいに業務で TypeScript をやることになったので、個人的なおさらい用です。 TypeScript とは JavaScript は現在 Web アプリケーションの開発で最も使われているものの、JavaScript 独特の癖や、型の認識が緩いこと、ブラウザによって挙動に違いがあります。 それらを補うために altJS というアプローチがあります。JavaScript の機能を拡張し、よりメンテナンスしやすく、高機能にするものです。 それをトランスパイル(変換)することでブラウザによる挙動の違いを吸収したピュアな JavaScript が吐き出され、安全に JavaScript にはまだ無い機能を擬似的に使えるようにすることができます。 その中で現在デファクトスタンダードとなっているのが、TypeScriptです。 なぜ TypeScript が人気なのか 近年の Web 開
<!-- Template Tag can not be merged... --> <script lang="ts"> import { Component, Vue, Prop, Watch, mixins } from "nuxt-property-decorator"; import Chart from "chart.js"; import VueChart from "vue-chartjs"; const Line = VueChart.Line; const reactiveProp = VueChart.mixins.reactiveProp; @Component export default class ChartLine extends mixins(Line, reactiveProp) { @Prop({ default: {} }) chartData: C
YYTypeScript#1「JavaScriptを知らない人がTypeScriptを学ぶ方法を知りたい」「TypeScript初心者がどうやって勉強すると効率がいいか?」「なぜTSが選ばれるのか?」「PHPと比べて、サーバサイドをTSで書くメリットは?」「TypeScriptのバックエンドのオススメフレームワークって?」「定義をinterfaceとtypeどっちで書いてる?」「JSで書かれたプロダクトのTS化ってどうしてる? 」PHPJavaScriptTypeScriptYYTypeScriptイベントレポート これは2019年9月20日に開催したTypeScriptイベントYYTypeScript#1のイベントレポートです。 YYTypeScriptは一言で「TypeScripterの部室」です。発表者の話を聞く「一方向的な勉強会」とは真逆で、TypeScriptについて、雑に・ゆる
もともとは動的なWebサイト開発のために仕方なく(※もちろん人による)書かされていた感のあるJavaScriptですが、ES6以降の進化はめざましく、表現力の高さは他の言語に全く引けを取らないようになりました。 V8エンジンによるパフォーマンスの恩恵も相まって、私はWeb用途以外にもちょっとしたスクリプトを書く時などにも積極的にNode.jsを活用しています。 一方でかつてのJavaScriptのイメージから食わず嫌い的に避けてしまったり、そもそもJSや周辺エコシステムの進化に関心がない人も多く見られます。 そこで今回は「どうすればNode.jsの敷居を低くして、便利さを知ってもらえるか」の観点から役立ちそうな知見をまとめてみました。 動的型付けなのにかなり早い 詳しくは各ベンチマークの結果を見ていただければ分かりますが、Node.jsは動的型付け言語としてはかなり実行速度が早い部類に入り
はじめに Reactを中心としたフロントエンド開発において、以下のような構成を見かけることが多いと思います。 UIライブラリとしてReact 型のある言語としてTypeScript スタイル定義としてstyled-components コンポーネントの開発環境としてStorybook LinterとしてESLint FormatterとしてPrettier この記事では、各種ライブラリについて紹介したのち、それらを使う場合の環境構築についてハンズオン形式で説明します。 ※ アプリケーションを開発する際に必要になる設定が抜けていたので、追記しました。 各種ライブラリの紹介 まず、各ライブラリがどのようなものなのかを簡単に紹介します。 ライブラリの使い方などは公式ドキュメントなどを参照するようにしてください。 React ドキュメント ReactはUI(ボタンやフォームなど)コンポーネントを作
本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回はAngularのUIコンポーネントであるAngular Materialを紹介しました。今回は2019年5月にリリースされたAngularのバージョン8について、変更点や新機能を紹介していきます。 はじめに Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS(AngularJS 1)と呼ばれていましたが、バージョン2で全面的に刷新され、以降、おおむね半年に1回アップデートされています。 2018年5月のバージョン6、10月のバージョン7に続いて、2019年5月にAngularのバージョン8がリリースされました。CLIツールの機能追加、速度向上やサイズ削減などについて、引き続き
TypeScript のサーバサイドフレームワーク – NestJS と Marble.js で書き比べ サーバサイドの言語として、python, Go など 多様な言語があります フロント側が Single Page Application の場合は TypeScriptで実装すると メリットが多いはずです 下記で登場した、TypeScriptのサーバサイドフレームワークと実装の違いを見ていきます TypeScript のメリット – Front と Server の架け橋 サーバサイドフレームワーク NestJS Angularのような書き心地でコードが書けます Decoratorでルーティングをします classベースの実装です https://nestjs.com Marble.js RxJSのような書き心地でコードが書けます chainで一致させルーティングをします functi
ここ最近、TypeScript の盛り上がりが本当にすごいですね。私ごとながら、昨年末からずっと書き続けていた TypeScript の技術書が、ようやく本日校了しました。Twitter で告知をしたところ、想像以上に反響があり驚いています。あれだけ高価な本、予約するには情報が不十分です。「買ってみたが期待はずれだった」という方が出ないよう、内容についてご紹介します。 対象読者もし皆さまが、体型的にアプリケーションを構築する術を身に付けたいと考えているなら、別途、書籍や文献をお求めください。本書は、JavaScript には存在しない、TypeScript 特有の知識を体系的に学ぶための一冊です。想定している対象読者は、ある程度 JavaScript でアプリケーションを作った経験がある方で、型の話がメインです。 本書の目的様々な事情から、TypeScript の現場導
地獄の管理人、その名はTypeScript ※前回の記事 地獄からの使者、その名はTypeScript ~ 固かった型の形 ~ 2 1. 気が付くとそこは迷宮 地獄の地図 初学者がTypeScriptを始めようとするのなら、おそらくはどこかしらの解説記事をみることになるだろう。ところがTypeScriptは迷宮の入り口なのである。知らずに進めば、GPSもコンパスも役に立たない永劫の樹海を彷徨うことになるだろう。 まずは入り口でこう問われることになる 『おぬしの進むべき道は、前か後ろか?』 大抵の人間はこう答えるだろう。 「もちろん前に進む、そのために来たのだ!」 その答えに対して、再び問われる。 『ふむ、まあ良いだろう。では次の問いだ。おぬしは環境を重んじるか?』 大半の人間にはその意味が分からない。しかし分からないままこう答える。 「環境は良い方がいいなぁ」 気がついたらフロントエンドで
The MVVM of the Observable model gives Vue a natural advantage in small and medium-sized Web applications, but with the growing popularity of Vue, Vue’s use in large projects is slightly awkward. Obviously, in high complexity projects, type checking has become a required feature, and Vue2’s type checking support in TypeScript is not good enough, and importantly the modular design of Vuex’s state l
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く