Vue.js+SVGで自由にCSSアニメーションしたい人のための完全解説（ソース付き） - Qiita
こんにちは。UX＆フロントエンジニアしながら絵描きして遊んでいるゆき(@yuneco)です。この記事ではVue.jsを使ってCSSアニメーションを使った表現を自在に行うための基本的な部分をステップバイステップで解説します。目標は↓以下のようなアニメーションをJavaScriptで自在に構築できるようになることです。 ソースコードはこちら： https://github.com/yuneco/css-anime-tutorial 目次 この記事では最初にSVGを単純に表示するところから始め、Vueのコンポーネントを利用してそのSVGを自由に配置・変形させる方法を説明します。その上でCSS transitionを用いたアニメーションを取り入れます。最後に、複雑なアニメーションを抽象化・構造化してより複雑なシーンを構成するための方法を解説します。 SVGを作る Vueプロジェクトを作る SVGを
Microsoft Bot Frameworkにおけるチャットボットのマルチテナント設計を本気で考えてみた（Build 2018対応版） - Qiita
Microsoft Bot Frameworkにおけるチャットボットのマルチテナント設計を本気で考えてみた（Build 2018対応版）Node.jsAzureTypeScriptBotFrameworkchatbot 課題 Azure Bot Serviceは、BotRegistrationと、AppServiceを組み合わせで契約してくれる。アプリとボットがすぐに接続できるのはメリットだが、密になりすぎていて切り離せなく、マルチテナント化しにくい。 同様の機能のボットを複数作りたいとき、Bot Service単位で作るとコストが倍々でかかってしまう。 対策および目的 Microsoft Bot Framework、もといAzure Bot Service( https://azure.microsoft.com/ja-jp/services/bot-service/ )のテクノロジーを
SQLアンチパターンもりもりDBを設計しよう！ - Qiita
概要 名著SQLアンチパターンを読み終えたので、それの復習のために悍ましいデータベースを作ろうと思った。 まず前半では、SQLアンチパターンを意図的に盛り込み、目も当てられない酷い設計をします。 そのあとリファクタリングを行なったER図に書き直していきます。 なお、真面目に書くと参考書の丸写しになってしまうので、この記事は アンチパターンもりもりのER図を見て嫌悪感を学習し、設計に役立てようという趣向のもと、詳しい説明は省きます。 とても良い本なので読んでください。 想定するシステムの概要と状況 目的において適切かはわかりませんが、とりあえず考えることの多い”お金”を扱うシステムを想定してみます。 私はブラックジョークが好きなので、今回は「ちょっと怖い金融屋さんが使う債務者管理システム」のER図を設計してみようと思います。 ざっくりした要件 債務者を登録でき、プロフィールを入力できる。 債
AWSとGCPの一生無料枠を活用する - Qiita
はじめに AWSとGCPは、登録後に一定期間（一定量）の無料利用権をもらえますが それとは別にいつまでも無料で利用できるサービスがあります。 AWS クラウド無料利用枠 - 無期限無料 GCPの無料枠 - Always Free プロダクト その中から個人で開発する上で使えそうなサービスの紹介や、 簡単な（本当に簡単な）比較などをまとめてみたいと思います。 ※無料対象のサービスは時々変更1があります。上のリンク先に書いてあるのが最新の正しい情報なのでご参照ください。 （なので、一生というのはちょっと言い過ぎです。。。） ※実際に運用すると通信等の料金が発生したりで月に数ドル程度かかったりします。ほんとに完全無料希望の人は詳しくご確認ください。 所感で個人開発に使えそうなものを紹介していくので無料サービス全部の網羅はしません。（できません） また、AWSとGCPどっちが良いとかではなくどっち
JavaScript/TypeScriptの例外ハンドリング戦略を考える - Qiita
PySpa統合思念体です。あと、 @yosuke_furukawa にも協力いただきました。 基本的に、あまりエラーの種別を細かく判定してあげることはJavaScriptでは今までやってこなかったのですが、ちょっとしたメタデータを乗っけてあげるとか（例えばリトライ回数）、何か凝ったことをしたくなったらこういう方針でやればいいのでは、という試行錯誤録です。 エラーと例外の区別が必要か この手の話になると、エラーと例外の違いとか、こっちはハンドリングするもの、こっちはOSにそのまま流すものとかいろんな議論が出てきます。このエントリーではエラーも例外も差をつけずに、全部例外とひっくるめて説明します。 例外というのはすべて、何かしらのリカバリーを考える必要があります。 ちょっとしたネットワークのエラーなので、3回ぐらいはリトライしてみる 原因: ネットワークエラー リカバリー: リトライ サーバー
Infrastructure as Codeを少し楽にするterraformerが出た - Qiita
過去に Terraform Best Practices in 2017 という記事を書きました。 そのあと、2019年2月のJAWS Days Infrastructure as Codeに疲れたので、僕たちが本来やりたかったことを整理するを話しました。 その中で、Dev環境を手で作業して、その内容をExportして、Stg, Prodに展開出来たら良いのになー。という話をしていたのですが、それの兆しが見えるツールが登場したので紹介します。 2019年5月頭にひっそりと terraformer という何かと間違えるようなツールが出ていました。 少し驚いたのが、提供元がGoogleCloudPlatformでした。 CLI tool to generate tf and tfstate files from existing infrastructure (reverse Terrafor
関数型プログラミングを学んで見解を示す for javascript - Qiita
関数型プログラミングを silver の bullet としてなりふり構わず振り回していましたが、 ちょっと真面目に学ぶ機会を設けてみました。 関数型プログラミング（Functional Programming）を学んだ参考書の紹介と 私の浅い見解についてまとめていきます。 参考書のご紹介 Functional-Light-JS 筆者曰く、筆者の数学的知識は一般レベル、Scheme/Clojure/Haskell は未経験。 そのため関数型本来の意味や各用語の学術的な意味合い等は記載しておらず、 実用的なアプローチと共にお送りする文書とのこと。 いわゆるボトムアップ。 functional-programming-jargon こちらは打って変わって関数型に関する jargon についてまとめています。 1 番ありきでこちらを付加資料として読むと見識が深まるかと思います。 いわゆるトップダ
30歳を過ぎて機械学習エンジニアに転身して半年になったのでこれまでやってきた勉強についてまとめる - Qiita
はじめに どうも、30過ぎて情シスから機械学習エンジニアに転身するという割と変態的なキャリアを形成しているものです。 これまでの自分の反省も元にどう勉強してきたか振り返ってみたいと思います。 もともと理系出身ですし、IT業界の経験自体はあるので完全未経験というわけでもないので、理系の情報系の学生さんとか、大学卒業してあまり年数が経たない社会人の方であれば参考になる部分があるのではと思います。 基本スペック 年齢…32 学歴…理系大学院修士修了。物理系(大学初年度の線形代数、微分積分、確率統計ならギリギリなんとかなる。Python機械学習プログラミングやはじめてのパターン認識を見て数式でつまづくことはほとんどない。) これまでのキャリア…ERPのパッケージ開発1.75年(Javaなど)→ネットワークエンジニア1.75年(ツール作成程度にPython)→社内SE3年(社内システムの企画/保守。
Rails5 から enum 使う時は_prefix（接頭辞）_suffix（接尾辞）を使おう - Qiita
enum :status, { active: 0, archived: 10 }, prefix: true enum :comments_status, { active: 10, inactive: 20 }, suffix: true 余計なアンダースコアなども抜け落ちてスッキリし、Afterの方が印象は良いですね。 この記事で伝えたいこと Rails5 からActiveRecord::Enum を定義する際は_prefix、_suffixという武器がある事を知っていただきたい。 核心部分だけ見たい方は、ショートカット 2019.09.12 文章の 「です・ます」調を統一。 2019.06.01 例として使用するテーブルの説明を追記 Rails のバージョン
TypeScriptの型推論詳説 - Qiita
TypeScriptはJavaScriptに静的型を追加した言語で、コンパイルエラーを検出することでJavaScript開発をさらに快適・効率的にしてくれるものです。 型システムを備えている言語は、多かれ少なかれ何らかの形で型推論を備えています。大ざっぱに言えば、これは型を明示的に書かなくてもコンパイラがいい感じに型を推測して理解してくれる機能です。型推論は静的型付き言語における花型機能のひとつと言ってもよく、色々な言語がそれぞれの特色を持っています。 この記事ではTypeScriptにおける型推論について詳説します。この記事に書いてあることは、TypeScriptを普段から書いている方ならなんとなく理解している内容が多いと思います。しかし、これらの内容がちゃんと言語化されている記事がいまいち見当たらなかったので今回記事を書くことにしました。 ※ この記事の内容は執筆時点の最新版のType
Ricty を神フォントだと崇める僕が、フリーライセンスのプログラミングフォント「白源」を作った話 - Qiita
誰もが知る(？)プログラミングフォントこと Ricty にインスパイアされ、Ricty のように英文フォントと和文フォントを合成したプログラミングフォントを作りました。 その名も、プログラミングフォント「白源 (はくげん／HackGen)」です！ 白源 (はくげん／HackGen) 通常版 生成元にはプログラミング向け英文フォント Hack と、Adobe 製作の源ノ角ゴシックに丸みを付けた派生フォント 源柔ゴシック を使用させていただきました。 白源の生成元である Hack、及び源柔ゴシックには、いずれも SIL Open Font License Version 1.1 という大らかなライセンスが適用されているため、改変及び配布が自由となっています。したがって、白源の生成済みフォントファイル (ttf ファイル) は GitHub からダウンロードして、すぐにご利用いただけます。 「白
数時間で完全理解！わりとゴツいKubernetesハンズオン！！ - Qiita
社内でKubernetesハンズオンをやってみたのでおすそ分け。 参加者6人からバンバン出てくる質問に答えながらやって、所要時間4時間ほどでした。 SpeakerDeckにも資料を上げています。 https://speakerdeck.com/ktam1219/yaruze-kuberneteshanzuon (2019/07/11追記) 続編書きました！ -> 今度はあんまりゴツくない！？「わりとゴツいKubernetesハンズオン」そのあとに ハンズオンの目標 Kubernetesとお友達になる イメージを掴む 触ってみる(ローカル・EKS・ちょっとGKE) 構築・運用ができるような気分になる 巷にあふれるKubernetesの記事・スライドが理解できるようになる EKSがメインになっているのは、会社の業務でAWSを使うことが多いからです。 純粋にKubernetesを勉強したいだけな
JavaScript/TypeScript で Promise を直列実行できるが、結局どう実装すればよいのか？（可読性・実行速度） - Qiita
単位は byte es2016以下の場合 async/await を使用した場合、トランスパイルで polyfill が挿入される よって、 async/await を使用しなければ、polyfill 分のサイズを削減できる ただし、その他の実装でも一切 async/await 使ってない場合に限る src全体で見て、他の実装で async/await を使っている場合、その実装のために polyfill が挿入される そのため、直列実行の実装を工夫しても polyfill 分のサイズは必ず増える es2017以上の場合 いずれの実装も、polyfillは挿入されない よって、書いたコード分のファイルサイズになる 所感 まぁ、妥当な結果 ベンチマーク 各 target の出力結果の JavaScript を実行 1 スレッド、100 Promise の直列処理 * 5 回計測の平均 es5
Cloud Firestoreの概要とデータベース設計について - Qiita
Cloud Firestoreとは Cloud Firestore(以下Firestore)はGoogleが提供しているNoSQLドキュメント指向データベースです。柔軟なデータ構造、高機能なクエリ処理、リアルタイムアップデート、オフラインサポートなどが特徴です。GCPとFirebaseから提供されています。GCPから提供されているバージョンでは、前のバージョンであるCloud Databaseとの互換性を持つDatastoreモードとネイティブモードを選択できます。Datastoreモードではいくつかの機能が制限されます。詳細はネイティブ モードと Datastore モードの選択 | Cloud Datastore ドキュメント | Google Cloud。 Firestoreを始める ここではTypeScriptプロジェクトでFirestoreを始める方法を紹介します。 Fi
Nuxt.js v2.7.0 の変更点と注目のポイントまとめ - Qiita
本日 Nuxt.js v2.7.0 がリリースされました。 普段は大きな変更点がある場合を除き日本語でまとめたりしないのですが、いくつか便利そうな変更点があったので簡単にまとめます。 tl;dr アップデートにおいて変わった主な変更は以下(# は該当の Pull Request) SSR 側での console.log が開発環境に限定してクライアントへと引き継がれるように #5673 store ディレクトリ内の新規作成がウォッチ対象に #5681 serverMiddleware のウォッチも改善 #5681 TypeScript プロジェクトにて Node.js v8.6 のサポートを廃止 #5691 今回のリリースについての公式情報 GitHub Release https://github.com/nuxt/nuxt.js/releases/tag/v2.7.0 Official
【Vue.js】Web API通信のデザインパターン (個人的ベストプラクティス) - Qiita
はじめに Vue.jsを使用したアプリケーションでのWeb API呼び出しのデザインパターンについて調べてみました。 しかし検索して出てくるチュートリアルやサンプルは、コンポーネント内でaxiosをインスタンス化していたり、Vuexの中でaxiosを使用するというサンプルがほとんどでした。 しかし実際のプロダクトでこれをしてしまうと コンポーネント内でAPIアクセスの直書きによって単体テストが困難に Vuex(actions)の肥大化(使い回さない処理はStoreに記述しないほうがいいとする文献もある) API通信部分をPureJSでモジュール化しても依存度がイマイチ下がらない（コンポーネントでモジュールをインポートするため）。 などなど問題になることが多そうでした。 ある日、Jorge氏が投稿した「Vue API calls in a smart way」という記事にたどり着きました。
Nuxt.js(Vue.js)とGoでSPA + API(レイヤードアーキテクチャ)でチャットアプリを実装してみた - Qiita
概要 Nuxt.js(Vue.js)とレイヤードアーキテクチャのお勉強のために簡単なチャットアプリを実装してみた。 SPA + APIと言った形になっている。 機能 機能はだいたい以下のような感じ。 ログイン機能 サインアップ機能 スレッド一覧表示機能 スレッド作成機能 ログインしたユーザーは誰でもスレッドを作成できること コメント一覧表示機能 スレッドをクリックすると、そのスレッド内のコメント一覧が表示されること スレッド内でのコメント作成機能 ログインしたユーザーは誰でもどのスレッド内でもコメントできること スレッド内でのコメント削除機能 自分のコメントのみ削除できること ログアウト機能 コード コード全体はここ コードは一例でもっと他の実装や良さそうな実装はありそう 技術 サーバーサイド DDD本に出てくるレイヤードアーキテクチャをベースに以下の書籍や記事を参考にさせていただき実装し
JavaScriptの数値型完全理解 - Qiita
数値というのはプログラミングにおいて極めて基本的な対象です。ほとんどのプログラミング言語は何らかの形で数値の操作を行うことができ、もちろんJavaScriptにおいても例外ではありません。 プログラミングにおける数値の特徴的な点は、往々にしてその性質に応じた複数の型1が与えられている点です。まず、数値は整数か小数かによって分類されます。さらに、値を表すのに使われるビット数、また整数に関しては符号ありか符号なしかという分類ができます。例えば、Rustという言語ではこれらの分類が分かりやすく表れています2。Rustにおける数値の型はi32, i64, u32, u64, f32, f64などがあり、見ただけでどのような特徴を持つ数値なのかが分かりやすくなっています。iというのは符号あり整数、uというのは符号なし整数、fは小数で、その後の数字がビット数ですね。 では、JavaScriptにおいて
いますぐ使うCodeBuild - Qiita
CodeBuildとは AWSのなかでCI/CDを担うCode三兄弟のひとつ、という説明では一切何もわからなかったので、軽く触った理解をメモとして残します。 AWS CodeBuildは、Jenkinsジョブ相当のものを「Build project」と呼び、任意のDockerイメージを起動して、コンテナ内で任意のコマンドを起動できるサービスと理解しました。 私自身はCircleCIあるし時間の無駄でしょと思って敬遠してましたが、CI/CDという色眼鏡を外すと、活用の幅が非常に広い面白い製品です。使わないのはもったいない！ こんなことに使えそう CircleCIやTravisCIなどの CI as a Service を利用されてるなら、料金面や速度など強い不満なければ、わざわざ移設するほどのものではありません EC2サーバーにJenkinsを立ててCI/CDに供しているなら、一部のJenk
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AWS/Azure/Google Cloudサービス比較 2023.12 - Qiita
