ふんばりフロントエンジニアのブログ

新米フロントエンジニアの備忘録です。ふんばり温泉タオル欲しい...

【craco】create-react-appでsassの変数やらmixinやらをグローバルに定義する方法

React Nativeに続いて、久々にバニラなReactを触りました。以前はwebpackでチコチコ環境構築していたのですが、最近そういうのだるくなってきたのでcreate-react-appでいいかなと思いまして。「create-react-app」はreactを即動かせるテンプレートプロジェク…

ReactNative + Expoでプッシュ通知が来ない!なぜだ!!

ただの戒めです。サイレントマナーモード切りましょう。最近ReactNativeを触っているのですが、とりあえずアプリなのでプッシュ通知試してみようということで、下記の記事など参考に実装してみたわけです。qiita.comで、デバッガーで見る限りリクエスト自体…

cssが重複?!scssの@importの挙動に注意しよう

久々に2年前くらいの自分のコードを改修してます。フロントもバックエンドも両方、目も当てられない箇所が多々あったので、自分に対して「クソが...」と呟いてしまうこともありました。ただ、逆に成長したんだなあとも感じました。さて、タイトルの件ですが…

laravelからGoogleCloudStorageにno-cacheでオブジェクトを保存する【laravel-google-cloud-storage】

まず、laravel-google-cloud-storageを使う前提です。filesystemにGoogleCloudStorageのプロバイダを追加する形で実装しています。 下記の記事がとてもわかりやすかったです。 qiita.com で、タイトルの件ですが調べても公式に記載がなかったのですがissueか…

サブネットの重複?範囲内にしろ?VPCのサブネットの切り方についての備忘録

今回はAWSの中でもなんかとっつきにくいVPCの話です。私もネットワーク系弱いので、結構しんどいのですがなんだかんだ理解できたようなので備忘録として残します。VPCとかサブネットとかそもそも意味がわからん、という方は下記の記事がとてもよく理解できる…

Basic認証とssl通信がセットで無料デプロイできる、そうHerokuならね。

というわけで今更ながらHeroku使ってみたわけです。いつも静的サイトのテストURLとか発行する時とかはNetlifyをメインで使っていたのですが、今回はBasic認証かけとかないと怖いなーという案件だったんですね。で、Netlifyは有料プランしかBasic認証かけられ…

GSAPを久々に使ってみたらバージョン3になっていい感じになってた話

GSAPの記事は以前にも出していたのですが、それはバージョン3以前の話でした。久々にアニメーション案件があったので、せっかくだからバージョン3を触ってみよう、ということで触った所感と使い方を羅列します。まず、簡単に。 import { gsap } from 'gsap';…

LaravelでPostgreSQLでもコネクションプーリングする方法

最近めっちゃLaravel使ってます。で、Laravelのコネクションプーリングの話です。コネクションプーリングとは、DBとの接続を永続化させること。フレームワークによっては、これがデフォルトで永続化されているものもあるようですが、Laravelの場合はデフォル…

LaravelのJoinをクロージャで使った時に「Invalid text representation: 7 ERROR」が出た時

$query = $this ->from('tbl_reservation as tr') ->join('tbl_course as tc','tr.f_course_id', '=', 'tc.f_course_id') ->join('tbl_slot_course as tsc', function ($join) { $join ->on('tsc.f_reservation_slot_id', '=', 'trs.f_reservation_slot_id')…

iPadのブラウザデバッグはXcodeが便利だった話

久しぶりに最近、ブラウザデバッグをする機会がありました。で、問題となったのは「viewport」の部分。window幅がタブレットの領域(768-1024px)の場合は、viewportのwidthを固定して、PC版を表示させる処理を書いておりました。しかし、Safariの開発者ツール…

Dockerでwebサーバ立てて「アクセスできません」となったときに確認すること

Dockerを初めて触ったとき、よくChromeの「アクセスできません」的なエラーページ表示されますよね。もちろん「Docker apache アクセスできません」とかで検索しても出てこず、どこから調査したらいいのかわからない、という方に向けて書いていきます。webサ…

DynamoDBから取得したデータを正常にマッピングして整形する

最近AWSよく使っているのですが、データベースとしてDynamoDBを使うことが多いです。全てJavaScriptで完結できるのでありがたい面もあるのですが、若干めんどくさいことも多いです。その中の一つがDynamoDBの中にMapとして保存している場合です。例としては…

【Sourcetree】Basic認証でミスって間違ったユーザー名入れて永遠に認証できない時の対処法

Sourcetreeめっちゃ便利で使っているのですが、二段階認証の時のユーザー名の記憶制御によってちょっとハマりました。Basic認証とか二段階認証を求められるレポジトリを相手にするときにユーザー名とパスワードを求められると思います。この時大抵の方は「ユ…

踏み台サーバー経由してssh接続する

普通接続先は一つだけのことが多いですよね。ただIP制限かけられてたりするとサーバーを経由してssh接続しないといけません。丁寧にやると「sshで踏み台サーバーログイン→踏み台サーバーからssh接続」となるわけですが、ローカルマシンからコマンド一発で踏…

InteliJ IDEAでプロジェクトツリーの一部が見えなくなってしまったときの対処法

InteliJ IDEAを普段使いしているのですが、たまにタイトルの挙動のようになってしまうことがあります。対処法は下記です。1. 「cmd + ;」で「Project Preferences」を開く2. 「Add Content Root」で開きたいプロジェクトを選択 これで再びプロジェクトツリー…

reactstrapのModalコンポーネントでなぜかモーダルが表示されなかった時

今回React案件なのですが、その中でreactstrapのModalを使う機会が多くありました。例えばエラーモーダルとかローディングモーダルとかですね。その中でローディングモーダルがなぜか表示される時とされない時があってなんでだろ...って思っていたのですが意…

【JavaScript】reduceとmapの使い方とスプレッド構文

最近Twitterを開設したのですが、色々勉強になることが多くもっと早めに初めておけばよかったな…と後悔しております...と、そんな訳でTwitterで見かけたある事象に対して考えてみました。 const state = [ { id: 1, deleted: false}, { id: 2, deleted: fals…

react-scriptsでのenvファイル切り替えと思うように行かなかったconfig設定

現在Reactの案件を進行中です。具体的にはCoreUIというUIフレームワークを使って管理画面を作成しています。このCoreUIはcreate-react-appで作成されているので、ビルドにはreact-scriptsを使っているのですがreact-scripts(create-react-app)でenvファイル…

CognitoのライブラリはもうやめてAmplify使おうっていう話

最近Cognitoでユーザー認証して、各ユーザーグループに応じて叩けるAppSyncのクエリやらミューテーションやら変えたいな、という局面が出てきました。ちょっとCognitoでユーザー認証する流れが初めてだったので色々調べてたんですが、結構最近の記事でもCogi…

GraphQL+AppSyncで「currentObservable.query.getCurrentResult is not a function」と出た時の対処法

GraphQL使い始めてみたのですが、結構つまづいたのでメモ。GraphQLクライアントとして「Apollo」を使ってみたのですが、素直に使うとどうやらappsyncとはあまり相性がよくなさそう。 解決方法 「aws-appsync」を使わず、一からApollo Clientを作成する 詳細 …

ローカル画像から直接フォームのファイル(type=file)に画像情報を渡す方法

今回も小ネタです。 あんま必要とする人いないかもしれないですが、タイトルに際した状況に出くわしたのでメモ。 概要 画像プレビュー機能を実装する際には、「input(type=file)」のイベントをハンドリングして画像情報を引き出してプレビュー用の要素に画像…

browserSyncのproxyとは?自動リロードが効かないときは試してみよう

今回はちょっとした小ネタです。browserSyncってありますよね。あのローカルサーバーを簡単に立てられるやつです。その中でオプションで「proxy」というものがあるのですがその「proxyってなんだ?」というお話です。proxyと聞いてすぐに思い浮かぶのはプロ…

GoogleMapsAPIで地図を実装! 基本からカスタムパノラマの実装、パノラマ間の遷移までまとめ

以前初めてGoogleMapの実装案件があったので、備忘録的にメモ。今回の流れは下記の様な流れで進んでいきます。1. GoogleMapの簡単な表示例 2. ストリートビューの簡単な表示例 3. GoogleMapにマーカーを立てる・マーカーにイベントを設置 4. カスタムパノラ…

Javascriptの変数宣言でカギ括弧がついてるやつってなんなん?

変数宣言で見かける、という人はもしかしたら少ないかもしれませんがもっともよく目にするのはパッケージのImport文だと思います。 import {DynamoDB, S3 } from 'aws-sdk'; 的なやつですね。これ、es6の分割代入というものでして普通に変数宣言にも使えます…

Nuxt.jsで環境ごとにdotenvで.envファイルの読み込みを切り替える

なんかパッと解決できなかったので備忘録。Nuxt.jsではcreate-nuxt-appをするときに「dotenv使うかー?」的なこと聞かれてインストールする方も多いと思います。初めは一つの.envファイルに下記のように一つのファイルに設定してコメントアウトして切り替え…

slackの自作アプリで「not_in_channel」のエラーが出る場合の権限

slackのアプリを作って、Botユーザーに権限与えた時にちょっとハマったやつです。 やりたいこととしては、webAPIを使って チャンネル一覧取得 チャンネルに投稿 という二点だったので、権限としては「channels:read」と「chat:write」の二つを「Bot Token Sc…

JavaScriptでオブジェクトから値を検索し、ソートする方法

最近まで会員サイトの構築に追われておりましたが、無事リリースすることができひと段落できました。さて、今回はタイトルの通りJavaScriptのオブジェクト(連想配列)の値を検索してソートする方法についてご紹介していきたいと思います。基本的なところだ…

Nuxt.jsのビルドについてまとめてみた デプロイに際して最適な方法は?

最近仕事でオーディションサイトを「Serverless+Nuxt.js」で作っているのですが、今回は初めてイケてると話題のNuxt.jsを業務で取り入れてみました。 右も左も分からなかったのですが、学習&実務で学習したことをお話ししていこうと思います。 今回お話しす…

JavaScriptでオブジェクトのvalueでソートする方法

めっちゃ久々になりました... お仕事落ち着いてきたので再開しようと思います笑 今回は「単純に見えてやってみると意外と難しい!」と友人から質問を受けたオブジェクトのソートです。 今回のソート条件としては単純で、下記のようなオブジェクトのvalueでソ…

LaravelでFactoryとSeederを使ってダミーデータを追加する簡単な例

タイトルの通りです。備忘録的に簡単なFactoryとSeederを使用したダミーデータの追加例を残しておきます。 FactoryとSeederとは Factoryは追加するダミーデータの型みたいなものを定義するところです。 その名の通り、人形焼の鋳型を生産する工場的なものだ…