[非推奨][TypeScript] create-react-appで始めるだいたいストレスフリーな開発環境の構築 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
![[非推奨][TypeScript] create-react-appで始めるだいたいストレスフリーな開発環境の構築 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/66b496e471f1e1b76b174c0a5de28fb562ecedfe/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGODk1NDQlMkZwcm9maWxlLWltYWdlcyUyRjE1MDg3NzgyNTc_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmJnPUZGRkZGRiZmbT1wbmczMiZzPTBhM2EzNDJkOWU0N2IwZDk2Y2M5Njk3OTJkZmM3NjBj%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D0a62ac2d92134db7abc1e147ba4b11c4%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUU5JTlEJTlFJUU2JThFJUE4JUU1JUE1JUE4JTVEJTVCVHlwZVNjcmlwdCU1RCUyMGNyZWF0ZS1yZWFjdC1hcHAlRTMlODElQTclRTUlQTclOEIlRTMlODIlODElRTMlODIlOEIlRTMlODElQTAlRTMlODElODQlRTMlODElOUYlRTMlODElODQlRTMlODIlQjklRTMlODMlODglRTMlODMlQUMlRTMlODIlQjklRTMlODMlOTUlRTMlODMlQUElRTMlODMlQkMlRTMlODElQUElRTklOTYlOEIlRTclOTklQkElRTclOTIlQjAlRTUlQTIlODMlRTMlODElQUUlRTYlQTclOEIlRTclQUYlODkmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz0zOTg3NmEyY2NhZmQ0Zjc2YmRkOTc5ZDdlZGU1MWIwZQ%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB5dXJpYS1uJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9ZGI1MzRkMWU4YzQ2YmUyZDlkZDc1Njk4NjExMmY0MmU%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D481f8add74bf5f064d364acece5aa521)
TypeScript の基礎 - Qiita
特徴・メリット 静的型付け言語であり，あいまいさを回避しやすい（javascript は 暗黙型変換） コード補完を効かせることができる ECMAScriptのスーパーセットで，かつECMA Script 6の機能を先取りしている 変換しても平易なECMAScriptが出力される 既存ライブラリとの相互運用のために外部に型定義ファイルを持てる クラスベースのオブジェクト指向プログラミング 例：クラスの定義を定義した場合の javascript と typescript の比較 // javascript var Greeter = /** @class */ (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return
Riot.jsで真偽値属性(disabledなど)が「__disabled」になる問題(v3.0.0) - Qiita
この内容はv3.0.0の場合の話です。最新版では発生しません。 Riot.jsについて 最近のフロントエンド開発ではReactを使うことが多いですが、私は少数派ですので、「Riot.js」をよく使っています。 検索から来た人は、Riot.jsのことはよく知っているはずなので良いですが、そうでない人はぜひ使ってみてください。 __disabled問題 Riot.jsでは、disabled="{ !data.reference[0] }"のように判定式でdisabledが出来る。と公式ガイドに書いてある。 真偽値属性 (checked, selected など) はテンプレート変数がfalse的であれば無視されます。 <input checked={ null }>は <input>になります。 http://riotjs.com/ja/guide/#真偽値属性 しかし、いざ使おうとすると、な
ReactJSとReduxの単体テストを'きちん'と書く - Qiita
React ComponentとRedux（action、reducer）のテスト ReactのComponent周りとReduxのaction周りのCIテストを行いたいと思ったので Jest+Enzymeで単体テストを書いてみました。 JestはFacebookが開発しているReactJS単体テスト用のライブラリです。 単体テストに加え、Reactのレンダリング結果をスナップショットとして保存することもできるため、 レンダリングの差分テストを行うこともできます。 EnzymeはAirbnbが開発しているReactのUnitテスト用ライブラリです。 propsにパラメータを渡したり、stateの変更を行ったりできます。 ReactJSを実践で使う時は Redux、 Matarial-UI、 redux-formを組み合わせることが多いと思います。 今回はMatarial-UI、redux-
静的サイトに Service Worker を導入しようとして失敗した話 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 実験的に自分のポートフォリオサイトにService Worker Cache APIを導入しようとして結局断念しました。 この記事は、この失敗の経験の分析と共有のためのものです。 想定する読者 この記事は以下の読者を想定しています。 Service Workerに興味がある まだService Workerを使用したことがない ほとんどService Workerの知識のない初学者を想定しています。 私自身も今回はじめてServiceWorkerに触れました。同じような経験と知識の方を想定しています。 前提とする環境 この記事
ローカル開発環境でZenHubのWebhookを受け取る方法を試す - Qiita
最近、チームのプロジェクト管理ツールをJIRAからZenHubに変更しました。ZenHubはスクラム開発と親和性が高く、導入後のチームメンバーからの評判も上々です。 ZenHubはそのまま利用しても便利なツールではありますが、WebhookやAPIなどの機能が提供されており、これらを使用することでそれぞれの現場に存在するワークフローに対応した仕組みを作ることができます。 私自身も将来的に上図のように、特定のレーンに移動したときにIssueの入力項目が足りていない場合にコメントを付ける仕組みを作りたいと考えています。 本記事ではその初歩として、ローカルでZenHubのWebhookを受け取って表示するところまでを行いたいと思います。 完成形の共有 Node.jsで簡単なWebサーバーを作成して、Webhookを受け取ります。今回はngrokというサービスを利用し、ローカルの開発環境にWebh
Node.jsインストールした際のつまづきメモ - Qiita
Node.jsインストールした際のつまづきメモ Node.jsインストールした際、よくわからないことがあったため調べたことのメモです。 ＃＃ 公式ホームページからDLしてみた（あとでやり直す） まずググると出てくる公式ホームページからpkgでインストールしてみる。 https://nodejs.org/ja/about/ インストールするとDockerみたいにアプリがインストールされないかな、と思ったけど特になく。 どこにインストールされたかわからない。。 もう一度インストーラを見ると、 /usr/local/bin/node にインストールされるらしい。 確認すると確かにあった。
[AWS×ServerlessFramework] AWSLambda(Node.js)をTypeScriptで書いてデプロイする - Qiita
はじめに 最近はAWSLambdaをデプロイするにあたって、ServerlessFrameworkやAWS SAMを利用することが多いと思います。 簡単なソースコードならコンソール画面からインラインで実装すればいいですが(Cloud9で書けるようになったので、かなり書きやすくなりましたね)、複数のLambdaを管理する必要がある場合は、フレームワーク等を利用することで管理コストを削減できます。個々のLambdaをZipに固めてアップロードするわけにもいきませんからね… そんなときにJavaScriptで書いているソースコードをTypeScriptで書けたらいいのになーとか思っていると、「ServerlessFrameworkにもTypeScriptのプラグインありますよ」という情報を手に入れたので、本格導入する前に個人で試してみました。 ServerlessFrameworkのインストール
![[AWS×ServerlessFramework] AWSLambda(Node.js)をTypeScriptで書いてデプロイする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/3103aa6b21cf7f7a88aceac48898370b84dca982/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGOTU4NzUlMkZwcm9maWxlLWltYWdlcyUyRjE2MDQ4ODA1MTc_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmJnPUZGRkZGRiZmbT1wbmczMiZzPTU5ZmQ5ZTAwYjQ3ZTgzMTc1NzhmOGQxYjI1NWU4ZWVi%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Da176166054706dcaa584fbfd935d089e%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCQVdTJUMzJTk3U2VydmVybGVzc0ZyYW1ld29yayU1RCUyMEFXU0xhbWJkYSUyOE5vZGUuanMlMjklRTMlODIlOTJUeXBlU2NyaXB0JUUzJTgxJUE3JUU2JTlCJUI4JUUzJTgxJTg0JUUzJTgxJUE2JUUzJTgzJTg3JUUzJTgzJTk3JUUzJTgzJUFEJUUzJTgyJUE0JUUzJTgxJTk5JUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9YTRiYjY4YjNlYTllYzc0NjY5MTRkNjdkMDczZTEzMDM%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBpc19yeW8mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz0wOTk2MGUxNDZhNmEzYTlkZjY3ZjcwNTE1M2YwMGY0OQ%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D376d2d2cfaf092483f1a10e61b60cf71)
GCPのCloud Buildからnodejs8 on GAEを動かす時にはyarnでなくnpmを使おうというお話 - Qiita
Cloud Buildいいですよね。 今まではデプロイの自動化をしようとすると、CircleCIとか、werckerで同等機能を外部で用意するか、それともGCEでインスタンスを立ててとかやる必要があったんですが、GCP内でサーバレスで完結できるので構成がとてもシンプルにできます！ AWSだったらcode deployがあるのになぁと羨んでいたんですが、それも過去の話に そんな便利なCloud Buildなんですが……cloud buildからnodejs8のソースをGAEにdeployする時にちょっとした罠っぽいものがあったので備忘録もかねて 問題のソース package.json { "name": "nodejs8-by-yarn", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "start
LineBotで Ethereum の web3.jsを操作する（その２ : ローカルで署名してから送金） - Qiita
var Ether = (function() { /** * コンストラクタでethereumjs-txとethtereumjs-utilを読み込み */ var Ether = function(require) { if(!(this instanceof Ether)) { return new Ether(require); } this.Util = require('ethereumjs-util'); this.Tx = require('ethereumjs-tx'); } Ether.prototype.setChain = function(chain){ switch(chain){ case 'mainnet': return {'node':'https://mainnet.infura.io/[infura.ioのAPI KEY]','api':'https:
chrome-extension-webpack-boilerplate で手早く Chrome 拡張機能の開発環境準備 - Qiita
最近 Chrome 拡張機能の開発を簡単に始める方法を調べていたのですが、その中で chrome-extension-webpack-boilerplate を使うと簡単に始められたので紹介します。 筆者の前提 Chrome 拡張機能を開発するのが初めて。チュートリアルをこなした程度 Webpack は触ったことがある chrome-extension-webpack-boilerplate とは GitHub - samuelsimoes/chrome-extension-webpack-boilerplate Chrome 拡張機能の開発を楽にしてくれる boilerplate は調べると色々あります。 その中でも、chrome-extension-webpack-boilerplate は、Webpack で 開発に使う JavaScript のモジュールを管理できるようにしてくれる
IBM Cloud Object StorageにNode.jsから画像を保存するメモ - Qiita
はじめに IBM Cloud Object Storage、略してICOS。使ってますか？ 調べてもNode.jsから画像を保存するコードがなかったのでメモ。 前提条件 ICOSのサービスをIBM Cloud上に作成いていること ICOSのUIで「バケット」を作成していること ソースコード $ npm i ibm-cos-sdk --save $ node app.js var AWS = require('ibm-cos-sdk'); var config = { endpoint: //endpoint, apiKeyId: //apiKeyId, ibmAuthEndpoint: //ibmAuthEndpoint, serviceInstanceId: //serviceInstanceId, }; var cos = new AWS.S3(config); var params
ClovaでLINEログインを使ってみる（アカウント連携） - Qiita
はじめに この記事では、Clovaスキルのアカウント連携をLINEログインを用いて作成していきたいと思います。 LINEログインを用いることで、スキルユーザーのLINEプロフィール情報（名前や画像のURLなど）を取得することができます。 また、これを応用してLINEログインではなく他のSNSなどのAPIや自社のサービスと連携させることができます。 アカウント連携とは Clovaの外部のサービスを連携させることができる機能です。 ユーザーはClovaアプリからスキルを有効にするときに連携しているサービスからログインを求められます。 ログインすることでアクセストークンが発行され、アクセストークンを利用することで連携しているサービスのユーザー情報などを取得することができます。 外部サービスとの連携にOAuth2.0という認証方式を使用します。 OAuth2.0については以下の記事がわかりやすいか
Node.jsを実行可能ファイルにまとめるnexeを使ってappファイルを作る - Qiita
TL;DR まずは、まとめから。 やりたかったこと Mac 0S 10.9未満で動かしたい（具体的には10.7まではサポートしたい） Electronが動かない環境 Node.jsを新しくインストールさせる作業はさせたくない app形式で配布したい できたこと Electron向けに作っておいたindex.htmlとapp.jsは使い回し nexeでNode.jsを含んだコンパイル Nodeサーバを起動PC上で動作 必要ファイルを起動PC上に複製 起動時にブラウザ立ち上げ nexeでビルドした実行可能ファイルをapp形式にする できなかったこと Chromiumを実行可能ファイルにまとめたけど、Chromiumが10.9以降じゃないと動かない。（そりゃそうだよね、Electronの中で動いているのChromiumだもんね） ちなみに、Chromium.appをnexeのコンパイル時、res
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js+TypeScriptでコンポーネントをv-modelでつなげてみる - Qiita
local にインストールした node module package の実行方法 - Qiita
Node.js で簡単にtcpスキャン(ポート指定存在チェック)する - Qiita
webpack-dev-serverは引き続き開発継続される見通し？ - Qiita
Atomでsassを使いたいと思ったのでその方法をまとめました。 - Qiita
Node.js v10のfsでasync/await - Qiita
