はてなブックマーク

まえがき 最近iCAREさんの所で Vue.js を一緒にやらせていただいているのですが、フロントの技術スタックがかなりモダンであり、開発体験が良く、ノウハウをどんどん公開して良いと言っていただけたので、その内容を共有するシリーズです. 今回の記事の内容はiCareさんのDev Meetupで話した内容になります. 最近公式のソースを追った所、 Composition API はapiの紹介はあれども、コードの書き方やその背景、Tips等は全然見当たりませんでした. また、すごく強力なapiである provide/inject の紹介も全然見当たりません. 今回はiCAREさんの所で Vue.js を書く際に皆で意識している Composition API と活用している provide/inject のノウハウとその詳細な理由を共有します. ※ 直接編集リクエストをくれていつもありがとう

はじめに 最近iCAREさんの所でVue.jsを一緒にやらせていただいているのですが、フロントの技術スタックがかなりモダンであり、開発体験が良く、ノウハウをどんどん公開して良いと言っていただけたので、その内容を共有するシリーズです. 今回は2日前にリリースされたStorybook6をVue.js + TypeScriptのプロジェクトに導入した話をします(執筆時点). 前置き Storybook自体はずっと使っていたのですが、6系に関してはbetaの頃からrfcとreleaseノートを全て追っかけて追っかけはじめ、使っていました. そしてついにrcが取れたので今回はその内容とiCAREさんでの活用方法、なぜそうするのかについて共有しようと思います. Vue.jsのプロジェクトにStorybookを導入した経緯 以前からVue.js用のできが良くて活発なコミュニティを持つStorybookみ

リポジトリはこちらから見れます. https://github.com/kahirokunn/vue-ts-sample Vue.js + TypeScriptの対応状況は日々改善されています. 以前までは.vueを利用してもVue.extendを利用してコンポーネントを開発する場合はこのシンプルなコードでも型のエラーが出てしまい、TypeScriptでの開発体験はまだまだ改善できるものでした. @vue/composition-apiを利用すればTypeScriptの体験を向上できます. 早速@vue/composition-apiをインストールします. install @vue/composition-api インストール方法はこちらのリポジトリに書いてあります. https://github.com/vuejs/composition-api 一応install後の$ git dif

$ sudo apt-get update -y $ sudo apt-get install -y \ apt-transport-https \ ca-certificates \ curl \ gnupg-agent \ software-properties-common $ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add - $ sudo add-apt-repository \ "deb [arch=amd64] https://download.docker.com/linux/ubuntu \ $(lsb_release -cs) \ stable" $ sudo apt-get update $ sudo apt-get install -y docker-ce dock

はじめに 皆さん、TypeScriptはもう使っていますか？ 既に使っている方でしたら、もう型のない世界に戻りたくない方も多いと思います。 "では、改めてなぜ我々はTypeScriptを使うのか？ " "TypeScriptってなんだっけ？" それを今一度振り返ってみます。 本投稿のゴール 型システムに関するメリットの言語化・理解の向上をし、引き続き気持ちよくTypeScriptを使っていけたらと思います。 まだ使ってない方は使う際の動機の1つでも増やせたらいいなと思います。 TypeScriptとは TypeScript extends JavaScript by adding types to the language. 日本語: TypeScriptは、JavaScriptに型を追加することでJavaScriptを拡張します。 TypeScript speeds up your de

画像回帰テストです これの設定をある程度まで手順書に落とし、公開します きっと手順通りにやったら10分ぐらいでできる。。。はず DEMO 1. vue cli ui等で適当にプロジェクトを作成する 2. vue-cli-plugin-storybookを追加 https://github.com/storybooks/vue-cli-plugin-storybook これだけで凄く簡単にstorybookをvueに追加できます。 一度起動してみて正常に起動できるか確認しましょう！ 3. storybookからスクショを撮るライブラリを導入 日本での画像回帰テストの第一人者と言っても過言ではないQuramyさんがstorybookから簡単に画像を抽出してくれるzisuiという素晴らしいライブラリを作っています。 https://github.com/Quramy/zisui install

一応こちらがElementUIの参考実装です。 https://github.com/ElemeFE/element/blob/dev/packages/tooltip/src/main.js そしてこちらが自分が書いた参考実装です。 https://www.npmjs.com/package/vue-proxy-Component これらの問題から回避するためにできるだけstoreやrouterを直接importしたいです。 今度こそFluxを見通しよく成功させる その他にもthisスコープがズレたりする場合にとても困ることになります。 しかもVueインスタンスが作成される前のライフサイクルフックでも使えません。 そもそもVuexは単一状態木でsingle source of truthを思想としてもっているので基本singletonのはずです。 なのにVueインスタンスへインストールさ

はじめに 令和になりましたので、フロントエンドに関する腑に落ちている有用なプラクティスを3つ程共有しようと思います。 ※ 意見等はコメント欄ではなく、直接編集リクエストでください 1. フロントエンド参入時期に通る迷いの道 フロントエンドで例えば、Vue.js、React等を学習する人は一度はこう思うと思います。 とりあえずライブラリの使い方わかったけど、コンポーネントはどう書けば良いとされているのかな？ そういえばFluxって流行っているけどなんだろう？ Vuex、Reduxってなんだろう？使ったほうがいいのかな！ SPA、Prerender、SSRってどれがいいのかな。 どう使えば良いのかな？ それらを簡単に判断できるようになる為の原則と、とある症状を紹介しようと思います。 YAGNIの原則とセカンドシステム症候群 これは凄く大切な原則です。 YAGNIの原則 まずはYAGNIです。

はじめに Atomic Designとはこのリンクに書いてある感じの奴です 最近のコンポーネント指向のフロントエンドでAtomic Designで失敗するチームの話をちらほら聞きます 自分も1度は失敗しました。そりゃプロトタイピングもしたことなかった状態でAtomic Designでこった画面を作ったので当然ですが。(逆に1つ目の画面で失敗に気づけてよかった では、なぜ我々はAtomic Designでフロントの開発が上手くいかないのかを説明しようと思います。(誤字脱字その他各種修正の編集リクエスト待ってます! 指摘1. 世に出回っている多くの日本語資料のAtomic Designスライドは間違っている そもそもオリジナルのAtomic Design読んだことありますか？ 読んでないなら読みましょう。英語を読むのがめんどくさいなら私のざっくりな和訳記事を読んでください。 なぜオリジナルを読

経緯 以前とある席で偶然シニアエンジニアの方と設計について議論することがありました。 その時に特に耳に残っていたのは以下の様な内容です。 クリーンアーキテクチャってテストしやすくする為のですよね？ 設計はコード書ける人が他のコードを書ける人に威張るための道具なのではないか？ 設計を学習するならブロックチェーンとかを勉強して技術力を高めるべきなのではないか？ リーダブルコードさえ読んでいれば設計は必要ないのではないか？ 設計なんて不要でしょ その方はかなり詳しく設計の歴史をしっていて尤もな事を言っていましたが、平成も終わる頃においてはその限りではないです。 なので平成最後の日にそれら全てに対して最終的に解答できる形で設計の有用性を説明し、気持ちよく令和を迎えます。 注意: 一応ここで説明する内容や要素も一面だけです。 よくある誤解 クリーンアーキテクチャといえばこの有名なリングですよね。 こ

はじめに この記事はかの素晴らしいA brief look at Atomic Componentsの和訳です。 https://medium.com/joeydinardo/a-brief-look-at-atomic-components-39cbe71d38b5 Vue.jsでアトミックデザインをやって上手く行かなかった時に出会った記事です。 著者から直接翻訳許可は得ています。 我々日本のフロントエンドエンジニアがわかりやすいように多少表現を変えている部分もあります。 それでは記事をお楽しみください。 Atomic Componentsの簡単な見方 モックアップを簡単にリアルタイムアプリに変える方法 Atomic Componentsは、扱うデータが多い、スケーラブルなWebアプリケーションとモバイルアプリケーションの作成と管理を容易にするためにPatternlab.ioのチームによ

はじめに 基本的に Vue は子要素の代入演算子は感知しません。 しかし、Array は公式が公表している、ラップした変更検知メソッドを利用して、操作をすればやりたい事はほぼ全て実現できるでしょう。 これらはAirbnb lint ruleから得られた経験から来た知見です。結構使いやすい。 ; セミコロンを末尾に付けたくない人も多いと思いますが、そこはruleを上書きすればまぁ良いでしょう。 push　や pop 程度など、まぁ知ってるでしょうていう軽いのは省いています。 ゴール コンポーネントとストアの記法の統一 配列辺 規定回数繰り返す よく見るairbnb lintで怒られるコード

はじめに 私はVue.js with Vuexを使った業務で1画面３０APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 その際に得られたノウハウを言語化し、共有出来たらと思います。また、これらのノウハウよりも良いノウハウがあった場合は共有・議論して頂けるととても嬉しいです。 ※注釈 この記事はサンプルコードが全然ないです。 OSSの様に気軽に編集リクエストでサンプルコード等を提供頂けたら幸いです！ 目次 コンポーネント設計の使い分けの効果 コンポーネントに関わるレンズの種類と重要性 技術者のレンズから覗く、コンポーネントの分類 プレゼンテーションコンポーネントを更に分類 複雑なコンポーネントの設計パターンとパターン名 デザイナーのレンズでコンポーネントの分類と技術者レンズからのプラクティス 技術者レンズでの

はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 もちろん、Vue.jsのコンポーネントシステムをフル活用し、Vuexを入れていないプロジェクトの経験もあります。 現在は構築したシステムを保守・運用しています。 また、勉強の為にReact、 Angular、 最近はElm等にも少し触れています。 その際に得られたノウハウ、Vue.jsが他のライバルフレームワークと比べた際に現時点で本当に勝っている利点やノウハウを言語化し、共有出来たらと思います。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 Vue.js含めどのフレームワークも利点・欠点があります せっかくなので自分が把握しているVue.jsの利点と欠点を説明しようと

はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 現在は構築したシステムを保守・運用しており、その際に得られたノウハウを言語化し、共有出来たらと思います。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 ※ パフォーマンスの話はしません。 ゴール 役立つTipsを身につけコード品質を向上させる コンポーネントのバグを減らせるTips ほとんどのバグは変数から来ます。 もし全ての値が定数なら状態から来るバグはほとんど無くなるでしょう。 ここではこの変数や式を極力減らせるTipsを紹介したいと思います。 1. dataを極力定義しない Vue.jsでコンポーネントを定義する際ついdata()に沢山変数を定義しちゃいますよね。