はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

はてなブックマーク

  • はてなブックマークって?
  • アプリ・拡張の紹介
  • ユーザー登録
  • ログイン
  • Hatena

はてなブックマーク

トップへ戻る

  • 総合
    • 人気
    • 新着
    • IT
    • 最新ガジェット
    • 自然科学
    • 経済・金融
    • おもしろ
    • マンガ
    • ゲーム
    • はてなブログ(総合)
  • 一般
    • 人気
    • 新着
    • 社会ニュース
    • 地域
    • 国際
    • 天気
    • グルメ
    • 映画・音楽
    • スポーツ
    • はてな匿名ダイアリー
  • 世の中
    • 人気
    • 新着
    • 新型コロナウイルス
    • 働き方
    • 生き方
    • 地域
    • 医療・ヘルス
    • 教育
    • はてな匿名ダイアリー
  • 政治と経済
    • 人気
    • 新着
    • 政治
    • 経済・金融
    • 企業
    • 仕事・就職
    • マーケット
    • 国際
    • はてなブログ(政治と経済)
  • 暮らし
    • 人気
    • 新着
    • カルチャー・ライフスタイル
    • ファッション
    • 運動・エクササイズ
    • 結婚・子育て
    • 住まい
    • グルメ
    • お金
    • はてなブログ(暮らし)
    • 掃除・整理整頓
    • 雑貨
    • 買ってよかったもの
    • 旅行
    • アウトドア
    • 趣味
  • 学び
    • 人気
    • 新着
    • 人文科学
    • 社会科学
    • 自然科学
    • 語学
    • ビジネス・経営学
    • デザイン
    • 法律
    • 本・書評
    • 将棋・囲碁
    • はてなブログ(学び)
  • テクノロジー
    • 人気
    • 新着
    • IT
    • セキュリティ技術
    • はてなブログ(テクノロジー)
    • AI・機械学習
    • プログラミング
    • エンジニア
  • おもしろ
    • 人気
    • 新着
    • まとめ
    • ネタ
    • おもしろ
    • これはすごい
    • かわいい
    • 雑学
    • 癒やし
  • エンタメ
    • 人気
    • 新着
    • スポーツ
    • 映画
    • 音楽
    • アイドル
    • 芸能
    • お笑い
    • サッカー
    • 話題の動画
  • アニメとゲーム
    • 人気
    • 新着
    • マンガ
    • Webマンガ
    • ゲーム
    • 任天堂
    • PlayStation
    • アニメ
    • バーチャルYouTuber
    • オタクカルチャー
  • おすすめ

    TGS2023

『@kahirokunnのマイページ - Qiita』

  • 人気
  • 新着
  • すべて
  • 2022年Reactを使ってる人には必ず知っていてほしい最強のdata fetchingライブラリであるRTK Queryの優位性とメンテナンスの際に役立つTips - Qiita

    196 users

    qiita.com/kahirokunn

    import type { ConfigFile } from "@rtk-query/codegen-openapi"; // https://redux-toolkit.js.org/rtk-query/usage/code-generation#simple-usage const config: ConfigFile = { schemaFile: "https://petstore3.swagger.io/api/v3/openapi.json", apiFile: "./store/emptyApi.ts", apiImport: "emptySplitApi", outputFile: "./store/petApi.ts", exportName: "petApi", hooks: true, }; export default config; import { empty

    • テクノロジー
    • 2022/07/02 20:30
    • react
    • あとで読む
    • qiita
    • techfeed
    • ライブラリ
    • js
    • *javascript
    • 2020年後半版Vue.jsを使ってる人には必ず知っていてほしいドキュメントに書かれていないComposition APIのコードの書き方とVuex vs provide/inject - Qiita

      130 users

      qiita.com/kahirokunn

      2020年後半版Vue.jsを使ってる人には必ず知っていてほしいドキュメントに書かれていないComposition APIのコードの書き方とVuex vs provide/inject まえがき 最近iCAREさんの所で Vue.js を一緒にやらせていただいているのですが、フロントの技術スタックがかなりモダンであり、開発体験が良く、ノウハウをどんどん公開して良いと言っていただけたので、その内容を共有するシリーズです. 今回の記事の内容はiCareさんのDev Meetupで話した内容になります. 最近公式のソースを追った所、 Composition API はapiの紹介はあれども、コードの書き方やその背景、Tips等は全然見当たりませんでした. また、すごく強力なapiである provide/inject の紹介も全然見当たりません. 今回はiCAREさんの所で Vue.js を書く際

      • テクノロジー
      • 2020/08/27 16:04
      • vue.js
      • あとで読む
      • vue
      • qiita
      • js
      • function
      • techfeed
      • api
      • ドキュメント
      • Storybook6をVue.jsのプロジェクトに導入し、新機能であるStorybook Argsを活用してVue.jsのDXを最高にした話 - Qiita

        40 users

        qiita.com/kahirokunn

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

        • テクノロジー
        • 2020/08/13 19:34
        • Vue
        • ui
        • ライブラリ
        • qiita
        • あとで読む
        • プロジェクト
        • 開発
        • テスト
        • js
        • 環境
        • 2020年後半版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - Qiita

          438 users

          qiita.com/kahirokunn

          2020年後半版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips はじめに 最近iCAREさんの所でVue.jsを一緒にやらせていただいているのですが、フロントの技術スタックがGraphQL + Vue.js + TypeScriptで開発しており、そこでのVue.jsの開発体験がかなり良く、iCareさんの詳細なノウハウを公開しても良いと言っていただけたので、言語化し、整理して、共有出来たらと思います. ※ いつも通り記事の内容に意見がありましたら直接編集リクエストをください 前置き 今回のサンプルは@vue/cliを利用し、プリセットはTypeScriptだけいれときました. versionは2020年7月16日時点の最新4.4.6です. リポジトリはこちらから見れます. https://g

          • テクノロジー
          • 2020/07/16 19:01
          • Vue
          • vue.js
          • あとで読む
          • TypeScript
          • js
          • qiita
          • GraphQL
          • FrontEnd
          • https
          • ドキュメント
          • kubeadm環境の構築手順 on Ubuntu(x86_64) - Qiita

            3 users

            qiita.com/kahirokunn

            $ 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

            • テクノロジー
            • 2020/06/13 17:09
            • techfeed
            • Linux
            • あとで読む
            • なぜTypeScriptを使うんですか? - Qiita

              3 users

              qiita.com/kahirokunn

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

              • テクノロジー
              • 2020/03/25 17:09
              • typescript
              • 入門Visual Regression Test - Qiita

                3 users

                qiita.com/kahirokunn

                画像回帰テストです これの設定をある程度まで手順書に落とし、公開します きっと手順通りにやったら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

                • テクノロジー
                • 2019/06/16 10:57
                • testing
                • 比較
                • 2018年Vue.jsとVuexを使ってる人には必ず知っていてほしい開発やメンテナンスの際に役立つ設計とTipsとサンプルコード - Qiita

                  3 users

                  qiita.com/kahirokunn

                  2018年Vue.jsとVuexを使ってる人には必ず知っていてほしい開発やメンテナンスの際に役立つ設計とTipsとサンプルコード 初めに ※ 全てのコメントに返事しません。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 ゴール ReduxやVuex、Fluxのパワーワードに負けずになんとなくではなくちゃんとFluxを理解し、実践して恩恵を受ける。 役立つVuexのTipsを身につけコード品質を向上させる。 VuexとVueRouterの落とし穴の把握。 リファクタリングの障害を減らしコードを追いやすくする。 Vuexの穴 1. Vuex提供のmap系の辛み VuexのmapActionsとか、createNamespacedHelpersめっちゃ便利ですよね。 import { createNamespacedHelpers } from 'Vuex'; const {

                  • テクノロジー
                  • 2019/06/12 00:30
                  • フロントエンドでとても大切な3つのプラクティス - Qiita

                    5 users

                    qiita.com/kahirokunn

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

                    • テクノロジー
                    • 2019/05/22 13:11
                    • development
                    • javascript
                    • あとで読む
                    • Atomic Designの日本語スライドに正しさを求めるのは間違っているだろうか - Qiita

                      5 users

                      qiita.com/kahirokunn

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

                      • テクノロジー
                      • 2019/05/02 07:43
                      • atomic design
                      • 「設計なんて不要でしょ」について - Qiita

                        478 users

                        qiita.com/kahirokunn

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

                        • テクノロジー
                        • 2019/04/29 12:55
                        • 設計
                        • あとで読む
                        • アーキテクチャ
                        • プログラミング
                        • Qiita
                        • テスト
                        • クリーンアーキテクチ
                        • 開発
                        • programming
                        • development
                        • A brief look at Atomic Components[和訳] - Qiita

                          7 users

                          qiita.com/kahirokunn

                          はじめに この記事はかの素晴らしい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のチームによ

                          • テクノロジー
                          • 2019/04/20 14:44
                          • UI
                          • 2018年Vue.jsを使ってる人には知って欲しいオブジェクトと配列の操作のベストプラクティス - Qiita

                            5 users

                            qiita.com/kahirokunn

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

                            • テクノロジー
                            • 2019/04/12 19:53
                            • 株式会社scoutyを退職しました - Qiita

                              12 users

                              qiita.com/kahirokunn

                              株式会社scoutyってどんな会社? 株式会社scoutyは、「日本初のAIヘッドハンティングサービス」です。 結構な数の企業様に導入されています。 2019年3月いっぱいで退職しました。 私が退職を決めたのは、株式会社scoutyに不満があるからではありません。 大学でコンピューターサイエンスをしっかりと学びたい気持ちが強くなった為です。 入社前の私の状態 私は株式会社マーケットプレイスでエンジニアとして働いていました。 いくつかのブラウザゲームと自社プラットフォームを提供している会社です。 ブラウザゲームのタイトル数は40以上あり、一つのタイトルの月間トラフィックは億を超えており、エンジニアは3人でした。 そこでやった主な事は、IEとレスポンシブ対応が必要な新規タイトルのメインゲーム部分の開発です。PhaserというCanvas要素上で動作するゲームエンジンとVue.jsのハイブリッド

                              • 政治と経済
                              • 2019/04/03 10:25
                              • qiita
                              • エンジニア
                              • 会社
                              • サービス
                              • python
                              • 開発
                              • あとで読む
                              • 2018年Vue.jsとVuexを使ってる人に提案するコンポーネントの分類と設計パターン - Qiita

                                4 users

                                qiita.com/kahirokunn

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

                                • テクノロジー
                                • 2019/03/26 23:27
                                • 2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - Qiita

                                  487 users

                                  qiita.com/kahirokunn

                                  2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 もちろん、Vue.jsのコンポーネントシステムをフル活用し、Vuexを入れていないプロジェクトの経験もあります。 現在は構築したシステムを保守・運用しています。 また、勉強の為にReact、 Angular、 最近はElm等にも少し触れています。 その際に得られたノウハウ、Vue.jsが他のライバルフレームワークと比べた際に現時点で本当に勝っている利点やノウハウを言語化し、共有出来たらと思います。 ※ 記事の内容に意見がありましたら直

                                  • テクノロジー
                                  • 2019/03/01 19:08
                                  • vue.js
                                  • vue
                                  • あとで読む
                                  • Vuex
                                  • javascript
                                  • typescript
                                  • react
                                  • tips
                                  • js
                                  • AltJS
                                  • 2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTips - Qiita

                                    22 users

                                    qiita.com/kahirokunn

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

                                    • テクノロジー
                                    • 2019/02/11 00:41
                                    • Vue
                                    • Vuex
                                    • js
                                    • qiita
                                    • data
                                    • tips
                                    • あとで読む

                                    このページはまだ
                                    ブックマークされていません

                                    このページを最初にブックマークしてみませんか?

                                    『@kahirokunnのマイページ - Qiita』の新着エントリーを見る

                                    キーボードショートカット一覧

                                    j次のブックマーク

                                    k前のブックマーク

                                    lあとで読む

                                    eコメント一覧を開く

                                    oページを開く

                                    はてなブックマーク

                                    • 総合
                                    • 一般
                                    • 世の中
                                    • 政治と経済
                                    • 暮らし
                                    • 学び
                                    • テクノロジー
                                    • エンタメ
                                    • アニメとゲーム
                                    • おもしろ
                                    • アプリ・拡張機能
                                    • 開発ブログ
                                    • ヘルプ
                                    • お問い合わせ
                                    • ガイドライン
                                    • 利用規約
                                    • プライバシーポリシー
                                    • 利用者情報の外部送信について
                                    • ガイドライン
                                    • 利用規約
                                    • プライバシーポリシー
                                    • 利用者情報の外部送信について

                                    公式Twitter

                                    • 公式アカウント
                                    • ホットエントリー

                                    はてなのサービス

                                    • はてなブログ
                                    • はてなブログPro
                                    • 人力検索はてな
                                    • はてなブログ タグ
                                    • はてなニュース
                                    • App Storeからダウンロード
                                    • Google Playで手に入れよう
                                    Copyright © 2005-2023 Hatena. All Rights Reserved.
                                    設定を変更しましたx