tapitapi’s blog

1日1杯タピオカ!エンジニア

【AWS】NoSQL Workbench for DynamoDB

最近AWSのDynamoDBを使用するようになったのですが、テーブルの状態を確認できるGUI:NoSQL Workbenchが便利だったので紹介します(PostgressのPosticoみたいなやつ) 前提として、AWS CLIがローカルにインストールされ、AWSコマンドが実行できる設定が完了…

【AWS】API Gateway SDK組み込み方法

最近、API Gateway とLambdaを使用して、APIを実装しています。 ここで作成したAPIを簡単に使用できるSDKを組み込む方法を紹介します。 目次 1. SDKのダウンロード 2. ダウンロードしたSDKを配置 3. ダウンロードしたSDKを配置(wordpressの場合) 1. SDKのダ…

【Nuxt.js】フォルダの使い分け

Nust.jsのフォルダ/ファイル構造についてまとめ ルートフォルダ └ .nuxt └ dist └ assets └ components └ layouts └ middleware └ pages └ plugins └ static └ favicon.ico └ store └ package-lock.json └ package.json └ nuxt.config.js .nuxtVue.jsのビル…

【Nuxt.js】 ローカル環境構築(mac)

目次 1. Vue CLIインストール 2. 新しくプロジェクトを作る場合 3. Nuxt.jsのプロジェクトをcloneする場合 1. Vue CLIインストール npm install -g @vue/cli 2. 新しくプロジェクトを作る場合 *新しくプロジェクトを作る npx create-nuxt-app <project name> ※大文字をプロ</project>…

VScodeで.mdファイルをプレビュー

VScodeで、markdownファイル(.md)をプレビューする方法を紹介します。 markdownファイルについては下記がわかりやすかったので、記載させていただきます^^ www.asobou.co.jp 1. VScodeを開きます 2. 左下の歯車マークをクリックし、「Command Palette」を…

【AWS CLI】S3 sync コマンド: フォルダには効かない

$ aws s3 sync <source> <target> [--options] 上記で、<source>のファイル&フォルダを、S3バケットの<target>に同期します。 $ aws s3 sync <source> <target> --delete 上記のように--deleteオプションをつけると、 <source>に無いファイルは<target>から削除してくれるのですが、 フォルダには効かないことが分かりました</target></source></target></source></target></source></target></source>…

【Vue.js】Axiosを使ってみる

VueでAxios(Ajaxを簡単に使えるライブラリ)を使ってみたので、紹介 作ったアプリ:「New Cat」ボタンを押すたびに猫の画像が変化する ↓ボタンクリックすると猫が変わる コードは下記に置きましたので、参考になれば。 github.com 1. コンソールでアプリ作…

【Nuxt.js】metaタグにhttp-equivを設定する

Nuxtを使ってmetaタグにhttp-equivを設定する時、ハマったので備忘録 nuxt.config.jsに head: { title: process.env.npm_package_name || '', meta: [ { charset: 'utf-8' }, { http-equiv: 'X-UA-Compatible', content: 'IE=edge' }, { name: 'viewport', c…

【AWS CloudFront】URLクエリを許可する

CloudFrontでシステム構築の際、URLクエリ(http://example.com/blogs?id=1131 などの?id=1131の部分)を使用するシステムが上手く動かないぞ??ローカルでは上手くいってるのに、、、 -> CloudFrontの設定でURLクエリを許可する必要があることが分かったの…

【Nuxt.js】window undefined

Nuxt.jsでwindowオブジェクトやdocumentオブジェクトを使用した時、 (window.alert('hello,world');など) window undefined エラーが出たので対処法を紹介します 公式リファレンス ja.nuxtjs.org 下記のように、if (process.client) で囲めばOK if (proces…

【npm】package.jsonでコマンド登録

npmについて調べていたら、package.jsonでコマンドを登録できることが分かったので紹介します npmについて参考にさせていただいた記事はこちら qiita.com 1.コマンドを一つ登録 package.jsonのscriptsの部分に、下記のように記載 "scripts": { "test": "pyth…

【Nuxt.js】Vue.jsでSSR

以前Vue.jsでプレレンダリングの方法を紹介したので、今回はNuxt.jsを使って、Vue.jsでSSRを簡単に実現する方法を紹介します。 Vue.jsでプレレンダリングの記事はこちら tapitapi.hatenadiary.com サーバサイドレンダリング公式リファレンス ssr.vuejs.org N…

【vue.js】input フォームの書き方

フォームの書き方の備忘録 submit ボタンを押したら、確認のテキストが表示されるようにする例 submitボタン押す前 submitボタン押した後 src/App.vue <template> <div id="app"> //普通のテキストボックス <p> <span>Message is: </span><br> <input v-model="message" placeholder="edit me"> </p> //テキストエリア <p> <span>Long Message is: </span><br> </p></div></template>

【vue.js】Vue CLIを使ってVue.jsの導入

ローカル環境でvueを使ってみたので備忘録 準備:下記にしたがってローカル環境作成 reffect.co.jp 要約 #Vue CLIインストール (Vue.jsアプリ作成のため)npm install -g @vue/cli #Vue.jsアプリ作成 [app-name]を任意のアプリ名にする。設定はすべてデフォル…

【vue.js】Vue RouterでURLパラメータ(query) 使用

Vue を使っていて、URLパラメータ(http://example.com/?X=Y の?X=Yの部分)を使用する方法を紹介します vue Router導入については下記が参考になれば。 tapitapi.hatenadiary.com ?username=yamadaと?usename=suzukiいうパラメータを渡す例 src/router.js i…

【vue.js】Vue Routerでプレレンダリング

Vue Routerを使って、ルーティングを管理するようになって、問題が発生! それは、ルート以外のページで、ブラウザをリロードしたり、URLを直打ちしてアクセスした場合、404(ページが見つかりません)エラーが出てしまうこと。 これは、vue.jsで作成したア…

Vocabulary on the move! 移動の表現

移動の表現まとめ On the move: travelling from place to place, busy or active all the time ex1: We're going to be on the move all next week, but we'll call you when we get home. ex2: He’s always on the move and never has time to talk. Emigr…

【AWS S3】リダイレクト設定

S3でリダイレクトの設定をする方法 備忘録 下記の設定を完了済みで、S3にデプロイしたファイルにアクセスできる前提で、進めます docs.aws.amazon.com 上記STEP1の 8. (オプション) 高度なリダイレクトツールを指定する場合は、[Edit redirection rules] ボ…

【Ruby】Minitest, test-unit, RSpec の違い

Rubyのテストを自動化したいな、と思い、下記3種類のテスティングフレームワークを使ってみたので紹介 *Minitest *test-unit *RSpec テストに使うfizz_buzzメソッド (3の倍数で"Fizz", 5の倍数で"Buzz", 15の倍数で"Fizz Buzz", それ以外は引数で与え…

【python】subprocess run option

PythonでOSコマンド(lsやcdなど)を実行したくてsubprocess.run を使ったので、引数のまとめ 公式リファレンス(subprocess.run) https://docs.python.org/ja/3/library/subprocess.html#subprocess.run 使い方の例 (filepath にcd コマンドで移動後、コン…

【python】 YAMLLoadWarning: calling yaml.load() without Loader=... is deprecated エラー

pythonでyamlを使っていたところ、 YAMLLoadWarning: calling yaml.load() without Loader=... is deprecated という警告が出ました。 下記のようにLoaderオプションを指定しないと警告がでる(非奨励)っぽい(2006年~load関数は安全性に問題があったようで…

【vue.js】Vue Routerを使ってみた

vue.jsでルーティングが簡単に実装できるVue Routerを使ってみたので備忘録 vue.js は通常、画面遷移の際にURLがhttps://XXX.ne.jp/#page2のように、#がついてしまいます。 ですが、Vue Routerを使うことで、https://XXX.ne.jp/page2のように、# がつかないU…

【Vue.js】/usr/local/bin/npm: No such file or directory エラー

Vue.jsをローカルで動かす時に /usr/local/bin/npm: No such file or directory というエラーが出たので解決方法を備忘録 下記にしたがってローカル環境作成 reffect.co.jp 要約 #Vue CLIインストール (Vue.jsアプリ作成のため)npm install -g @vue/cli #Vue…

【AWS CLI】ローカルからS3にファイルを送信

ローカルでコマンドを打って、ファイルをS3にアップロードする方法。 *AWS CLIのインストール(Mac環境) curlコマンドで、AWS CLIのパッケージをローカルにダウンロード curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg" インストール…

【Ruby on Rails】simple form date型input書き方

railsで誕生日などdate型のinputを書く際に詰まったのでメモ (gem simple form を使用しています) = simple_form_for(@user, html: { class: 'form-horizontal', autocomplete: "off" }, wrapper: :horizontal_form) do |f| = f.input :bday, as: :date, s…

【Ruby】Block, Proc, Lambdaの違い

BlockもProcもLambda も同じようなことができるけど、違いは? と疑問に思ったので、下記を参考にまとめ。(英語の勉強も兼ねて、、、今回の記事ではわかりやすさのため、多少意訳して紹介します) blog.awaxman.com Block、Proc、Lambdaの使い方の例は下記…

【Ruby】ブロックをメソッドに渡す

ブロックをメソッドに渡して実行する方法まとめ(備忘録) 【目次】 1.ブロックを渡してyieldで実行 -1.1 引数1つ -1.2 引数複数 2.ブロックを渡してcallで実行 -2.1 引数1つ -2.2 引数複数 3.Procをブロックとして渡して実行(yieldでもcallでも可能) -3.1 …

【python3 unittest】結果を比較!Assert Methods

Unittest で、比較した結果によってテストをNGにしたり、OKにしたりしたいな、、、 と思い、Assert Methodsを使ったので、使い方まとめ。 ついでにPythonの文法も勉強ーーー! 公式Docs: docs.python.org メソッド 確認事項 初出 assertEqual(a, b) a == b …

【python3 unittest】テスト結果をログ出力!TextTestRunner

unittestでテスト結果をログに出したくて、TextTestRunnerを使う際、TextTestRunnerに渡すパラメータのまとめ ログを出す時のコードはこんな感じ # unittest のメイン if __name__ == '__main__': # logのパス指定(logsディレクトリは事前に作っておきまし…

【python3】List とTupleの違い

Pythonを使用していて、List とTupleの違いって???使い分けは??? どっちも他の言語でいうところの配列だよね。。。 と疑問に思ったので、下記を参考にしてまとめました realpython.com *Listの特徴 見た目はこんな感じ ['foo', 'bar', 'baz', 'qux'] …