zackey推し

IT系のこと書くぞい

プログラミング

「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 を導入および使用例

とある仕事でVeeValidateという、Vue.js用バリデーション系のライブラリを使っていて、 今度v2.x→v3.xのバージョンアップを行います。 github.com この記事では、VeeValidate v3における導入方法・使用例をメモとして書き残しておきます。 導入方法 使用例 v…

【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コンポーネントがないか調査しました。 この記事なに? コンポ…

【JavaScript】コミットする前にlint-stagedでeslintのチェックをする

eslintの設定をしたけど、eslintの警告やエラーを無視したままコミットしてしまった...ということがありました。 できれば、git add 〜→git commit 〜する際にeslintによるチェックをかけて、commitできないようにしておきたい... と思っていたら、実際にで…

【Gridsome v0.5.7】vue-metaを使ってOGP(Twitter・Facebook)の設定を行う

先日、Gridsome x Netlifyでお店のサイトを作り始めたという記事を書きました。 記事 【個人開発】Gridsome(Vue.js) x Netlifyで実家のお店のサイトを作り始めた - zackey推し GitHub GitHub - zakizaki-ri9/gridsome-trattoria-site: TRATTORIA e BAR POR…

【個人開発】Gridsome(Vue.js) x Netlifyで実家のお店のサイトを作り始めた

GW突入ですね! この記事は、challenge-every-month全員でアウトプット芸人 Advent Calendarの2日目記事です! GW Advent Calendar | challenge-every-month全員でアウトプット芸人 Advent Calendar 10連休向けアドベントカレンダーシステムを作った【個人開…

【Vue.js】VueCLI3とGridsomeに「Pug」を導入する

VueCLI3で作ったVue.jsプロジェクトに対して「Pug」を導入した際、設定ファイルに関する理解が乏しく、ハマってしまった。。。 同じ手間をなくすため、自分なりに咀嚼した「Pug」の導入手順をメモしておきます。 この記事なに? 本編 VueCLI3の場合 プラグイ…

【VSCode】MarkdownでFont Awesomeのプレビューを有効にする方法

本記事では、VSCode(Visual Studio Code)でMarkdownプレビューを行う際、fontawesomeを有効にする方法を書きます。 はじめに なりゆき Font Awesomeとは? 本題 使用するリポジトリ 手順 Font Awesomeのダウンロード ワークスペース用settings.jsonの編集 …

【Ruby on Rails】Materializeを導入する

Vue.jsからまたRuby on Rails(以降RoRで略します)中心でフロントをいじる感じになりそうなため、リハビリの意味をこめて、改めてRoRでフロント作成、簡単なポートフォリオを作ろうかなと思います。 その中でmaterialize-sassというgemをベースにフロントを…

【Ruby】Visual Studio CodeでRubyのコード補完を有効にする

普段、VSCodeを使ってRubyを書いているのですが、コード補完が効かなくて辛みを感じています。 みんな同じ環境でコード書いているのかなと思い、色々検索したら、やはりコード補完機能ありました。 半年Rubyやっておきながら、今知るとは...Rubyを勉強始めた…

【Vue.js】Vue.jsにテンプレートエンジン「Pug」を導入する

Web開発に携わってからPugという便利なものを知りました。(遅い) github.com この記事では、Vue.jsにPugを導入する方法を記載していきます。 Pugとは? ざっくり解説 導入やっていき 手順 pug,pug-plain-loaderの導入 webpack.config.jsへの追記 *.vueのテ…