prismaのschemaファイルの書き方（MySQL用） - White Box技術部
フルNext.jsアプリケーション作成の一環で、DBマイグレーションツールにprismaを使ってみたので、書き方のメモです。 いきなりですが、prismaは細かくDDL文を制御できず、思ったテーブルを作れなかったので、細かくテーブル定義を設定したい場合はTypeORMの方がいいかもしれません。 準備 プロジェクトにprismaをインストールし、初期ファイル（prisma/schema.prisma）を作成します。 $ yarn add -D prisma $ yarn run prisma init schema.prismaの書き方 公式ドキュメントの書き方を参考に、スキーマをschema.prismaに記載していきます。 記載する際の注意点・考慮点は以下です。 providerをmysqlに変更する @db.Timestampではなく@db.Timestamp(0)のように書かないとマ
javascriptでCognitoユーザプール認証 - Qiita
javascriptからCognitoのユーザプールで認証する方法を確認しました。 Amazon API GatewayのオーソライザーとしてCognito認証を指定することができますが、API Gatewayにアクセスする際にはCognito認証で取得したIDトークンが必要となります。 今回はIDトークンの取得とAPIへの与え方の確認になります。(qiita初投稿です） 0. 今回利用するサービスやモジュールたち Cognito (ユーザプール) node.js (javascript runtime) amazon-cognito-identity-js (Cognito javascript SDK) Axios (XHR library) 1. Cognito (ユーザプール) の設定 今回はユーザ・パスワードで認証させるだけなので、シンプルな構成でユーザプールを作成します。 ユー
Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた
Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回は、「Nintendo SwitchとWeb」という講演をされていた任天堂さんに、Switch開発におけるWeb技術の活用方法や、開発秘話を伺ってきました。任天堂のお二人は京都から、リモートでの取材に応じていただきました。 Nintendo SwitchではWeb技術が大活躍！ 白石 簡単に自己紹介をお願いで
AWS Lambda の Node.js で連続で外部APIを叩く作法 - ボクココ
ども、@kimihom です。 今回は AWS Lambda における Node.js のコードの書き方について。 実装したいこと 例えば、id を複数持った配列があるとして、その配列を 一個一個 HTTP リクエストで叩きたい、ということがあるだろう。id単位でしかリソースを削除できないような API があった場合などは必ずそんな場面に出くわす。 これを AWS Lambda で実装するには、どうすれば良いだろうか。ここに AWS Lambda の落とし穴が潜んでいる。何も考えずに書くとこんな感じになるだろう。 var request = require('request'); exports.handler = function(event, context) { var host = "https://api.awesomeapp.com"; var ids = [1,2,3,4];
サブドメインの異なるサイトでクッキーを共有する : まだプログラマーですが何か？
JavaScript にちょっとした工夫をすると、サブドメインの異なる２つのサイト（例えば www1.mydomain.com と www2.mydomain.com）でクッキーを共有することができる、らしい！ 例えばこんな感じです。まずは http://www1.mydomain.com/setCookie.html でクッキーをセットします： (setCookie.html) <html> <head> <script type="text/javascript"> function setMyCookie(username, password) { var s=setMyCookieWithDomain("username",username); document.cookie = s; var t=setMyCookieWithDomain("password",password)
ESLintをAtomに導入し、Reactの構文にも対応したAirbnbのJSスタイルガイドを使う
最近周りでよく「AirbnbのJavaScriptスタイルガイド」が良いという話を聞くようになりました。ということで、自分もAtomに導入してみたんですが、これがなかなかいい感じです。多くの開発者の意見を取り入れられて作られているスタイルガイドで、特にReactやES6の構文チェックなどにも対応しているので、とても良い書き方の勉強になっています。けっこうお勧めだと思ったので、今回はAtom限定の話となりますが、ESLintを使った導入方法を紹介したいと思います。 ESLintとはESLintは、2013年6月にNicholas C. Zakas氏によってオープンソースプロジェクトとして公開されたJavaScriptの構文チェックツールです。個別にルールをon/offできたり、独自のカスタムルールを設定できたり、公開されている様々なプラグインを組み込んで使うことができたりします。 ESLin
dataLayerへ値を渡す記述を.pushで統一する方法 | アユダンテ株式会社
ページ側（HTML側）からGoogleタグマネージャへ値を渡す方法として、メジャーなものとしてデータレイヤー変数があります。 しかし公式のヘルプを読んでみると、データレイヤー変数へ値を渡すための書式には「=を使った代入」式と「.pushを使った挿入」式の2種類が混在して取り上げられていたりして、しかも適切なタイミングで使い分けなければきちんとした値の受け渡しができないようです。 これはいささかわかりづらいので、どのタイミングでも使用できる記述について取り上げてみました。 データレイヤー変数とは 値の渡し方は「=」と「.push」の2種類 どんな場合でも「.push」で統一するための方法 ←本題 オマケ：iframe内から親frameのdataLayerへ.pushする方法 データレイヤー変数とは データレイヤー変数というのはGoogleタグマネージャ上で設定できる変数の1種類ですが、その内
npm|yarnで怒られたエラー集まとめ。WARN[deprecated,unmet dependency,peerDependencies,EPEERINVALID,engine]ERR![missing,invalid],throw er; // Unhandled 'error' eventの解決方法。(2023/12更新) - Qiita
npm|yarnで怒られたエラー集まとめ。 WARN[deprecated,unmet dependency,peerDependencies,EPEERINVALID]ERR![missing,invalid],throw er; // Unhandled 'error' event の解決方法 2023/12/3 最新のverに更新 2020/5/24 最新のverに更新 2019/10/12 エラーを追記 2019/10/4 「There appears to be trouble with your network connection」を追加 2019/9/16更新 node.jsの画像 2019/3/8更新 node.jsの画像 2018/11/24更新 ・killall node を追加 2018/11/13更新 ・ltsに関する画像を最新のものに修正 2018/6/15更新
![npm|yarnで怒られたエラー集まとめ。WARN[deprecated,unmet dependency,peerDependencies,EPEERINVALID,engine]ERR![missing,invalid],throw er; // Unhandled 'error' eventの解決方法。(2023/12更新) - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/3deb368c278b61ef894c8f67c44e740985a87d60/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9bnBtJTdDeWFybiVFMyU4MSVBNyVFNiU4MCU5MiVFMyU4MiU4OSVFMyU4MiU4QyVFMyU4MSU5RiVFMyU4MiVBOCVFMyU4MyVBOSVFMyU4MyVCQyVFOSU5QiU4NiVFMyU4MSVCRSVFMyU4MSVBOCVFMyU4MiU4MSVFMyU4MCU4MldBUk4lNUJkZXByZWNhdGVkJTJDdW5tZXQlMjBkZXBlbmRlbmN5JTJDcGVlckRlcGVuZGVuY2llcyUyQ0VQRUVSSU5WQUxJRCUyQ2VuZyVFMiU4MCVBNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9YTkxNWMyMDg2MTVhZDc1YzdhZDgyNWVkYzA0NTRjNjE%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBNLUlTTyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZDdmYWEyZjViNWRmODU3ZDUzYmY5ZDRiNzQyMDA0MTE%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D812f01f211993f356258bd5d1ba4cb51)
scriptタグはなんで通常bodyに書くのか。
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
ES6 チートシート | POSTD
日々の仕事の中で役に立つES2015（ES6）のティップス、コツ、ベストプラクティス、プログラムの見本をご紹介します。コントリビューション歓迎です！ 目次 var vs. let / const IIFEからブロックベースへ アロー関数 文字列 デストラクチャリング モジュール パラメータ クラス シンボル マップ WeakMaps Promises ジェネレータ Async/Await var vs. let / const var の他に、値を格納する let と const という識別子が新たに追加されました。 var とは異なって、 let と const はクロージャのスコープ内で最初に記述されることはありません。 var の使用例です。 var snack = 'Meow Mix'; function getFood(food) { if (food) { var snack
markerPen - Web上で使えるマーカーペン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイトのデザインで修正点を指摘したいと思った時にどうしていますか。テキストで書いても伝わりづらいです。そのため、印刷してペンで書き込んで渡しているでしょうか。または画像編集ソフトウェアや、PowerPointに貼り付けてドローしてくる人もいます。 そんな方々に使えそうなのがmarkerPenです。Web上で使えるマーカーペンを実現できるライブラリです。 markerPenの使い方 デモです。Webページ上にマウスで線が書けます。 クリアしたり、一部消すこともできます。 実際に使っている様子です。 デモでは再読み込みすれば消えてしまいますが、サーバにデータを残すようにしたり、WebSocketでリアルタイムにデータを共有するようにしたりすることで他の人のフィードバックを素早く得
Materia Designer - Web APIも設計できるWebアプリケーション開発環境
Webアプリケーションの多くはデータベースと組み合わせます。そしてサーバサイドでHTMLをレンダリングするのではなく、Web APIを使ってコンテンツを取得してJavaScriptで表示します。 そういった最近のよくある開発スタイルを簡単に使えるようにするのがMateria Designerです。 Materia Designerの使い方 ウィザードに沿ってアプリケーションのベースを作っていきます。 データベースを選択します。今はMySQLに対応していませんが近々対応するようです。 エンティティはテーブルです。 テーブルはビジュアル化されて表示されます。 複数のテーブルはカラムをドロップしてリレーションが作成できます。 次はURLを決めてWeb APIを作ります。 表示する情報を設定します。 さらにCRUDを指定して実行します。データのメンテナンスもMateria Designer上ででき
みんなで早押しクイズ - オンライン対戦クイズゲームアプリ
お問い合わせ 広告掲載・メディア紹介などのお問い合わせは、下記のメールアドレスまでお願いいたします。 tactsh(at)gmail.com
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
MILJS
Sushi2 JavaScript Library The Fastest Matrix Library for JavaScript, many improvements from Sushi related paper Masatoshi Hidaka, Ken Miura, Tatsuya Harada. Development of JavaScript-based deep learning platform and application to distributed training. ICLR 2017 Workshop. (Paper) Sukiyaki2 JavaScript Library JavaScript Machine Learning Library for Sushi, many improvements from Sukiyaki2 related pa
jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法｜BLACKFLAG
以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで、1ページ分（1コンテンツ分）を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが、自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。 【2014/08/05 追記】 各ブロック内での横スライド機能を追加しました。 まずは動作サンプルから。 下記のサンプル画面でマウスホイールスクロールもしくは画面右側のナビゲーションボタン等を使って画面（ページ）を切り替えてみてください。 「jQueryで1ページごとにスクロールして画面遷移させるU
タスクランナーgulp.js最速入門 - id:anatooのブログ
相変わらず仕事ではデザインやりつつJavaScript書いている。 タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。 ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。 この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。 導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu
Angular 1 と Angular 2 の連携：シームレスなアップグレードの方法について
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[archived] axiosを乗りこなす機能についての知見集 - Qiita![[archived] axiosを乗りこなす機能についての知見集 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/583ec1354ea8325181eb276736da3bb0366cb4bc/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-1150d8b18a7c15795b701a55ae908f94.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark%3Dhttps%253A%252F%252Fqiita-user-contents.imgix.net%252F~text%253Fixlib%253Drb-4.0.0%2526w%253D840%2526h%253D380%2526txt%253D%25255Barchived%25255D%252520axios%2525E3%252582%252592%2525E4%2525B9%252597%2525E3%252582%25258A%2525E3%252581%252593%2525E3%252581%2525AA%2525E3%252581%252599%2525E6%2525A9%25259F%2525E8%252583%2525BD%2525E3%252581%2525AB%2525E3%252581%2525A4%2525E3%252581%252584%2525E3%252581%2525A6%2525E3%252581%2525AE%2525E7%25259F%2525A5%2525E8%2525A6%25258B%2525E9%25259B%252586%2526txt-color%253D%252523333%2526txt-font%253DHiragino%252520Sans%252520W6%2526txt-size%253D54%2526txt-clip%253Dellipsis%2526txt-align%253Dcenter%25252Cmiddle%2526s%253D9fd6ce4b873b0d9b4303be66ddf96230%26mark-align%3Dcenter%252Cmiddle%26blend%3Dhttps%253A%252F%252Fqiita-user-contents.imgix.net%252F~text%253Fixlib%253Drb-4.0.0%2526w%253D840%2526h%253D500%2526txt%253D%252540terrierscript%2526txt-color%253D%252523333%2526txt-font%253DHiragino%252520Sans%252520W6%2526txt-size%253D45%2526txt-align%253Dright%25252Cbottom%2526s%253Ded893b7eabdaa75da91d28680de5bf50%26blend-align%3Dcenter%252Cmiddle%26blend-mode%3Dnormal%26s%3Dd9427075b852d6cdee41a35d51f55c6f)
フロントエンド技術勉強会 - 資料一覧 - connpass
