TypescriptをGoに変換して覚えてみる

はじめに こんにちわ!こんばんわ!ご観覧ありがとうございます。 Golangに興味があるので、普段使っているTypescriptで行う処理をどのように描くことができるのか、覚えるために記録してみます。 Golangとは Golang、またはGoはGoogleが開発した静的型付け…

AppRouterとSuspenseについて

はじめに こんにちわ!こんばんわ!ご観覧ありがとうございます。 定期的に雑色な記事を投稿します。(タイトルは記事のメインの内容にしてますが) 基本的には抱えている問題を改善し、改善方法を記事にしてアップしようと考えています。 AppRouterとSuspense…

Nextjs AppRouter個人的気になる点をまとめる

はじめに こんにちわ!こんばんわ!ご観覧ありがとうございます。 定期的に雑色な記事を投稿します。(タイトルは記事のメインの内容にしてますが) 基本的には抱えている問題を改善し、改善方法を記事にしてアップしようと考えています。 今回の内容 AppRoute…

パフォーマンス無関心で作ったサイトのパフォーマンスチューニング番外編 Nextjs AppRouter(色々試す2)

はじめに こんにちわ!こんばんわ!ご観覧ありがとうございます。 定期的に雑色な記事を投稿します。(タイトルは記事のメインの内容にしてますが) 基本的には抱えている問題を改善し、改善方法を記事にしてアップしようと考えています。 お題と経緯 Nextjsの…

パフォーマンス無関心で作ったサイトのパフォーマンスチューニング番外編 Nextjs AppRouter(色々試す)

はじめに こんにちわ!こんばんわ!ご観覧ありがとうございます。 定期的に雑色な記事を投稿します。(タイトルは記事のメインの内容にしてますが) 基本的には抱えている問題を改善し、改善方法を記事にしてアップしようと考えています。 お題と経緯 Nextjsの…

パフォーマンス無関心で作ったサイトのパフォーマンスチューニング番外編 Nextjs AppRouter(fetch)

はじめに こんにちわ!こんばんわ!ご観覧ありがとうございます。 定期的に雑色な記事を投稿します。(タイトルは記事のメインの内容にしてますが) 基本的には抱えている問題を改善し、改善方法を記事にしてアップしようと考えています。 お題と経緯 Nextjsの…

パフォーマンス無関心で作ったサイトのパフォーマンスチューニング番外編 Nextjs AppRouter

はじめに こんにちわ!こんばんわ!ご観覧ありがとうございます。 定期的に雑色な記事を投稿します。(タイトルは記事のメインの内容にしてますが) 基本的には抱えている問題を改善し、改善方法を記事にしてアップしようと考えています。 お題と経緯 Nextjsの…

パフォーマンス無関心で作ったサイトのパフォーマンスチューニング④ 画像のアップロード圧縮

はじめに こんにちわ!こんばんわ!ご観覧ありがとうございます。 定期的に雑色な記事を投稿します。(タイトルは記事のメインの内容にしてますが) 基本的には抱えている問題を改善し、改善方法を記事にしてアップしようと考えています。 お題と経緯 静的サイ…

Firebase v8 から v9 への Firestore クエリのアップデート

はじめに こんにちわ!こんばんわ!ご観覧ありがとうございます。 定期的に雑色な記事を投稿します。(タイトルは記事のメインの内容にしてますが) 基本的には抱えている問題を改善し、改善方法を記事にしてアップしようと考えています。 お題と経緯 Firebase…

パフォーマンス無関心で作ったサイトのパフォーマンスチューニング③ FirebaseでNextjsをhosting(ImageタグとSSG併用難しい)

はじめに こんにちわ!こんばんわ!ご観覧ありがとうございます。 定期的に雑色な記事を投稿します。(タイトルは記事のメインの内容にしてますが) 基本的には抱えている問題を改善し、改善方法を記事にしてアップしようと考えています。 お題と経緯 作成した…

パフォーマンス無関心で作ったサイトのパフォーマンスチューニング② NextjsのImageタグが便利

はじめに こんにちわ!こんばんわ!ご観覧ありがとうございます。 定期的に雑色な記事を投稿します。(タイトルは記事のメインの内容にしてますが) 基本的には抱えている問題を改善し、改善方法を記事にしてアップしようと考えています。 お題と経緯 作成した…

パフォーマンス無関心で作ったサイトのパフォーマンスチューニング①

はじめに こんにちわ!こんばんわ!ご観覧ありがとうございます。 定期的に雑色な記事を投稿します。(タイトルは記事のメインの内容にしてますが) 基本的には抱えている問題を改善し、改善方法を記事にしてアップしようと考えています。 お題と経緯 作成した…

Docker Hubへのpushとpull(メモ)

Docker Hubへのpushとpull push,pullとは push・・・Docker Hubへ作成したイメージをアップロードすること。 pull・・・Docker Hubからイメージをダウンロードすること。 Docker Hubの登録 DockerHub ここでアカウント作成 - DockerID - Email - Password 認証メー…

Docker ビルドについて(メモ)

Dockerイメージをビルドする Dockerfile Dockerイメージを作成するための指示書となる設定ファイル。 デフォルトでDockerfileという名前のファイルがイメージのビルドに使用される。 別名のDockerfileを使用することも可能。 Dockerビルドをした場合、Docker…

Dockerイメージについて(メモ)

Dockerイメージとは Dockerイメージ コンテナ実行に必要なファイルをまとめたファイルシステム AUFSなどの特殊なファイルシステムが使用される AUFSとはストレージドライバーでHDなどにストレージのデータを書き込むためのソフトウェアのこと。 Dockerで使用…

Docker動作確認(Docker Desktop)

Dockerの動作確認 動作確認前に必要なもの Docker Desktopのインストール ターミナル コマンド $ docker run hello-world Unable to find image 'hello-world:latest' locally latest: Pulling from library/hello-world 2db29710123e: Pull complete Digest…

Docker入門メモ

Dockerとは コンテナ型仮想環境を作成、実行、管理するためのプラットフォーム Dockerのソフトウェアを使い、素早くコンテナを起動して様々なアプリを実行することができる 異なる設定環境のPCでも簡単に同じ仮想環境を再現できる DockerはGo言語で書かれて…

npm ERR! ERESOLVE unable to resolve dependency treeの対処方法

npm ERR! ERESOLVE unable to resolve dependency treeの対処方法 SPAのブラウザバックのscroll復活をしたく、ためにしにreact-scroll-restorationを導入しようとしたらタイトルのエラーがでました。 react-scroll-restoration 結論 -save --legacy-peer-dep…

PostgreSQL導入で躓いた

postgresを導入して起動したかったけどできなかった 備忘録として残してます。 macなのでbrewでインストール $ brew install postgresql 文字コードをUTF-8でデータベースの初期化 $ initdb /usr/local/var/postgres --encoding=UTF-8 --locale=ja_JP.UTF-8 …

FirebaseとReactでページネーション

はじめに 受注のあったアプリをFirebase+React+Typescriptで開発中です。 ページネーションと書きましたが、実際は次へと前へのボタン二つで実装です。 (※そして少々回りくどいかもしれません!!申し訳ありません!!) Firebaseのクエリでは本物ページネー…

【Rails】アクセス数をカウントしたかったので、impressionistを導入

初めに ブログを作成していたので、記事にアクセスした回数を確認したく、探してみたところimpressionistというgemを発見。 少しつまづいたのと、まだ仮実装ですが、見返せるように投稿しておきます。 開発環境 バージョン Ruby 2.5.1 Rails 5.2.3 impressio…

【Vue.js】いいねボタン作ってみる(練習)

はじめに Vue.jsの練習で作ったいいねボタンを、覚えるがてら書き残します。 完成形 HTML <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Component</title> </meta></meta></meta></head></html>

【Vue.js】e.preventDefaultの書き方

Vue.jsで簡単にかけるってことがわかったので、備忘録です。 $("要素").on("イベント",function(e){ e.preventDefault(); }); 使いまくりですよね。 e.preventDefault();が不明な方は、簡単に言うとイベント発生を、意図的に阻止とか妨害したりするものです…

【Vue.js】v-forディレクティブ

はじめに v-forがなぜ機能するか、初見でよくわからなかった。 理由としては <ul id="example-1"> <li v-for="item in items" :key="item.message"> # ↑のclassかのように書かれてるのが個人的に癖がありすぎた。 {{ item.message }} </li> </ul> 勉強不足だとは思うが、" "に囲われる文でマッチさせるという発想がなかったです。 噛み砕…

【Vue.js】始めます。

初めに つい最近、Vue.jsを勉強するよう勧められたので、覚えたものをアウトプットするという名目でブログに投稿して行きます。 結構噛み砕いて書きます。笑 Vue.jsとは ご存知かと思いますが、JavaScriptのフレームワークです。 ページ遷移をしない、SPA(S…

CarrierWave+MiniMagickでリサイズ

開発環境 バージョン Ruby 2.5.1 Rails 5.2.3 MiniMagick 4.10.1 CarrierWave 2.1.0 主なメソッド ・resize_to_fit ・resize_to_limit ・resize_to_fill resize_to_fit 画像の縦と横を維持して比率をリサイズしてくれます。 image_uploader.rb(タイトルとし…

BetterTouchToolとPopClipの紹介(mac)

どうも〜 webアプリ開発中便利だなと思ったツールの紹介です! と言っても、知り合いの方からオススメされて、いいなと思ったところが正直な話ですが笑 生産性あがること間違いなしなので、導入されていない方は是非検討してください! ※有料アプリになりま…

Bootstrapを部分的に効かせる

どうも〜 いきなりですが、個人アプリ開発中にBootstrapを導入することになりました。 途中からの導入なので、どうしてもCSSが崩れちゃいます。 そんな時にいい方法を残してくれてる方がいました。 特定のdiv要素の中だけBootstrapを適用する - Qiita 自分な…

Deviseのカラム追加について

どうも〜 個人で作成しているアプリで、Deviseを設けてカラム追加をしたので、やり方を載せておきます。 はじめに Rubyでログイン認証管理を簡単に実装してくれるgemのDeviseですが、シンプルに実装するとDBに入力できるカラムは、emailとpasswordぐらいです…

画像登録前のプレビューのやり方 画像比率

どうも〜 画像を登録する必要のある、もしくはできるアプリであれば、登録する画像のプレビューが付き物ですよね。 1作前の個人アプリでもプレビュー機能は作ったのですが、画像によってプレビュー時に縦に伸びたり、横に伸びたりとなってしまってました。 …