not in use blog

エンジニアの日々の学びと思考の記録。

「Your password has expired. To log in you must change it using a client that supports expired passwords.」に関連するエラー解決

エラー発生から解決まで

(1)SequelProに入れない（添付写真1枚目）

f:id:maserati004:20201210012825p:plain
sequelproに入れない

MySQL の応答: Your password has expired. To log in you must change it using a client that supports expired passwords.

やったこと

①mysqlパスワードが期限切れになっていると想定 (参考： https://pqtomblog.com/2018/09/20/connecting_mysql_by_sequelpro/ )

なるほどパスワードを変更すれば良いのか。

mysqlにログイン後、下記コマンドでパスワードを“XXXX”に変更

ALTER USER root@localhost IDENTIFIED WITH mysql_native_password BY "XXXX";

→変更完了。

mysql> ALTER USER root@localhost IDENTIFIED WITH mysql_native_password BY "XXXX";
Query OK, 0 rows affected (0.01 sec)

②その後、パスワードをうってmysqlへログインできることを確認

$ mysql -u root -p
Enter password:               # <= ここでパスワードを入力した

③railsを立ち上げてlocalhost:8080を確認するもエラー発生

(2)Access denied for user ‘root’@’localhost’ (using password: NO)

mysqlにつながらない。

<figure class="figure-image figure-image-fotolife" title="Access denied for user ‘root’@’localhost’ (using password: NO)">[f:id:maserati004:20201210013135p:plain]<figcaption>Access denied for user ‘root’@’localhost’ (using password: NO)</figcaption></figure>

やったこと

①プロジェクトのdatabase.ymlを確認

(略)

password: <%= ENV['DB_PASS'] %>

(略)

credential.yml.encを見てpasswordが空に設定されていたから、mysqlのパスワードを空に戻さないといけないと気づく。

②パスワード戻す

ALTER USER root@localhost IDENTIFIED WITH mysql_native_password;

③railsを立ち上げてlocalhost:8080を確認するも再度エラーが発生

f:id:maserati004:20201210013620p:plain
Your password has expired. To log in you must change it using a client that supports expired passwords.

(3)Your password has expired. To log in you must change it using a client that supports expired passwords.

振り出しに戻った？！？！！！

やりたいことをいったん整理

・パスワードは空のままにしたい ・sequelProが使えるようにしたい ・localhost:8080が開けるようにしたい

考えたこと

・パスワードが期限切れ(？)だから変更しないといけない？ ・認証方法をmysql_native_passwordというのに変えたからおかしくなったのか？

・mysqlのバージョンも確認してみた

$ mysql --version
mysql  Ver 8.0.22 for osx10.15 on x86_64 (Homebrew)

解決策

パスワードをリセットする必要があったみたい。 (参考： http://manualkun.com/ubuntu_phpmyadmin/3/ )

ALTER USER 'root'@'localhost' IDENTIFIED BY '';

これでmysqlつながるようになり、SequelProもつながり、プロジェクトも開けるようになった。

所感

mysql周りのエラー解決方法を調べている時、「いやいやこれじゃ解決しないんだよな」ってことが多かった。

エラー文は同じでも状況は全く一緒ではない。

人間と同じように、エラーも個性って訳か（違う）

はい終わり。ありがとうございました。

参考記事など

dev.mysql.com

pqtomblog.com

manualkun.com

git@bitbucket.org: Permission denied (publickey)の対処法

エラー内容

ローカルで新しいプロジェクトを作ってbitbucketにpushしようとしたところで下記エラーに直面

matsuda@matsudaMacBook-Pro:~/workspace/test_repository (master)$ git push origin master
git@bitbucket.org: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

日本語訳すると

パーミッション拒否（公開鍵）
リモートリポジトリを読み込めません

正しいアクセス権を持ち、リポジトリが存在することを確認してください。

疑問に思ったこと

・同一PC内の別プロジェクトはpushできてるから問題なくpushできると思ったんだけどな

・プロジェクトごとにキーペア作って上げないといけないのだろうか？

・git remote add したとき、リモートリポジトリのURL打ち間違えたか？

・そもそも新しくプロジェクト作ってリモートリポジトリにpushするときってどういう手順でやってたっけ？

(おさらい)ローカルで新しくプロジェクトを作って、リモートリポジトリにpushするまで

# 前提条件：プロジェクトは既に作られていて、環境構築が済んでいる状態とする

# プロジェクトがあるディレクトリに移動
$ cd workspace/test_new_project

# 変更内容をすべてステージングにあげる。最初なので一気に上げて問題なし
$ git add .

# コミットメッセージを書く。だいたい最初は"first commit"
$ git commit -m "first commit"

# リモート(今回はbitbucket)で、同じプロジェクト名でリポジトリを作っておく。

# 作成したリモートリポジトリを設定する
# $ git remote add origin リモートリポジトリのURL
$ git remote add origin git@bitbucket.org:matsuda/test_repository.git

# リモートのmasterにpush
$ git push origin master

こんな流れ。今回リモートリポジトリは事前に作っていて、タイポも特になかったのでやはりSSH鍵あたりで問題があった。

対処法

ローカルでキーペアを作成する

# hoge@hoge.comはbitbucketに登録しているメールアドレスを入力
# rsa_matsudaとしている部分はkeyの名前を任意で入力

$ ssh-keygen -t rsa -C hoge@hoge.com -f rsa_matsuda
# .sshディレクトリに移動
$ cd ~/.ssh/

# configファイルにbitbucketの設定を書き込む。ファイルがなくてもviコマンドで作成される
$ vi config

configの内容は下記の通り。秘密鍵のファイル名を入れておく

Host bitbucket.org
  HostName bitbucket.org
  User git
  Port 22
  IdentityFile ~/.ssh/rsa_matsuda
  TCPKeepAlive yes
  IdentitiesOnly yes

公開鍵の情報を、下記コマンドでクリップボードに保存

$ pbcopy < rsa_matsuda.pub

その後、bitbucketを開き、SSH鍵を登録するページにコピーした公開鍵を貼り付けて登録。

再度ローカルに戻り、$ git push origin masterを実行

matsuda@matsudaMacBook-Pro:~/workspace/test_repository (master)$ git push origin master
Enumerating objects: 102, done.
Counting objects: 100% (102/102), done.
Delta compression using up to 4 threads
Compressing objects: 100% (85/85), done.
Writing objects: 100% (102/102), 27.81 KiB | 1.74 MiB/s, done.
Total 102 (delta 5), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (5/5), done.
To bitbucket.org:matsuda/test_repository.git
 * [new branch]      master -> master

よかったよかった。

おまけ

リモートリポジトリのURLを変更するとき

$ git remote set-url origin {new url}

参考

program-life.com

qiita.com

「ストレスフリー超大全」読了。

f:id:maserati004:20201012020824j:plain
ストレスフリー超大全

はじめに

学生を卒業し社会人として年齢を重ねるごとに、今まで同じように過ごしていた僕たちは1人1人全く違う生活を過ごしていくようになりました。

twitterやinstagramで見る友達のプライベートはそれぞれが全く違っていて、誰もが自分の人生を生きているんだなと実感することが増えました。

しかしそれと同時に、誰かの眩しい生活や輝かしい人生と自分自身を見比べて落ち込んでしまうことも時々ありました。

そこで今回は、自分の人生を幸せに生きていく考え方を確立させるために、この本を手に取りました。

この本を読む目的

  • 自身の生活でストレスを極限までなくすこと
  • ストレスに苛まれている人に適切な対処法を伝えられるようになるため
  • 樺沢さんの本が好きで読みたかったから

（樺沢さんの本を読むと生活が大きく前進するので好きです。今まで読んだ本は、「読んだら忘れない読書術」「アウトプット大全」「インプット大全」）

非常に内容盛り沢山の一冊でしたが、この記事では3つの内容に絞ってまとめてみました。

メモ程度の内容で恐縮ですが、何かご参考になれば幸いです。

1.生活習慣

睡眠食事毎日三食食べること。

コーヒーはメンタルを整えるのに良い。 カフェインによるものではなく「抗酸化物質」と関係していると推測されている。

定期的な運動習慣

週に150分以上の有酸素運動で、薬物療法と同じ程度かそれ以上の効果がある。最近では「筋トレ」にもうつ病を改善する効果を認める報告もあるとのこと。

朝の散歩をルーティンにすると良い。起床後1時間以内に、15〜30分の散歩を行うことが起床後のリズムを作る上でも最適。

2.仕事

「仕事で結果を出すこと」で職場の仲間から信頼を勝ち取ること

職場の人間関係を良好にすることが求められているのではないので（あくまでサブ）、仕事をしっかりと行い、戦力となることで信頼を得ることができる。

「仕事を生産的なものにするには、成果すなわち仕事のアウトプットを中心に考えなければならない。技能、情報、知識は道具にすぎない。」引用：ピーター・ドラッカー

「仕事が覚えられない」はどうしたらいい？

聞き方を改善すること。仕事の覚えが早い人は教えられたことをその場で100%理解しようとする。逆に覚えが悪い人はわかったつもりになって、後から実行しようとした時にどうしたらいいかわからなくなる。

これは職場の先輩が同じことを言っていたので強く印象に残りました。

聞いたことを100%理解するためには「メモをとること。その場で疑問点を解決すること」を徹底する。すぐにわかりましたとは言わないこと。指示や指導を受けた時は、不明点やあいまいな点を絶対に残さないこと。

3.プライベート

他人と自分を比べないこと

人と比べると不幸になる。他人ではなく自分と比べること人と比べるのではなく、以前の自分と比べることで成長を実感できる。前向きになれる。また、自分よりできない人と比べて安心するやり方もやらないようにする。一時の安心感は得られるかもしれないが、成長意欲や思考が止まってしまうため幸せにはなれない。

人を信じて裏切られて疲れてしまわないために、信頼できる人を見分けること

★信頼できる人を見分けるポイント

  • 他人への気使い関心がある
  • For You軸が強い
  • 人にしてあげることを考える
  • 信頼を積み上げる
  • ビジョンを持っている、筋が 通っている
  • 物の見方が中立的
  • 言い訳よりもまずごめんなさいを言える
  • 自分の言葉、行動に責任を持つことができる
  • 時間を守る

★反対に信頼できない人の特徴

  • 明らかに自分のことばかり考えている人
  • For Me軸の人
  • 人にしてもらうことだけを考えている
  • いうことがコロコロ変わる
  • 恐怖や不安を煽ってくる
  • 儲け話をふってくる
  • 時間に遅れる
  • 言い訳が多い
  • 嘘をつく
  • 責任をとらない

スルー技術をつけてストレスを受け流すこと

全て本音でぶつからなくて良い。

様々なペルソナ（仮面）を持って上手に気持ちを切り替えられるようにしておく。

★スルー用の言葉を用意しておく

  • へー、それで？
  • それが何か？
  • それで、他に何か？
  • わかりました。それで？
  • 大丈夫です。ご心配なく。
  • そうですね。私もそう思います。
  • ありがとうございます。
  • なるほど、そういう考えもありますね
  • わかりました。検討させていただきます。
  • アドバイス、本当にありがとうございます。
  • （笑顔で）それは良かったですね。

番外編：個人的に覚えておきたいと思ったトピック

  • 頭が良くなる子育て

毎日の読書時間が1~2時間の子が最も偏差値が高く、全く読書をしない子は偏差値が最も下位層のグループに含まれたという。 本の読み聞かせは自分の子供にしていきたいと思った。

  • 何かを始める時に良いアクション

・計画を立てる　TODO作成 ・何かを書く　手書きで行う ・仕事中に音楽を聞くとパフォーマンスが下がるらしい ・スマホ、ネットを切って集中モードに入る ・自分なりのルーティンを作る

ネクストアクション

【仕事関連】

・指導や指示を受けた時はその場で100%理解できるまで食い下がって質問する。

【生活関連】

・自分の判断に悩んだ時や困った時は「それでいい」と自分に言うようにする。

・1日の終わりに「今日もいい日だった」とポジティブな言葉を自分に伝える。

・週に最低1,2回は魚の料理を食べるようにする。

・ナッツを間食に取り入れる。

・白米から玄米へ徐々に変えていく。様子を見ながら。

・疲れている時、メンタルが弱ってきている時は迷わず睡眠をしっかりとる。最低7時間以上！

・習慣に有酸素運動を取り入れる。まずは1週間に60分のランニングからはじめてみる。

【TO DO】

・書籍「『お金持ちの列車』の乗り方　すべての幸せを手に入れる『切符』をあなたへ」を読む。

まとめ

迷った時はこうする、悩んだ時はこうするという考え方を持っておくことで日々訪れるストレスを上手に受け流すことができるようになると思います。

またストレスは完全になくすという意識ではなく、適度なストレスがありつつも溜め込みすぎないようにしていくことがストレスとの上手な付き合い方だと知った。

上手な生き方を知って、幸せに過ごす時間を増やして人生を楽しんでいきたいと思いました。

ここまで読んでくださり、ありがとうございました！

この本はストレス対処法、というだけではなく「どうやったら幸せを多く感じられる人生を送ることができるか」をコンセプトにしている一冊になっています。 ぜひ気になった方は読んでみることをオススメします！

それではまた。

他人のリポジトリをフォークして、最新版を追従する方法

f:id:maserati004:20200922155523p:plain

はじめに

フォークとはリポジトリのコピーのことをいいます。 共同開発する場合に元のリポジトリに影響を与えることなく各自で開発を行えるための仕組みになっています。

一般的にフォークは、他のユーザのプロジェクトへの変更を提案するため、 あるいは他のユーザのプロジェクトを自分のアイディアの出発点として活用するために使用します。

Github Docs引用

今回はフォークを初回に行う場合と、初回以降に最新の状態を追従する方法についてまとめました。

基本的には下記の内容を参考にすれば実施できるので、この記事で全体感を掴みつつ詳細をリンク先で確認してもらえれると良いかと思います。

docs.github.com

手順

初回にフォークして、プルリクエストを作成するまで

(1)Githubにあるフォーク元リポジトリから、自分のGithubのリポジトリへフォークする

まずはフォーク元のリポジトリからForkを行います。

f:id:maserati004:20200922152712p:plain
図1 Forkボタンを押下した直後の画面

ここでフォークを作成したいリポジトリを選択します。今回はToshimatuを選択しました。

f:id:maserati004:20200922152752p:plain
図2 Forkが完了し、リモートの自身のリポジトリが作成された状態

そうするとToshimatuに自動でフォークされたリポジトリが作成されます。

(2)自分のGithubのリポジトリをローカルリポジトリにクローンする

ターミナルを開き、クローンしたい場所へ移動しgit cloneコマンドを入力します。

$ git clone https://github.com/YOUR-USERNAME/Spoon-Knife
$ git clone https://github.com/YOUR-USERNAME/Spoon-Knife
> Cloning into `Spoon-Knife`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

(3)ローカルで編集を行い、フォークしたリポジトリへ変更をアップロードする

(4)自身のリポジトリからフォーク元リポジトリを対象にプルリクエストを作成する

初回以降、フォーク元のリポジトリの最新版に追従する方法

(1)オリジナルのリポジトリのURLをupstreamとして登録する。

すでに自身のフォークリポジトリのURLはoriginで追加されているので、追加でupstreamにフォーク元のURLを登録するという感じです。

$ git remote add upstream https://github.com/octocat/Spoon-Knife.git

登録されているURLを確認するには下記コマンドを使用します。

$ git remote -v

(2)フォーク元のリポジトリの変更を取り出す（fetchする）

$ git fetch upstream

(3)フォーク元のリポジトリの変更を取り出す（mergeする）

カレントブランチをmasterに変更してから、upstream/masterをmergeします。

$ git merge upstream/master

これでフォーク元のリポジトリの最新の状態をローカルに反映させることができました！

参考資料

docs.github.com

qiita.com

【パーフェクトRuby on Rails】第三,四章アウトプット

f:id:maserati004:20200913232157j:plain
パーフェクトRuby on Rails

はじめに

第三,四章の内容は、minitest、Rack、DB操作、credentials、webpacker、rails-ujsなど。

あまり理解が進まない部分も多かったため、把握できた部分のメモ書きの様なアウトプット記事になっています。

第三章　

DB操作について

$ bin/rails db:seed

を実行することで、db:seeds.rbに記載したコードが実行されてデータが登録される。

※上記のコマンドを複数回実行すると、その度にデータが投入されるから、 データ投入をやり直したい場合は一度レコードを削除してから行う。

レコードを削除するコマンド
$ bin/rails db:seed:replant

改めてレコードを登録
$ bin/rails db:seed

秘密情報の管理方法

Rails5.2からcredentialsが使われはじめ、Rails6.0ではcredentialsを拡張したものが使われている。

第四章　

フロントエンドの開発について

webpack

JSをはじめとした様々な形式のファイルをまとめて管理するモジュールハンドラーのこと。 複数のJSモジュールをまとめて一つのファイルにすることができ、まとめる段階でJSのコンパイルや圧縮などの処理を実行している。 フロントエンド開発ではwebpackを使って様々なファイルを1つにまとめることでリリース用のファイルを作成する手法となっている。

webpacker

Rails6.0で新規プロジェクトを立ち上げると、デフォルトでwebpackerを使うようになっている。 CSSは引き続きSprocketの仕組みを使ってコンパイルや縮小、圧縮をおこなう。

参考記事 【Rails入門】Webpackerではじめるフロントエンド開発！Rails5.1対応 | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト ※執筆年月が2年ほど前なので異なるところもある。理解の参考程度にする。

【パーフェクトRuby on Rails】第一,二章アウトプット

はじめに

f:id:maserati004:20200913232157j:plain
パーフェクトRuby on Rails

先日、「パーフェクトRuby on Rails」を買いました。

読み進めるにあたり、アウトプットをブログに書き記していこうと思います。

あまり肩肘はらず、学んだことの簡単なアウトプットを行っていきます。

第一章 Railsを始めるにあたって

Railsの設計思想

  • CoC（Convention over Confiiguration）

　設定より規約。規約に沿って書くことで多くの設定ファイルを書く手間が省け、他のエンジニアとコミュニケーションが取りやすくなる。

  • DRY（Don't Repeat Yourself）

　同じことを繰り返さない。

  • REST（Representational State Transfer）

　Webアプリケーションの設計思想の一つ。「全てのリソースに一意となる識別子(URI)がある。「URIを通してリソースを操作する手段を提供する」

  • 自動テスト

メモ

bundleコマンドはgemパッケージを束ねるもの

# Gemfileのひな形を作成するコマンド
$ bundle init

rails/info/routesでブラウザからルーティングを確認できる。

「(.:format)」は、アクセスしたURLの拡張子(.jsonや.csvなど)によってレスポンスを変化させるために利用する。

第二章 MVCアーキテクチャ

ActiveRecordの役割

(1)データベースと接続し、データベースのテーブルとActiveRecordのモデルを紐づける役割 (2)ビジネスロジックの実装的な機能を実行すること。バリデーションやコールバックなど。

CRUD操作

Create / Read / Update / Delete 操作の略称。

データベースのレコードに対する操作。Rが参照系、C,U,Dは更新系と言われる。

データベースのレコードを検索するメソッド例

# プライマリーキーで検索
find

# 指定したカラムで検索
find_by

# 複数のレコードを検索
where

ActiveRecord::Relationクラスについて

ActiveRecordのQuery Interfaceによる操作結果をオブジェクトとして表現したもの。 メソッド（メソッドチェインを含む）呼び出しを通じてActiveRecordRelationは内部でどのようなSQLを発行するか、という情報だけ保持する。

scope

良く利用する検索条件のクエリに名前をつけてひとまとめにしたもの。

・繰り返し利用するクエリの再利用性が上がる ・クエリに名前をつけることで、可読性が上がる

class Book < ApplicationRecord
  scope :costly, -> { where("price > ?", 3000) }
end

デフォルトスコープという、検索処理を行う際、デフォルトで特定のscopeが適用された状態にすることも可能。 ただモデルクラスでの操作の全てに影響を与えるため注意が必要。

リレーション

has_one・・・1対1の関係を表す has_many・・・1対多を表す

じゃあ多対多の関係はどう構築する？ →中間テーブルを作って、適切なアソシエーションを設定する。

class Book < ApplicationRecord

  has_many :authors, through: :book_authors

end
class Author < ApplicationRecord

  has_many :books, through: :book_authors

end
class BookAuthor < ApplicationRecord

  has_many :books
  has_many :authors

end

バリデーション

アプリケーションレイヤーでの制御を通じてエラーを取扱やすくするためのもの。CB上での制約とは別

コールバック

レコードを作成保存する一連の流れの間の様々な箇所で任意の処理を差し込めるもの。

・前処理、後処理などを宣言的にかける

・必ず保存後に行いたい処理があるときに、実行漏れを防ぐことができる

基本的にロジックはモデルに書きあつめる。ビューとコントローラにはロジックは書かないようにする。

さいごに

簡単なメモ書き程度の記事です。ご了承ください！

引き続き、続きの章のアウトプットを行っていきたいと思います。

ではまた。

Vueのコンポーネント基礎知識

Vueのコンポーネントについての基礎知識についてまとめておきます。

コンポーネントとは、プログラムを構成する部品の一つのことを指す言葉。部品やあるまとまりに対してコンポーネントという言葉を使う

クリックした回数、数字として画面に反映させるコンポーネントを作成し、表示させる。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  // click-counterというコンポーネントを使用する
  <click-counter></click-counter>
  <click-counter></click-counter>
  <click-counter></click-counter>
</div>

// click-counter という名前のコンポーネントを登録

Vue.component('click-counter' , {
  data: function() {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">Clickした回数は {{ count }} 回です</button>'
})

new Vue({
  el: '#app'
})

f:id:maserati004:20200728080013p:plain
動作確認

テーブルのヘッダー部分を固定する方法

f:id:maserati004:20200913232540p:plain

はじめに

データが大量にあるテーブル内でスクロールした際に、表のヘッダー部分まで一緒にスクロールされてしまうと何のデータなのかわからなくなる時があります。

今回はそれを改善するために、テーブルのヘッダー部分を固定する方法について調べたのでまとめてみました。

どうやるか

・cssの「position: sticky」を使用し要素を固定する

・その際「z-index」を使用し、z軸の表示順位を指定する

・固定する部分は背景色をつけ、通過する要素が透けて見えないようにする

コード例

<table>
  <tr>
    <th class="fixed01">見出しmmm</th>
    <th class="fixed02">見出し</th>
    <th class="fixed02">見出し</th>
    <th class="fixed02">見出し</th>
    <th class="fixed02">見出し</th>
    <th class="fixed02">見出し</th>
    <th class="fixed02">見出し</th>
    <th class="fixed02">見出し</th>
    <th class="fixed02">見出し</th>
    <th class="fixed02">見出し</th>
    <th class="fixed02">見出し</th>
  </tr>
  <tr>
    <th class="fixed02">見出し</th>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <th class="fixed02">見出し</th>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <th class="fixed02">見出し</th>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
</table>
table{
  width: 1800px;
}
th,td{
  width: 300px;
  height: 100px;
  vertical-align: middle;
  padding: 0 15px;
  border: 1px solid #ccc;
}
.fixed01,
.fixed02{
  position: sticky;
  top: 0;
  left: 0;
  color: #fff;
  background: #333;
  &:before{
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
  }
}
.fixed01{
  z-index: 2;
}
.fixed02{
  z-index: 1;
}

参考記事

CSSでテーブル表の一部を固定してスクロールする方法 | 福岡のホームページ制作会社 シンス株式会社

z-indexの使い方：CSSで重なり順を指定する

ヘッダーとフッターのHTML固定方法とデザインまとめ｜SEOラボ

CSSのposition: stickyでテーブルのヘッダー行・列を固定する - Qiita

CSSだけでヘッダー固定。