Vue.js＋Amplifyを駆使すればモダンなWebアプリを20分で公開できる - Qiita
SPA -> GraphQL -> Serverlessバックエンド Vue.jsとAmplifyを駆使して、1からモダンなフロントエンド開発＆サーバレスバックエンド構築をしてきます。今回は、Vue.jsで作成したSPAからAppSyncへGraphQLベースのリクエストを送り、裏のDynamoDBへデータの書き込みと読み込みまでを確認します。 （完成図） バックエンドのAWSリソースは、Amplify Frameworkを使用することで、コマンドラインから作成していきます。 また、Amplify Consoleを使用することで、CI/CDパイプラインも同時に作成し、GitHub上の最新断面がHTTPSでWebアプリとして公開するまでが本記事のゴールです。 登場人物 小さなアプリから大規模まで対応できる優れたフロントエンドフレームワークで、個人的にも多用しています。本記事はVue.jsのA
スナック「jQuery」 - Qiita
……あら、いらっしゃい。 若いお客さんなんて珍しいわねえ。昔は、この街一番の人気店でね、若いお客さんもたくさんいたんだけどさ。最近はめっきり減っちゃってね。 何飲む？ ……水割り？ わかったわ。 じゃあさ、ちょっとだけ、あたしの昔話に付き合ってもらってもいいかしら。 What is jQuery? この店――『jQuery』がオープンしたのって、2006年なんだけどさ。その頃の、この街の様子って覚えてる？ ……知らないか。あなた、まだ若いもんね。その頃って、そりゃあヒドイもんだったのよ。 その頃、シェア率トップだったブラウザって、もちろんInternet Explorerだったんだけど。当時はバージョン7が登場したばかりで、あの悪名高きIE6もまだまだ主流だったの。 他のブラウザは、Safariがバージョン3がMacとWindowsに公開されていた頃で、Firefoxはまだバージョン2.0
JavaScriptで重複排除を自分で実装してはいけない（Setを使う） - Qiita
若者とプログラミングをしていて非常にショックを受けたのだが「JavaScript 配列 重複 削除」で検索するとfilterとindexOfを使ったアルゴリズムが検索結果上位に出てくる。これはO(N^2)。計算量の概念がないというのはとても恐ろしい。Big Techがアルゴリズム偏重の試験を課すのは合理的だと確信した。 — 父🌒 (@fushiroyama) March 10, 2020 先日このようなツイートが流れてきたので、$O(N^2)$、つまり計算量が $N^2$ に比例するということの恐ろしさを簡単に書きます。 JavaScriptで配列から重複を排除するコード EcmaScript 2015から導入されたSetを使えばものすごく簡単に書けます。 const array1 = [1, 5, 3, 1, 5, 3]; const array2 = Array.from(new S
[JavaScript]初心者が初見で必ずthinking顔になるもの特集 - Qiita
初心者が見た瞬間になるもの特集です。 小テクだったり、省略記法だったり、、 実際私も出会ってになりました！ 追記 即時関数のところで説明にある 他には、+や-等でも動きます。 の"等"が気になった方に朗報です。こちらの記事で"等"を知ることができます！！ [JavaScript] "!function() {}()"以外の即時関数を紹介するぜ よろしければ覗いてみてください！ !! is 何 booleanへの型変換。 例 const obj = { hoge: "hoge" } function hasHoge() { return !!obj.hoge // => true } 論理否定（！）を二つ繋げて、boolean への型変換をしています。 !の結果を!で評価しているんですね〜。 JSON.parse(JSON.stringify(obj)) is 何 ディープコピー。 例
![[JavaScript]初心者が初見で必ずthinking顔になるもの特集 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7f41f8fc8f5c58150b8766676dfe5b1c5bfeb140/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCVFNSU4OCU5RCVFNSVCRiU4MyVFOCU4MCU4NSVFMyU4MSU4QyVFNSU4OCU5RCVFOCVBNiU4QiVFMyU4MSVBNyVFNSVCRiU4NSVFMyU4MSU5QXRoaW5raW5nJUU5JUExJTk0JUUzJTgxJUFCJUUzJTgxJUFBJUUzJTgyJThCJUUzJTgyJTgyJUUzJTgxJUFFJUU3JTg5JUI5JUU5JTlCJTg2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0zYmU5ODdjNjUyZjg2NDdkODA2NDVmN2QwNDI4NDhiNA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrb3p6enomdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWFhMTA4ZTQ0M2JiMmI1NTI2NDc2ZmQzNzI5YzQ0NDI3%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Da816bfb051a3a0d8f1e62c8fc6a915b0)
TL;DRの意味を勘違いして使っていたら顰蹙を買ったので気をつけて使おう！ - Qiita
TL;DRとは？ TL;DRは"Too Long, Didn't Read" 「長すぎるから読まないよ。」「要約です。」など記事や論文、プレゼンテーションなどで省略や引用を簡潔に説明する時にちょいちょい見かける表現です。(だと思っていました） 実用英語でもこういう表現が市民権を得て使われていると思って英会話で使ってみたところ顰蹙を買いました。 なにやらTL;DRには 「〜(笑)」 「本田△」 「~(以下略)」 のような煽りや小馬鹿にした意味合いも持っていることがあるということを教えてもらいました。 なので発言の仕方、かっちりしたフォーマルな場での多用はあまり避けた方がよさそうです。 ※ネットぽいというかNerdyな感じらしいです。 追記 2019/06/24 1人だけの意見を書いてしまったので数人の英語ネイティブ（非IT業界勤務)にもどういう風に見えるか、聞こえるのか聞いてみました。 ・T
4歳娘「パパ、具体的な名前をつけないで？」 - Qiita
↓新作もよろしくやで！ ジェネリクスをもう少しだけ使いこなす。 コロナウィルス対策でリモートワークしてみたらReduxやVuexのメリットが分かった 36歳ザコーダーの休日 ワイ「何やこのコード、全然動かへんやん」 ワイ「怖いな～怖いな～…なんか嫌だなあ～」 よめ太郎「（何で自分が書いたコード見て稲川淳二みたいに怯えとんねん・・・）」 よめ太郎「（そんな鳥肌立つようなクソコード書いてんのかいな・・・）」 娘（4歳）「ねぇ、パパ」 ワイ「なんや、娘ちゃん」 娘「ちょっと、作ってほしい関数があるの」 ワイ「またかいな」 ワイ「娘ちゃんはホンマに関数が大好きやなぁ」 ワイ「しゃあない、パパはプログラミング苦手やけど、頑張って作ったるわ」 娘「ありがとう、パパ」 今回の要件 ワイ「ほんで、今回はどんな関数を作ればええんや？」 娘「えっとね」 娘「'あ'という文字列を渡したら」 娘「['あ', 'あ
ディープラーニングで肉体変化のタイムラプスを劇的に見やすくした - Qiita
はじめに トレーニー（筋トレを愛している人）の多くが習慣化している「自撮り（肉体）」。トレーニング後にパンプした肉体を撮りためて、後で見返すのが至福のときですよね。さらに、撮りためた画像をタイムラプスのようにアニメーションで表示させたら、より筋肉の成長が手に取るようにわかりますよね！ この記事はディープラーニングを使って、肉体のタイムラプスを劇的に見やすくした話を書いています。 まずは結果から 2017/12～2020/3の体の変化 ※データサイズの都合上、画像をクロップ&圧縮しています。 目次 1.手作業での補正 1-1.そのまま表示 1-2.位置の固定 1-2-1.乳首おへそ座標付与ツール 1-2-2.動画作成 2.ディープラーニングを用いた自動補正 2-1.アノテーションデータ作成 2-2.学習 2-3.未知画像への適用 2-4.後処理 2-4-1.各ピクセルの出力値が閾値以下のもの
「たけのこの里」を「きのこの山」に『正しく』自動で修正して差し上げるプログラム - Qiita
はじめに ～素晴らしいお菓子の紹介と後発劣化品の存在～ みなさんご存知かと思いますが、「きのこの山」1という素晴らしいお菓子があります。株式会社明治様が1975年から製造・販売されているチョコレートスナック菓子です。きのこのような可愛らしいフォルムで、茎の部分がクラッカー、傘の部分がチョコレートになっています。 5年もの開発期間をかけてベストな組み合わせを試行錯誤されたとのことだけあって、持ちやすく機能的でありながら、たっぷりと使われたチョコと、程よい塩味とサクサク感のクラッカーが合わさり、至上の味わいを実現しています。このような素晴らしいお菓子を生み出してくださった明治様には本当に頭が上がりません。 一方で、その爆発的ヒットを受けて4年後に「たけのこの里」なる類似粗悪品が登場しました。こちらは開発期間が短いこともあってか、チョコは約30%減らされ、土台はボソボソと粉っぽく持ちづらいクッキ
ls よりも exa を使おう！モダンな Linux コマンド達を紹介 - Qiita
上記の画像を見ると分かる通り、カラフルで見やすいですね。右図のようにディレクトリのツリー表示にも対応しています。さらに --icons オプションを付けると、ファイルタイプに応じたアイコン表示も可能です。 bat 続いて cat コマンドの代替である bat の紹介です。 ファイルの拡張子に応じてソースコードを色付けして表示してくれます。また less のようなページャの機能も持っており、行数の長いファイルを渡すと自動でページャモードで開いてくれます。 hexyl hexyl はバイナリダンプコマンド od の代替コマンドです。bat の開発者と同じ方が開発しています。
高校生がアルゴリズムとスパコンの力で、京都の碁盤目状道路を13.9%効率化した話 - Qiita
2. 本研究で解く問題 「いざ研究しよう！」と思っても、条件や設定を決めないと何も始まりません。 まずは研究を分かりやすくするために、「一つの問題」に落とし込むことにしました。 問題設定 縦 $N$ 行・横 $N$ 列の大きさの碁盤の目があります。隣り合う交差点間の距離は 1 です。つまり、交差点が合計で $N^2$ 個あり、それぞれ座標 $(1, 1), (1, 2), ..., (1, N),$ $(2, 1), (2, 2), ..., (N, N-1), (N, N)$ に位置すると考えることもできます。 下の図は、$N = 4$ の場合の交差点の位置です。 あなたは、碁盤の目の交差点の位置は変えずに、道路の並びのみを変えることができます。上手く道路の並びを変えることで、できるだけ「便利」な道路網を建設してください。 「便利な道路網」って何？ 私は、以下の 2 つの条件を満たす道路
TypeScriptをプロダクト開発に使う上でのベストプラクティスと心得 - Qiita
同じTypeScriptという言語を利用する場合においても、トランスパイラによってTypeScript自体の機能制限がかかったり、思わぬトラブルを招く場合があります。それぞれのトランスパイラの特徴を踏まえた上で、それにより生じる問題も見ていきましょう。 1-1. tsc TypeScriptの開発元であるMicrosoft純正のTypeScriptトランスパイラです。TypeScriptを利用する際に typescript パッケージをインストールする必要がありますが、それに同梱されています。 公式ツールなだけあって最も早く最新バージョンのTypeScriptに対応したり、言語すべての機能を利用することができる一方で、バンドラではないためminifyやchunkの設定はできません。また、Path Aliasesの未解決や旧ESへの互換性が不完全であることが欠点として挙げられます。 tsco
Vue.jsで作成された、ちょっと面白くて役立ちそうなサービス - Qiita
こちらに移行しました。(2020/05/16) 概要 Vue.jsで作成されたプロジェクトを紹介しているサイト 「made with vue.js 」があります。 面白くて役立ちそうなツールやサービスをまとめてみました。 UIコンポーネント VueSocial ソーシャルサービスのボタンを作成するVueのコンポーネント CKEditor 5 リッチテキストエディタのコンポーネント Vue.Draggable ドラッグ&ドロップのコンポーネント Vuetable 2 データテーブルのコンポーネント。demo vuejs-datepicker vueのdatepicker Kalendar Vueのカレンダーコンポーネント Vue Apexcharts SVGベースのグラフ可視化コンポーネント Vue.js Google Charts VueのGoogle Charts vue-cart ショ
この TypeScript が Hello, world! のくせに慎重すぎる - Qiita
この記事は npm へ公開可能なパッケージを TypeScript で作成しながら、JS/TS 開発で良く使われるツールを紹介する記事です。 typescript-npm-starter という名前の Hello, world! パッケージを公開するという体で話を進めます。
【新規事業開発】知ってること全部まとめてみた - Qiita
はじめに 新規事業開発に役立つ記事のリストを友人や知人に共有することが多くなり、そのつどメールやチャットツールで送ることが面倒になってきたため、「まとめ記事」にしました。 これらはたくさんの方々から教えていただいて集まった情報のリストです。実際に会ってみた、行ってみたという情報も多いです。コピーしてご利用いただいても問題ありませんし、アフィリエイトもしていません。 ※追記 （１）Qiitaの記事以外は、リンクをクリックしたら自動的に新しいタブで開くようになっています。 （２）頻繁に新しい情報を教えていただいて追加しています。「これも追加してほしい」という情報があればお気軽にコメントください。 （３）Qiitaはプログラミング記事しかダメだと知らずにこの記事を作成しました。もしQiitaから注意されたら移動します。コミュニティガイドライン - Qiita:Support 目次 新規事業開発の
イラストで学ぶ Kubernetes - Qiita
こちらの記事は、Sudhakar Rayavaram 氏により2019年11月に公開された『 Know Kubernetes — Pictorially 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 私は最近、Kubernetesの内部をより深く理解するための探求を始めました。この記事は私が行った講演のブログ版です。 コンテナ Kubernetesを理解しようとする前に、少し時間を使って、コンテナが何であるか、そしてなぜそれらが人気であるのかを明確にしましょう。結局のところ、コンテナが何であるかを知らずにコンテナオーケストレータ（Kubernetes）について話しても意味がありません。:) 「コンテナ」とは…あなたが詰め込んだすべてのものを保持する容器です。当たり前ですね！ アプリケーションコード、依存ライブラリ、および、そのカーネルまでの依存関係などが含まれ
MySQL データベースの負荷対策/パフォーマンスチューニング備忘録 インデックスの基礎〜実践 - Qiita
TL;DR この記事に書いた事 二分探索木のお話(前提知識) MySQLのInnoDBで利用されているB+木インデックスの構造と特性 (前提知識) MySQLのClusteredIndex,SecondaryIndexについて(前提知識) カーディナリティについて(前提知識) 実際の負荷対策 検出編 スロークエリ 検出編 その他のクエリ割り出しいろいろ クエリ・インデックスの最適化 explainの使い方と詳細 ケース別実践 単純にインデックスがあたっていないケース カーディナリティが低いインデックスが使われているケース 部分的にしかインデックス/複合インデックスがあたっていないケース 複合インデックスの順序誤りでインデックスが適用できていないケース 複合インデックスの最初がrange検索のケース ソートにインデックスが適用できていないケース ソートにインデックスが適用できていないケース（
TOMCAT殺害事件 - Qiita
OOMKillerの殺意 顧客EC2のTomcatがアクセスの無い早朝にもかかわらずOOMKillerに突然殺されてしまったので、調査した顛末をたぶん同じような問題に直面されている方もおられるかと思いますので備忘録として記載します。 Javaヒープのチューニングにも多少役立つかと思います。 （この記事はJava8が対象となります。） OOMKillerとはOut of Memory時に、サーバ全体を守るためにメモリーを消費しているプロセスを停止するLinuxの標準機能です。 そのOOMKillerになんとTomcatが突然殺害されてしまいました。 問答無用の辻斬り状態です。 早朝ですのでアクセスログには何も記録されておらず、catalina.outには OpenJDK 64-Bit Server VM warning: Setting LargePageSizeInBytes has no
個人開発したアプリが大コケしてるので失敗要因を分析してみた - Qiita
本記事は 個人開発 Advent Calendar 2019 1２日目の記事です。 はじめに こんにちは！個人開発するSIerのaiiroと申します。 プログラミングを初めて１年ちょっとではありますが、３つアプリをリリースしまして 案の定、失敗してるなぁ・・・と感じているので、2019年の締めくくりとして失敗要因を分析したいと思います！ 自分のアプリ開発のセンスが無さすぎる、、、という恥を晒す形にはなりますが これから個人開発しようとしている人にとって、参考になれば嬉しいです！ 作ったアプリと失敗要因 （１）漫画レコメンドアプリ「ComiReco」 概要 プログラミング学習を始めるにあたって、まずは作りたいものを作ろうと思い、それなら漫画に関係するサービスにしたいなぁという思いからアイデアを検討しました。 その中で「みんなでレコメンドしあえる漫画SNS」があると面白いのでは？という発想から
さよなら本番サーバー - Qiita
とあるSESの現場では本番リリースの時期が近づいてきており、僕を含めた数人のエンジニアは間に合いそうもない残作業の開発を進めたり、本番で使うためのデータの整備を本番サーバー内で行ったりしていた。ほとんどがその案件のために集められたメンバーだったため特に和気あいあいとするでもなく、エアコンの風の音が響く小さなオフィスの片隅で静かに作業をしていた。 業務上のやりとりもRedmineで行われており、声を発するのもたまにメンバー同士で話をしたり、クライアントから電話がかかってきた時だけ。その日もメールで通知が届いてきており、確認してみるとRedmineで僕が関係しているチケットにコメントが届いているという通知だった。 通知のURLをクリックしてRedmineのチケットを確認してみる。 それによると一旦本番サーバー上に存在するデータの中の一部の主要データをCSV形式で送ってほしいという依頼だった。無
フロントエンドのコーディング課題６選-このフロントエンドの課題、実装できますか？ - Qiita
こちらの記事は、Indrek Lasn 氏により2019年 10月に公開された『 Here Are 6 Front-End Challenges to Code 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek フロントエンドの開発はストレスが多く難しい作業ですが、練習すれば技術をマスターすることができます。 自ら進んで鍛錬と努力をすれば、フロントエンド開発の場面で問題を解決することのエキスパートとなることができるでしょう。 優れたフロントエンド開発者になるために効果的な方法の１つは、単純にできるだけ多くの課題に取り組み、解決することです。 フロントエンド開発の達人になるために、今日から解き始めることができる6つの課題を紹介します。 ではさっそく、実装すべき６つの課題はこちら。 1. ク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
