Tech on YAGI BLOG

Obsidian+Claude Code+Neovimで運用始めた

Sun, 18 Jan 2026 22:06:56 +0900

僕はObsidianを2024年ぐらいから使っている。メモアプリは色々と使ってみたけど、使うならObsidian、Apple純正メモ、Google Keepのどれかかなと思っている。メモアプリは色々と書き溜めると自分の資産になり生活の必須アイテムになるので、Evernoteみたいに改悪されると非常に苦しくなる。将来的なサービスの継続性や使いやすさを考えた結果、ビックテックが運用しているアプリもしくは、通常のMarkdownと互換性のあるObsidianを使うことにしている。

今回は、Obsidianの使い方に変化が最近あるため、それらについて記事を書いた。

以前の使い方

基本的には標準的な使い方をしていたと思う。Obsidianアプリをインストールして、便利なプラグインをいれてデイリーノートやライフハックや目標などを自分の人生に関わることをディレクトリごとに分け、Vimモードで利用するといった感じ。ローカルオンリーで動作することで高セキュリティというのも一つのメリットだと思うが、複数端末で利用して都度メモれるようにしたかったので、同期機能を使っている。細かい話をすると、ディレクトリでカテゴリを表現して、横断的な内容はタグつけをする。それぞれのカテゴリでMOCを作るといった運用をしている。あとは、個人情報は極力書かないようにしている。データに残している時点で流出の危険性は常につきまとう。

使い方の変化

PCで操作するときは、Obsidianアプリは起動しない。Neovimで保管庫を開いて、sidekick.nvimでClaude Codeを起動する。こうすることで、ちょっとめんどくさいファイル作成やまとまりのない文章をAIにまとめて記載してもらっている。この使い方で一番便利だと思ったことは、過去の自分のドキュメントを分析させて、思考の傾向や今後の行動指針などのドラフトを作ってもらうことができる。この使い方は自分の脳内情報を文書化すればするほど、より分析ができ、より成長できるのではと思っている。ただ、Claudeに自身の様々な情報を学習させてしまうことになってしまうため、この使い方大丈夫か？とも思っている。とはいえ、すでにブラウザでClaudeを使うときに、個人情報に近しい内容の会話もしているので、AI時代のいまある程度は仕方ないとも思う。

Claude Codeによるサポートのおかげで、Obsidianアプリの機能を使わないとめんどくさい操作をしなくても、Neovimで全部完結できるのは嬉しい。NeovimのプラグインでObsidianのもあったが、若干使いにくくてやめてしまっていた。

さいごに

AIにどうやって協業させるかを最近よく考える。AIに自分の仕事を奪われるといったネガティブなイメージをもっていても仕方がないので、ポジティブに変換して時代についていきたい。ちなみに、このブログはAIをまったく頼らずに書いている。AIを使ったごみ記事でブログを運営する価値は少ないと思っているし、自分にとっては自分の言葉で作ることに価値があると思っている。仕事のドキュメントではごりごり使っている。本当に便利。

開発環境現状確認2026

Thu, 15 Jan 2026 23:21:25 +0900

最近、いろんな方が開発環境の記事をあげていたので、自分も書いてみる。¹

OS

個人ではArch Linux、会社ではMacOSを利用している。 Windowsは4年程度さわっていないので、Windowsの環境構築の質問をされたときに、答えられるか冷や汗をかくことがある。

Arch LinuxはデスクトップにHyprlandを使っていて、タイル型にもだいぶ慣れた。僕はPCゲームをやらないし、ブラウザとObsidianと開発ができれば問題ないので、今後もメイン機はLinuxのなにかしらだと思う。

ウィンドウマネージャー

Hyprland。タイル型めっちゃ好き。軽量だし、ほとんどマウス操作せずに大体のことができる。一時期はGNOMEじゃないと動かないゲームがあったりして、二刀流だったけど、いまはHyprland一択になっている。ぜひ、タイル型に興味がでた人は検索してみてほしい。

エディタ

Neovim。ここ数年はVSCodeもIntelliJもほとんど使っていない。たまにScalaを書くときでもLSPのおかげでNeovimでなんとかなっている。 Neovimは非常に気に入っていてこれを乗り換えることはほとんどないと思う。いままで自力でなんとかキーマップとか覚えていて、体系的にVimを学んだことがないので、どっかで学びたい。基本的にNeovim推奨のプラグインたちを利用しているはず？？

ターミナル

WezTerm。基本的にはNeovimを起動してからあれこれするので、WezTermの機能を使っていない。一応、tmux風な<C-b>をLeaderに設定している。

コーディングエージェント

Claude Code。Anthropicについていけばいいのではと去年あたりから思いProプランを契約し続けている。会社ではGemini CLIをつかったりもしていて、Claude or Geminiっていう感じ。ただ、Sub agentsとかSkillsとか全然使いこなせていないので、将来的なAIとの付き合い方を考えながら、慣れていきたいと思っている。

シェル

zsh。一時期はfishを使っていたが、zshの方が運用していて安定感ありそうとかそんな理由で乗り換えた気がする。

ブラウザ

個人はFirefox、会社ではVivaldi。Vivaldiは最初は色々とカスタムしていたが、今となっては特になにもしていない。普通にChromeで良さそうだなと思っている。最近、Appleから本格的に離れようと思っていて、タブレットもAndroidの格安中華タブを買った。となるとGoogle製品に寄せておけばよさそうかなと思っている。

dotfiles

dotfiles。なるべく、ローカル環境と同じようなディレクトリ構成にしていて、シンボリックリンクをはればいい感じに動作するようにしている。細かい設定を入れられていないのと、セットアップのシェルを雑にClaude作ってもらっていて検証をしていなかったりするので、まだまだ改善の余地がある。

メモ

Obsidian。基本的にメモとして残したい内容はObsidianに書くようにしている。このアプリ非常に便利で、重宝している。P2P機能が実験的に追加されているので、これが本格的に利用可能状態になったら、端末ごとのデータ連携をこれにしたい。

それと、Neovimなんかと同じで、自分の頭の中をどう表現しようかなとあれこれいじくるのは、盆栽感があって楽しい。こういった楽しいと思える作業は積極的にやりたい。

キーボード

HHKB Professional HYBRID Type-SのUS配列黒。Kinesisの分割キーボードを触ってみたいと数年前に思ったけど、高すぎて断念したまま。上司にLofreeのUS配列をもらったりしたけど、HHKBはいまのところは一番好き。この便利なキー配列になれたらもう他に浮気できない人は多いはず。昔にこんな記事を書いていた。懐かしい。「HHKB Professional HYBRID Type-S」こいつは最高かもしれない

まとめ

AIコーディングがターミナルで活躍するようになっていて、ターミナルに閉じこもっていたのが、意外と正解？だったのかもしれない。dotfilesは盆栽みたいな表現をよく見かけるけど、盆栽をいじる人はこういう気持ちなのかな？実際に盆栽+dotfilesをいじる人がいたら話を聞いてみたい。

k0kubunさんの記事を見て書き始めた。似たような構成にさせていただいた。 ↩︎

sidekick.nvimの導入をした

Wed, 07 Jan 2026 23:07:56 +0900

昨日、sidekick.nvimを導入したので感想など書く。

導入時に気になったこと

このプラグインをいれるときに、2つの設定がわからなかった。

opts.nes
opts.cli.mux

opts.nesのNESとは、Next Edit Suggestionsの略らしい。 GitHub Copilotが提供する、ファイル全体を解析して大規模なコード変更を提案する機能らしい。 AIが流行り始めたときによく見たCopilotの補完をより強化した感じのものらしい。現状だとこの設定を使えるのはCopilotのみらしく、自分の場合はCopilotは使っていないので、無効にしておいた。

opts.cli.muxとは、tmuxやzellijを利用して、チャットのセッションを保持するというものらしい。たしかにチャットの途中でNeovimを閉じると消えてしまうのは使い勝手が悪いかもしれない。だけど、個人的にはWezterm+Neovimを使っていて、これのためだけにtmuxをいれたくないので、これも無効にした。Claude Code初心者のため徐々に慣れていってセッション管理が必要になったらまた考える。

感想

現状のAI活用はターミナルで操作するのが色んな面で楽になっている。ターミナルで操作するなら、Neovim内で完結させる。なんて美しいのか。今後もAIxNeovimはアップデートしていきたい。ちなみに、こんな感じになった。

Gateway APIについて学んだ

Mon, 05 Jan 2026 17:24:02 +0900

あけましておめでとうございます。本年はアウトプットの数を増やすという目標のもと、さっそくブログの更新をする。年末年始は友人・家族と会えたし、飲みすぎないようにしたおかげで溜まってた本の解消やBLEACH全巻読んだりと充実できた。

去年、学んだk8sのGateway APIについて記事を書く。

Gateway APIとは

Gateway APIは動的なインフラストラクチャの展開と高度なトラフィックルーティングを提供するAPIの種類のファミリーです。

とのこと。これだけだとわかりにくいが、要はk8sへの通信を担うLBをコード化して自動管理しようっていう認識であっていると思う。詳しくは、以下リンクでk8sやGCPの公式ドキュメントをみると理解が深まると思う。特に、GCPのドキュメントは具体的にどのリソースと紐づくのがわかりやすいので、GCPを知っている人はこっちを読むのをおすすめする。

https://kubernetes.io/ja/docs/concepts/services-networking/gateway/
https://docs.cloud.google.com/kubernetes-engine/docs/concepts/gateway-api?hl=ja

きっかけ

学んだきっかけは、会社でGKE StandardからAutopilot移行をしたときに、Autopilotクラスタが利用可能なすべてのゾーンにNEGが作成されていない状態で、手動でLBを作成すると障害になるケースがある。 という事象を発見したから。移行時の話は以下リンクから見れるので興味ある方は見てほしい。

所属している会社のアドベントカレンダーを書いた2025

さわってみた

Gateway APIはk8sのマニフェストファイルを増やすことで実装できる。 kustomizeを利用する前提でディレクトリ構成を以下に記載する。GCPの場合は、LB作成時に必要なフロント、バック、ヘルスチェック、バックに登録するNEGをそれぞれ表現しているイメージを持ってもらうのがわかりやすそう。また、GKEのPodでNginxを立てている想定でサンプルは実装している。

k8s/
└── base/
    ├── configmap.yaml
    ├── deployment.yaml
    ├── gateway.yaml
    ├── healthcheck.yaml
    ├── httproute.yaml
    ├── kustomization.yaml
    └── service.yaml

Gateway APIに関係している実装は、gateway.yaml, healthcheck.yaml, httproute.yaml, service.yamlなので、それぞれサンプル実装を記載して解説をする。

gateway.yaml

kind: Gateway では利用するLBの種類やトラフィックをリッスンする場所と方法などの設定ができる。 addressesは予約したIPを指定して利用することもできる。

apiVersion: gateway.networking.k8s.io/v1beta1
kind: Gateway
metadata:
  name: nginx
  namespace: default
spec:
  gatewayClassName: gke-l7-rilb  # Regional Internal Load Balancer
  listeners:
  - name: http
    port: 80
    protocol: HTTP
    allowedRoutes:
      namespaces:
        from: All
  addresses:
    - type: NamedAddress
      value: nginx

healthcheck.yaml

これはLB作成時に必要なヘルスチェック。

今年からSoftware Designを読み始めた

Fri, 26 Dec 2025 14:10:51 +0900

今勤めている会社がSoftware Designを定期購読していることに今更気づいた。新卒から働いているのに。。前から気になっていた雑誌だったので、毎月お借りして読んでいる。

読むメリット

これは編集者がソフトウェアエンジニアに向けて、トレンドや基礎技術をまとめてくれているので、広い範囲の技術について知ることができるというメリットがある。普段情報収集するときにFeedlyやX/Twitterやはてぶなどをみることが僕は多くて、自分の興味のある領域ばかり見てしまう傾向がある。（バックエンド開発、DevOpts、SRE、クラウド、k8sなど）

他の技術に対して、興味を持つきっかけになってありがたいと思っている。AIの発展によって、エンジニアはよりT字型スキルの上横棒の広さが求められていると思う。AIの成果物に対して、ある程度は適切なレビューや判断ができるように知識の幅が求められている気がする。だから、こういった雑誌を読むメリットはさらに大切になっているかも？？？

読んだなかで記憶に残っていること

いろんな面白い特集があってあげるのが難しい（~~忘れてる~~）けど、ZOZOのレガシーシステムのモダン化は面白かった。こういったレガシーな課題に対して、技術的に解決するのは大変だけど面白いし、やりがいがあるなと思う。 ZOZOに限らずだけど、2000年初期からあるシステムはDBにロジックを書くのが当たり前だったことが多そうなので、OracleやSQL Serverなどに貯められたストアドのリプレイスやDBの切り替えなどは結構課題になりそうだと思う。自分務めている会社でもここらへんにはやはり課題感がある。

さいごに

ということで、来年もしっかり読んでいくぞという気持ち。

今日もブログ更新できていい感じ。ここから数日は忘年会などが入ってくるため、年内はあと2,3記事更新できればなという感じです。

所属している会社のアドベントカレンダーを書いた2025

Thu, 18 Dec 2025 23:32:50 +0900

久しぶりの投稿です。ここ数年は広い領域の仕事をしていて、結構インプットができました。アウトプットが少ないなと毎回思うので、ちょっとしたことでもいいのでブログ更新しようと思います。継続って難しい。。

アドベントカレンダー書いた

ということでQiitaのアドベントカレンダーを書いたのでURL載せておきます。

GKE StandardからAutopilotへの移行

Google CloudのGKE関連やネットワークには知見を貯めれました。こういったところの学びやハマりポイントなど記事にできるとよさそうかなと思っています。

あとは気分的に本ブログのドメインをサブドメでblog.yuyagishita.comにしたいかなと思っています。

GKE AutopilotのPodバーストとHPAで問題が起きた

Sat, 15 Mar 2025 23:44:06 +0900

久しぶりに記事書きました。
最近はObsidianに情報をまとめることが多いですが、もう少し気軽にアウトプットしようと思って書きました。なので、詳細を調査はできていません。適当なこと書いてたらすみません。

発生した問題

タイトルにもある通りGKE Autopilotに関する話です。 AutopilotやPodバースト、水平Pod自動スケーリング（HPA）を知らない方はこれらの記事が参考になると思います。

発生した問題についてですが、AutopilotクラスタでHPAを有効にしたDeploymentを上げたところ、Podが何度も再起動されながらHPAの最大値までPodが増えるといった挙動をしました。最大値までPodが増えたあとは再起動を何回もして不安定な状態でした。

原因

おそらく、Deploymentのresources.requestsが動かしているアプリに対して低すぎたことがこの状態を発生させていたと思います。こんな感じの設定にしてました。

resources:
  requests:
    cpu: "50m"
    memory: "52Mi"
  limits:
    cpu: "500m"
    memory: "1Gi"

コスト削減のため、リクエストを最も小さい値にしてました。対象アプリがrequestsの値を大きく上回ってました。 Podバーストを有効にしているとlimitsはあくまで予約しているだけで実際にはリソースを確保していないということらしいので、以下のような解釈をしました。

requestsの値を大きく上回る
HPAが適用される（HPAはCPUが80%で動くようにしてました。）
Podが増える
よくわからん挙動する

対処方法

requestsの値を対象アプリが要求している値の120%ぐらいにしました。正常に動作するようになりました。

まとめ

Autopilotクラスタを利用することで、Nodeの管理が必要なく運用が楽にはなりますが、自動で管理してくれる分よくわからないことも発生するので、手放しには喜べないなと思いました。

誰かの役に立ちそうなことがあれば、定期的に自分のメモを書いてるぐらいの感覚でブログを更新したいという気持ちです。

Kubernetes完全ガイドを読んだので感想とか

Wed, 05 Apr 2023 19:09:12 +0900

去年からちょっとずつ読んでた「Kubernetes完全ガイド第２版」を読み終わりました。なかなかボリュームのある本で668ページもあって読むのが大変でした。k8sを雰囲気しかしらない僕にとってはかなり勉強になる本で、体系的に学ぶことができk8sの全体像が頭に入ってきて解像度がかなり上がりました。
本のアウトプットも兼ねて感想とか気になったこととか書きます。

環境構築

この本はハンズオン形式なので、k8sの環境を作る必要があります。僕は最初GKEを作成したのですが、費用がすぐに発生していやだったのでローカルで構築できるkindを利用しました。kindはDocker上でk8sを構築することができとても楽でした。ただ、他のブログなどをみてるとMinikubeがおすすめみたいです。kindはちょっとクセが強く一部の機能を動かすために設定が必要だったりしてたしかに初心者向けではないなと思いました。

図が多くて分かりやすい

大体のページに図があって、初めて知った概念などの理解をする補助になりました。文章読んでよくわからなかったら図を先にみて理解してました。

第７章までやれば基礎力が身につく

この章まで終われば、一旦は基礎知識OKな気がしました。仕事でk8sをさわらないけど、何をしているの知りたいとか動いてるGKEを追えるようになりたいとかの理由でこの本を読み始めた人は一旦区切りかなとか思います。

第９章　リソース管理とオートスケーリング

k8sを利用する上でかなりのメリットかなと思いました。アプリの負荷にあわせてスケールアウトを自動でやってくれたりするのは可用性を高めてくれてかなりよきですね。
仕事で利用しているGKEではあまり高負荷がかかる場面もないのでここらへんの機能が効果的に発揮されてる場面に遭遇したことがほぼないのが残念です。

運用上のベストプラクティスをもっと知りたい

この本を読んでて思ったのが、実際の運用だとどの機能をどれぐらい利用して構築しているんだろう、です。ヘルスチェックや柔軟なスケジューリングやセキュリティなど便利な機能がたくさんあり、それらを知れてとてもよかったです。ただ、僕ぐらいのk8s初心者だと運用レベルをどれぐらい高めればいいのかって疑問がでてきました。何かしらのベンチマークとか取れたりするのかな。。今後そこらへんも調べたいと思いました。

この本は体系的にk8sを学べて最高です。文句とかは一切ないです。

マイクロサービスとの相性の良さ

複数のコンテナを安全に管理することができるk8sはやっぱりマイクロサービスとの相性はかなりいいですね。逆にマイクロサービスでなく高負荷がかかったりしないモノリスなアプリだった場合はk8sはオーバースペックかもなと思いました。普通にCloud RunとかECSとかそういうので運用のほうが費用面も考えてコスパがいい気がしてます。もちろん、利用する言語や求められるシステムによっては選択はかなり変わると思いますが。
マイクロサービスやモノリスといった話はそのまま組織論として置換できそうで、大規模なアプリや多数の開発メンバーを抱えている組織だとそれぞれを分離させて管理できるk8sといった技術はかなり有用だなと改めて思いました。逆に小さい組織の場合はもっとミニマムかつ小回りが聞く技術構成にしたりすると救われそうですね。

まとめ

k8sの勉強において最高最強の本でした。あと、GitOptsについてもこの本きっかけで理解が深まったのでよかったです。

所属している会社のアドベントカレンダーを書いた

Mon, 12 Dec 2022 11:15:10 +0900

ブログをリニューアルしてから初めての投稿です。今年はブログを全然更新できていなかったので、心機一転+記事を書く手間を極力減らして気軽に投稿できるようにリニューアルしました。無理せず継続する予定なので今後もよろしくお願いします！

アドベントカレンダー書いた

Qiitaのアドベントカレンダーを書いたのでURL載せておきます。

Scala + Play Frameworkでリクエストを値オブジェクトにする

Scalaに関する記事を書いていて、今年はScalaを触ることがほとんどで強い型付けには非常に助けられてます。（型パズル化したときは難しくて時間を溶かしてますが、、）アプリを作るなら、Java, Scala, Goあたりの静的言語はマストだなーと最近思っています。

TablePlusで追加したデータが取得できない

Mon, 07 Dec 2020 20:48:35 +0900

PostgreSQLにTablePlusからデータを作成したはいいもののGolangから作成したデータが取得できない。。ということが発生していました。解決策はとても単純でしたが、少しハマったので記事にしました。

解決策

TablePlusの画面でデータを作成した後にコミットができていなかったです。

上記画像の状態だとコミットができていません。⌘Sなどでコミットしてあげましょう。

しっかりと公式ドキュメントを読まなあかんですね。

Next.jsのgetServerSidePropsでリダイレクトをする

Sun, 13 Sep 2020 00:24:52 +0900

勉強用にNext.jsで個人開発をしていて、cookieに値がない時トップ画面にリダイレクトする実装をしたかったのですが、参考にできる情報が少なかったので記事にしました。

リダイレクト方法

import { parseCookies } from "nookies";
import { GetServerSideProps } from "next";

// ...

export const getServerSideProps: GetServerSideProps = async (context) => {
  const cookies = parseCookies(context);
  const userId = typeof cookies.userId === "undefined" ? "" : cookies.userId;
  if (userId === "") {
    context.res.writeHead(302, { Location: "/" });
    context.res.end();
  }

  return {
    props: {},
  };
};

cookieにuserIdを仕込んでいて、userIdがなかったらログインしていないとみなしてトップ画面に戻す実装をしました。

最後に

RFC: Returning redirects from getServerSideProps / getStaticProps にもあるようにgetServerSidePropsでリダイレクトする方法が書かれていますが、うまく実装ができなかったのでレスポンスを書き換える感じの実装にしました。
Next.js関連は日本語の記事が少ないので、情報を探すのが大変ですね。

「Type '型' is not assignable to type 'never'」のエラーを解消した

Tue, 08 Sep 2020 21:11:11 +0900

仕事でVueを使っていて、追加と削除が繰り返される配列要素のオブジェクトに一意のid番号を振るの記事に書かれているオブジェクトの追加と削除を実装しようとして、 TypeScriptで書いている時にエラーが発生したので、その解消法について記載します。

発生したエラー

以下コードの3行目でType 'boolean' is not assignable to type 'never'.Vetur(2322)のエラーが発生しました。このエラーは解消しなくてもアプリが動きましたがエラー状態は気持ちが悪いので解消法を探しました。

        getNewId() {
            const usedIds = this.stats.reduce((accumulator, stat) => {
                accumulator[stat.id] = true;
                return accumulator;
            }, []);
            const nextid = usedIds.findIndex((exists) => !exists);
            return nextid < 0 ? usedIds.length : nextid;
        }

解消法

[] → [] as boolean[]のように記載することでエラーを解消できます。TypeScriptは、連結を使用して配列を削減するときに「never」型を推測するのはなぜですか？に記載されているようにboolean[]にキャストしてあげればOKです。

これは、[]の型がnever[]であると推論されているためだと思います。これは、空でなければならない配列の型です。型キャストを使用してこれに対処できます。

今回のコードは無理やり配列を作っているので、TypeScriptが値を持たないと判断してnever[]を返していたみたいです。

      const usedIds = this.sitePermmisons.reduce(
        (accumulator, sitePermmison) => {
          accumulator[sitePermmison.id] = true
          console.log(accumulator)
          return accumulator
        },
        [] as boolean[]
      )

最後に

今回のエラーはとても単純な内容でしたが、reduce, findIndexの使い方やVueでオブジェクトの追加、削除方法などをあまり理解していない状態だったので、色々と調べていたらかなり時間をかけてしまいました。なんとなくの実装で進めると大はまりすることがあるので、理解しつつ作業のスピードを落とさないようにバランスを考えないとなーと思いました。

Vuetifyで「Data Tables」を使って管理画面を作成する

Sat, 18 Jul 2020 17:24:13 +0900

今回は久しぶりに技術ネタの投稿です！最近会社でNuxt.js + TypeScriptを利用して開発をしていて、「Vuetify」でデザインをいい感じにしながら開発を進めています。こんな感じのテーブルを作成します。データのソート、表示数変更、新規作成、編集、削除、検索ができるにしています。

全体のコード

// pages/yagiblog-sample.vue

<template>
  <v-card>
    <v-card-title>
      <v-row>
        <v-col cols="6">
          テーブル作成のサンプル
        </v-col>
        <v-col cols="6">
          <v-dialog v-model="dialog" max-width="500px">
            <template v-slot:activator="{ on, attrs }">
              <v-btn color="primary" dark class="mb-2" v-bind="attrs" v-on="on">
                新規作成
              </v-btn>
            </template>
            <v-card>
              <v-card-title>
                <span class="headline">{{ formTitle }}</span>
              </v-card-title>
              <v-card-text>
                <v-container>
                  <v-row>
                    <v-col cols="12" sm="6" md="4">
                      <v-text-field
                        v-model="editedItem.name"
                        label="氏名"
                      ></v-text-field>
                    </v-col>
                    <v-col cols="12" sm="6" md="4">
                      <v-text-field
                        v-model="editedItem.height"
                        label="身長(m)"
                      ></v-text-field>
                    </v-col>
                    <v-col cols="12" sm="6" md="4">
                      <v-text-field
                        v-model="editedItem.weight"
                        label="体重(kg)"
                      ></v-text-field>
                    </v-col>
                    <v-col cols="12" sm="6" md="4">
                      <v-text-field
                        v-model="editedItem.bodyFatPercentage"
                        label="体脂肪率(%)"
                      ></v-text-field>
                    </v-col>
                  </v-row>
                </v-container>
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="blue darken-1" text @click="close">
                  キャンセル
                </v-btn>
                <v-btn color="blue darken-1" text @click="save">
                  保存
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
          <v-text-field
            v-model="search"
            append-icon="mdi-magnify"
            label="検索"
            single-line
            hide-details
          ></v-text-field>
        </v-col>
      </v-row>
    </v-card-title>
    <v-data-table
      :headers="headers"
      :items="persons"
      :items-per-page="5"
      :search="search"
      class="elevation-1"
    >
      <template v-slot:item.actions="{ item }">
        <v-icon small class="mr-2" @click="editItem(item)">
          mdi-pencil
        </v-icon>
        <v-icon small @click="deletePerson(item)">
          mdi-delete
        </v-icon>
      </template>
    </v-data-table>
  </v-card>
</template>

<script lang="ts">
import Vue from "vue"

interface Persion {
  name: string
  height: number
  weight: number
  bodyFatPercentage: number
}

export default Vue.extend({
  data: () => ({
    dialog: false,
    search: "",
    editedIndex: -1,
    editedItem: {
      name: "",
      height: 0,
      weight: 0,
      bodyFatPercentage: 0
    },
    defaultItem: {
      name: "",
      height: 0,
      weight: 0,
      bodyFatPercentage: 0
    },

    headers: [
      {
        text: "氏名",
        value: "name",
        align: "start"
      },
      {
        text: "身長(m)",
        value: "height"
      },
      {
        text: "体重(kg)",
        value: "weight"
      },
      {
        text: "体脂肪率(%)",
        value: "bodyFatPercentage"
      },
      { text: "操作", value: "actions", sortable: false }
    ],
    persons: [
      {
        name: "naosuke.ii",
        height: 1.68,
        weight: 60,
        bodyFatPercentage: 15
      },
      {
        name: "iemochi.tokugawa",
        height: 1.7,
        weight: 61,
        bodyFatPercentage: 14
      },
      {
        name: "kaishu.katsu",
        height: 1.6,
        weight: 55,
        bodyFatPercentage: 12
      },
      {
        name: "eiichi.shibusawa",
        height: 1.63,
        weight: 65,
        bodyFatPercentage: 20
      },
      {
        name: "aritomo.yamagata",
        height: 1.75,
        weight: 63,
        bodyFatPercentage: 10
      },
      {
        name: "shigenobu.okuma",
        height: 1.8,
        weight: 68,
        bodyFatPercentage: 19
      },
      {
        name: "taro.okamoto",
        height: 1.72,
        weight: 63,
        bodyFatPercentage: 18
      },
      {
        name: "toshimichi.okubo",
        height: 1.82,
        weight: 70,
        bodyFatPercentage: 17.5
      },
      {
        name: "takamori.saigo",
        height: 1.9,
        weight: 80,
        bodyFatPercentage: 18
      },
      {
        name: "kaoru.inoe",
        height: 1.79,
        weight: 65.5,
        bodyFatPercentage: 12.3
      },
      {
        name: "yukichi.fukuzawa",
        height: 1.98,
        weight: 65,
        bodyFatPercentage: 10
      },
      {
        name: "yoshinobu.tokugawa",
        height: 1.75,
        weight: 58,
        bodyFatPercentage: 8
      },
      {
        name: "hideyo.noguchi",
        height: 1.56,
        weight: 50,
        bodyFatPercentage: 7
      },
      {
        name: "ichiyo.higuchi",
        height: 1.5,
        weight: 49,
        bodyFatPercentage: 20
      },
      {
        name: "soji.okita",
        height: 1.7,
        weight: 62,
        bodyFatPercentage: 13
      },
      {
        name: "isami.kondo",
        height: 1.75,
        weight: 68,
        bodyFatPercentage: 15
      }
    ]
  }),

  computed: {
    formTitle(): string {
      return this.editedIndex === -1 ? "新規作成" : "編集"
    }
  },

  methods: {
    deletePerson(item: Persion): void {
      const index = this.persons.indexOf(item)
      confirm(item.name + " を削除しますか？") && this.persons.splice(index, 1)
    },
    editItem(item: Persion) {
      this.editedIndex = this.persons.indexOf(item)
      this.editedItem = Object.assign({}, item)
      this.dialog = true
    },
    close() {
      this.dialog = false
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem)
        this.editedIndex = -1
      })
    },
    save() {
      if (this.editedIndex > -1) {
        Object.assign(this.persons[this.editedIndex], this.editedItem)
      } else {
        this.persons.push(this.editedItem)
      }
      this.close()
    }
  }
})
</script>

基本的な使い方

<v-data-table>にヘッダーやアイテムを渡せばいい感じにテーブルを作成してくれます。ここで書かれている"headers"や"persons"はscriptに記載されているdata: () => ({})内を参照しています。

「React Hook Form」でフォームを簡単に作る

Tue, 26 May 2020 09:00:24 +0900

Next.js(React)でログイン機能を実装していて、フォーム作成に苦戦していました。そもそも、Reactを全然理解していないので、フォームの値はどうやって取得すればいいのか？みたいなところからわかりませんでした。

今回はReact+TypeScriptでフォームを作成するのにReact Hook Formがとても便利だったので、紹介します。

React Hook Formとは

公式サイトを見ると「高性能で柔軟かつ拡張可能な使いやすいフォームバリデーションライブラリ」らしいです。
詳細は以下公式サイトを見てください。
React Hook Form

さっそく実装をする

まずはReact Hook Formをインストールします。以下コマンドをプロジェクト配下で実行します。

npm install react-hook-form

インストールしたら、importしてフォームの値をサポートするためのFormData型を作成します。

import { useForm } from "react-hook-form";

type FormData = {
  username: string;
  password: string;
};

今回はログイン用のフォームを作成するために、string型のusernameとpasswordを用意しました。次に、useFormを使ってフォーム作成に必要なメソッドを受け取ります。

import { useForm } from "react-hook-form";

type FormData = {
  username: string;
  password: string;
};

export default function Login() {
  const { register, handleSubmit, watch, errors } = useForm<FormData>();
}

useForm<FormData>()のように書いてフォームで使う型を設定できます。 constで定義されているメソッドについては以下にまとめました。

register:　input/selectのRefとバリデーションルールをReact Hook Formに登録する
handleSubmit:　フォームバリデーションに成功するとフォームデータを渡す
watch:　指定されたinput/inputsを監視し、その値を返す
errors:　各inputのフォームのエラーまたはエラーメッセージを含む

これらのメソッドを使って、フォームを作成します。

import { useForm } from "react-hook-form";

type FormData = {
  username: string;
  password: string;
};

export default function Login() {
  const { register, handleSubmit, watch, errors } = useForm<FormData>();
  const onSubmit = (data: FormData): void => console.log(data);

  console.log(watch("username"));
  console.log(watch("password"));

  return (
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="filed">
          <label className="label">username</label>
          <input
            name="username"
            placeholder="username"
            ref={register({ required: true })}
          />
          {errors.username && "usernameを入力してください。"}
        </div>
        <div className="filed">
          <label className="label">password</label>
          <input
            name="password"
            placeholder="password"
            ref={register({ required: true })}
          />
          {errors.password && "passwordを入力してください。"}
        </div>
        <div className="filed">
          <button>login</button>
        </div>
      </form>
  );
}

フォームの流れにそって解説します。
フォームのinputで作成したFormDataを使うためにはname属性に設定します。また、ref={register({ required: true })}のように書くことで、inputは入力必須にしています。 {errors.username && "usernameを入力してください。"}はusernameがバリデーションエラーになったら表示されます。最後に、フォームに入力をしてボタンを押してバリデーションエラーが発生していない場合、<form onSubmit={handleSubmit(onSubmit)}>が動いて、const onSubmit = (data: FormData): void => console.log(data);が実行されてコンソールに入力された値が表示されます。フォームに入力がない状態でボタンを押すと以下のような挙動をします。 console.log(watch("username"));はusernameに入力された値が変わるとその都度コンソールに表示します。

HugoでTwitterカードを表示させる

Fri, 22 May 2020 22:38:37 +0900

これまでこのブログはTwitterなどにリンクを貼った際にサムネイル画像を表示できていなかったので、Twitterカードで画像を表示できるようにしました。また、Twitterだけではなく、Slack（コミュニケーションツール）などでも画像が表示できるにしています。

Twitterカードとは

サルワカくんの記事が分かりやすかったので、詳しく知りたい人は以下記事を読んでみてください。
【2020年版】Twitterカードとは？使い方と設定方法まとめ

簡単に説明すると、Twitterでよく見かけるURLを貼ったときに表示されるやつです。

Twitterカード表示対応

僕が現在使っているHugoのテンプレートはBeautiful Hugoなので、このテンプレートでの対応方法を書きます。

今回重要なファイルは2つです。

themes/beautifulhugo/layouts/partials/seo/twitter.html
themes/beautifulhugo/layouts/partials/seo/opengraph.html

ファイルの中身を以下に書きます。

// themes/beautifulhugo/layouts/partials/seo/twitter.html


{{- with .Title | default .Site.Title }}
  <meta name="twitter:title" content="{{ . | truncate 70 }}" />
{{- end }}
{{- with .Description | default .Params.subtitle | default .Summary }}
  <meta name="twitter:description" content="{{ . | truncate 200 }}">
{{- end }}
{{- with .Params.share_img | default .Params.image | default .Site.Params.logo }}
  <meta name="twitter:image" content="{{ . | absURL }}" />
{{- end }}
  <meta name="twitter:card" content="summary" />
{{- with .Site.Author.twitter }}
  <meta name="twitter:site" content="@{{ . }}" />
  <meta name="twitter:creator" content="@{{ . }}" />
{{- end }}

// themes/beautifulhugo/layouts/partials/seo/opengraph.html


{{- with .Title | default .Site.Title }}
<meta property="og:title" content="{{ . }}" />
{{- end }}
{{- with .Description | default .Params.subtitle | default .Summary }}
<meta property="og:description" content="{{ . }}">
{{- end }}
{{- with .Params.share_img | default .Params.image | default .Site.Params.logo }}
<meta property="og:image" content="{{ . | absURL }}" />
{{- end }}
{{- with .Site.Params.fb_app_id }}
<meta property="fb:app_id" content="{{ . }}" />
{{- end }}
<meta property="og:url" content="{{ .Permalink | absLangURL }}" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="{{ .Site.Title }}" />

ここでみてほしいのは、.Params.share_imgです。 Beautiful Hugoでは各記事のFront Matter（mdファイル内の一番上にtitleとかdateが書いてあるところ）に、share_img: "表示させたい画像のパス"のように書いてあげればTwitterカードに画像を表示できます。

Go製APIから「fetch」するのにハマった

Tue, 19 May 2020 21:04:08 +0900

Next.js(React)+Goで個人開発をしていて、FetchAPIを利用してGoでローカル環境にたてたAPIをNext.jsで呼び出す際に、値が取れずにはまりました。今回はどうやって解消したのか記事にしました。

今回発生したエラー

Next.jsでfetchを使ってPOSTした際に、以下のようなエラーが発生。

Error serializing `.postData` returned from `getServerSideProps` in "/posts/get-api". Reason: `object` ("[object Promise]") cannot be serialized as JSON. Please only return JSON serializable data types.

ようわからんけど、APIから値が取れてないみたいでした。 Next.jsからfetchする際のコードは以下のようにしていました。

export const getServerSideProps: GetServerSideProps = async () => {
  const url = "http://localhost:8080/login";　←　APIはローカルの8080番ポートにたてていました。
  let postData = {};
  await fetch(url, {
    method: "POST",
    cache: "no-cache",
    headers: {
      "Content-Type": "application/json charset=utf-8",
    },
    body: JSON.stringify({ username: "yagiyu", password: "miran" }),
  }).then(function (response) {
    console.log(response);
    postData = response.json();
  });
  return {
    props: {
      postData,
    },
  };
};

また、上記を実行した時のレスポンスが以下で、APIと通信はできたが、値を取れませんでした。

Response {
  size: 0,
  timeout: 0,
  [Symbol(Body internals)]: {
    body: PassThrough {
      _readableState: [ReadableState],
      readable: true,
      _events: [Object: null prototype],
      _eventsCount: 2,
      _maxListeners: undefined,
      _writableState: [WritableState],
      writable: false,
      allowHalfOpen: true,
      _transformState: [Object],
      [Symbol(kCapture)]: false
    },
    disturbed: false,
    error: null
  },
  [Symbol(Response internals)]: {
    url: 'http://localhost:8080/login',
    status: 200,
    statusText: 'OK',
    headers: Headers { [Symbol(map)]: [Object: null prototype] },
    counter: 0
  }
}

ターミナルからcurlを実行すると、以下のように成功していました。

CSSの「@media」でレスポンシブ対応させる

Fri, 08 May 2020 07:31:02 +0900

以前に僕のブログを見たことがある人にはわかると思いますが、サムネイル画像がなかったり、文字のサイズ、余白などが違ったりとデザインをガラッと変えました！デザインについて考えると、どんどん深みにはまって正解がまったくわからなかったです。（笑）

CSSで@mediaを使ってデバイスの大きさごとに表示を調整したので、その記事を書きます。

`@media`とは

@mediaを使うことで、各デバイスや画面サイズごとに適用するCSSを指定できます。レスポンシブにする場合は必須みたいです。（CSSは本当によくわからない。。）

使い方

以下のような感じで使うことができます。

@media (max-width: 767px){
    img {
        width: 100%;
        height: auto;
    }
}
@media (min-width: 768px){
    img {
        width: 277px;
        height: 145px;
    }
}

(max-width: 767px)はデバイスの画面幅が767px以下だったら、{}のCSSを適用します。 (min-width: 768px)はデバイスの画面幅が768px以上だったら、{}のCSSを適用します。これは例としてあげていて、レスポンシブ対応させるときは画像サイズを%やautoを使って指定することでいい感じにできます。

767pxを画面幅の境目にしている理由として、今のパソコンやスマホ、タブレットのサイズを考えると、767pxのサイズに合わせる見やすくできるそうです。

@media screen and (max-width: 767px)のような書き方をしているサイトが多数ありますが、screenとはスクリーン画面ではなく、プリンターまたは音声機器以外のデバイスすべてなので、わざわざscreenをつける必要はないです。

まとめ

レスポンシブ対応させるときは@mediaを使って、デバイス毎にCSSを変更させましょう。

MongoDB 入門

Thu, 30 Apr 2020 20:26:52 +0900

最近、MongoDBを使うことがあり、NoSQLをはじめて使いました。MongoDBを触ったことがない人のために書きます。

MongoDBインストール&起動

今回はDockerHubからMongoDBのコンテナイメージをインストールします。

$ docker pull mongo

インストールができたら、以下コマンドでコンテナを起動します。

$ docker run --name mongo-sample -d mongo

-dはバックグランドで起動することを意味してます。起動したコンテナ内に以下コマンドで入ります。

$ docker exec -it mongo-sample bash

MongoDBのシェル起動

MongoDBのコンテナ内で以下コマンドを実行します。

$ mongo

シェルを起動したら、環境準備は完了です。

基礎的な用語解説

MongoDBをさわっていく上で、イメージしやすくするために、Oracleの用語と比較します。

MongoDB	Oracle
データベース	データベース
コレクション	テーブル
ドキュメント	行（レコード）
フィールド	列（カラム）

テストデータ作成

以下コマンドをシェルで入力して、テストデータを作成します。

> db.foods.insert({name:'apple', price:50, producer:['sato']});
> db.foods.insert({name:'meat', price:100, producer:['suzuki']});
> db.foods.insert({name:'fish', price:120, producer:['kaneko', 'kitamura']});

以下コマンドでDBの情報をみることができます。

> db.stats()
{
	"db" : "test",
	"collections" : 1,
	"views" : 0,
	"objects" : 3,
	"avgObjSize" : 86,
	"dataSize" : 258,
	"storageSize" : 20480,
	"numExtents" : 0,
	"indexes" : 1,
	"indexSize" : 20480,
	"scaleFactor" : 1,
	"fsUsedSize" : 28014751744,
	"fsTotalSize" : 62725623808,
	"ok" : 1
}

testデータベースに"collections" : 1となっていて、foodsコレクションが作成されて、"objects" : 3からドキュメントが3つ作成されていることが分かります。

GitHubのプライベートリポジトリをgo getする

Mon, 27 Apr 2020 20:01:04 +0900

個人開発していて、GitHubの自分のプライベートリポジトリをgo getしようとして、エラーに遭遇しました。今後同じような目にあった時のために、備忘録として残します。

エラー内容

以下のようなエラーが発生しました。

$ go get github.com/<username>/<private-repository-name>

go: downloading github.com/<username>/<private-repository-name> v0.0.0-20200426100620-259de4f4dd2c
go get github.com/<username>/<private-repository-name>: github.com/<username>/<private-repository-name>@v0.0.0-20200426100620-259de4f4dd2c: verifying module: github.com/<username>/<private-repository-name>@v0.0.0-20200426100620-259de4f4dd2c: reading https://sum.golang.org/lookup/github.com/<username>/<private-repository-name>@v0.0.0-20200426100620-259de4f4dd2c: 410 Gone
	server response:
	not found: github.com/<username>/<private-repository-name>@v0.0.0-20200426100620-259de4f4dd2c: invalid version: git fetch -f origin refs/heads/*:refs/heads/* refs/tags/*:refs/tags/* in /tmp/gopath/pkg/mod/cache/vcs/d99582f38bf8799347c5c3580859733d5d5c417fd23feb23ec82dc0787605157: exit status 128:
		fatal: could not read Username for 'https://github.com': terminal prompts disabled

原因

go getでモジュールをダウンロードする際は通常、http通信をしているみたいです。 GitHubのプライベートリポジトリへは認証が通らず、エラーになっていました。

解決方法

以下手順で解決できます。

Personal access tokensを作成
git config設定

1. `Personal access tokens`を作成

GitHubのDeveloper settings画面でトークンを作成できます。設定画面を開いたら、「Generate new token」を押すと、以下の画面が表示されます。

AtCoder Beginner Contest 163の振り返り

Sun, 19 Apr 2020 21:55:38 +0900

今回で5回目のコンテスト参加となりました。今回は「Unrated」になってしまいました。コロナウイルスの影響で参加者がめちゃくちゃいて、サーバ処理が追いつかなかったんですかね。。コンテストが始まると一気にサーバ負荷がかかるという特殊な状況ですが、運営側には頑張っていただきたいです。
今回はC問題まで解いたので、そこまでの解説をします。

A - Circle Pond

問題文

半径Rの円の周長を出力してください。

制約

1 ≤ R ≤ 100
入力は全て整数である。

解説

Pythonはmath.piで円周率を使えます。

回答

import math

R = int(input())
print(2*R*math.pi)

B - Homework

問題文

高橋君の夏休みはN日間です。
夏休みの宿題がM個出されており、i番目の宿題をやるにはAi日間かかります。
複数の宿題を同じ日にやることはできず、また、宿題をやる日には遊ぶことができません。
夏休み中に全ての宿題を終わらせるとき、最大何日間遊ぶことができますか？
ただし、夏休み中に全ての宿題を終わらせることができないときは、かわりに’-1‘を出力してください。

制約

1 ≤ N ≤ 10^6
1 ≤ M ≤ 10^4
1 ≤ Ai ≤ 10^4

解説

この問題は高橋君の夏休み日数から宿題にかかる全日数を引くだけです。

回答

N, M = [int(_) for _ in input().split()]

A = [int(_) for _ in input().split()]

ans = N
for i in range(M):
    ans -= A[i]

if(ans < 0):
    print("-1")
else:
    print(ans)

C - management

問題文

N人の社員からなる会社があり、各社員には1,…,Nの社員番号が割り当てられています。
社員番号1の社員以外の全ての社員には、自分より社員番号が小さい直属の上司がちょうど1人います。
XさんがYさんの直属の上司であるとき、YさんはXさんの直属の部下であるといいます。
社員番号iの社員の直属の上司の社員番号がAiであることが与えられます。各社員について直属の部下が何人いるか求めてください。

AtCoder Beginner Contest 162の振り返り

Sun, 12 Apr 2020 22:28:00 +0900

今回で4回目のコンテスト参加となりました。結果として、C問題まではなんとか解くことができました。ですが、B問題を1回凡ミスしたことに気づかず20分後に再提出したこととC問題はPythonでは時間制限を突破できなくて、PyPyで提出をしてなんとか正解だったのであまり良くない内容でした。まだまだ余裕でD問題に到達することができていないです。。
基礎力を強化するためにも、今回も振り返りをしていきます。(回答に記載しているコードは提出してACしたコードです。)

A - Lucky 7

問題文

3桁の整数Nが与えられます。Nのいずれかの桁に数字の7は含まれますか？含まれるなら Yes を、含まれないなら No を出力してください。

制約

100 ≤ X ≤ 999

解説

この問題は入力された3桁の文字数それぞれに「7」が含まれているかを確認すればOKです。

回答

N = input()

if(N[0] == '7' or N[1] == '7' or N[2] == '7'):
    print("Yes")
else:
    print("No")

B - FizzBuzz Sum

問題文

FizzBuzz列a1,a2,…を次のように定めます。

iが3でも5でも割り切れるなら、ai = FizzBuzz
そうではなくiが3で割り切れるなら、ai = Fizz
そうではなくiが5で割り切れるなら、ai = Buzz
そうではないなら、ai = i

FizzBuzz列のN項目までに含まれる数の和を求めてください。

制約

1 ≤ X ≤ 10^6

解説

入力されたN項目までのそれぞれの数字をFizzBuzzで判別して、該当しない数字を足せばOKです。

回答

N = int(input())

ans = []
ans_num = 0
for i in range(N):
    s = i+1
    if(s%3 == 0 and s%5 == 0):
        ans.append("FizzBuzz")
    elif(s%3 == 0):
        ans.append("Buzz")
    elif(s%5 == 0):
        ans.append("Buzz")
    else:
        ans.append(s) 
        ans_num += s

print(ans_num)

C - Sum of gcd of Tuples (Easy)

問題文

$$ \sum_{a=1}^{K} \sum_{b=1}^{K} \sum_{c=1}^{K} gcd(a, b, c) $$ を求めてください。
ただし、gcd(a, b, c)はa,b,cの最大公約数を表します。

React + Go + MongoDBの環境をDocker Composeで作成した

Sat, 11 Apr 2020 12:51:41 +0900

現在、勉強がてら個人開発をしていて、せっかくの個人開発なので、今までさわったことがないReact, Go, MongoDBでwebアプリを作ります。その最初の段階として、Docker Composeを使って環境構築を進めます。

Reactの環境構築

今回の開発では、プロジェクト配下をこんな感じにしています。

プロジェクト
├── backend
├── frontend

Reactはfrontend配下に構築します。

`Dockerfile`の作成

DockerfileにDocker上で起動させるコンテナの構成情報を書きます。 frontend配下に以下内容で作成します。

FROM node:13.12.0-alpine3.10
WORKDIR /usr/src/app

1行目にはコンテナのDockerイメージ、2行目にはコンテナ内の作業ディレクトリを記載しています。 alpineはAlpine Linuxのことで、必要最低限の構成がされているおかげで、Dockerイメージの軽量化を図ることができます。

`docker-compose.yml`の作成

docker-compose.ymlで複数のコンテナをまとめて起動することができます。拡張子は「.yml」「.yaml」どちらでも動きます。 ~~どっちかに統一してくれればいいのに。~~
プロジェクト配下に以下内容で作成します。

version: '3'
services:
    node:
        build:
            context: ./frontend
            dockerfile: Dockerfile
        volumes:
            - ./frontend:/usr/src/app
        command: sh -c "yarn start"
        ports:
            - "3000:3000"

volumesではコンテナ内のusr/src/appをfrontendに永続化させます。 portsでは外部の3000ポートとコンテナ内の3000ポートをつなげています。ローカル環境ではlocalhost:3000でアクセスができるようになります。

Dockerイメージのビルド

docker-compose.ymlのある階層で以下コマンドを叩きます。

docker-compose build

Building node
Step 1/2 : FROM node:13.12.0-alpine3.10
 ---> b529a862f234
Step 2/2 : WORKDIR /usr/src/app
 ---> Using cache
 ---> b753b92fbf97
Successfully built b753b92fbf97
Successfully tagged プロジェクト名_node:latest

上記のような表示がされ、ビルドすることができます。

PythonでPoetryを使ってみた

Sun, 05 Apr 2020 16:12:01 +0900

先日、僕が入会しているオンラインサロンのメンバーの方に、「PipenvよりもPoetryの方がいい！」といったことをお聞きして、Poetryを知らなかったので調べて使ってみました。日本語に翻訳してくれている公式ドキュメントにそって進めていきます。

Poetryとは

PEP 518で提案されたpyproject.tomlによるパッケージ管理を導入したツールです。 pyproject.tomlでrequirements.txt、setup.py、setup.cfg、MANIFEST.inを置き換えることができます。Pipenvはrequirements.txtの置き換えしかできないので、いろんなファイルを置き換えることができて良いですね。また、Pipenvで使用するPipfileは独自規格で今後継続的に採用されるか不明なので、PipenvよりPoetryを使う方が良さそうです。

Poetryインストール

MacやLinuxでは以下コマンドでインストールします。

curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python

$HOME/.poetry/binにインストールされます。
Poetryを更新したいときは、以下コマンドを実行します。

poetry self update

Bash, Fish, Zshでの補完の有効化

僕はシェルにFishを使っていて、補完をサポートしてくるのでありがたいです。公式ドキュメントには自分のシェルに合った次のコマンドどれかを使えばいいそうです。

# Bash
poetry completions bash > /etc/bash_completion.d/poetry.bash-completion

# Bash (macOS/Homebrew)
poetry completions bash > $(brew --prefix)/etc/bash_completion.d/poetry.bash-completion

# Fish
poetry completions fish > ~/.config/fish/completions/poetry.fish

# Zsh
poetry completions zsh > ~/.zfunc/_poetry

# Oh-My-Zsh
mkdir $ZSH/plugins/poetry
poetry completions zsh > $ZSH/plugins/poetry/_poetry

変更を効かせるために、シェルの再起動をしましょう。

プロジェクトのセットアップ

Poetryを試すためのプロジェクトを作成します。次のコマンドで作成できます。poetry-demoと名付けています。

poetry new poetry-demo

するとpoetry-demoディレクトリが作成されます。

poetry-demo
├── pyproject.toml
├── README.rst
├── poetry_demo
│   └── __init__.py
└── tests
    ├── __init__.py
    └── test_poetry_demo.py

pyproject.tomlがプロジェクトの依存関係をまとめてくれています。中身はこのようになっています。

PythonでPipenvを使ってみた

Fri, 03 Apr 2020 21:00:13 +0900

Pipenvを使うと、個人開発の時だけではなく、複数人で開発する際にもパッケージ管理が楽になります。Pythonで作業環境を整えるのが非常に簡単になります。
公式によると

Pipenvは、手動でパッケージのインストールおよびアンインストールを行うのと同じように Pipfile に対してパッケージの追加および削除を行うのに加え、自動でプロジェクト用の仮想環境を作成し管理します。またPipenvは、いかなるときも重要な Pipfile.lock を生成し、これを利用しビルドが常に同じ結果になるようにします。
Pipenvは主にアプリケーションのユーザーと開発者に、簡単に作業環境を作れる方法を提供するためのツールです。

とのことです。

Pipenvインストール

僕はMacを使っているので、Homebrewでインストールします。

brew install pipenv

プロジェクト作成＆パッケージのインストール

Pipenvを試すためのプロジェクトを作成します。今回はpipenv-testディレクトリをホームディレクトリに作成して、その配下にPythonの静的解析ができるflake8をインストールをします。

mkdir pipenv-test
cd pipenv-test
pipenv install flake8

インストールをするとターミナルに以下のような表示がされます。

Creating a virtualenv for this project…
Pipfile: /Users/ユーザーネーム/pipenv-test/Pipfile
Using /usr/local/Cellar/pipenv/2018.11.26_4/libexec/bin/python3.8 (3.8.2) to create virtualenv…
⠋ Creating virtual environment...created virtual environment CPython3.8.2.final.0-64 in 719ms
  creator CPython3Posix(dest=/Users/ユーザーネーム/.local/share/virtualenvs/pipenv-test-x1ZFqoq_, clear=False, global=False)
  seeder FromAppData(download=False, pip=latest, setuptools=latest, wheel=latest, via=copy, app_data_dir=/Users/ユーザーネーム/Library/Application Support/virtualenv/seed-app-data/v1)
  activators BashActivator,CShellActivator,FishActivator,PowerShellActivator,PythonActivator,XonshActivator

✔ Successfully created virtual environment!
Virtualenv location: /Users/ユーザーネーム/.local/share/virtualenvs/pipenv-test-x1ZFqoq_
Creating a Pipfile for this project…
Installing flake8…
Adding flake8 to Pipfile's [packages]…
✔ Installation Succeeded
Pipfile.lock not found, creating…
Locking [dev-packages] dependencies…
Locking [packages] dependencies…
✔ Success!
Updated Pipfile.lock (e8e061)!
Installing dependencies from Pipfile.lock (e8e061)…
  🐍   ▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉ 5/5 — 00:00:01
To activate this project's virtualenv, run pipenv shell.
Alternatively, run a command inside the virtualenv with pipenv run.

Pipfileでインストールしたパッケージなどを管理していて、プロジェクトを他の人に共有するときに依存関係が分かります。 Pipfileの中身はこんな感じになります。

Pythonコードを静的解析した

Wed, 01 Apr 2020 20:34:45 +0900

今回はflake8, autopep8を使って、Pythonコードを静的解析します。

静的解析とは

コードを実行せずに行う解析です。コーディングルールチェックや、制御フローの解析、コードの複雑度の分析をすることでソースコードにある問題点を発見してくれます。

flake8とは

pep8のチェック、pyflakesのチェック、及び循環的複雑度をチェックできるラッパーのことです。導入をすることで普段から綺麗なコーディングができます。

autopep8とは

pep8のスタイルガイドに適用するように、自動的にPythonコードをフォーマットしてくれます。

flake8, autopep8インストール

さっそくインストールしていきましょう。
以下コマンドでflake8をインストールできます。

pip install flake8

次にautopep8をインストールします。

pip install autopep8

とても簡単ですね。

使い方

flake8

flake8 <対象ファイルへのパス>

このコマンドで対象ファイルを静的解析することができ、結果をターミナルに表示してくれます。

autopep8

autopep8 --in-place --aggressive --aggressive <filename>

公式ドキュメントにはこのように実行することを推奨しています。 --in--placeをつけることでファイルを更新してくれます。これがないとコードを自動的にフォーマットして、更新してくれません。 --aggressiveをつけることでコード整形のレベルを指定でき、２つつけることでレベル2になり修正対象のエラーが増えるそうです。このコマンドで対象ファイルを静的解析することができ、結果をターミナルに表示してくれます。

試してみる

test.pyを任意のディレクトリに作成します。内容はこんな感じにしてみました。

def example(num_a,num_b,num_c,num_d,num_e,num_f,num_g,num_h):
    print(num_a+num_b+num_c+num_d+num_e+num_f+num_g+num_h)
num_a,num_b,num_c,num_d,num_e,num_f,num_g,num_h = 1,   2,  3,  4, 5,  6,  7,   8
example(   num_a,     num_b,      num_c, num_d,num_e,   num_f,  num_g,   num_h  )

適切な改行や空白をいれることができていないし、文字列がとても長くなってしまっています。まずはflake8で静的解析をします。

test.py:1:18: E231 missing whitespace after ','
test.py:1:24: E231 missing whitespace after ','
test.py:1:30: E231 missing whitespace after ','
test.py:1:36: E231 missing whitespace after ','
test.py:1:42: E231 missing whitespace after ','
test.py:1:48: E231 missing whitespace after ','
test.py:1:54: E231 missing whitespace after ','
test.py:3:1: E305 expected 2 blank lines after class or function definition, found 0
test.py:3:6: E231 missing whitespace after ','
test.py:3:12: E231 missing whitespace after ','
test.py:3:18: E231 missing whitespace after ','
test.py:3:24: E231 missing whitespace after ','
test.py:3:30: E231 missing whitespace after ','
test.py:3:36: E231 missing whitespace after ','
test.py:3:42: E231 missing whitespace after ','
test.py:3:80: E501 line too long (80 > 79 characters)
test.py:4:9: E201 whitespace after '('
test.py:4:47: E231 missing whitespace after ','
test.py:4:80: E501 line too long (81 > 79 characters)
test.py:4:80: E202 whitespace before ')'

コードが汚いと怒られていますね。この汚いコードを綺麗にするために、autopep8を実行します。その後、ソースコードを見ると

AtCoder Beginner Contest 160の振り返り

Sun, 29 Mar 2020 16:05:35 +0900

今回で3回目のコンテスト参加となりました。前回が2月22日（土）だったので１ヶ月ぶりでした。この１ヶ月、AtCoderの問題に取り組んでいなかったので、散々な結果となりました。。（日頃からコツコツとやらないとダメですね。）

今回の結果はC問題が解けずに終わってしまい、悔しかったです。今後、類似問題が出てきても解けるように振り返りをします。今回の僕の結果はこちらから。（弱弱なので、お恥ずかしい。笑）

A - Coffee

問題文

ある長さ6の英小文字からなる文字列がcoffeeに似ているとは、3文字目と4文字目が等しく、5文字目と6文字目も等しいことを言います。与えられる文字列Sがcoffeeに似ているか判定してください。

制約

Sは長さ6の英小文字からなる文字列である。

解説

この問題は長さ6の文字列が3文字目 = 4文字目、5文字目 = 6文字目の時にYes、違う時にNoを表示すればOKです。

回答

N = input()
if(N[2] == N[3] and N[4] == N[5]):
    print("Yes")
else:
    print("No")

B - Golden Coins

問題文

高橋君は金色の硬貨が好きです。自分が持っている500円硬貨1枚につき1000、5円硬貨1枚につき5の嬉しさを得ます。高橋君はX円を持っています。これを高橋君の嬉しさが最大になるように両替したとき、高橋君の嬉しさはいくらになりますか？ (なお、利用できる硬貨は500円玉、100円玉、50円玉、10円玉、5円玉、1円玉の6種類とします。)

制約

0≤X≤10^9
Xは整数

解説

高橋君が持っているX円が500円何枚分（Y枚）あるのかを求めてから、X＝X-500*Y円をして、同様にX円が5円何枚分（Z枚）あるか求めます。その後、Y*1000+Z*5を表示すればOKです。

回答

math.floorを使うことで小数点以下を切り捨てしています。

import math

X = int(input())
total_500 = 0
total_5 = 0
total_count = 0

if(X >= 500):
    total_500 = math.floor(X/500)
    total_count += total_500 * 1000
    X -= total_500 * 500

if(X >= 5):
    total_5 = math.floor(X/5)
    total_count += total_5 * 5
    X -= total_5 * 5

print(total_count)

C - Traveling Salesman around Lake

問題文

1周Kメートルの円形の湖があり、その周りにN軒の家があります。i番目の家は、湖の北端から時計回りにAiメートルの位置にあります。家の間の移動は、湖の周りに沿ってのみ行えます。いずれかの家から出発してN軒すべての家を訪ねるための最短移動距離を求めてください。

制約

2≤K≤10^6
2≤N≤2×10^5
0≤A1<…<AN<K
入力中のすべての値は整数である。

解説

この問題を解いているとき、全ての出発地点からの最短経路を全部計算するのかなと思ってしまい、実装方法が訳分からずに途中で解くのをやめました。。
解き方として、円形の湖沿いを通って全ての家を通る必要があるので、最短経路を求めるには家と家の距離が最大の道を通らなければいいみたいです。（こういう問題を円環っていうらしいです。）以下の画像のように、湖を2周した長さを直線で表示すると、それぞれの家と家の距離がわかるので、最大の道をKメートルから引いてあげます。

Hugoで作成したサイトの表示設定について

Tue, 24 Mar 2020 16:36:43 +0900

今回、Hugo + Netlify で本ブログを作成しましたが、最初サイトの見栄えがよくなかったので、各種設定をしました。 Hugoはconfig.tomlを修正すれば、簡単にサイトの表示を変えることができます。今回は僕が行った修正を記載します。

`config.toml`設定

現在の本ブログのconfig.tomlはこんな感じになっています。

baseURL = "https://yuyagishita.com/"
languageCode = "en-us"
title = "YAGI BLOG"
theme = "beautifulhugo"
summarylength = 100
HasCJKLanguage = true

[Params]
  readingTime = true
  wordCount = true
  socialShare = true

[Author]
  github = "yuyagishita"
  twitter = "yuyagishita"

[taxonomies]
  category = "categories"
  tag = "tags"

[[menu.main]]
  name = "Home"
  url = "/"
  weight = 1

[[menu.main]]
  name = "Tags"
  url = "tags"
  weight = 2

[[menu.main]]
  name = "Categories"
  url = "categories"
  weight = 3

[blackfriday]
  hrefTargetBlank = true

１つずつ解説していきます。

Nginx + uWSGI + Python(Django)の環境をdockerで作成する

Mon, 23 Mar 2020 22:18:15 +0900

はじめに

Nginx + uWSGI + Python(Django)のアプリ環境をDockerで作成する方法を本記事にまとめました。

Docker for Windowsのインストール

コントロールパネルを開いて、「プログラムと機能」→「Windowsの機能を有効化または無効化」→「Hyper-V」にチェックが入っているか確認します。
チェックが入っていなかった場合は、チェックを入れてPCを再起動させて有効化させます。
次に「Docker Desktop for Windows」のインストールをします。
インストールはここからできます。

Djangoを動かす環境構築

ディレクトリ構成

以下、構成でDjangoアプリを動かします。

Infrastrcuture作成

Alpineにpython + uWSGI、Nginxをインストールします。

docker-compose.yml作成

Nginxとpython + uWSGIのコンテナを作成します。
今回はログをdjango-sample配下に出力するようにしていますが、お好きなところにログを吐き出すように設定してください。

django-sample/docker-compose.yml

version: '2'
services:
  nginx:
    build: "./Infrastructure/nginx/"
    volumes:
      - ./logs/nginx:/var/log/nginx
    ports:
      - "80:80"
    networks:
      django-sample-network:
        ipv4_address: 172.23.0.4
  python:
    build: "./Infrastructure/python/"
    volumes:
      - ./Application/django-sample:/home/work/django-sample
      - ./logs/django:/home/work/django
      - ./logs/uwsgi:/home/work/uwsgi
    ports:
      - "8000:8000"
    networks:
      django-sample-network:
        ipv4_address: 172.23.0.5
networks:
  django-sample-network:
    driver: bridge
    ipam:
     driver: default
     config:
       - subnet: 172.23.0.0/24

Dockerfile作成

Nginx

django-sample/Infrastructure/nginx/Dockerfile

AtCoder用にPythonの環境構築

Mon, 16 Mar 2020 22:24:26 +0900

本記事は以前Qiitaに投稿した内容を本ブログに持ってきています。

はじめに

最近、AtCoderを始めました。
AtCoderは競技プログラミングサイトで、毎週リアルタイムのコンテストが開催されていて、AtCoderで評価されたレーティングを利用して、転職活動ができるAtCoderJobsというサービスが話題になっているそうです。
最初、シェルがfishでHomebrewなどが入っている状態で色々試していましたが、うまくいかなかったので、Mac環境をきれいにして環境構築をしました。

環境

macOS Catalina 10.15.2 Homebrew 2.1.15 bash 3.2.57

シェルをbashに戻す

ターミナルで以下コマンドを叩いて、ターミナルの再起動をするとシェルがbashに戻ります。

$ chsh -s /bin/bash

Homebrewをアンインストールする

以下コマンドを叩いてパスワードを入力すると、Homebrewをアンインストールできます。

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"

Homebrewの公式サイトに記載されています。

Homebrewインストールする

以下コマンドを叩く。

$ usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

インストールできたか確認するために、以下コマンドを叩きます。

$ brew doctor

すると、Warningが大量に出たので、brew doctorでWarningが出たので解決方法まとめました。(for Mac)を参考に解決しました。
Warning: Unbrewed dylibs were found in /usr/local/include. のログに関しては残すことを忘れてしまっていたので、上記記事を引用しています。

Please note that these warnings are just used to help the Homebrew maintainers
with debugging if you file an issue. If everything you use Homebrew for is
working fine: please don't worry or file an issue; just ignore this. Thanks!

Warning: Unbrewed header files were found in /usr/local/include.
If you didn't put them there on purpose they could cause problems when
building Homebrew formulae, and may need to be deleted.

Unexpected header files:
  /usr/local/include/arith.h
  /usr/local/include/binary_log_types.h
  /usr/local/include/cdt.h
  /usr/local/include/cgraph.h
  /usr/local/include/color.h
  /usr/local/include/decode.h
  /usr/local/include/demux.h
  /usr/local/include/encode.h
  /usr/local/include/errmsg.h
  /usr/local/include/fcfreetype.h
  /usr/local/include/fcprivate.h
  /usr/local/include/fontconfig.h
  /usr/local/include/freetype/config/ftconfig.h
  /usr/local/include/freetype/config/ftheader.h
  /usr/local/include/freetype/config/ftmodule.h
  /usr/local/include/freetype/config/ftoption.h
  /usr/local/include/freetype/config/ftstdlib.h
  /usr/local/include/freetype/freetype.h
  /usr/local/include/freetype/ftadvanc.h
  /usr/local/include/freetype/ftbbox.h
  /usr/local/include/freetype/ftbdf.h
  /usr/local/include/freetype/ftbitmap.h
  /usr/local/include/freetype/ftbzip2.h
  /usr/local/include/freetype/ftcache.h
  /usr/local/include/freetype/ftchapters.h
  /usr/local/include/freetype/ftcid.h
  /usr/local/include/freetype/ftdriver.h
  /usr/local/include/freetype/fterrdef.h
  /usr/local/include/freetype/fterrors.h
  /usr/local/include/freetype/ftfntfmt.h
  /usr/local/include/freetype/ftgasp.h
  /usr/local/include/freetype/ftglyph.h
  /usr/local/include/freetype/ftgxval.h
  /usr/local/include/freetype/ftgzip.h
  /usr/local/include/freetype/ftimage.h
  /usr/local/include/freetype/ftincrem.h
  /usr/local/include/freetype/ftlcdfil.h
  /usr/local/include/freetype/ftlist.h
  /usr/local/include/freetype/ftlzw.h
  /usr/local/include/freetype/ftmac.h
  /usr/local/include/freetype/ftmm.h
  /usr/local/include/freetype/ftmodapi.h
  /usr/local/include/freetype/ftmoderr.h
  /usr/local/include/freetype/ftotval.h
  /usr/local/include/freetype/ftoutln.h
  /usr/local/include/freetype/ftparams.h
  /usr/local/include/freetype/ftpfr.h
  /usr/local/include/freetype/ftrender.h
  /usr/local/include/freetype/ftsizes.h
  /usr/local/include/freetype/ftsnames.h
  /usr/local/include/freetype/ftstroke.h
  /usr/local/include/freetype/ftsynth.h
  /usr/local/include/freetype/ftsystem.h
  /usr/local/include/freetype/fttrigon.h
  /usr/local/include/freetype/fttypes.h
  /usr/local/include/freetype/ftwinfnt.h
  /usr/local/include/freetype/t1tables.h
  /usr/local/include/freetype/ttnameid.h
  /usr/local/include/freetype/tttables.h
  /usr/local/include/freetype/tttags.h
  /usr/local/include/ft2build.h
  /usr/local/include/geom.h
  /usr/local/include/graphviz_version.h
  /usr/local/include/gvc.h
  /usr/local/include/gvcext.h
  /usr/local/include/gvcjob.h
  /usr/local/include/gvcommon.h
  /usr/local/include/gvconfig.h
  /usr/local/include/gvplugin.h
  /usr/local/include/gvplugin_device.h
  /usr/local/include/gvplugin_layout.h
  /usr/local/include/gvplugin_loadimage.h
  /usr/local/include/gvplugin_render.h
  /usr/local/include/gvplugin_textlayout.h
  /usr/local/include/gvpr.h
  /usr/local/include/lt_dlloader.h
  /usr/local/include/lt_error.h
  /usr/local/include/lt_system.h
  /usr/local/include/mux.h
  /usr/local/include/mux_types.h
  /usr/local/include/my_command.h
  /usr/local/include/my_list.h
  /usr/local/include/mysql.h
  /usr/local/include/mysql/client_plugin.h
  /usr/local/include/mysql/plugin_auth_common.h
  /usr/local/include/mysql/udf_registration_types.h
  /usr/local/include/mysql_com.h
  /usr/local/include/mysql_time.h
  /usr/local/include/mysql_version.h
  /usr/local/include/mysqld_error.h
  /usr/local/include/mysqlx_ername.h
  /usr/local/include/mysqlx_error.h
  /usr/local/include/mysqlx_version.h
  /usr/local/include/pack.h
  /usr/local/include/pathgeom.h
  /usr/local/include/pathplan.h
  /usr/local/include/png.h
  /usr/local/include/pngconf.h
  /usr/local/include/textspan.h
  /usr/local/include/types.h
  /usr/local/include/usershape.h
  /usr/local/include/xdot.h

Warning: Your Xcode (10.3) is outdated.
Please update to Xcode 11.3 (or delete it).
Xcode can be updated from the App Store.

Warning: Broken symlinks were found. Remove them with `brew cleanup`:
  /usr/local/lib/node_modules/expo-cli/node_modules/.bin/detect-libc
  /usr/local/lib/node_modules/expo-cli/node_modules/.bin/prebuild-install

まずは、Warning: Unbrewed header files were found in /usr/local/include.の解決をします。

GoでインストールからHello Golang！！

Mon, 16 Mar 2020 22:22:38 +0900

本記事は以前Qiitaに投稿した内容を本ブログに持ってきています。

概要

MacにGoをインストールして、「Hello Golang！！」を表示させるところまでを解説していきます。
また、僕はシェルにfishを使っているので、fish向けの環境構築についても記載します。

環境

macOS Catalina 10.15.1
Homebrew 2.1.15
fish 3.0.2

Goインストール

$ brew install go

$ go version
go version go1.13.3 darwin/amd64

Homebrew使うとコマンド一つでインストールできるので、とても便利です。

GOPATHの設定

GOPATHとは、Goのソースをまとめているディレクトリを指定している環境変数のことであり、 GOPATHを利用することで、外部ライブラリの導入やビルド作業を非常に簡単に行うことができます。

bashでGOPATHを指定するには、

$ vim ~/.bash_profile

で設定ファイルに以下追記をします。

export GOPATH=$HOME/go（←ワークスペースにしたい場所）
export PATH=$PATH:$GOPATH/bin

僕のようにシェルにfishを使っている人は、

vim ~/.config/fish/config.fish

で設定ファイルに以下追記をします。

set -x GOPATH $HOME/go
set -x PATH $PATH $GOPATH/bin

これでGOPATHの設定は完了です。

Hello Golang！！

ではいよいよ「Hello Golang!!」を表示させていきます。

ディレクトリ構成

最終的に以下構成になります。

go/
┣ bin/
   ┣ hellogolang
┣ pkg/
┣ src/
   ┣ hellogolang/
              ┣ main.go

以下ファイルのそれぞれの役割に関して記載します。
bin：　実行ファイルが格納されるディレクトリ
pkg：　ビルドしたパッケージオブジェクトが格納されるディレクトリ
src：　パッケージごとのソースが格納されるディレクトリ

新卒でJava Silverに合格した体験記

Mon, 16 Mar 2020 22:20:52 +0900

本記事は以前Qiitaに投稿した内容を本ブログに持ってきています。

2019年3月にOracle Certified Java Programmer, Silver SE 8 認定資格を取得していて、これから受験しようと思っている人のためになればと思い、記事を作成しました。

Java Silverとは

Oracle社が提供しているJava技術者向けの資格の１つで、今回僕が受けたテストは、「Oracle Certified Java Programmer, Silver SE 8 認定資格」です。
公式によると

Oracle Certified Java Programmer, Silver SE 8 認定資格は、Javaアプリケーション開発に必要とされる基本的なプログラミング知識を有し、上級者の指導のもとで開発作業を行うことができる開発初心者向け資格です。 https://www.oracle.com/jp/education/certification/jse8-2489021-ja.html

この試験のレベルは入社してからJavaの基礎的な研修を受けて、業務を数ヶ月こなせば初見でも全く分からない問題はないかなといった感じです。
オブジェクト指向がまったく分からない状態で、Java Silverの勉強を始めるのは少ししんどいかもです。
また、受験料が3万弱するので、落ちると悲惨です。。
確実にとりましょう！（Oracleの資格は一回落ちても、無料で再度受験できるキャンペーンをやっていることがあるので、申し込む時に忘れずに。）

勉強を始める前の僕のレベル

IDE（Eclipse）を使って、なんとかJavaのコードはかけるが、基礎的な型の継承やポリモーフィズムやカプセル化などの理解は曖昧って感じでした。

試験勉強の仕方

自分は2018年9月から2019年3月までにJava Silverに合格することを会社の自分の目標にしていて、Javaプログラマ Silver SE 8 スピードマスター問題集を購入して、最初はコツコツと出勤時のお昼時間や業務中に空いている時間で勉強していました。
ですが、だらだらと勉強をしてしまっていたせいで、気付いたら1月も終わろうとしていました。笑
そこからやばいと思い本気で勉強を始めました。

本気の時の勉強

出社時のお昼時間
業務中の空いた時間
平日は退社してから、カフェで2時間勉強
休日は予定がなかったら、3〜4時間ぐらい

こんな感じで60時間程度は学習にあてました。

Javaプログラマ Silver SE 8 スピードマスター問題集は3〜4周取り組みました。
1周目で分からなかった問題にチェックマークをつけて、２周目で再度解けなかった問題に取組み、最後の演習問題で分からなかった章の問題に次の周で取り組むといった具合で問題集を解いていました。
他には、TECH ProjinにJava Silverの問題があったので、その問題を解いたりしていました。

出題範囲

１章　Javaの基礎
２章　Javaのデータ型の操作
３章　演算子と判定構造の使用
４章　配列の作成と使用
５章　ループ構造の使用
６章　メソッドとカプセル化の操作
７章　継承の操作
８章　例外の処理
９章　Java APIの主要なクラスの操作

PythonでOpenPyXLを用いたExcel操作まとめ

Mon, 16 Mar 2020 22:18:19 +0900

本記事は以前Qiitaに投稿した内容を本ブログに持ってきています。

概要

業務でPythonを使ってExcelを作成することがあったので、備忘録としてこの記事を作成しました。
実行環境はPython 3.7で、OpenPyXLを利用してExcelを作成します。

作成・保存・読み込み

新規にExcel作成

from openpyxl import Workbook

wb = Workbook()

Excel保存

wb.save('test.xlsx')

save()にはエクセルを保存したいpath（ディレクトリとファイル名）を指定してください。

アクティブなシート取得

ws = wb.active

シート作成

ws2 = wb.create_sheet("Sheet2")
ws3 = wb.create_sheet("sheet3", 0)  # 最初のシートに設定
ws4 = wb.create_sheet("sheet4", -1)  # 最後から２番目にシートに設定

Excel読み込み

from openpyxl import load_workbook

load_workbook('test.xlsx')

シート編集

シートのタイトル命名

ws.title = "test-sheet"

セルに文字入力

ws['A1'] = "hogehoge"

['A1']の部分に指定したいセルを入力

数式を使う

ws['A1'] = "=SUM(1, 1)"

セルの結合

ws.merge_cells('A2:D2')

セルの結合解除

ws.unmerge_cells('A2:D2')

セルの色付け

from openpyxl.styles import PatternFill

fill = PatternFill(patternType='solid', fgColor='4d4d4d')
ws['A1'].fill = fill

patternTypeはセルの塗り方、fgcolorはセルに塗る色を指定しています。色に関しては、以下サイトなどを参考にしてください。 https://www.color-sample.com/colors/4d4d4d/

文字に色付け

from openpyxl.styles.fonts import Font

ws['A1'].font = Font(color='FFFFFF')

列の幅を変更

ws.column_dimensions['A'].width = 15

セルに罫線を設定

from openpyxl.styles.borders import Border, Side

border = Border(top=Side(style='thin', color='000000'),
                        bottom=Side(style='thin', color='000000'),
                        left=Side(style='thin', color='000000'),
                        right=Side(style='thin', color='000000')
                        )

for row_num in range(1, 15):
            for col_num in range(1, 3):
                ws.cell(row=row_num, column=col_num).border = border
                ws.cell(row=row_num, column=col_num).alignment = Alignment(horizontal = 'left', vertical = 'top', wrap_text = False)

horizontalで水平方向を、verticalで垂直方向を何揃えにするかを指定しています。horizontal, verticalでは以下の定数を指定することができます。
horizontal

'center', 'centerContinuous', 'fill', 'left', 'justify', 'distributed', 'right', 'general'

vertical

PythonでExcelを添付してメールを送信する

Thu, 12 Mar 2020 23:26:17 +0900

本記事は以前Qiitaに投稿した内容を本ブログに持ってきています。

概要

先日、業務で「PythonでExcelを添付してメールを送信する」機能を試行錯誤して実装しました。
Djangoのメール送信機能を使ったら、わりかし簡単に実装できたので、自分と同じに状況になるかもしれない人のために記事を作成しました！

環境

Python 3.7
Django 2.2
※ Djangoを利用していないと本記事の実装はできません。

事前準備

openpyxlをインストールします。

$ pip install openpyxl

メールサーバの設定

プロジェクトのsettings.pyに送信先の情報を追加します。
送信するメールサーバの情報を記載してください。
settings.py

EMAIL_HOST = '00.00.00.00' # 送信メールサーバ
EMAIL_PORT = '000'         # 送信メールポート

メールに添付するExcelを整える

添付したいExcelをbytesオブジェクトに変換します。
これをしないとメール送信ができません。

from openpyxl import load_workbook
from io import BytesIO

wb = load_workbook('test.xlsx') # 添付したいExcelを読み込む
excelfile = BytesIO()
wb.save(excelfile)              # Excelをbytesオブジェクトに変換する

メールをExcelを添付して送信する

以下、コードでメール送信ができます！！

from django.core.mail import EmailMessage

subject = "件名"
body = "本文です。"
send_from = "hogehoge1@gmail.com" # 送信者
send_to = ["hogehoge2@gmail.com"] # 宛先リスト
bcc = ["hogehoge3@gmail.com"] # Bccリスト

email = EmailMessage(subject, body, send_from, send_to, bcc)
email.attach('test.xlsx', excelfile.getvalue(), 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
email.send()

参考資料

https://speakerdeck.com/thinkami/djangocongress-jp-2019-talk https://narito.ninja/blog/detail/64/

Tech on YAGI BLOG

Obsidian+Claude Code+Neovimで運用始めた

以前の使い方

使い方の変化

さいごに

開発環境現状確認2026

OS

ウィンドウマネージャー

エディタ

ターミナル

コーディングエージェント

シェル

ブラウザ

dotfiles

メモ

キーボード

まとめ

sidekick.nvimの導入をした

導入時に気になったこと

感想

Gateway APIについて学んだ

Gateway APIとは

きっかけ

さわってみた

gateway.yaml

healthcheck.yaml

今年からSoftware Designを読み始めた

読むメリット

読んだなかで記憶に残っていること

さいごに

所属している会社のアドベントカレンダーを書いた2025

アドベントカレンダー書いた

GKE AutopilotのPodバーストとHPAで問題が起きた

発生した問題

原因

対処方法

まとめ

Kubernetes完全ガイドを読んだので感想とか

環境構築

図が多くて分かりやすい

第７章までやれば基礎力が身につく

第９章 リソース管理とオートスケーリング

運用上のベストプラクティスをもっと知りたい

マイクロサービスとの相性の良さ

まとめ

所属している会社のアドベントカレンダーを書いた

アドベントカレンダー書いた

最新の継続日数を取得するSQLを作ろうとした

経緯

実装

TablePlusで追加したデータが取得できない

解決策

Next.jsのgetServerSidePropsでリダイレクトをする

リダイレクト方法

最後に

「Type '型' is not assignable to type 'never'」のエラーを解消した

発生したエラー

解消法

最後に

Vuetifyで「Data Tables」を使って管理画面を作成する

全体のコード

基本的な使い方

「React Hook Form」でフォームを簡単に作る

React Hook Formとは

さっそく実装をする

HugoでTwitterカードを表示させる

Twitterカードとは

Twitterカード表示対応

Go製APIから「fetch」するのにハマった

今回発生したエラー

CSSの「@media」でレスポンシブ対応させる

@mediaとは

使い方

まとめ

MongoDB 入門

MongoDBインストール&起動

MongoDBのシェル起動

基礎的な用語解説

テストデータ作成

GitHubのプライベートリポジトリをgo getする

第９章　リソース管理とオートスケーリング

`@media`とは

1. `Personal access tokens`を作成

`Dockerfile`の作成

`docker-compose.yml`の作成

`config.toml`設定