[6/8 12時頃追記] Vueは死んでないし殺すつもりもないし私はVueが大好きだ、誤解しないでほしい Vue3でOptions APIは消えてないし今後消えていく方向のAPIでもないし挫折した人もこっちつかって再挑戦してほしい [6/8 11時頃追記] 「俺はComposition API使えてるぞ！」「便利じゃん！何をいってるんだこいつは！」 あなたはすごい、でもVueを挫折した人の話を聞くに、Composition APIが「アタリマエでしょ？」の雰囲気の前にうまく馴染めず散っていったという話で、Composition API自体は好きです Vue3の衰退を招いたのは<script setup>かもしれないCompositionAPIという考察 ほとんど肌感であり、根拠のない妄言だと思ってもらって構わないのだが、Vue3のリリース以降Vueが流行から離れつつあり、その原因は<scr

PCのレスポンシブレイアウトで動作確認を行っていて、実機での動作確認を怠っているとハマる罠 「ページ下端固定のボタン」の罠についてご紹介します。 iPhoneのMobile Safariにはデッドゾーンとか言われるものが存在します。 画面を下スクロールしてアクションバーを消えている状態で、下端をタップすると 「Safariのアクションバーを表示する操作」として認識されていまうのです。 そして、意図していたタッチイベントは発火しません。 ちょっと参考画像が縦に長いですがデッドゾーンがこんな風にあるイメージです。 このアクションバーが現れるデッドゾーン、具体的には44pxらしいです。 さらに、iPhone X系などのホームボタンのない機種ではセーフゾーンなんかも現れて 当たり判定が奪われてしまうこともあるようです。 詳しいことはこの記事が詳しいです。 iOS Safariのアクションバー表示エ

キーボード ショートカットのリファレンス | Chrome DevTools いい感じの数値やスタイルになったらコードへペースト！ HTMLの編集 エレメントタブの右クリックメニューのEdit as HTMLでHTMLが編集できます。 Enterだと改行になりますがEscではキャンセルになるので気をつけてください。 確定は[Win]Ctrl/[Mac]Cmd + Enterです。 Thx @sanfrecce-osaka ElementタブのDOM操作系ショートカット Ctrl + Cで選択要素がクリップボードに入ります。 Ctrl + Vで貼り付け、Deletキーで削除できます。 属性をダブルクリックしたり、内部テキストをダブルクリックすると編集状態にできます。 要素を増やした場合のレイアウトや空だった場合のレイアウト、 中の文字数が多い時のレウアウト確認にお使いください。 まとめ リロ

「イメージでいうとサービス名web決め打ちにして dcw exec bashとかしたい。エイリアスだと引数の順番のせいでできないし…」 「それ独自関数できるよ」 「マジっすか」 これがだるいので

それ debugger文 でできるよ 開発者ツールを開いていれば debugger とコードに書かれたところが実行された瞬間で止まってくれます。 コードに直接記載できるブレークポイントみたいなものですね。 （開発者ツールを閉じていると特に何も起きません） debugger - JavaScript | MDN debugger ステートメントは、ブレークポイントの設定のような任意の利用可能なデバッグ機能を呼び出します。デバッグ機能が利用可能ではない場合、このステートメントは効果がありません。 debugger文のいいところ 昨今はトランスパイルが流行りなので、コンパイル済みコードにブレークポイントを仕掛けるのは面倒ですが、 この方法ならイベントで起動するメソッドなど、どんなところでも簡単にブレークポイントを貼れます。 変数の中とか見たいしメソッドも実行したい 止まっている時にconsole

それ debugger文 でできるよ 開発者ツールを開いていれば debugger とコードに書かれたところが実行された瞬間で止まってくれます。 コードに直接記載できるブレークポイントみたいなものですね。 （開発者ツールを閉じていると特に何も起きません） debugger - JavaScript | MDN debugger ステートメントは、ブレークポイントの設定のような任意の利用可能なデバッグ機能を呼び出します。デバッグ機能が利用可能ではない場合、このステートメントは効果がありません。 debugger文のいいところ 昨今はトランスパイルが流行りなので、コンパイル済みコードにブレークポイントを仕掛けるのは面倒ですが、 この方法ならイベントで起動するメソッドなど、どんなところでも簡単にブレークポイントを貼れます。 変数の中とか見たいしメソッドも実行したい 止まっている時にconsole

APIの開発してますか？挙動の確認を見る時どうしてますか？ curlを手書きしている？パラメータがないリクエストなら手軽で良いですね。 Postmanのようなツールを使っている？素晴らしい！ ブラウザで実際に画面を表示している？うーん…それって繰り返したいとき大変なんじゃ…… とはいえ、ブラウザで実際に画面を表示すると、パラメータの組み立てが非常に楽というメリットがあります。 認証情報付きリクエストとか組み立てるの大変ですもんね。 ここで、ブラウザのリクエストをそのまま繰り返したり、ちょっとだけパラメータを組み替えられたら便利だと思いませんか？ 今回はそんな方法を紹介します。 cURLでコピーしてリトライする Chromeの開発者ツール（Windows F12、Mac Cmd + Opt + I)を開いてネットワークタブを開いてください。 この状態で目的のページを開いてください。 Pres

最近TypeScriptが熱いっていう話をよく聞きますね！ っていうことで私もTypeScriptを導入するには何が必要なのか知りたくなりました。 でも、Vue.jsにTypeScriptを導入する方法が現状では3つほどあります。 Class Style Component Vue.extend（後に知ったところObject Styleというらしい） Composition API(RFC) それぞれの方法の導入記事はよくありますが、それらを比較してみたくなりました。 という内容のLTを半年ほど前にしたのですが、登壇資料はこちらです。 VueでTypeScriptを始める 3つのStyle/3 style to start vue with typescript - Speaker Deck 今回の記事について TypeScript運用経験がとても浅いので、比較しきれてないかもしれません

プルリクエスト（以下PR）のレビューでフィードバックを返し、修正されたものを再度チェックすることってあると思います。 その時、前回見たときの差分を確認できたら便利なんじゃないでしょうか？ 実はそれ、簡単にできるんですよ ってドヤ顔で書いたらコメントでもっと便利な方法がある と教えていただきました。 プルリクの Files changed タブにある「コミットを選択するプルダウン」で Show changes since your last review を選択すると、前回レビュー時からの差分を見ることができます まあ /compare/ 自体はPRに関係なくGitHub上で使えるのでこの記事はこのままにしておきます。 /compare/[branch or hash]...[branch or hash] にアクセスする Comparing c5d4b6e...sample4/increm

Google App Script(以下GAS)、使ってますか？ Spreadsheetなんかにちょっとしたマクロ作るのとかに使うと思います。 ところでこのGASのオンラインエディタ、お世辞にも出来がいいとは言い難いですよね…… そんなに頻繁に使うわけではないから…と我慢していたのですが、いい加減に我慢の限界です！ そんな私や、あなたのために「google/clasp」というツールがあるので紹介です。 clasp をインストールする nodeの実行環境が必要です。 インストールがまだならインストールを済ませておいてください。 それではclaspをグローバルインストールしましょう（ローカルインストールでもいいですけど） clasp にログインする メインのブラウザが連携したいGoogleのアカウントにログインしていることを確認してください。 G Suiteのユーザー設定画面からGAS API

ただリンクにしたいときにhref="url"の代わりにonClick="location.href = 'url'"的なことをすると体験を損ねますHTMLアクセシビリティa11y ただのページ遷移をしたいだけなのに、（主に手抜きという）実装の都合で JS の location.href になってることはありませんか？ 実はそれ、体験を損ねているかもしれませんよ。 起こる出来事 マウスのホイールクリック（ミドルクリック）で別のタブで開けません。 Mac にはマウスホイールなんてついてないだろ？ 実は Cmd+クリックも同様に別のタブで開けないんですよ。 スマホだったら長押しに相当すると思います。 したがって、意図して別タブで開かせたくない場合を除いて、location.href での遷移は避けるべきです。 厳密には JS の処理内での遷移させるのを避けよう、というべきですね。 なので Rou

LaravelからVue.jsを使う最短レシピ - Qiita という記事を公開していたのですが、情報が古くそのままの手順で再現できませんでした。 そのため、Laravel7用にブラッシュアップした記事を書きたいと思います。 間違ったことが書いてあるとか、Laravelが新しくなってこの記事の通りにできなくなった等あれば この記事にコメントをいただけると嬉しいです。 Laravel から最短でVue.jsを使う インストールから動かして本番投入まで一通りっていうのが見つからなかったのでまとめてみます。 知らないとわかんないよそんなの！みたいな罠がそこかしこにありました。 TL;DR Vue（やReact）が別のパッケージになったので自分でインストールする bladeテンプレートの修正とコマンドをいくつか実行すれば使える bladeのいじるとこ 今回の環境 macOS Catalina PH

この記事の主なターゲットはReactから入った人や、仕組みが分からないと怖くて分からないと怖くて使えないという人と、フォーム部品のコントロールの記載方法をよく忘れる人向けの記事です。 また、上級者向けとしてカスタムコンポーネントへのv-modelの利用方法も書いてみました。 先日「Vueの双方向バインディングがよしなにやってくれすぎててよくわからない」という相談を受けました。 これはおそらくVue.jsから入門した人や、Vueって簡単じゃん、便利じゃんと飛びついた人にとってはよく分からない感覚かもしれませんが、言われてみればなるほどv-modelは多くのことをやっています。 間違ってることとか足りないこととかあったらコメントとか編集リクエストください それでは処理の概要を見ていきましょう。 v-model の概要 v-model=hoge は v-bind:value="hoge" と v

*1 自分がCreate Reportしたときに自動生成されたIDをいれる Start Date を7daysAgoにすると直近1週間分からレポート生成、 Orderでソートです。 今回は週次でレポートを生成してほしいのでScheduled Reportで週次月曜日を選択しました。 Spreadsheetの結果をSlackに通知したい Spreadsheetの結果をSlackに通知するにはGoogle App Scriptを使えば簡単にできそうです。 私ははじめ、以下の記事を参考にしました。 Google Apps Scriptを使って、スプレッドシートの内容をSlackに通知する ｜ Tips Note by TAM Slack通知の実際の処理はIncoming Webhookを使ったほうが簡単でした。 Slack での Incoming Webhook の利用 | Slack Send

補足：営業と書いているがマーケティングでは？という指摘があって本当にそう さらに追記：読み直したらやっぱり本書の文脈では営業だった 受託企業から自社プロダクト系の会社に転職した私。そんな私に入社初日に課題図書として渡されたのはプログラミングに関わる本や組織に関わる本ではなくビジネス系書籍でした。 手持ち無沙汰な時間もあり、折をみて読んでいたのですがこれがまあ営業の用語がよくわからない。面白いのでモッタイナイ！と思ったので用語集を作ってみました。 ちなみに本記事は「ザ・モデル」を読んだ際に作った用語集であり、本書に出てこなかった用語はカバーしていません。また並び順についてはカテゴリ順ではなく概ね登場順です。 （やっぱりあとで登場して意味がわからなかった、対義語は近い方がよいなどの理由で順番が前後していることはある） これから「ザ・モデル」を読む人は本記事を上から眺めた上で、本を読んで用語がわ

補足：営業と書いているがマーケティングでは？という指摘があって本当にそう さらに追記：読み直したらやっぱり本書の文脈では営業だった 受託企業から自社プロダクト系の会社に転職した私。そんな私に入社初日に課題図書として渡されたのはプログラミングに関わる本や組織に関わる本ではなくビジネス系書籍でした。 手持ち無沙汰な時間もあり、折をみて読んでいたのですがこれがまあ営業の用語がよくわからない。面白いのでモッタイナイ！と思ったので用語集を作ってみました。 ちなみに本記事は「ザ・モデル」を読んだ際に作った用語集であり、本書に出てこなかった用語はカバーしていません。また並び順についてはカテゴリ順ではなく概ね登場順です。 （やっぱりあとで登場して意味がわからなかった、対義語は近い方がよいなどの理由で順番が前後していることはある） これから「ザ・モデル」を読む人は本記事を上から眺めた上で、本を読んで用語がわ

＊この記事は2020年3月頭に書かれている記事です どうも、Vueはいいぞおねーさん(自称)です。 Vue.jsは私に言わせるととてもよいフロントエンドフレームワークであり、その理由の一つにプログレッシブフレームワークである(段階的に利用する機能を増やしていくスタイルにマッチしている)ものとして、フロントエンド初学者の皆さんにもおすすめしたい代物です。 しかし、現在までに様々なプラクティスが考案されたがゆえに、「最初からベストな方法で始めたい」という思いから一度にたくさんのことに挑戦してしまいたくなりがちです。 そしてそれはプログレッシブという思想に反するもので、結果として挫折を生んでしまっているのではないかと思いました。 そこで今回は「知るのを後回ししてよいこと」として、Vue.jsへの入門する方へのアドバイスを独断と偏見で不要度という指標でまとめてみました。 不要度というネガティブな指

Vuexについて、とりあえず必要ないしなんだか分かりづらいからと使わないでいたのですが、 この度いざ使ってみたところ、最初こそ引っかかるもののの、結構すんなりはいってきました。 ただ、この「最初こそ引っかかる」部分ができる人にとっては些細すぎるし、 引っかかって躓いてしまう人にとっては大変な部分だと思うので、 コードのどことどこに関連があるのか図解してみようと思います。 まずは、よくVuexの説明ででてくるこのイラストを見てほしいのですが、 私は一度にたくさんの要素が出てきすぎてしまって、一旦理解するのを後回しにしていました。 しかし、順を追っていけばそんなに難しくなさそうなので、この記事を書いてみました。 実際にシンプルなカウンタを作ってみたので、このコードを図解してみましょう。 サンプルコード コンポーネントとストアのサンプルコードは下記になります。 <template> <div i

HerokuでSPAアプリ作っててビルドしたjsとcssをコミットしたくない話 全体の構成として、バックエンドとログインせずに歩き回れるフロントはLaravelで、 ログイン後の画面についてはVueでSPAみたいな挙動をさせるWebアプリを作っていたときのことです。 デフォルトのLaravelプロジェクトって、.gitignoreにpublic/jsとpublic/cssが入ってないんですよ。 くっついてるVueのコンポーネントを書き換えていて、ちまちまビルドしたりすると、 当然public/jsやpublic/cssの下にファイルが作られます。 それをGitにコミットしてHerokuにデプロイとかしていて、まあ動くわけなんですけど、 ビルド前のリソースに変更がなくてもビルドするたびに差分がでてしまうんです。 これはちょっとイケてないぞ、ということで、 .gitignoreにpublic/