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

日々の学びを書きます

JavaScript

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! と…

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…

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

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

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

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

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

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

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

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

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系の設定を…

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

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

【Udemy】「モジュールバンドラー webpack を1日で習得!フルスクラッチでインストールからカスタマイズまでの手順を理解する」を完走したので感想など

気がついたら、前回記事で50記事を超えていました。 そう思うと、このブログも1年以上続いているんですね。 改めて、周りの環境と Write Blog Every Week に感謝です。 この記事なに? どんな内容? 得られたこと webpack.config.jsの設定方法(特にロー…

【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の場合 プラグイ…

【学習記録】プロパティの値を変更すると警告(Vue warn)が発生する

タイトル通り、本記事はプロパティの値を変更した際に警告(Vue warn)が発生した際の原因と対処方法を記載していきます。 はじめに 業務でVue.jsをデータバインディング程度に使用していましたが、本格的(コンポーネント化、親子でのデータ通信など)に使用…

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

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

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

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

【登壇・LT】フロントもくもく会#11 で「OpenLayersで始める地図の操作」をLTさせていただきました(2018/07/21)

恵比寿駅近辺のamuで行われた、 フロントもくもく会#11でLTさせていただきました! html5ebisu.connpass.com 社内勉強会での登壇経験はあるのですが、 社外は初だったので、とても緊張しました… フロントもくもく会って? 参加させていただいているフロント…