Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

概要 Promiseは便利だが、うまくモデリングしないと(時にうまくモデリングされていても)、深いネストとアロー関数の海におぼれてしまうことがある コンストラクタのresolveとrejectへの参照を保管しておくと、深いネストから解放されることがあるが結構書きづらく読みづらい resolveとrejectを抜き出すためのモジュールを導入すると、多少書きやすくなる(この記事での提案部分) 上手く使えばすっきりかけるが、多用が必要な時はたぶんモデリングを見直したほうがよい そもそももっといい方法があるぞ、ちゃんとしたデザインパターンがあるぞ、ということをご存知の方は教えて下さい Promiseでネストが深くなる例 非同期で外部やユーザのアクションを待つときに、Promiseを受け取ることでawait(やthen)で同期っぽいコードですっきりと利用側のコードを書ける場合がある。(以下のようなイ
概要 Vue.js+TypeScriptでElement-ui利用なプロジェクトで単体テストを書いてたらテストが完了せずにハマったので覚書です。 Elementについては下記をご参考ください。 Element http://element.eleme.io/#/en-US Vue.jsのコンポーネント詰め合わせ「Element」がスゴかった https://s8a.jp/vue-js-library-element すべてを調べてないので、あれですが、ElementのLoadingコンポーネントをServiceとして利用する場合、close メソッド内で、setTimeout を利用しているのでnextTick を忘れないようにしましょう(結論) http://element.eleme.io/#/en-US/component/loading Githubに検証で利用したプロジェクトをU
型のプロパティをすべて非必須にする Partial<T> 利用例 既存の必須項目がある型を流用する際などに利用できます。 型のプロパティをすべて必須にする Required<T> 利用例 とある型から mapped type で型を生成している際に、元の型のシェイプの変更への追従が容易になります。 interface O1 { p1: any; p2?: any; } type O2 = Required<O1>; type F<T> = { [K in keyof T]: () => void }; type F1 = F<O1>; // = { p1: () => void; p2?: () => void; } type F2 = F<O2>; // = { p1: () => void; p2: () => void; } const f1: F1 = { p1: () => {}
{ "compilerOptions": { /* 基本オプション */ "target": "es5", /* ECMAScriptのターゲットバージョンを指定します: 'ES3'(デフォルト), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018'または 'ESNEXT' */ "module": "commonjs", /* モジュールコード生成: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015',または 'ESNext'を指定します。 */ // "lib": [], /* コンパイルに含めるライブラリファイルを指定します。 */ // "allowJs": true, /* javascriptファイルをコンパイルできるようにします。 */ // "checkJs": true, /*
フロントエンドについての学習のため、Nuxt.jsでポートフォリオサイトを作製してみました。 fmatzy.github.io GitHub Pagesで (お金をかけずに) ホスティングしつつ、多少動的なこともしてみました。Vue.js、Nuxt.jsについてほぼ知識のないところから作製したのでかなり荒削りです。 fmatzy/fmatzy.github.io-dev 工夫した点は以下の通りです。 GitHubのリポジトリとQiitaの投稿をそれぞれAPIで取得して表示した。 トップページはMarkdown形式で書くようにした。 Nuxt.jsで静的なページを生成してGitHub Pagesでホスティングした。 GitHubのリポジトリとQiitaの投稿をそれぞれAPIで取得 せっかくSPAのフレームワークを使用するので、なにかのAPIを叩いて動的にコンテンツを生成することにしました。
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from "vue"; import App from "./App"; Vue.config.productionTip = false; /* eslint-disable no-new */ new Vue({ el: "#app", components: { App }, template: "<App/>" }); <template> <div id="app"> <img width="25%" src="./assets/logo.png"> <div>{{str}}</di
はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 現在は構築したシステムを保守・運用しており、その際に得られたノウハウを言語化し、共有出来たらと思います。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 ※ パフォーマンスの話はしません。 ゴール 役立つTipsを身につけコード品質を向上させる コンポーネントのバグを減らせるTips ほとんどのバグは変数から来ます。 もし全ての値が定数なら状態から来るバグはほとんど無くなるでしょう。 ここではこの変数や式を極力減らせるTipsを紹介したいと思います。 1. dataを極力定義しない Vue.jsでコンポーネントを定義する際ついdata()に沢山変数を定義しちゃいますよね。
import * as React from 'react'; import { View } from './view'; // Propsの型定義 interface IProps { name: string; } interface IState { count: number; } export class Profile extends React.Component<IProps, IState> { constructor(props) { super(props); this.state = { count: 0, }; } handleClick() { const text_element = document.getElementsByClassName("modal")[0]; if (text_element.className === "modal on")
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く