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

日々の学びを書きます

プログラミング

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の設定が競合する状態となってしまいました。 この記事では、その競合を解…

Next.js x tailwindcss で静的サイトを生成する

技書博のサイトがNext.jsで作成されており、何か自分も開発に携われないかな...と思いつつコードを見てみました。 github.com が、そもそも自分、Reactもチュートリアルをお遊び程度に触った程度のため、どこから手をつければいいかわからん状態でしたorz と…

Gridsome を 0.6→0.7 にバージョンアップしたら「The field Query.metaData is deprecated. Use Query.metadata instead.」の警告が出た

Gridsomeで作成したサイトに新機能を追加するため、Gridsomeのプラグインを検索しようとしたところ、いつのまにかv0.7にバージョンアップしていました。 Gridsome v0.7 - Gridsome gridsome/CHANGELOG.md at master · gridsome/gridsome · GitHub 「新機能を…

【eslint】 JavaScript (*.js) と TypeScript (*.ts) が混同しているプロジェクトに typescript-eslint を導入した際のメモ

最近、実践TypeScriptという本を読み切りました。 (全てものにできたかというと...orz また何かを作りながら読み返す必要がありそう...) 勉強しながら検証コードを書いていたところで、typescript-eslintというeslint系のライブラリの存在を知りました。 G…

【React】create-react-app後、eslint系の設定をeslintrcに移した際のメモ

最近、実践TypeScriptという本を購入し、TypeScriptでReactやVueを書く勉強をしています。 上記本の 第7章 TypeScriptとReact にて、create-react-appを用いて、TypeScript x Reactな環境を構築・学習しています。 その際、package.jsonからeslint系の設定を…

【Ruby on Rails】デメテルの法則 と Moduleのinclude / forwardable / delegate を用いたメソッドの委譲について咀嚼した考えまとめ

現在、会社からオブジェクト指向設計実践ガイドを借りて読んでます。 オブジェクト指向設計実践ガイドを自分なりにざっくり説明すると、 Practical Object-Oriented Design in Rubyという本の翻訳版 Ruby on Railsにおけるオブジェクト指向設計を「なんとな…

【Visual Studio Code】拡張機能 Polacode でシンタックスハイライトが効いたソースコードのスクショを撮る

最近、会社でテックブログを始めて、個人のブログがおろそかになっている...orz 約1年前から、通勤中にPodcastを聴いて、ゆるーく知識をつけられていることに充実味を感じています。 今回は、UIT INSIDEというPodcastで紹介されていたVSCode(Visual Studio …

【Vue Material】ハッシュタグを実装する場合はChips(チップス)を使えばいいっぽい

最近、仕事で久しぶりにVue.jsを使ってUIを作っています。 CSSフレームワークとしては、Material DesginのコンポーネントをVue.jsで使用可能にした「Vue Material」を使用しています。 ハッシュタグを登録するようなUIを実装しようとしているのですが、ハッ…

【Ruby】型チェックをしてくれるGem「 Sorbet 」を試してみた(Railsへ導入〜動作確認まで)

個人的に今年から毎週読ませていただいている週間Railsウォッチにて、「Sorbet」というGemが紹介されました。 ※アイコンかわゆい。 よければプロダクトにも導入してみたいな〜と思い、軽い気持ちで触ってみました。 この記事なに? Sorbetとはなんぞや? …

【Ruby on Rails】Gem「ActiveDecorator」の紹介 View向けのメソッドを定義する

Userモデルみたいなクラスがあって、 first_name(姓) last_name(名) のようなカラムがあった場合、以下のようにfirst_nameとlast_nameを組み合わせて、full_nameという、Viewやレスポンス用のメソッドを実装するシーンがあるかと思います。 class User <…

【Ruby】gem「nokogiri」を使ってHTML要素を抜き出す

bundle installした時にRubyのバージョンがあってなくて「nokogiriのインストールが終わらん〜」って悶絶するかたをよく見る気がします。 今回は、お仕事で例のnokogiriを調査→使うシーンがありましたので、調査時のメモを書き残しておこうかなと思います。

【Vue.js】アップロードした画像をトリミングできるコンポーネントを調べた

TwitterやInstagramで画像アップロードする際、画像の拡縮や比率で切り取りといったトリミング機能があると思います。 今回、仕事で上記のような要件が発生したため、画像トリミングができるVueコンポーネントがないか調査しました。 この記事なに? コンポ…