2019.08.02 に関西Node学園 7時限目で発表したスライドです。

unsafe:clean-code-typescript を邦訳しました。 翻訳後のドキュメントは以下になります。 TypeScriptの為のクリーンコード このドキュメントは Robert C.Martinの書籍 Clean Code を TypeScript に対応させたもので、 clean-code-javascript を参考に作成されました。TypeScriptで可読性が高く、再利用可能であり、リファクタブルなソフトウェアを生産するためのガイドラインが挙げられています。 ガイドラインは10個の章で構成されており、それぞれ以下の項目が挙げられています。 Variables(変数) 意味のある変数名を使う 発音可能な変数名を使う 同じ型の変数には同じ単語を割り当てる。 検索可能な名前を使う 説明変数を使う メンタルマップを避ける 不要な文脈を追加しない 短絡評価や条件式の代わりにデフ
Code completion One of the biggest advantages of TypeScript is its code completion and IntelliSense. IntelliSense provides active hints as a code is added. Type safety Types increase your agility when doing refactoring. It’s better for the compiler to catch errors than to have things fail at runtime. Code quality Types have a proven ability to enhance code quality and understandability. Large team
はじめに 皆様はAWSのサービスをデプロイするのをどうされていますか? コンソール画面からGUIで操作して… AWS-CLIで利用して… CloudFormationのテンプレートファイルを書いて… TerraformやServerlessFrameworkなどの構成管理ツールを使って… などの方法があると思います。 デプロイするサービスが多くなればなるほど、構成管理ツールを用いたほうが管理コストがかからなくなるので良いですよね。 どのサービスをどれだけ、どのサービスと紐づけているのかをソースコードベースで確認することができます。 また不必要なサービスを減らすことができるのも利点の一つかと思います。 AWSCDKとは? AWSCDK(Cloud Development Kit)はCloudFormationのテンプレートファイルを、TypeScriptやJavaScript、Javaなどで
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Published: 2019-08-09 Updated: 2020-02-11 OAuth 権限設定についての変更がありましたので、チュートリアルのその設定部分を追加しました。 ごく単純な Slack アプリを作るのはそれほど複雑であるはずはないのに、いざ作るとなると API ドキュメンテーションの中に埋もれてしまってどこから手をつけたらいいのかわからなかったり、パラメータの名前がちょっとだけ間違えてしまって思ったように動かなかったり。 でもそれを自分のせいにしないでください🙅。Slack のアプリ作成の手順は慣れていないとちょっ
morishitaです。 時々、業務で使うツールをGASで作ります。 これまでのものはキャンペーン対応のものなど使い捨てとまでは言わないまでも、短い運用期間を想定したものでした1。 サービスレベル的にはベータレベルですが、少し運用期間が長くなりそう、かつプロトタイプ性が強くて変更が継続しそうなツールを作ることになったので、ちゃんとテストしようと思ってやってみました。 試したもの 次の要素を含むGASのプロジェクトでJestのユニットテストを導入しました。 @google/clasp 2.1.0 jest 24.8.0 Typescript ついでにこれも。 eslint 6.0.1 + @typescript-eslint/eslint-plugin 1.11.0 紹介するサンプルコードはこちらです。 gas-ts-jest-eslint-sample セットアップ 何はともあれ、必要なN
WebXRでポートフォリオを作ろう/Let's make your portfolio with WebXR!
PySpa統合思念体です。あと、 @yosuke_furukawa にも協力いただきました。 基本的に、あまりエラーの種別を細かく判定してあげることはJavaScriptでは今までやってこなかったのですが、ちょっとしたメタデータを乗っけてあげるとか(例えばリトライ回数)、何か凝ったことをしたくなったらこういう方針でやればいいのでは、という試行錯誤録です。 エラーと例外の区別が必要か この手の話になると、エラーと例外の違いとか、こっちはハンドリングするもの、こっちはOSにそのまま流すものとかいろんな議論が出てきます。このエントリーではエラーも例外も差をつけずに、全部例外とひっくるめて説明します。 例外というのはすべて、何かしらのリカバリーを考える必要があります。 ちょっとしたネットワークのエラーなので、3回ぐらいはリトライしてみる 原因: ネットワークエラー リカバリー: リトライ サーバー
注釈 本ドキュメントは、まだ未完成ですが、ウェブフロントエンドの開発を学ぶときに、JavaScriptを経由せずに、最初からTypeScriptで学んでいく社内向けコンテンツとして作成されはじめました。基本の文法部分以外はまだ執筆されていない章もいくつもあります。書かれている章もまだまだ内容が追加される可能性がありますし、環境の変化で内容の変更が入る可能性もあります。 書籍の原稿はGitHub上で管理しております。もしTypoを見つけてくださった方がいらっしゃいましたら、 GitHub上で連絡 をお願いします 1 。reSTファイルだけ修正してもらえれば、HTML/PDFの生成までは不要です。フィードバックなども歓迎しております。 1 https://github.com/future-architect/typescript-guide/pulls
morishitaです。 先日、決済サービス Stripeについて書きました。 tech.actindi.net 今回はVue.jsとStripeを使ってクレジットカードの決済フォームを実装したのでご紹介します。 なおこのエントリのコードはTypeScriptを使っています。 HTML部分は Slim または Pug を使っています。 Stripeが提供するもの StripeではCheckout.jsというJavaScriptのスクリプトが用意されていて、ほとんどコードを書かなくてもクレジットカードフォームを作ることができます。 ですが、デザインの自由度を重視すると自前で実装することになります。 その場合にはStripe ElementsというJavaScriptのUIコンポーネントを組み込んで実装します。 これを使えば、クライアントサイドでできるカード番号のベリファイとか不正な有効期限の
こんにちは、@mugi_unoです。 GWはリスと遊んできました。たのしかったです。 さて、長きに渡ってコツコツと手を入れてきたMisocaのフロントエンドですが、 先日、新たに大きな改善を行いました。 というわけで、令和一発目のエントリーは MisocaのフロントエンドにTypeScriptを導入したお話です。 🤔なぜTypeScriptを? 金額処理触るの怖すぎ問題 Misocaは請求書の発行・管理サービスという性質上、各所で金額に関する処理があります。 そして、最近はさまざまな事情により修正が頻繁に行われていました。 以前のエントリでもご紹介したレガシーコードのリファクタリングなども該当します。 tech.misoca.jp エンジニアの方なら「おおぅ...」となりそうですが、金額を触る処理というのは怖いものです。 そしてフロントエンドが絡んでくると「ここは文字列?数値?」といった
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? TypeScriptはJavaScriptに静的型を導入したプログラミング言語で、登場から現在までその人気を増し続けています。 動的型付き言語であるJavaScriptに静的型の安全性(コンパイル時にバグ・間違いを発見することができる能力)を与えることで、TypeScriptはJavaScriptによる開発の効率を上げてくれます。 裏にJavaScriptがあるという特性もあり、TypeScriptは「部分的に静的型チェックをする」というような挙動をサポートしています1。詳しくは後述しますが、これによりJavaScriptからTypeS
と聞かれます。 後で解説するクラス記法を使用するかどうかの質問なのですが、とりあえずYにします。 (class-style component syntaxを使用する場合、vue-class-componentモジュールが追加で必要になります。Yを選択すると、プリセットの生成時に自動でインストールされます。) 残りの質問も全部Yにしておきましょう。 これでTypeScriptでVueを書く準備は完了です!👏👏👏 . ├── README.md ├── babel.config.js ├── node_modules ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── src ├── tsconfig.json └── tslint.json
「TypeScript」とは、JavaScriptに「型」を指定できるオープンソースのプログラミング言語です。型によりプログラム実行前にエラーを見つけ出すことができるため、大規模なプロジェクトを安全に開発できます。Microsoft社製で、多くのフロントエンドエンジニアに採用されています。 TypeScriptのモダンなビルド環境を作るためにはwebpackやGulp.jsがよく使われていますが、設定ファイルが必要で学習コストは高めです。「TypeScriptのビルド環境がほしいだけなのに、なぜツールの設定に時間をとられるのか?」「TypeScriptを始めるときに苦労したくない」と思っている人も多いのではないでしょうか? 「Parcelパーセル」というツールを使うと、独自の設定ファイルを使うことなくTypeScriptのモダンなビルド環境がわずか3ステップで作れます。 ▼ TypeScr
claspというGoogle Apps Script(GAS)をローカルで開発するためのツールがある。claspを使うと、TypeScriptを使ったGASのコーディングも標準で行える。 今回はclaspを使って以下の要求を満たしながらGASの開発を行う際の設定をまとめる。 TypeScriptによる実装 Gitによる構成管理 Prettierによる自動フォーマット TSLintによる静的解析 TL;DR claspを使えばGoogle Apps Script(GAS)をローカルで開発できる https://github.com/google/clasp claspはwebpackなどを使わずにTypeScriptで実装できる https://github.com/google/clasp/blob/master/docs/typescript.md 静的型付けをすることで補完などを使いな
TypeScriptはJavaScriptを拡張して作られたプログラミング言語です。トレンドが示すとおり、TypeScriptはJavaScriptに代わって第一に選択される言語になりました。TypeScriptが提供する静的型システムは、コードの保守性と可読性を大幅に向上させます。またブラウザ等の互換性を心配することなく、モダンで便利なJavaScriptの機能を利用できます。 ~�
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く