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

Vue + TypeScript + Nuxtの書き方 概要 Vue使いたい!Nuxt使いたい!Vue3系からは、Typescriptを利用しているらしい! ということで、TypeScript使ったことないので、勉強がてらメモ & リンク集。 (TypeScript部分は動作確認を全てしているわけではないので注意!) TypeScriptとは? マイクロソフトが開発したaltJS(JavaScriptの代替言語、コンパイラーによって、JavaScriptに変換される) 特徴を簡単に言うと、静的な型システムとクラスベースが使えるJavaScript(ただ、クラスベースの開発は、ES2015でもできる) 基本 変数の定義時には、型を宣言する。 デフォルトでは、全ての型に対して、null / undefinedを代入可能。これは、tsconfig.jsonで代入不可能に変更可能。 let nam
気付いたらTS 3.1.1がしれっとリリースされていたので、今回導入されたMapped Tuple Typeについて書いてみようと思います。 対応するPRはこちら。 今回のMapped Tuple Typeは、TypeScript 2.1で導入されたMapped Typeの強化版です。 ちなみに「Mapped Type is 何」という人は、以前に解説記事を書いたのでこれを読むと良いかと。 さて、Mapped Tuple Type、別に新しい記法とかが追加されたわけではありません。 次のコードは上記のPRに記載されているサンプルです。 type Box<T> = { value: T }; type Boxified<T> = { [P in keyof T]: Box<T[P]> }; type T1 = Boxified<string[]>; // Box<string>[] type
エンジニアじゃないけどアプリが作りたかった こんにちは。まつもとかづまさと申します 僕はこの記事を書いている現在は障害者支援施設で支援員として働いています。 今回は3 step wallet という知的障がいの方でも「暗号通貨決済をできるようにする」という目的で作成したアプリの話です 3 step walletはこちら 今日の記事の流れ では本編へ [PWAとVue.jsでNEMウォレットアプリを作ろう!TypeScript導入 〜 TypeScriptで書いてみる] (http://hobbydevelop.info/pwa_vuejs_nem_1) まず注意して欲しいのがライブラリのインストール先です。 実際に僕はこの時はターミナルを使っていたので少し違います。 この ```cd 3-step-wallet``` がとても重要になりました。 前回の記事で書いたことなのですがライブラリが
エンジニアじゃないけどアプリが作りたかった こんにちは。まつもとかづまさと申します 僕はこの記事を書いている現在は障害者支援施設で支援員として働いています。 今回は3 step wallet という知的障がいの方でも「暗号通貨決済をできるようにする」という目的で作成したアプリの話です 3 step walletはこちら 今日の記事の流れ vueのフォルダを作ってgithub pagesに公開できるようにいじる まずはアプリの基礎となる記事を参考にしました。 PWAとVue.jsでNEMウォレットアプリを作ろう!環境構築 〜 PWAアプリの起動 [PWAとVue.jsでNEMウォレットアプリを作ろう!TypeScript導入 〜 TypeScriptで書いてみる] (http://hobbydevelop.info/pwa_vuejs_nem_1) [PWAと Vue.jsでNEMウォレット
はじめに 仕事でコミュニティが活発なライブラリを活用することが増えてきたのですが、日本語の記事がなかったり、英語の記事を見ながら試行錯誤したので、備忘も兼ねてまとめます。 同じ悩みを抱える人の救いになれば幸いです。 (間違いがあればご指摘ください) Formik Formik とは、Reactで使えるフォームの管理をしてくれるイケてるライブラリです。 同僚が使う理由として "its the lib recommended by the formskit team" を挙げていました。 ごめんなさい、ドヤ顔で言われてもそのすごさを理解できてないヘボヘボエンジニアです。 というか、Ant Design の Form Component であらかた入力フォームとバリデーション実装したタイミングだったので、「マジかよ…」と思いました。 yup yup は、Yup is a JavaScript o
はじめに Alibaba の Ant Design が結構イケてます。 特に Upload Component がおしゃれな挙動をしてくれるんですが、デフォルトで POST で送信しちゃうようです。 PUT で送信する要件があったのでそのナレッジを書いておきます。 PUT を使った Upload いきなり本題です。 Class / Stateless Functional Component は省略します。 実装箇所がわかりやすいようにrender以降の部分を記載します。 (Stateless Functional Component の場合はreturn以降をご参考ください。) import { Upload, Icon } from 'antd'; /*** 中略 ***/ createButton = () => { return ( <div> <Icon type={'plus'
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? エンジニアじゃないけどアプリが作りたかった こんにちは。まつもとかづまさと申します 僕はこの記事を書いている現在は障害者支援施設で支援員として働いています。 今回は3 step wallet という知的障がいの方でも「暗号通貨決済をできるようにする」という目的で作成したアプリの話です 3 step walletはこちら 今日の記事の流れ コピペとライブラリをインストールする場所の危険性 この記事の話になります。 [PWAとVue.jsでNEMウォレットアプリを作ろう!TypeScript導入 〜 TypeScriptで書いてみる] (h
やったこと Serverless Frameworkを使って CloudFunctionを動かしてみました。 試した内容は下記の通りです。 TypeScriptで書けるようにしてみる serverless.ymlの設定で環境変数を利用する 日本のリージョンにDeployする 実際に利用したコード https://github.com/selmertsx/study/tree/master/serverless/cloudfunction-sls-sample 前提 上記チュートリアルを実行して、nodejsのコードをdeploy & invokeできるようにしてある前提で話を進めます。 TypeScriptで書けるようにする https://github.com/prisma/serverless-plugin-typescript このpluginを利用します。 手順は簡単で、下記の手順
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Angularとは? Wikipediaより。 AngularJS(アンギュラージェイエス)、または Angular は、Googleと個人や企業のコミュニティによって開発されている、完全にJavaScriptで書かれたオープンソースのフロントエンドWebアプリケーションフレームワークである。 (中略) AngularJSはシングルページアプリケーション (SPA) の開発が可能なフレームワークで、一つのフレームワーク内で全ての機能が完結するフルスタックフレームワークであることが特徴として挙げられる。 AngularJS - Wikip
きっかけ・やったこと Twitter apiの制限が厳しくなって、1アプリあたり300ツイートしかできなくなる(なった?)そうなので、 自分専用のbotアプリをひとつ作った。 実装方針 Firebaseとapp engineでcloud functionを定期実行し、その関数からtwitter apiを叩く Firebaseプロジェクトの作成 まずはFirebaseでプロジェクトを作成するところから。Firebaseにアクセス。 以下の画面から、「プロジェクトを追加」を選択。(お仕事で使ってるプロジェクトも写ってるのでそこは隠してます) すると次のようなポップアップが出るので赤丸のとこにチェックを入れてプロジェクトを作成。プロジェクトIDはあとで使うのでメモっておく。 プロジェクトを作成できたら料金プランを従量制のBlazeにアップグレードする。(外部のAPIにアクセスできないので) 定期
APIコールが発生する処理を行った時にローディング中かどうかを示す loading なり fetching なりのフラグを用意すること、結構あると思います。これを様々なActionごとに逐一準備するのだるいのでまとめて用意する方法と、それをtypescript-fsa使うと意識すること一つ減るよという小ネタです。 考え方はこちらのブログのアイデア完全にお借りしていて、typescript-fsa前提だとAction Typeが必ず特定のフォーマットになるので幸せになったという話。 https://medium.com/stashaway-engineering/react-redux-tips-better-way-to-handle-loading-flags-in-your-reducers-afda42a804c6 typescript-fsaの非同期アクション typescript
フロントエンドの学習のためにうさぎを増やしたり跳ねさせたりできるサイトを作製しました。 うさぎがピョン! ソースはGitHubに置いています。 fmatzy/usagi DOM要素を動かす DOMの論理的な構造はHTMLが担いますが、見た目に関する部分はCSSが担います。アニメーションについてもCSSを使います。 参考: コピペで使える! CSS Animationだけで実現するキャラクターアニメーション - ICS MEDIA せっかくならもう少しアクロバティックに動かしたいですね。 うさぎを動き回らせる 画面上の要素の配置を決めるのもCSSであるため、プロパティをstyleに紐づけ、その値を動的に変更することで、動的に位置を変えることにしました。 @Component({}) export default class Creature extends Vue { @Prop() pos
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く