TypeScriptでVuexを使うときのスタンダードっぽいやりかたを調べてみた - Qiita
この記事は オープンストリーム Advent Calendar 2018 の11日目の記事です。 うっかり期限を勘違いしていて前日に慌てて記事を書いています！間に合え！！ やりたいこと 最近やっと TypeScript と Vue.js を使い始めたので Vuex も一緒に使ってみたい。 とりあえず vue-cli でプロジェクトを作成すると、 store.ts ってファイルがぺろっと一つ追加される。けど、できれば1ファイルにべた書きするんじゃなくて、いいかんじに分けて書きたい。けど何をどう書けばいいのかよくわからない あとたぶん別の言語やって1ヶ月もしたら内容をすっぱり忘れるので、備忘録もほしい というわけで、調べてみた。 結論 ここにぜんぶ載ってた。すてき。 https://codeburst.io/vuex-and-typescript-3427ba78cfa8 ……なのですが。これ
[Web制作]iPhoneサイトで表示崩れが発生した時、実機とMacを繋いでWebインスペクタ機能でデバッグする方法
こんにちは、霙(@xxmiz0rexx)です。 スマートフォンサイトを制作している時、たまーに困ることがあります。 それは、実機でしか再現しない表示崩れ。 Macでみた時は大丈夫だったのに、何故かiPhoneでは謎の余白が…なんてことが先日もありまして、 解決のためにSafariのWebインスペクタ機能を使ってみましたので使い方をメモしたいと思います。 Webインスペクタ機能とは iPhoneで見ているページのソースをMacで見ながらデバッグできる機能です。 使うには双方へのちょっとした設定と、お互いをケーブルで繋ぐことが条件。 みんなだいすきGoogle Chromeの開発者ツールと同じようなものですね。 必要なもの 1.Mac 2.iPhone 3.ケーブル 次の章で使い方を書いていきたいと思います。 Webインスペクタ機能を利用する手順 1：iPhoneとMacをケーブルで繋ぐ まず
![[Web制作]iPhoneサイトで表示崩れが発生した時、実機とMacを繋いでWebインスペクタ機能でデバッグする方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/40f32f22625c07917861df73b24c82b03b4b6348/height=288;version=1;width=512/http%3A%2F%2Fwebimemo.com%2Fwp-content%2Fuploads%2Ff58a46be76400f23debbeacb9e1cc899.png)
WordPressのステージング環境を簡単に構築できるプラグイン「WP Staging」
なぜステージング環境が必要なのか？ ステージング環境とは、本番環境と同一のシステム構成を用いて、アップデートやカスタマイズによって、表示や動作に問題がないかを検証するために利用するウェブサイトと(ステージングサイト)のことです。 年に数回リリースされるWordPressワードプレス本体の新しいバ ージョンですが、これは新機能の提供という側面のほかに、セキュリティ面での対応という目的もあります。そのため、WordPress本体を新しいバージョンにアップデートすることは非常に大切です。 ただ、WordPress本体のアップグレードは、テーマやプラグインとの非互換性の問題が発生する恐れがあり、WordPress本体のアップグレードを多くの人がためらっているのではないでしょうか？ また、テーマやプラグインを新しく導入するにも、今のサーバー環境で、正しく動作・表示することを確かめることも必要になりま
SaaSビジネス10の成長戦略その①｜DJ141
今日はSaaSビジネスを成長させる10の成長戦略について、 具体的な事例を交えつつ説明をしていきます。 僕はSaaSが好きです。 もっと日本国内でSaaSの普及を促進したい。 そんな思いを持って、前職ではエンタープライズセールスの傍ら、 SaaSエバンジェリストとしての活動もしておりました。 そして独立をした今、誰かに忖度をする必要もなければ、 ｢個人の意見です｣なんていう脚注を付ける必要もない。 ｢最終的には会社のリード獲得｣とかそういう下心も抜きにして、 完全フラットに発信できる。 そう思ってこのnoteを書いております。 全部で3回で配信したい!!と思っていましたが、 書いていると結構詳細に書かないといけないことに気付いたので、 全5回を目処に配信を予定しています! 今回は第1弾として、 ①プライス･パッケージング戦略についてまとめていきます! このnoteはサブスクリプションに対す
主要SaaS企業250社の料金ページからひも解く7つの事実
多くのSaaS企業にとって、「料金」周りは悩みの種。 ただ料金設定を変えるのは難しくても、「料金ページ」自体を変えることで、CVRを上げたり、より高いプランへ誘導したりすることはできる。 今回は、SalesforceやLinkedInなどを筆頭に、SaaS 250社の料金ページを分析した記事をベースに、SaaS企業が知っておくべき「料金ページ」の7つの事実をざっくりと解説する。 Domoの料金ページよりSalesforceやHubSpot、Zendeskなど、実際の価格を載せているSaaS企業の料金ページをご覧になったことがある方も多いと思う。しかし驚くべきことに、SaaS 250社の内、80%は具体的な料金を公表していない。 (上の画像はDomoの料金ページの例) これは、なぜだろう？ EcoSignのCEO Jason Lemkin氏によると、「SaaS企業が具体的な料金を公開しない」
日本の主要SaaS50サービスの「料金ページ」の調査で分かった6つのこと｜橋本 大祐
こんにちは！橋本 大祐(@hashimoto_pres)です！ 今回は、元々業務の一環で調査していた「サービスサイトの料金ページ」について、色々気づきがありましたので、noteでまとめることにしました！ 母数が橋本が選んだ50サービスですので偏りがあるかとは思いますが、ぜひサービスサイトの改修の参考にしていただければと思います！ では全部で3,000文字と少し長いですが、どうぞ！！ ①78%のサービスがサイト内に料金に関する情報を載せている 78%のサービスがサービスサイト内で料金に関する情報を掲載していました。 （68%が料金ページを設けており、10%のサービスはトップページに掲載）料金に関する情報を掲載していないサービスの特徴としては、月額10万円〜のサービスが多く、もう少し安いサービス、アカウント課金/従量課金のサービスは料金を公開しておりました。 料金を公開していないサービス（一例
そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
Object等の呼び出しでkeyに動的な変数を使う [TypeScript] - Qiita
やりたいこと object等の呼び出しで Object[key] のようにするとき、key に動的な変数を入れたい。 問題・エラー 何も考えずに下記のように書くと、 const object = { aaa: 'aaaa', bbb: 'bbb', }; // keyには動的に生成された値 const key: string = receivedStringValue; const value = object[key];
![Object等の呼び出しでkeyに動的な変数を使う [TypeScript] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/50acb36686d9faf58fbbe61dcf1b2319ea7828eb/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9T2JqZWN0JUU3JUFEJTg5JUUzJTgxJUFFJUU1JTkxJUJDJUUzJTgxJUIzJUU1JTg3JUJBJUUzJTgxJTk3JUUzJTgxJUE3a2V5JUUzJTgxJUFCJUU1JThCJTk1JUU3JTlBJTg0JUUzJTgxJUFBJUU1JUE0JTg5JUU2JTk1JUIwJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJTg2JTIwJTVCVHlwZVNjcmlwdCU1RCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZDMxMjUyNDEzZjgxMjQxYWNkMDJkYzY3NDViNDdmOGE%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB0a3Rjb3Jwb3JhdGlvbiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NmE0ZTA5OTQxMzg1ZmZkYTRiMDBiZjlhMTgwNzdmOWE%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Db494ce846f7c3e146532e5d92e580738)
トレタのコードレビューへの取組 - トレタ開発者ブログ
始めに 皆さま、こんにちは！ トレタのサーバサイドエンジニア兼佐久間まゆちゃんのプロデューサーの@hiroki_tanakaです。 先日、コードレビューに関する議論が社内で巻き起こり、その時話に上がった内容や実際にトレタで行っているコードレビューの取組に関してご紹介します！ コードレビューの目的 そもそも何故、コードレビューが必要なのでしょうか。 前提としてシステム開発は何もしないと下の”あるある”現象に苛まれます。(身に覚えのある人が多いのではないでしょうか。) コピペの横行 動けば良しのコードの乱立 //TODO:後で直す と書かれているコードの散乱 単一責任の原則を無視した巨大クラス・メソッドの発生 ソースコードは継続的にメンテナンスをしないと品質は低下し続けます。 コード品質が低下している状態では、訳の分からないコードや処理を追うのが困難なコードが壁となってちょっとした機能追加や修
食事制限で68kg→51kgに減らしたワイの挫折と成功に基づく、ダイエットの心構えを教えたるわ : お料理速報
食事制限で68kg→51kgに減らしたワイの挫折と成功に基づく、ダイエットの心構えを教えたるわ 2020年06月23日07:00 カテゴリダイエット・筋トレ 1: 風吹けば名無し 2020/06/18(木) 00:44:04.17 ID:6Sp0y/t60 ・「食欲がそこそこある～あまりない」の時に、しっかり目(←重要！)に食事量を減らす。 おやつとかは普通に食べる。やけ食いしたい時、食欲がすごい時も食べたいだけ食べてた (ダイエットにおいてストレスを貯めるのが1番ダメ、緩やかにでいいから長続きさせる事が大事) こちらもおすすめ スポンサード リンク 2: 風吹けば名無し 2020/06/18(木) 00:44:26.30 ID:rO65ah5Z0 続けて 24: 風吹けば名無し 2020/06/18(木) 00:49:14.80 ID:6Sp0y/t60 >>2 苦でもないし一生続けるで
JavaScriptのnew Array(n)をmapしたいとき fillをはさむ理由 - yucatio@システムエンジニア
経緯 配列をオブジェクトで初期化したい場合、 new Array(3).fill({foo: "ふう", bar:"ばあ"}) というコードだと、全てのインデックスが同じオブジェクトを指してしまうので、 調べたら new Array(3).fill().map(() => ({foo: "ふう", bar: "ばあ"})) という方法が出てきたので試したらうまく行きました。 疑問 このfill()要らなくない？new Array(3).map(() => ({foo: "ふう", bar: "ばあ"})) って書けばよさそうな気がします。 答え fill()は必要。 理由はここに書いてありますが、英語なので日本語で&自分で実行しながら書いていきます。 itnext.io まず、JavaScriptの配列は、実質的には数値をキーとしたオブジェクトです。 例えば、以下のように配列を初期化します
javascriptで配列を分割、そしてsliceの使い方の注意点。 - nekoTheShadow’s diary
今日の作業中(というか勉強中)、配列を任意の数の要素に分割したいとなりました。ことばだとわかりづらいですね。たとえばこんな感じ。 [1,2,3,4,5,6,7,8,9].divide(4) => [[1,2,3,4],[5,6,7,8],[9]] [1,2,3,4,5,6,7,8,9].divide(3) => [[1,2,3],[4,5,6],[7,8,9]] rubyでいえばeach_sliceですね(るりま)。今回はこれをjavascriptで実装しました。といってもそれほど難しいことはなく、さらっとかけそうです。 Array.prototype.divide = function(n){ var ary = this; var idx = 0; var results = []; var length = ary.length; while (idx + n < length){
JavaScript の Array.some と Array.includes の使い分け、値・参照型の動作の違い - Qiita
JavaScript の Array.some と Array.includes は、 どちらも配列に特定の要素が存在するか判定するのに使えます。 Array.someとArray.includesをどのように使い分ければいいのかを考えたいと思います。 古えの JavaScript では... ES2015 でArray.someが追加されるまで、配列にある要素が存在するか判定するには、 （本来の用途と違うため）直感的でないindexOfや、for文で冗長な記述をする必要がありました。 const chars = ["a", "b", "d", "g", "h", "i", "m", "n"]; const target = "d"; // for 文でループして探す let exists = false; for (const char of chars) { if (char ===
フォーム inputのpatternを使って、電話番号・郵便番号・フリガナ・空白などを判別する方法
HTML5からinput要素にpattern属性を使って、正規表現か否かを検証すること（バリデーション）ができるようになりました。 これにより、メールアドレス形式か否か、電話番号形式か否かなどをjavascriptなしで […]
はじめてのvue-property-decorator (nuxtにも対応） - Qiita
この記事はVueを勉強している段階からTypeScriptでクラスベースのVueアプリを作りたい！という方へ向けて例を交えながらvue-property-decoratorの機能を基本と応用、上級の３セクションに分けて説明していきます。 基本では、Vueでアプリを作る上で必須となる機能を、応用では用意されている便利なデコレータを、上級では普通の開発ではほぼ使わない機能について説明します。 とりあえずは基本のみ理解しておけば困ることはないでしょう。 また、最後にnuxt-property-decorator独自のデコレータも紹介しています。 2019/12/09 追記：nuxt-property-decorator独自のデコレータの紹介を追加しました 動作確認バージョン vue-property-decorator v8.4.2 nuxt-property-decorator v2.5.1
Promiseとはなんぞや？！できるだけわかりやすく説明してみた（ついでにasync/awaitも) - Qiita
PromiseやAsync/awaitという言葉をよく耳にするようになってきましたが、どういう仕組みか理解せず苦しんでいる方も多いのではないでしょうか？ 実は自分もこの記事書くまではかなり苦戦していました…！ そこで、できるだけ、本当にできるだけわかりやすく説明するために、いろんなケースを交えて説明していこうと思います！ そもそもどういうときにPromiseって必要になるんや？ まず以下のコードをご覧ください function getData () { return axios.get('http://example.com') .then((res) => { return res; }) } let data = {}; if (data) { data = getData (); } console.log(data); 上記のコードを実行すると、コンソールに帰ってくるのはexamp
Dockerコンテナの作成、起動〜停止まで - Qiita
何も保存されていないので現在はリストされていいるものがありません。 それではイメージの取得を行いましょう。 2.イメージの取得 今回はDocker Hubにあるubuntuリポジトリからコンテナイメージを取得します。 取得はdocker pull <REPOSITORY>コマンドで行えます。 $ docker pull ubuntu Using default tag: latest latest: Pulling from library/ubuntu 0a85502c06c9: Pull complete 0998bf8fb9e9: Pull complete a6785352b25c: Pull complete e9ae3c220b23: Pull complete Digest: sha256:f91f9bab1fe6d0db0bfecc751d127a29d36e85483b1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Node.js でディレクトリごとにバージョンを変更する nodenv
Tondemodesign.com
【爆速で習得】Railsでslimを使う方法から基本文法まで - Qiita
