Yanonoblog!

こつこつと

2023-04-01から1ヶ月間の記事一覧

Next.js - Vercelでデプロイしてみる

背景 Next.jsアプリケーションのデプロイ Vercel デプロイ手順 Vercelのトップにアクセス GitHubのリポジトリを指定してアプリの連携を行う 設定画面からDeployを実行 上記画面の設定欄について デプロイ完了 アクセスしてみる リモートのmainブランチにpush…

Next.js - SWR

背景 SWRとは SWRを利用する 使用方法 修正前 - useEffect 修正後 - useSWR useSWRの返り値は複数のオブジェクトのため代入は分割代入で行う useSWR とuseEffect の使い分け useEffect は、副作用を伴う一般的な処理 useSWRはAPIを取得する関数の監視を行う …

Next.js - API Routes

背景 API Routes apiディレクトリ yarn create next-app した際のサンプルAPIを使用してみる クエリーパラメータに応じたAPIを返す例 セレクトボックスの値にに応じたAPIを返す例 続く… コメント プログラミングスクールのご紹介 (卒業生より) 参考 背景 実…

Next.js - ダイナミックルーティング

背景 ダイナミックルーティング 静的パスのルーティング 静的パスでは動的パスに対応できない ダイナミックルーティング 使用してみる routerオブジェクト router.(push / repace / reload) - ページ遷移の制御 router.isReady - 初期化の完了確認 動的パス…

Next.js - ルーティング / ページ遷移の基本

背景 Next.jsにおけるルーティング pagesディレクトリの活用 componentsディレクトリの活用 コンポーネント化 ページ遷移するリンク Linkコンポーネント コード 画面 続く… コメント プログラミングスクールのご紹介 (卒業生より) 参考 背景 実務ではReactを…

Next.jsでのSSGの挙動を確認してまとめてみる

背景 SSG - 静的ページをサーバーから返す getStaticProps関数 構文 getServerSideProps関数と異なる点 動的ページを返すか静的ページを返すか getStaticPropsではアクセス情報は得られない getStaticPropsはリロードすると再実行されるわけではない SSR/SSG…

Next.jsのcontextについて

背景 Context contextとは contextオブジェクトの中身を見てみる IncomingMessageクラス contextの活用方法 パスに応じたコンポーネントの動的切り替え 続く… コメント プログラミングスクールのご紹介 (卒業生より) 参考 背景 実務ではReactを使っているの…

Next.jsでSSRの挙動を確認してまとめてみる

背景 プリレンダリング リアルタイム更新されないものは静的ページへ フレームワークごとの特徴 サーバー側から必要な情報を取得する関数 - Next.js getServerSideProps関数 - リクエストごとにSSRを行う getStaticProps関数 - プリレンダリングの実行タイミ…

Nextの初期構成についてまとめてみた

背景 script npm run dev - 開発環境用のサーバー起動 npm run build - 本番環境用にビルドする npm run start - 本番環境用にビルドする 開発環境で使用するのはnpm run devのみ pagesディレクトリ src/pages/_app.tsx - 初期化処理 src/pages/_app.tsx - …

Next.jsの概要 & 構築

背景 ReactとNext.jsの違い React Next.js 特定のWebページにだけ導入することは出来ない Next.jsの特徴 SSR/SSGに対応している SSR(Server Side Rendering) SSG(Static Site Generation) ファイルによるルーティング Next.jsを使ってみる 続く… コメン…

Railsにおいてmigrationはリバーシブルに設計するべき

背景 概要 change_tableメソッド rubocopの指摘 問題点: 現状のやり方だとロールバックができない 確認 解説 解決 おまけ upメソッドとdownメソッド remove_columnとt.removeの違い おわりに コメント プログラミングスクールのご紹介 (卒業生より) 参考 背…

Railsにおけるdigメソッドの活用方法

背景 digメソッド digメソッドとは digメソッドの利点 - キーが存在しない場合に例外が発生せずnilを返す 少し複雑になりがちなケースにも対応出来た eachを書く際にも使える おわりに コメント プログラミングスクールのご紹介 (卒業生より) 参考 背景 発生…

Railsメモ - CoC, DRY, REST, bin/, lib/ など

はじめに Railsのメリット・思想 CoC (Convention over Configuration) DRY (Don't Repeat Yourself) REST(Representational State Transfer) binディレクトリ bundle execとは bundle execをつける場合 bundle execをつけない場合: libディレクトリ 続く…

シェルスクリプトの構文や活用例を深ぼる

はじめに シェルスクリプトで日記の作成、ディレクトリ管理 スクリプトの概要 スクリプトの実行ファイル 補足 - dateコマンド 補足 - if文 指定したパス配下のファイル一覧を表示するシェルスクリプト 補足 - local変数 補足 - パラメータ展開 続く… コメン…

シェルスクリプトの基本 - 改行、引数、変数、条件式など

はじめに シェルスクリプトの行 コマンドの途中で改行を行う場合は\を使う Dockerfile シェル変数 シェル変数の活用方法 シェル変数を使ってみる 変数定義の注意点 - 「代入時には$はつけない」 変数定義の注意点 - 「=の前後にはスペースを入れない」 変数…

シェルスクリプトの概要と使い方まとめてみた & 作ってみた

はじめに シェルスクリプトとは シェルスクリプトの活用方法 シェルスクリプトの種類 シェルスクリプト作ってみた #!/bin/bash - Bashシェルを指定 シェルの実行 chmod +x 権限を付与 シェルスクリプトの実行形式 シバン(シェバン) sourceコマンド - ファ…

ファイルのテキスト処理に関するコマンドについてまとめてみた

はじめに wcコマンド - 行数・単語数・バイト数を表示する Railsで使うケース sortコマンド - 行を並び替える sortコマンド - オプション uniqコマンド - 重複行を取り除く 少し応用 tailコマンド - 末尾部分を取り出す -n オプション - 末尾の行数指定 (num…

Linuxの標準入出力の概要とRubyの例も交えてまとめてみた

はじめに 標準入力 / 標準出力 / 標準エラー出力 標準入力 標準出力 標準エラー出力 要約 リダイレクト 実用例: DumpファイルをCLIから投入する ローカルに保存したデータをMySQLに投入する MySQLのデータをローカルに落とす パイプライン パイプラインの活…

プロセスとジョブについてまとめてみる

はじめに プロセスとは ディスク メモリ プロセスとメモリの関連性 psコマンド - プロセスの表示 すべてのプロセスの表示 ps axコマンド - システムで動作しているプロセスすべてを表示する よく使われるオプション ジョブとは バックグラウンドジョブとフォ…

ファイルの各権限の見方・操作・sudoについて

はじめに ファイルのオーナーとグループ ファイルのオーナー(所有者) ls -lコマンド - ファイルオーナーの確認 グループ ユーザー名を確認するコマンド - whoami ファイルのパーミッション ディレクトリのパーミッション chmodコマンド - パーミッションの変…

【エンジニア必読】コマンドのalias設定

はじめに エイリアス エイリアスの基本構文 lsコマンドにデフォルトで-Fオプションがつくように設定 ls -Fオプションとは 設定 エイリアスの設定 & 永続化 設定ファイル 設定ファイルの編集 設定を反映 超便利 エイリアスの確認方法 続く… コメント プログラ…

Vimの概要と主要コマンドまとめ

はじめに テキストファイルとバイナリファイル テキストファイル バイナリファイル それぞれの用途 Vim Vimのメリット Vimの必要性 Vimを使用してみる インストール確認 Vimの起動 Vimの終了に関するVimコマンド インサートモード ファイルの保存に関するVim…

Linux操作(ファイルやコマンド探索、ヘルプの活用)

はじめに findコマンド - 名前検索 findコマンド - 基本構文 findコマンド - オプション 名前で検索 -nameオプション 名前で検索 (大文字・小文字の区別なし) inameオプション 大きさで検索 -sizeオプション タイムスタンプで検索 -mtimeオプション ファイル…

ファイル操作コマンド、シンボリックリンクについてまとめてみる

はじめに mkdirコマンド 一気に深いディレクトリを作成することもできる touchコマンド rmコマンド ファイルを削除する場合: ディレクトリを削除する場合: 複数のファイルを削除する場合 rmdirコマンド catコマンド cat -nオプション lessコマンド lessコ…

Linuxのファイルとディレクトリの概要 & 関連コマンド

はじめに Linuxはシステム全体がファイルで構成されている ディレクトリとは Linuxのディレクトリ構造 /bin /dev etc /home /tmp /usr /var パスとは 絶対パス 相対パス ディレクトリ移動に関するlinuxコマンド lsコマンドと応用 パス名展開 ワイルドカード(…

作業効率を上げるLinuxの基礎的な操作コマンド

はじめに コマンドライン コマンドライン カーソルの移動関連のコマンド 文字の削除関連のコマンド 補完機能 コマンドライン上でコマンドの履歴を呼び出すキー 続く… コメント プログラミングスクールのご紹介 (卒業生より)** 参考 はじめに 多少実践的にもL…

Linuxコマンド、シェル、ターミナルの概要

はじめに Linuxコマンド ログイン、ログアウト コマンドが実行された時のLinux内部の仕組み シェルとは シェルの種類 sh (Bourne shell) bash (Bourne-Again SHell) zsh (Z shell) 本著ではbashが強くおすすめされている プロンプトとは ログインシェルの確…

Linuxの概要とCentOSで環境を立ち上げてみる

はじめに Chapter01 Linuxの特徴 Linuxの欠点 Linuxカーネルとは Linuxディストリビューション 【Red Hat系】 【Debian系】 仮想化ソフトウェアを使用してLinux環境を作る Oracle VM VirtualBox CentOSとは CentOSをダウンロード VirtualBoxにCentOSのイメー…

seed_fuとseedについて調べてみた

はじめに seed seed_fu 特定のファイルを指定したい時 YAMLで記述することもできる seed_fuを使うべき理由 GitHubのソース おわりに コメント ◇ プログラミングスクールのご紹介 (卒業生より) 参考 はじめに seedとseed_fuはRailsにおいてデータベースの初期…

JOINとRailsのincludesメソッドの備忘録

はじめに includesメソッド 要約 解説 includeは N+1問題を解決する includesを使わずにN+1問題を発生させる includesを使用した場合のコード例とSQL文の例 JOIN (SQL文) おわりに コメント ◇ プログラミングスクールのご紹介 (卒業生より) 参考 はじめに N…