ざきの学習帳(旧 zackey推し )

日々の学びを書きます

プログラミング

@nuxt/content でブログつくった という近況報告

2ヶ月ぶりの投稿です。 zaki-blog という、雑に書くブログをつくったので、その報告です。 ブログ作ったきっかけ 雑記ブログはじめました という記事に書きました。 概要は次のような感じ。 自分の砂場が欲しかった 考え、趣味を気軽に吐き出したかった 使用…

eslint-config-prettier@8.0 から prettier/hogehoge -> prettier だけ記載すれば良さそう

とあるリポジトリで npm-check-updates したところ eslint-config-prettier が v7 -> v8 にバージョンアップしていたことを知りました。 eslint-config-prettier/CHANGELOG.md#version-800-2021-02-21の Changed: All configs have been merged into one! と…

【Django 3.1】ForeignKey や OneToOneField で指定した参照先モデルのマネージャを指定するには Base Manager を変更する

Django 3.11 において、複数データベースを使い分ける手段を調べていたときに Default Manager Base Manager の存在を知りました。時間が経つと存在自体忘れそうなため、自分用にメモしときます。 認識齟齬等ありましたら、コメント等いただけると幸いです。…

dts-gen を使って 型情報のない(JavaScriptのみで記述されている)ライブラリから d.ts を生成する

現在、 JavaScript のみの Vue プロジェクトに対して TypeScript 導入を行なっています。 インストール済みのライブラリには、型情報のないもの1が存在し、以下のようなエラーが発生していました。 Could not find a declaration file for module 'ライブラ…

Vue2 x JavaScript と Vue2 x TypeScript の環境を行き来して

Vue2 x JavaScript と Vue2 x TypeScript の環境を交互で開発し、約半年が経ちました。 振り返ってみると、しみじみ TypeScript のメリットがわかりました。(デメリットはなかったです。) 自分が感じたメリットをメモしておきます。もし Vue2 x JavaScript…

leetcodeの回答をリポジトリ管理、 ts-jest でテストを書いているはなし

コミュニティの人たちと、leetcodeの問題を週1で解いていく活動をはじめました。 この記事では、leetcode回答までの流れを書き留めておきたいと思います。 leetcode始めたい...という方の参考になれば、幸いです。 leetcode回答の流れ リポジトリ ts-jestの…

【JavaScript】Facebookログイン〜Instagram Graph APIの実行 までできたサンプルと所感

前提条件として、バージョンは以下。 Facebook JavaScript SDK: v8.0 Facebook Graph API / Instagram Graph API: v9.0 タイトル通り、Facebookログイン〜Instagram Graph APIの実行までできたので、雑に作ったサンプルと手順を以下リポジトリ・ディレクトリ…

【JavaScript】URLSearchParams でクエリパラメータを操作する

フロントで、クエリパラメータをいい感じにkey-valueのObjectに変換したい...っていうことをやりたくて、探したところ、Web標準のAPIとして提供されていました。 developer.mozilla.org 正規表現やVueRouterのようなライブラリを用いる手段のみと思っていた…

【Vue.js】 vue-facebook-login-component を参考に Facebookログイン を実装してみた

とある要件でInstagram Graph APIを使う事になったのですが、 使用するにはFacebookログインを行なっている動画撮影と アプリ申請が必要となることがわかりました。 スタートガイド - Instagramプラットフォーム - ドキュメンテーション - Facebook for Deve…

【Python】unittest.TestCase.subTest ブロックで、データをループするテストケースのエラーをすべて出力する

Effective PythonでsubTestの存在を知ったため、 メモとして書き残しておこうと思います。 Effective Python 第2版 ―Pythonプログラムを改良する90項目作者:Brett Slatkin発売日: 2020/07/16メディア: 単行本(ソフトカバー) unittest.TestCase.subTest と…

(LTに向けての整理)開発環境として、Python x Remote Containerの使い道

202008/28-29に開催されるPycon JP 2020 Onlineにて、スポンサーブースでLTをやることになりました。 pycon.jp ネタとしては、 challenge-every-monthで行なっている「Effective Python 第2版」の読書&質疑応答が、Python初学者の自分にどういう影響を与え…

VSCode Remote Container でPythonお試し環境を作った時のメモ

Pythonのバージョン管理をpyenv、ライブラリ管理をpoetryに頼っているのですが、現場(業務)ではコンテナ上で動かすものが多い印象です。 コンテナ上での開発であれば、VSCode Remote ContainerでPythonの補完を効かせて開発したいと思っていたのですが、な…

【AngularJS】$resourceのカスタムメソッド、DELETEを扱う場合の注意

AngularJSとは、Angularの古いバージョンを指します。詳しくはWikiの「AngularとAngularJSの違い」を参照してください。(以下、一部抜粋) 2012年6月にリリースされたバージョン1は「Angular 1」や「AngularJS」と呼ばれており、その後、2016年9月にリリー…

【Django】settings.pyを分割する際の修正範囲

Djangoでローカル・ステージング・本番環境別の設定をどう分割するか、以下の書籍や記事で記述されています。 書籍 現場で使える Django の教科書《基礎編》 自走プログラマー ~Pythonの先輩が教えるプロジェクト開発のベストプラクティス120 記事 Djangoア…

【VSCode】python.autoComplete.extraPaths を設定し、外部モジュールのインテリセンスを有効にする

次の職場でDjangoを用いるため、Pythonを使い出しました。 パッケージ管理は以下を使っています。 GitHub - pypa/pipenv: Python Development Workflow for Humans. Poetry - Python dependency management and packaging made easy. Ruby / JavaScriptの開…

microCMS のコンテンツ更新のタイミングで Vercel (ZEIT Now) を再ビルド・デプロイさせる

前回は、Gridsome x microCMSを用いた簡単なブログサイトを構築した。 これで npm run build で生成したファイルをNetlify / Vercel等へホスティングさせると、ブログサイトとして公開できる。 しかし、このままではmicroCMSのコンテンツ更新をするたび、Net…

APIベース・日本語UIで使いやすい microCMS を Gridsome で使う

実家サイトにお知らせ欄を追加。自分を介さず、オーナーや店舗スタッフがお知らせ等を更新できるようにしたい。 上記機能を実現するため、microCMSを導入することを検討している。 この記事では、別リポジトリにて、microCMSをGridsomeへ導入する素振りを行…

CSSフレームワークに依存しない手法を学ぶため / 「 CSS設計完全ガイド 」を読んだ

「 CSS設計完全ガイド 」を読んだ。 本書では、 CSS設計の知識を吸収し,フロントエンドエンジニアにステップアップしたいひと 向上心が強く,CSS設計について理解を深めたい初級フロントエンドエンジニア 会社としてCSSのルールを策定したいチームリーダー…

【Udemy】「Typescript with modern React (i.e. hooks, context, suspense)」を修了したので感想など

2019年末くらいにUdemyで買って放置していた Typescript with modern React (i.e. hooks, context, suspense) にようやく着手、修了しました。 この記事では、 コースの内容紹介と背景 学べたこと 所感 などを書き留めておきます。

「Design It! プログラマーのためのアーキテクティング入門」の咀嚼 第1章 ソフトウェアアーキテクトになる

近々、プロダクトの近い位置で仕事する機会が増えます。 今までの、 SES・Slerといった顧客の要件を元に開発するスタイルから、 自分たちで最適解の機能・アーキテクチャを開発するスタイルへと変わります。 言語やフレームワークといった開発も大事ですが、…

Clean Architecture 第11章「DIP: 依存関係逆転の原則」の読書メモ

現在、自分がいるコミュニティにて、クリーンアーキテクチャの輪読会が行われています。 Clean Architecture 達人に学ぶソフトウェアの構造と設計【委託】 - 達人出版会 輪読会の様子 CleanArchitecture輪読会始まりました - もがき系プログラマの日常 第2回…

GitHub Actionsを使って、MarkdownファイルからPDF(職務経歴書)を生成する

この記事では、以下のことを記載します。 はじめに(職務経歴書をMarkdownで記述、GitHubで管理する) GitHub ActionsでPDFを生成する md-to-pdfでMarkdown→PDF出力 手順 1. README.mdに職務経歴書を記述する 2. md-to-pdfをインストール、PDF出力するスクリ…

RSpecが特定のファイルしか実行されない(または中断されてしまう)場合は focus: true がないかチェックする

最近、仕事でSSO周りをRuby on Railsで実装しているのですが、 連携先によってロジックが変わります。 そのロジックを誰か(自分)が引き継ぐとなった場合、 何が正と判断するのに、テストコードが非常に参考になるという経験をしました。 テストコードはRSp…

アップデートやリファクタリングのときに「やりたかったことが思ったよりも残ってしまった」をしないための対策

※自分のための反省、ポエム記事(日記)に近いため、技術記事と期待された方はスルーしてください。 2019年は色々あった。時系列に並べると、 人生2回目の退職と転職 実家で料理屋さんが始まった、サイトつくった はじめての自社プロダクト開発 はじめてのリ…

【Vue.js】 @vuese/cli でコンポーネント一覧のドキュメントをサクっと生成・プレビューする

Vue Advent Calendar 2019 17日目の記事です。 16日目はgyarasuさんでした、お疲れ様でした! 16日目の記事 - Vue.jsプラグインで始めるOSS - Qiita この記事では@vuese/cli について、 導入までの手順を調査した際のメモを記載したいと思います。 @vuese/cl…

gridsome v0.7.11 で 「fatal error: 'vips/vips8' file not found」が発生した際に対処した方法

※雑メモ記事です。 環境 現象発生した際の環境となります。 macOS Mojave node 13.1.0 概要 / 現象 久しぶりにGridsomeでサイトを作ろうと gridsome create <project-name>とした 際、 ../src/common.cc:25:10: fatal error: 'vips/vips8' file not found #include <vips/vips8> ^~~~~~</vips/vips8></project-name>…

【Vue.js】VeeValidate v3.x の導入および使用例

追記 一休さんにて、実際にv2→v3にバージョンアップされた際の記事を出されました。 user-first.ikyu.co.jp マイグレーションガイドとIssueを深掘り、詳しく書かれているので、目を通すことをお勧めします。 とある仕事でVeeValidateという、Vue.js用バリデ…

【Vue.js】VueCLI3.x 4.xで環境変数を扱う場合は .env ファイルに VUE_APP_ の接頭語をつける

現在、とある開発でVueアプリケーションのリファクタリングを行なっています。 マイグレーション対象にはVueCLIも含まれており、2.x→4.xへのバージョンアップを行いました。 この記事では、マイグレーション作業中に気づいた、VueCLI4.x系の環境変数の扱いに…

【Chrome拡張開発】コンテキストメニューに項目を追加する

現職では、社内・パートナーさんとの連絡手段としてChatworkを使用していますが、メッセージのピン留機能がないことに困っています。 Chrome Webストアで検索しても、該当するような拡張機能が見当たらなかったため、勉強がてら作成しようと思い、Chrome拡張…

typescript-eslint + prettier を併用する際は member-delimiter-style の設定に気をつける

"Prettier" でググった記事を参考に、雰囲気で導入していたPrettier、 公式ドキュメントを読んでみると、きちんと腹落ち&導入することができましたが、typescript-eslintとprettierの設定が競合する状態となってしまいました。 この記事では、その競合を解…