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

日々の学びを書きます

プログラミング

【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のテ…

【キャリア】.NET経験者がRuby案件の仕事をするまでに勉強したこと。実務で学ぶべきと思ったこと。

会社でRubyやりたい勢の方が増えてきました。 嬉しみが深い (*´ω`) 本記事では、Ruby案件の仕事をするために勉強したこと。また、実務で事前に学ぶべきと思ったことを書いていきます。 はじめに 対象者 背景(なぜこの記事を書いた?) Ruby / Ruby on Rails…

【学習記録】claspのインストールからデプロイまで

Rosso Advent Calendar 2018 - Qiita 8日目の記事です。 はじめに ひょんなことでgoogle/claspというGASのCLIツールを知り、GASをコード補完&Git管理できるようにしたい!というモチベーションから、少し触ってみました。 本記事は、google/claspのインスト…

【学習記録】他言語からScalaを始める時に注意したいこと

はじめに 最近、Scalaに触り始めたのですが、 構文が他言語とちょっと違うなと感じた点を 自分(腹落ち)用にまとめていきます。 (不定期追記予定) 自分と同じく、 Scalaを始められる方の参考になれば幸いです。 また、間違いや他にも気をつけたほうが 良…

【AWS】【備忘録】全般ざっくり学習記録

AWSを学び始めたのでその学習記録です。 順次追記予定です。 IAMユーザー 概要 作業用アカウントというイメージ。 ルートユーザーはAWSのプラン等の管理系の変更を行い、 IAMユーザーでEC2インスタンスの作成等の作業をするような役割分担。 ユーザー作成の…

【Rails】【備忘録】アセットパイプラインのこと

はじめに Railsチュートリアルの5章を進めていく中で、 Railsに触れていないとアセットパイプラインあたりのこと忘れてしまいそうなので、 備忘録として概要をブログに記述します。 railstutorial.jp 備忘録 アセットディレクトリ 静的ファイルを目的別に分…

【JavaScript】jQueryって遅い??不要??って疑問に対する自分なりの答え

はじめに 2017年12月頃から業務でWeb開発を始めてから、 セレクタ「$」らくやわ〜と、 なんとなく便利でjQueryを使ってきたけど、 jQueryは遅い jQueryはもう不要 という意見をTwitterやQiitaで拝見したのですが、 知識の疎い自分には「??」な感じでした。…

【登壇・LT】社内勉強会で「ゼロからはじめるアウトプット」をLTさせていただきました(2018/07/28)

本記事は社内勉強会のLT時に発表させていただいた 「ゼロからはじめるアウトプット」という題名のスライドについて、 話していきたいと思います! 今回のスライド 今回のスライドはこちらになります。 概要 内容はざっくりと... 以下がターゲット アウトプッ…

【Ruby】devise学習記録 (01)

gem deviseに関しての学習記録です。 といっても、本記事にはリポジトリと学んだポイントをまとめるだけです。 学習記録はリポジトリのReadme.md参照ください。 目的 deviseって、使い勝手良いのですが、 やはり実践導入するには裏の仕組みも理解した方が良…

【Ruby】勉強を始めた理由とことはじめ情報

はじめに リリース&改修続き&で4月入ってから連勤が続いてましたが、 4/12(木)、ようやく休暇を取得することが叶いました。 今回は、最近勉強し始めた「Ruby」について、 自分がどういった形で学習し始めたかをざっくりまとめます。 なんで「Ruby」なん? …