Laravel 【Laravel/エラー】Class App\Http\Controllers\App\Controllers\UserController does not exist
エラー内容 Amazon Linux上で、Laravelプロジェクトを立ち上げる際にこんなエラーに遭遇しました。 Class App\Http\Controllers\App\Controllers\UserController does ...
開発
Laravel 
DB Amazon Linuxで、PostgreSQL12をインストールする方法
現時点で、Amazon LinuxでPostgreSQL12がまだサポートされていないようだったので、色々調べながらうまくいった方法を記録します。 まずはアップデート sudo yum update PostgreSQLのレポジトリを加える...
バックエンド 【Windows】LaravelをNGINXで起動する方法
LaravelプロジェクトをAWSにデプロイする際に、Laravelサーバーのままでは上手くいかないことを知り、まずはローカルでNGINXを利用して立ち上げてみました。 前提条件 既にLaravelプロジェクトをインストール済phpもインス...
制作物/つくってみた 自主制作Webアプリ解説「パンBOX – お気に入りのパン屋さんを見つける、つながる」
アプリ概要 ユーザーは福岡市内のパン屋を探したり、口コミ投稿やお気に入り保存ができます。また、店舗側は店舗情報充実や口コミへの返信ができるアプリです。 ユーザー側福岡市にあるパン屋を検索できるパン屋への口コミを点数付きで投稿・編集・削除でき...
エラー URIError: malformed URI sequenceに出会った時の解決方法
get通信でURLからパラメータを取得しようとした際に、あるページから飛ぶと「URIError: malformed URI sequence」というエラーが起こっていました。 やりたかったこと フロント側でURL内の文字列を取得し、必要箇...
HTML/CSS/Sass 【JavaScript/jQuery】モーダル内の外部リンクが飛べない
問題 モーダル内で、aタグにhrefを使用してリンク先を指定していたのですが、何をしても外部リンクに飛べませんでした。 解決策 いろいろ調べましたが、HTML部分でどうにかするのは難しいようだったので、ちょうど使っていたjQueryで実装し...
HTML/CSS/Sass 【Sass/Scss】mixinが読み込まれない！そんな時に確認すること5つ。
あれ？mixinなんで使えないの！ってなることありませんか？私もたまにあるのですが、その際に確認することを5つまとめました。だいたいはいずれかで解決します。 mixinファイルが先に読み込まれているか mixinを指定するファイルが、mix...
React 【React】map関数で作ったリストを並び替え・ソートする方法
map関数で作ったリストの並び替えに苦戦したので、解決方法を記載します。 やりたかったこと 親コンポーネントでstateに格納した配列を、子コンポーネントにPropsとして渡し、それを子コンポーネントで一覧表示にしていました。そして、それを...
JavaScript 【React × JavaScript or TypeScript】ページネーションをreact-paginateライブラリを使って実装してみた
使用したライブラリ react-paginateを使用しました。 Reactのnpmでインストール可能なページネーション系で、本日時点でpopularityが第2位のものです。1位のものよりこちらの方がスタイルの調整が効きそうな気がしたので...
HTML/CSS/Sass 【HTMLとCSS】オンオフ切り替えボタン（Googleっぽいやつ）
Googleっぽいオンオフ切り替えボタンが作りたくなったので、自分で実装してみました。コードも含めて紹介していきます。 ざっくり方針 inputのcheckboxタイプを使って実装します。CSSクラスの切り替えで操作することもできますが、B...
React 【TypeScript×React】childrenの受取を必須にしたい！もしくは拒否したい！
開発をするなかで、このコンポーネントにはchildrenが絶対必要って設定したい…！ってなるとき、たまにありませんか？ かなり簡潔ですが、以下のようにすればできます。 必ず受け取るとき ReactNodeを指定します。 import { R...
TypeScript 【TypeScript】？って何？Propsのオプションを指定する
初めてTypeScriptを使用した際、プロパティについている「？」ってなに？？？となっていたのですが、これを読めば解決します。 プロパティについている「？」とは？？ そのプロパティが、オプション（任意）であることを示しています！ 逆に、？...
React 【TypeScript×React】React.FCとは? その特徴
TypeScriptとReactで開発をしていると、必ずと言ってもいいほど使うのがReact.FCです。 最初に見たときは「なんぞや？」と思ったので、基本的な点を説明していきます。 React.FCとは？ 略さずに書くと、React：Fun...
基礎知識 ドライバとは？FTP・SFTPとは？
ファイル送受信する機能を実装しているときに、ピンとこなかった単語をまとめました。 ドライバ デバイス等を動かすために必要な部品。追加された機能や、拡張機能を使用するときに、それらと元々のOSやアプリケーションの橋渡しをしたりする。 FTP(...
React 【TypeScript×React】useReducerとuseContextを使ってログイン状態を管理する
SPAを制作しているときに、Reactの状態管理でログイン状態かログアウト状態かを取得したかったため、useReducertとuseContextで実装しました。 方針 ログイン状態を判断するstateをグローバルで管理するそのstateに...
基礎知識 interface（インターフェイス）とabstract（抽象クラス）の共通点と違い
interface（インターフェイス）とabstract（抽象クラス）の共通点 使用するメソッドやプロパティを事前にまとめておくもの。ただし、処理などは書かず、あくまで基本的な定義のみ指定する。 interface(インターフェイス)の特徴...
基礎知識 Override(オーバーライド)とOverload(オーバーロード)について
Override（オーバーライド）とは 子クラス（サブクラス）において、親クラス（スーパークラス）のメソッドを上書き・再定義すること。 子クラスは親クラスから派生しているので、親クラスのメソッド（関数）を使用することができ、既にあるメソッド...
JavaScript 【JavaScript】ホイスティング（巻き上げ）とは
ホイスティング（巻き上げ）とは 変数や関数の定義（宣言）をコード実行前にメモリに配置すること。 メリット 定義する前に呼び出しても、問題なく実行されます（例：関数の定義よりも、実行を先に書く）。以下のようなコードも実行可能です◎ findN...
React 【React】FontAwesomeの使い方（同じ名前のアイコンをインポートする場合もあり）
ReactでFontAwesomeを使いたいときのやり方です。 【事前準備】FontAwesomeをインストールする まず、以下のコマンドを実行してFontAwesomeをインストールします。 インストールするものは5種類ありますが、インス...
React 【TypeScript×React】React-Modalの使い方
Reactで簡単にモーダルが作れるライブラリのインストールと使い方の説明です。今までは自分で一からモーダルを作っていたのですが、今回はライブラリにあやかりました。 前提環境 TypeScriptとReactはインストール済。 インストール ...