diff --git a/_config.yml b/_config.yml index adb92d4a6efb..c0fd586637cd 100644 --- a/_config.yml +++ b/_config.yml @@ -125,7 +125,9 @@ alias: tags/Security: categories/Security/ tags/IoT: categories/IoT/ tags/モバイルアプリ: categories/Mobile/ # Mobileカテゴリの新設対応 - # カテゴリの変更 + tags/フロントエンド: categories/Frontend/ # Frontendカテゴリの新設対応 + tags/VR: categories/VR/ # VRカテゴリと重複排除 + # カテゴリの変更 categories/Design: tags/UI-UX/ # 名寄せなど diff --git a/categorize_mobile_posts.py b/categorize_mobile_posts.py index b4a3c61cb721..194472617584 100644 --- a/categorize_mobile_posts.py +++ b/categorize_mobile_posts.py @@ -4,10 +4,10 @@ POSTS_DIRECTORY = 'source/_posts' # 上記リストから、実際に移行したいタグをここに列挙します TARGET_TAGS = [ - 'Git' + 'Airflow' ] # 上書きする新しいカテゴリ -NEW_CATEGORY = 'DevOps' +NEW_CATEGORY = 'Infrastructure' # --- 設定ここまで --- def replace_category_for_mobile_tags(file_path): diff --git a/source/_posts/2017/20170605-urushi.md b/source/_posts/2017/20170605-urushi.md index 7cbe2e43f57e..aed500dbfb30 100644 --- a/source/_posts/2017/20170605-urushi.md +++ b/source/_posts/2017/20170605-urushi.md @@ -7,7 +7,7 @@ tag: - WebComponents - OSS category: - - Programming + - Frontend thumbnail: /images/2017/20170530/thumbnail_20170530.png author: 平川裕蔵 lede: "ES2015 Web componentsと国産Web componentsフレームワークUrushi" diff --git a/source/_posts/2019/20190612-typescript-guide.md b/source/_posts/2019/20190612-typescript-guide.md index cf1e4c874a66..cc4976508d55 100644 --- a/source/_posts/2019/20190612-typescript-guide.md +++ b/source/_posts/2019/20190612-typescript-guide.md @@ -5,10 +5,9 @@ postid: "" tag: - TypeScript - 出版 - - フロントエンド - 書籍 category: - - Programming + - Frontend author: 澁川喜規 lede: "2019年頭より少しずつ書いていたTypeScriptの教育コンテンツを[クリエイティブ・コモンズ4.0の表示 - 継承 （CC BY-SA 4.0）]で公開します。といっても完成版ではなく、アーリーアクセス版のような品質であることをご了承ください。" --- diff --git a/source/_posts/2019/20190620-hangout.md b/source/_posts/2019/20190620-hangout.md index 515858f46d75..1f9b7480129b 100644 --- a/source/_posts/2019/20190620-hangout.md +++ b/source/_posts/2019/20190620-hangout.md @@ -9,7 +9,7 @@ tag: - GoogleChat - GoogleWorkspace category: - - Programming + - DevOps author: 高橋健 lede: "みなさん、課題管理システムは何を使っていますか？ 弊社ではほぼ全てのプロジェクトでRedmineを採用しており、毎日1000以上のユーザが利用しています。これにより管理の標準化と品質向上を図っています。" diff --git a/source/_posts/2019/20191029-react.md b/source/_posts/2019/20191029-react.md index 42cf9eac4c5f..d6bc5aabee12 100644 --- a/source/_posts/2019/20191029-react.md +++ b/source/_posts/2019/20191029-react.md @@ -5,10 +5,9 @@ postid: "" tag: - React - Redux - - フロントエンド - 設計 category: - - Programming + - Frontend author: 柏木祥子 lede: "React、Next.js を触り始めて２年半ほど経ちました。これまでによくつまずいたポイントから、自分なりのノウハウを言語化してみます。" --- diff --git a/source/_posts/2019/20191201-ui-automation.md b/source/_posts/2019/20191201-ui-automation.md index 07c494893daf..72acdbdade9a 100644 --- a/source/_posts/2019/20191201-ui-automation.md +++ b/source/_posts/2019/20191201-ui-automation.md @@ -7,7 +7,7 @@ tag: - Selenium - SORACOM category: - - Programming + - IoT thumbnail: /images/2019/20191201/thumbnail.png author: 棚井龍之介 lede: "自動化できる業務ならば極力自動化したいというのは万国共通だとは思いますが、例えばWebページであれば Selenium によるUI操作自動化が可能です。しかし、PCにインストールされたGUIアプリには、Webページの「idタグ」に相当するものがなく、UIの自動化は難しいと考えていました。今回、業務で利用しているWindowsのGUIアプリを「マウスで手動クリック」から「コードで自動操作」に切り替える機会があったので、そのときの試行錯誤を紹介します" diff --git a/source/_posts/2020/20200122-auth0-1.md b/source/_posts/2020/20200122-auth0-1.md index b2b8dc9add0c..088f2ff19879 100644 --- a/source/_posts/2020/20200122-auth0-1.md +++ b/source/_posts/2020/20200122-auth0-1.md @@ -7,7 +7,7 @@ tag: - Vue.js - 入門 category: - - 認証認可 + - Frontend author: 山田勇一 lede: "様々なシステムを構築する中で必ず発生する要素「ログイン」。そのログインを支える技術要素「認証・認可」。しかし、認証認可の壁は無駄に高く、調べ始めるとまずは数々の専門用語に阻まれ 「BASIC認証・Oatuh・OpenID・Jwt・Jwk・Jwe…」、 次に認証Flowに阻まれます。「Implicit Flow、Client Credentials Flow...etc」。これらを比較的容易に実装する、Auth0を紹介していきます。" --- diff --git a/source/_posts/2020/20200123-auth0-2.md b/source/_posts/2020/20200123-auth0-2.md index 96201d663847..329a58add087 100644 --- a/source/_posts/2020/20200123-auth0-2.md +++ b/source/_posts/2020/20200123-auth0-2.md @@ -6,7 +6,7 @@ tag: - Vue.js - Auth0 category: - - 認証認可 + - Frontend author: 先山賢一 lede: "Auth0が提供するVue.jsのサンプル実装をベースに説明します。手元で動作確認をする場合は、下記を事前にcloneしてください。このリポジトリにある01-Loginのディレクトリにあるアプリケーションを使います。" --- diff --git a/source/_posts/2020/20200128-auth0-3.md b/source/_posts/2020/20200128-auth0-3.md index c1ee879ebc3d..f411aadcb1fe 100644 --- a/source/_posts/2020/20200128-auth0-3.md +++ b/source/_posts/2020/20200128-auth0-3.md @@ -7,7 +7,7 @@ tag: - JavaScript - Auth0Rules category: - - 認証認可 + - Frontend author: 織田勇冴 lede: "Auth0をカスタマイズして使うに当たって必要になるRulesについて、概要と開発に関するTipsを説明します。Auth0のRulesの使い方については、Auth0公式のRules Best Practicesに様々な役立ち情報が載っているのですが、分量が多くてしんどい(全て英語な上に印刷するとA4で18ページ分...)です。 この記事ではRules Best Practicesの中でも特に役に立つと思われる情報と、その他Rules開発で得られた知見について書いていきます。" diff --git a/source/_posts/2020/20200316-vue1-takebayashi.md b/source/_posts/2020/20200316-vue1-takebayashi.md index 2f9e4435f55f..84d07c5809e0 100644 --- a/source/_posts/2020/20200316-vue1-takebayashi.md +++ b/source/_posts/2020/20200316-vue1-takebayashi.md @@ -8,7 +8,7 @@ tag: - フロントエンド - 初心者向け category: - - Programming + - Frontend author: 竹林康太 lede: "私が所属するコアテクノロジーチームでは、Futureの各プロジェクトでの生産性・品質向上および設計開発プロセスの標準化を目標に、内製ライブラリ・フレームワーク・インフラ等の提供を行っております。そんな内製フレームワークの一部として採用されているのがVue.jsです。フレームワーク自体の設計開発を行う一方、顧客・プロジェクト向け画面の開発を行うために、自分たちもそのフレームワークを用いた開発を行う機会がありました。今回はそんなとある画面開発をするにあたって、私がVue.jsをキャッチアップしていく過程の中で遭遇したトラブルに関する解決方法を共有します。" --- diff --git a/source/_posts/2020/20200317-tableau.md b/source/_posts/2020/20200317-tableau.md index 7ff053f4fefb..5d54b7749adc 100644 --- a/source/_posts/2020/20200317-tableau.md +++ b/source/_posts/2020/20200317-tableau.md @@ -9,7 +9,7 @@ tag: - Tableau - SSO category: - - Programming + - Frontend author: 仲澤龍一 lede: "プロジェクトでTableauダッシュボードを組み込んだSPAを開発しています。その際にPoCを実施したので、こちらで簡単にお試しできる手順を共有させていただきます。" --- diff --git a/source/_posts/2020/20200318-fugna.md b/source/_posts/2020/20200318-fugna.md index 7fc34c9fbefb..f447b0e4c5fa 100644 --- a/source/_posts/2020/20200318-fugna.md +++ b/source/_posts/2020/20200318-fugna.md @@ -8,7 +8,7 @@ tag: - Figma - チーム開発 category: - - Programming + - Frontend thumbnail: /images/2020/20200318/thumbnail.png author: 久保樹礼 lede: "Figmaとは何か、何ができるのか、チームでシステムデザイン設計するときにFigmaを使うと何がいいのかを初心者向けにざっくり紹介していきます。Figmaはユーザーインターフェース（UI）のデザインをブラウザ上で簡単に作れるデザインツールです。デザインツールといえばデスクトップアプリのAdobe XDやSketchが有名どころですが、Figmaも負けず劣らずの操作性と利便性を兼ね備えています" diff --git a/source/_posts/2020/20200319-alt-webpack.md b/source/_posts/2020/20200319-alt-webpack.md index 6d63c6bc4932..c7cb43ef4cf6 100644 --- a/source/_posts/2020/20200319-alt-webpack.md +++ b/source/_posts/2020/20200319-alt-webpack.md @@ -10,7 +10,7 @@ tag: - Node.js - Parcel category: - - Programming + - Frontend author: 澁川喜規 lede: "ちょっとしたフロントエンドの開発で、TypeScriptに最初から対応していて、簡単に使えるものは何かないかな、と調べてみたメモです。React/Vue/Angularの場合はそれぞれの初期化コマンドで何から何まで用意してくれます。Next.js、Nuxt.js、Gatsbyなども、これらのビルドのステップを簡略化するコマンドを提供しています。基本的にこれらのウェブフロントエンドを開発するときには、小規模・中規模ぐらいならあんまり気にしなくておまかせでもいいと思います。今回は、それらのフレームワーク固有のビルドツールとは別に環境を作りたい人で、TypeScriptの環境が欲しい、ウェブの開発がしたい、という前提でいろいろ探してみました。" --- diff --git a/source/_posts/2020/20200401-vue-props-down.md b/source/_posts/2020/20200401-vue-props-down.md index 9b445ab102fa..250ecc1d0694 100644 --- a/source/_posts/2020/20200401-vue-props-down.md +++ b/source/_posts/2020/20200401-vue-props-down.md @@ -8,7 +8,7 @@ tag: - フロントエンド - 初心者向け category: - - Programming + - Frontend thumbnail: /images/2020/20200401/thumbnail.png author: 東郷聡志 lede: "今回はVue.jsの最初の難関（だと思っている）「props down, event up」について、初心者が読んでもわかるような資料を用意してみようと思います。 diff --git a/source/_posts/2020/20200409-swagger-tips.md b/source/_posts/2020/20200409-swagger-tips.md index 3b8454065ed3..4b45130c172a 100644 --- a/source/_posts/2020/20200409-swagger-tips.md +++ b/source/_posts/2020/20200409-swagger-tips.md @@ -10,7 +10,7 @@ tag: - 設計 - チーム開発 category: - - Programming + - Frontend thumbnail: /images/2020/20200409/thumbnail.png author: 亀井隆徳 lede: "みなさん、Swagger使ってますか？本記事では実際にSwaggerのスキーマ定義を設計していく上で取り決めた規約について書いてみたいと思います。" diff --git a/source/_posts/2020/20200428-vue-slot.md b/source/_posts/2020/20200428-vue-slot.md index f7a13ef55ebc..080393041572 100644 --- a/source/_posts/2020/20200428-vue-slot.md +++ b/source/_posts/2020/20200428-vue-slot.md @@ -8,7 +8,7 @@ tag: - 初心者向け - フロントエンド category: - - Programming + - Frontend thumbnail: /images/2020/20200428/thumbnail.png author: 永井優斗 lede: "東郷さんによる「Vue.js最初の難関、「props down, event up」を初心者にわかるように解説してみた」はご覧になられましたでしょうか？おそらくVue.js最初の難関は無事乗り越えられたと思います！今回は「Vue.js初心者にわかるように解説してみた」第二弾として、props down,event up と同様に親子関係が肝となる、「slot」について、初心者に向けて説明していきたいと思います。" diff --git a/source/_posts/2020/20200429-redux-introduction.md b/source/_posts/2020/20200429-redux-introduction.md index 1f7e0f43b8fc..aa59a853a4b2 100644 --- a/source/_posts/2020/20200429-redux-introduction.md +++ b/source/_posts/2020/20200429-redux-introduction.md @@ -5,10 +5,9 @@ postid: "" tag: - React - Redux - - フロントエンド - 初心者向け category: - - Programming + - Frontend thumbnail: /images/2020/20200429/thumbnail.png author: 丸野大輔 lede: "はじめまして、2019年4月入社_FRX_DigitalLibraryチームの丸野です。研修修了後PJにアサインされて約4ヶ月ほどReact.jsを使って開発を行ってきましたが、Reduxの理解にとても苦しみました。そこで今回はReduxの概要を噛み砕いて説明していきます。同じ悩みを持つ人の理解の助けになればと思います。" diff --git a/source/_posts/2020/20200501-typescript.md b/source/_posts/2020/20200501-typescript.md index 8663c7fea883..f320b8236bc4 100644 --- a/source/_posts/2020/20200501-typescript.md +++ b/source/_posts/2020/20200501-typescript.md @@ -5,10 +5,9 @@ postid: "" tag: - React - Redux - - フロントエンド - TypeScript category: - - Programming + - Frontend thumbnail: /images/2020/20200501/thumbnail.png author: 澁川喜規 lede: "プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。" diff --git a/source/_posts/2020/20200511-ui-atomic-design.md b/source/_posts/2020/20200511-ui-atomic-design.md index 19aa0178e070..93efc8399214 100644 --- a/source/_posts/2020/20200511-ui-atomic-design.md +++ b/source/_posts/2020/20200511-ui-atomic-design.md @@ -4,11 +4,10 @@ date: 2020/05/11 08:43:07 postid: "" tag: - UI/UX - - フロントエンド - Figma - 設計 category: - - Programming + - Frontend thumbnail: /images/2020/20200511/thumbnail.png author: 平川裕蔵 lede: "今回はPJの現場でUXとUIのデザインを通して、Atomic Designの導入はどのような結果を生んだのか、Atomic Design導入に際しての課題や取り組み方のコツなんかをお伝えできればと思います。z" diff --git a/source/_posts/2020/20200512-headless-cms-microcms.md b/source/_posts/2020/20200512-headless-cms-microcms.md index 7b31454c0b4d..266a1e7068a3 100644 --- a/source/_posts/2020/20200512-headless-cms-microcms.md +++ b/source/_posts/2020/20200512-headless-cms-microcms.md @@ -4,11 +4,10 @@ date: 2020/05/12 09:48:20 postid: "" tag: - Vue.js - - フロントエンド - CMS - HeadlessCMS category: - - Programming + - Frontend thumbnail: /images/2020/20200512/thumbnail.png author: 三村遼 lede: "TIG DXチーム　アルバイターの三村です．今回はHeadlessCMSを利用したタスクをやることになりました．私自身HeadlessCMSどころかCMSを聞いたことすら無かったので，初めてCMS使ってみるにあたって感じたことを共有出来たらと思い本記事を作成させていただいております．" diff --git "a/source/_posts/2020/20200612-\346\230\245\347\245\255\343\202\21210-deno.md" "b/source/_posts/2020/20200612-\346\230\245\347\245\255\343\202\21210-deno.md" index ce368ef3636b..630c86f765b6 100644 --- "a/source/_posts/2020/20200612-\346\230\245\347\245\255\343\202\21210-deno.md" +++ "b/source/_posts/2020/20200612-\346\230\245\347\245\255\343\202\21210-deno.md" @@ -4,11 +4,10 @@ date: 2020/06/12 12:06:07 postid: "" tag: - deno - - フロントエンド - JavaScript - Node.js category: - - Programming + - Frontend thumbnail: /images/2020/20200612/thumbnail.png author: 伊藤真彦 lede: "6月よりTIGに入社した伊藤真彦です。入社時点ですでに春の入門祭りは始まっていたのですが、この度飛び入り参加で技術ブログを書かせていただける運びとなりました。さて、初投稿として選んだテーマはdenoです。deno1.0のリリースからしばらくたちましたが、転職の合間に触って遊ぶことができましたので、体験記として紹介させていただきます。" diff --git "a/source/_posts/2020/20200619-\346\230\245\347\245\255\343\202\21215-webpack.md" "b/source/_posts/2020/20200619-\346\230\245\347\245\255\343\202\21215-webpack.md" index 9c41eff6103e..2c1d67e2faa3 100644 --- "a/source/_posts/2020/20200619-\346\230\245\347\245\255\343\202\21215-webpack.md" +++ "b/source/_posts/2020/20200619-\346\230\245\347\245\255\343\202\21215-webpack.md" @@ -4,12 +4,11 @@ date: 2020/06/19 10:19:09 postid: "" tag: - webpack - - フロントエンド - JavaScript - Node.js - 初心者向け category: - - Programming + - Frontend thumbnail: /images/2020/20200619/thumbnail.png author: 二瓶賢 lede: "JavaScriptでの開発は実行結果が視覚的&ツール周りが充実しているのでプログラミング覚えたての人も楽しみながら進められると思います。一方、開発環境周りは充実しすぎているがゆえ難しいと思ったので記事にしました。" diff --git "a/source/_posts/2020/20200625-\346\230\245\347\245\255\343\202\21219-chromeextension.md" "b/source/_posts/2020/20200625-\346\230\245\347\245\255\343\202\21219-chromeextension.md" index dd98621b6625..d156da7ebf16 100644 --- "a/source/_posts/2020/20200625-\346\230\245\347\245\255\343\202\21219-chromeextension.md" +++ "b/source/_posts/2020/20200625-\346\230\245\347\245\255\343\202\21219-chromeextension.md" @@ -6,7 +6,7 @@ tag: - JavaScript - ChromeExtension category: - - Programming + - Frontend thumbnail: /images/2020/20200625/thumbnail.png author: 彩花谷田 lede: "現在業務では直接開発をする機会はないのですが、業務の合間を縫って日々プログラミングを勉強中です。 diff --git a/source/_posts/2020/20200702-auth0-cicd.md b/source/_posts/2020/20200702-auth0-cicd.md index 9decc56c227f..eae995d6d61d 100644 --- a/source/_posts/2020/20200702-auth0-cicd.md +++ b/source/_posts/2020/20200702-auth0-cicd.md @@ -8,7 +8,7 @@ tag: - GitLab - DevOps category: - - DevOps + - 認証認可 thumbnail: /images/2020/20200702/thumbnail.png author: 市川浩暉 lede: "私が所属しているプロジェクトでは認証認可基盤としてAuth0を使用しています。検証段階や初期構築段階では各種設定をダッシュボードから操作することが多いと思いますが、実際に本番運用を行っていると、Auth0の設定やRulesのスクリプトをGitで管理し、変更履歴を追えるようにしたいというケースが出てくるかと思います。" diff --git "a/source/_posts/2020/20200730_Redux-Toolkit\343\201\253\345\255\246\343\201\266\343\200\201TypeScript\343\201\256\345\236\213\346\216\250\350\253\226\343\201\250\343\201\223\343\202\214\343\201\213\343\202\211\343\201\256API\343\203\207\343\202\266\343\202\244\343\203\263.md" "b/source/_posts/2020/20200730_Redux-Toolkit\343\201\253\345\255\246\343\201\266\343\200\201TypeScript\343\201\256\345\236\213\346\216\250\350\253\226\343\201\250\343\201\223\343\202\214\343\201\213\343\202\211\343\201\256API\343\203\207\343\202\266\343\202\244\343\203\263.md" index b9ec80fab90e..b75ae1e30a07 100644 --- "a/source/_posts/2020/20200730_Redux-Toolkit\343\201\253\345\255\246\343\201\266\343\200\201TypeScript\343\201\256\345\236\213\346\216\250\350\253\226\343\201\250\343\201\223\343\202\214\343\201\213\343\202\211\343\201\256API\343\203\207\343\202\266\343\202\244\343\203\263.md" +++ "b/source/_posts/2020/20200730_Redux-Toolkit\343\201\253\345\255\246\343\201\266\343\200\201TypeScript\343\201\256\345\236\213\346\216\250\350\253\226\343\201\250\343\201\223\343\202\214\343\201\213\343\202\211\343\201\256API\343\203\207\343\202\266\343\202\244\343\203\263.md" @@ -7,7 +7,7 @@ tag: - Redux - React category: - - Programming + - Frontend thumbnail: /images/2020/20200730/thumbnail.png author: 澁川喜規 lede: "TypeScriptは、JavaScriptのさまざまなフリーダムな書き方を受け入れ、漸進的な型付けを行えるようにするという~~狂った~~高難易度な目的のために作成されているのですが、そろそろ、TypeScriptファーストで、利用者にとって使いやすいAPIみたいな方向性で使われることも増えるのでは、という思いを強く持ちました。「" diff --git "a/source/_posts/2020/20200811_\343\203\200\343\202\244\343\202\250\343\203\203\343\203\210\351\243\237\343\201\256\343\203\226\343\203\254\343\202\244\343\202\257\343\202\271\343\203\253\343\203\274\357\274\201\344\275\216\346\270\251\350\252\277\347\220\206\345\231\250\343\202\222\350\207\252\344\275\234\343\201\227\343\201\246\351\266\217\343\202\200\343\201\255\350\202\211\343\202\222\347\276\216\345\221\263\343\201\227\343\201\217\351\243\237\343\201\271\343\202\213.md" "b/source/_posts/2020/20200811_\343\203\200\343\202\244\343\202\250\343\203\203\343\203\210\351\243\237\343\201\256\343\203\226\343\203\254\343\202\244\343\202\257\343\202\271\343\203\253\343\203\274\357\274\201\344\275\216\346\270\251\350\252\277\347\220\206\345\231\250\343\202\222\350\207\252\344\275\234\343\201\227\343\201\246\351\266\217\343\202\200\343\201\255\350\202\211\343\202\222\347\276\216\345\221\263\343\201\227\343\201\217\351\243\237\343\201\271\343\202\213.md" index 4b3f3c0a529f..fcec3a8e4aef 100644 --- "a/source/_posts/2020/20200811_\343\203\200\343\202\244\343\202\250\343\203\203\343\203\210\351\243\237\343\201\256\343\203\226\343\203\254\343\202\244\343\202\257\343\202\271\343\203\253\343\203\274\357\274\201\344\275\216\346\270\251\350\252\277\347\220\206\345\231\250\343\202\222\350\207\252\344\275\234\343\201\227\343\201\246\351\266\217\343\202\200\343\201\255\350\202\211\343\202\222\347\276\216\345\221\263\343\201\227\343\201\217\351\243\237\343\201\271\343\202\213.md" +++ "b/source/_posts/2020/20200811_\343\203\200\343\202\244\343\202\250\343\203\203\343\203\210\351\243\237\343\201\256\343\203\226\343\203\254\343\202\244\343\202\257\343\202\271\343\203\253\343\203\274\357\274\201\344\275\216\346\270\251\350\252\277\347\220\206\345\231\250\343\202\222\350\207\252\344\275\234\343\201\227\343\201\246\351\266\217\343\202\200\343\201\255\350\202\211\343\202\222\347\276\216\345\221\263\343\201\227\343\201\217\351\243\237\343\201\271\343\202\213.md" @@ -8,7 +8,7 @@ tag: - Future電子工作部 - 料理 category: - - Programming + - IoT thumbnail: /images/2020/20200811/thumbnail.jpg author: 筒井悠平 lede: "こんにちは。筒井です。「コロナ太り」という単語をよく目にする今日この頃ですが、皆さんのお腹の具合はいかがでしょうか。これからダイエットに取り組もうという方は、おそらく鶏むね肉さんのお世話になるかと思います。鶏むね肉は高たんぱく質で、皮を剥いでしまえば脂質も低い食材です。しかし、調理方法に一工夫加えないとぱさついた食感になってしまうデメリットが..." diff --git "a/source/_posts/2020/20200817_Slack\303\227GAS\343\201\256\346\227\245\345\240\261\343\203\206\343\203\263\343\203\227\343\203\254BOT\343\202\222\345\256\237\345\213\231\343\201\253\345\260\216\345\205\245\343\201\227\343\201\246\343\201\277\343\201\237.md" "b/source/_posts/2020/20200817_Slack\303\227GAS\343\201\256\346\227\245\345\240\261\343\203\206\343\203\263\343\203\227\343\203\254BOT\343\202\222\345\256\237\345\213\231\343\201\253\345\260\216\345\205\245\343\201\227\343\201\246\343\201\277\343\201\237.md" index 4692ea2d1672..e613c7baabd5 100644 --- "a/source/_posts/2020/20200817_Slack\303\227GAS\343\201\256\346\227\245\345\240\261\343\203\206\343\203\263\343\203\227\343\203\254BOT\343\202\222\345\256\237\345\213\231\343\201\253\345\260\216\345\205\245\343\201\227\343\201\246\343\201\277\343\201\237.md" +++ "b/source/_posts/2020/20200817_Slack\303\227GAS\343\201\256\346\227\245\345\240\261\343\203\206\343\203\263\343\203\227\343\203\254BOT\343\202\222\345\256\237\345\213\231\343\201\253\345\260\216\345\205\245\343\201\227\343\201\246\343\201\277\343\201\237.md" @@ -8,7 +8,7 @@ tag: - BOT - GAS category: - - Infrastructure + - Frontend thumbnail: /images/2020/20200817/thumbnail.png author: 仁木美来 lede: "こんにちは。TIGメディアユニットの仁木です。Slackに投稿するための日報をBOT化・自動化したので自由研究企画に混ぜてもらい記事にすることにしました。毎日共通で書かなければいけないタイトルなどの固定項目やスケジュールの記載を自動化することで、作成時間を短縮し、重要な部分に時間を割けるようになりました" diff --git "a/source/_posts/2020/20200819_Firebase\343\201\247\343\201\212\346\211\213\350\273\275\357\274\201\343\203\207\343\203\274\343\202\277\347\256\241\347\220\206\347\224\273\351\235\242\343\202\222\343\201\244\343\201\217\343\202\213.md" "b/source/_posts/2020/20200819_Firebase\343\201\247\343\201\212\346\211\213\350\273\275\357\274\201\343\203\207\343\203\274\343\202\277\347\256\241\347\220\206\347\224\273\351\235\242\343\202\222\343\201\244\343\201\217\343\202\213.md" index 56bfbd8dbe2e..6de379c986e1 100644 --- "a/source/_posts/2020/20200819_Firebase\343\201\247\343\201\212\346\211\213\350\273\275\357\274\201\343\203\207\343\203\274\343\202\277\347\256\241\347\220\206\347\224\273\351\235\242\343\202\222\343\201\244\343\201\217\343\202\213.md" +++ "b/source/_posts/2020/20200819_Firebase\343\201\247\343\201\212\346\211\213\350\273\275\357\274\201\343\203\207\343\203\274\343\202\277\347\256\241\347\220\206\347\224\273\351\235\242\343\202\222\343\201\244\343\201\217\343\202\213.md" @@ -9,7 +9,7 @@ tag: - フロントエンド - 入門 category: - - Infrastructure + - Frontend thumbnail: /images/2020/20200819/thumbnail.png author: 柏木祥子 lede: "Firebaseを使って画面を開発してみようと思います。下記を最短経路で作ってみます。システムアドミンの人が使うようなマスタデータ管理画面を想定して、限られたユーザーにアクセスを制限すべく、認証機能も入れました。" diff --git "a/source/_posts/2020/20200828_\343\203\201\343\203\274\343\203\240\343\201\247\346\216\250\345\245\250\343\201\231\343\202\213VSCode\346\213\241\345\274\265\346\251\237\350\203\275\343\202\222\345\205\261\346\234\211\343\201\231\343\202\213tips.md" "b/source/_posts/2020/20200828_\343\203\201\343\203\274\343\203\240\343\201\247\346\216\250\345\245\250\343\201\231\343\202\213VSCode\346\213\241\345\274\265\346\251\237\350\203\275\343\202\222\345\205\261\346\234\211\343\201\231\343\202\213tips.md" index b3ca4da79e7c..7015990e0559 100644 --- "a/source/_posts/2020/20200828_\343\203\201\343\203\274\343\203\240\343\201\247\346\216\250\345\245\250\343\201\231\343\202\213VSCode\346\213\241\345\274\265\346\251\237\350\203\275\343\202\222\345\205\261\346\234\211\343\201\231\343\202\213tips.md" +++ "b/source/_posts/2020/20200828_\343\203\201\343\203\274\343\203\240\343\201\247\346\216\250\345\245\250\343\201\231\343\202\213VSCode\346\213\241\345\274\265\346\251\237\350\203\275\343\202\222\345\205\261\346\234\211\343\201\231\343\202\213tips.md" @@ -7,7 +7,7 @@ tag: - チーム開発 - Tips category: - - Programming + - DevOps thumbnail: /images/2020/20200828/thumbnail.png author: 市川浩暉 lede: "プロジェクトにアサインされて、まずやらなければならないのは環境構築だと思います。私が新人としてプロジェクトに参画した頃は、リポジトリのクローンからローカルサーバーを起動させるまでの手順は詳細に記載されていたものの、開発で使用するエディタの説明は特になく、VSCodeに各々が好きな拡張機能をインストールしている状態でした。当時開発経験が浅かった私は開発中に必要となる拡張機能を都度入れていたり、作業を効率化できる拡張機能を入れられておらず、非常に困っていました。" diff --git "a/source/_posts/2020/20200901_Vue.js\343\201\247\346\234\200\351\200\237\343\201\253\345\247\213\343\202\201\343\202\213Cheetah_Grid.md" "b/source/_posts/2020/20200901_Vue.js\343\201\247\346\234\200\351\200\237\343\201\253\345\247\213\343\202\201\343\202\213Cheetah_Grid.md" index 3667d5fa8f40..d48b385d95f4 100644 --- "a/source/_posts/2020/20200901_Vue.js\343\201\247\346\234\200\351\200\237\343\201\253\345\247\213\343\202\201\343\202\213Cheetah_Grid.md" +++ "b/source/_posts/2020/20200901_Vue.js\343\201\247\346\234\200\351\200\237\343\201\253\345\247\213\343\202\201\343\202\213Cheetah_Grid.md" @@ -8,7 +8,7 @@ tag: - CheetahGrid - 入門 category: - - Programming + - Frontend thumbnail: /images/2020/20200901/thumbnail.png author: 吉野貴大 lede: "2019年入社、TIG所属の吉野貴大です。今回、記事を投稿することになったきっかけは、フューチャー発のOSSであるCheetah Gridを使用した業務システム開発に携わったことです。また、現在、Cheetah Gridの[公式ドキュメント]は英語のみで公開されており、日本語で解説された記事などがあまり存在しないことも挙げられます。そこで、Cheetah Gridは機能も豊富で、業務システム開発で使いやすいため本記事で紹介します。※本記事は入門者対象です。" diff --git "a/source/_posts/2020/20200903_ANTLR\343\202\222\346\245\255\345\213\231\343\201\247\346\264\273\347\224\250\343\201\227\343\201\237\350\251\261.md" "b/source/_posts/2020/20200903_ANTLR\343\202\222\346\245\255\345\213\231\343\201\247\346\264\273\347\224\250\343\201\227\343\201\237\350\251\261.md" index b0f559558534..489d8fda2592 100644 --- "a/source/_posts/2020/20200903_ANTLR\343\202\222\346\245\255\345\213\231\343\201\247\346\264\273\347\224\250\343\201\227\343\201\237\350\251\261.md" +++ "b/source/_posts/2020/20200903_ANTLR\343\202\222\346\245\255\345\213\231\343\201\247\346\264\273\347\224\250\343\201\227\343\201\237\350\251\261.md" @@ -9,7 +9,7 @@ tag: - 構文解析 - コアテク category: - - Infrastructure + - Frontend thumbnail: /images/2020/20200903/antlr-logo.png author: 平岡知隆 lede: "皆さんは[ANTLR]をご存知でしょうか？ANTLRとはparser(構文解析器)を生成するためのツール(パーサジェネレータ)で、以下のような特徴があります。" diff --git "a/source/_posts/2020/20200907_\350\246\252\345\255\220\343\201\247\343\203\227\343\203\255\343\202\260\343\203\251\343\203\237\343\203\263\343\202\260\345\255\246\347\277\222\343\200\200Alexa\343\202\271\343\202\255\343\203\253\343\202\222\344\275\234\343\202\215\343\201\206.md" "b/source/_posts/2020/20200907_\350\246\252\345\255\220\343\201\247\343\203\227\343\203\255\343\202\260\343\203\251\343\203\237\343\203\263\343\202\260\345\255\246\347\277\222\343\200\200Alexa\343\202\271\343\202\255\343\203\253\343\202\222\344\275\234\343\202\215\343\201\206.md" index 9c12d6085b68..ff38aa365d37 100644 --- "a/source/_posts/2020/20200907_\350\246\252\345\255\220\343\201\247\343\203\227\343\203\255\343\202\260\343\203\251\343\203\237\343\203\263\343\202\260\345\255\246\347\277\222\343\200\200Alexa\343\202\271\343\202\255\343\203\253\343\202\222\344\275\234\343\202\215\343\201\206.md" +++ "b/source/_posts/2020/20200907_\350\246\252\345\255\220\343\201\247\343\203\227\343\203\255\343\202\260\343\203\251\343\203\237\343\203\263\343\202\260\345\255\246\347\277\222\343\200\200Alexa\343\202\271\343\202\255\343\203\253\343\202\222\344\275\234\343\202\215\343\201\206.md" @@ -8,7 +8,7 @@ tag: - JavaScript - 子ども category: - - Programming + - Frontend thumbnail: /images/2020/20200907/thumbnail.png author: 村瀬善則 lede: "こんにちは。TIG DXチームの村瀬です。今年から小学校でプログラミング教育が必修化になったとのことですが、プログラミングと聞くとまだまだ「難しい」、「私には無理」と言った苦手意識を持つ子供や親も多いのではないでしょうか？そこで今回は幼児～小学校低学年の子供とその親を対象として一家に一台はあるであろうスマートスピーカーのAlexaを使ったプログラミングをすることで、プログラミングが楽しいと思ってもらえるようにブログを書かせてもらいました。※あくまで楽しいと思ってもらえるところまでがゴールなので分岐や繰り返しの話はしません。" diff --git "a/source/_posts/2020/20200909_\343\202\255\343\203\274\343\203\234\343\203\274\343\203\211\343\202\222\347\265\204\343\201\277\347\253\213\343\201\246\343\201\246\343\201\277\343\201\237\350\251\261.md" "b/source/_posts/2020/20200909_\343\202\255\343\203\274\343\203\234\343\203\274\343\203\211\343\202\222\347\265\204\343\201\277\347\253\213\343\201\246\343\201\246\343\201\277\343\201\237\350\251\261.md" index 8f3fb80eec0d..f2a27bce5adf 100644 --- "a/source/_posts/2020/20200909_\343\202\255\343\203\274\343\203\234\343\203\274\343\203\211\343\202\222\347\265\204\343\201\277\347\253\213\343\201\246\343\201\246\343\201\277\343\201\237\350\251\261.md" +++ "b/source/_posts/2020/20200909_\343\202\255\343\203\274\343\203\234\343\203\274\343\203\211\343\202\222\347\265\204\343\201\277\347\253\213\343\201\246\343\201\246\343\201\277\343\201\237\350\251\261.md" @@ -6,7 +6,7 @@ tag: - 自作キーボード - 電子工作 category: - - Infrastructure + - IoT thumbnail: /images/2020/20200909/thumbnail.jpg author: 井上圭 lede: "こんにちは。CSIGの井上です。08/28に社内で「ITエンジニア怪談 ～背筋も凍る、ゾッとする話Night～ #3」というものがありました。その中で「自作キーボードの紹介」のLTがあり、キーボード作りたい熱が高まったので、翌日に作ってみた話をします。本記事は、これからキーボード作りたいなぁ、という人を後押しするための記事です。予算は 25,000 - 30,000円 位を見ておくとよいです。" diff --git "a/source/_posts/2020/20200920_Future_Engineer_Camp_2020_\345\217\202\345\212\240\350\250\230.md" "b/source/_posts/2020/20200920_Future_Engineer_Camp_2020_\345\217\202\345\212\240\350\250\230.md" index c9ead7a9876a..f1a44d22bf46 100644 --- "a/source/_posts/2020/20200920_Future_Engineer_Camp_2020_\345\217\202\345\212\240\350\250\230.md" +++ "b/source/_posts/2020/20200920_Future_Engineer_Camp_2020_\345\217\202\345\212\240\350\250\230.md" @@ -8,7 +8,7 @@ tag: - インターン2020 - 工場 category: - - Programming + - IoT thumbnail: /images/2020/20200920/thumbnail.png author: 斎藤賢太 lede: "皆さん、こんにちは。Future Engineer Camp 2020に参加しました齋藤です。インターンシップやその前のできごとを書いていきます。" diff --git "a/source/_posts/2020/20200924_CheetahGrid+Vue.js\343\202\222\343\202\250\343\203\263\343\203\227\343\203\251\343\201\247\344\275\277\343\201\243\343\201\246\343\201\277\343\201\237.md" "b/source/_posts/2020/20200924_CheetahGrid+Vue.js\343\202\222\343\202\250\343\203\263\343\203\227\343\203\251\343\201\247\344\275\277\343\201\243\343\201\246\343\201\277\343\201\237.md" index 3acbe21c5e3a..e9908e1239fa 100644 --- "a/source/_posts/2020/20200924_CheetahGrid+Vue.js\343\202\222\343\202\250\343\203\263\343\203\227\343\203\251\343\201\247\344\275\277\343\201\243\343\201\246\343\201\277\343\201\237.md" +++ "b/source/_posts/2020/20200924_CheetahGrid+Vue.js\343\202\222\343\202\250\343\203\263\343\203\227\343\203\251\343\201\247\344\275\277\343\201\243\343\201\246\343\201\277\343\201\237.md" @@ -6,7 +6,7 @@ tag: - CheetahGrid - Vue.js category: - - Infrastructure + - Frontend thumbnail: /images/2020/20200924/thumbnail.png author: 信田和哉 lede: "こんにちは！今回は[CheetahGrid][cheetahgrid-hp]＋[Vue.js][vue-hp]でエンプラ系システムを構築した際の、採用した理由と実装のポイントのご紹介をしようと思います。[CheetahGrid][cheetahgrid-hp]について存じ上げないよーとか、触ったことがないよーという方は、[入門編][beginner-link]も御覧くださいね。初めての投稿ですが、最後までお付き合いいただければ嬉しいです。" diff --git "a/source/_posts/2020/20200925_Future_Tech_Night(\347\254\2544\345\274\276\357\274\232Go_x_AWS_\343\202\271\343\203\236\343\203\274\343\203\210\345\267\245\345\240\264\347\267\250)\343\202\222\351\226\213\345\202\254\343\201\227\343\201\276\343\201\227\343\201\237\343\200\202.md" "b/source/_posts/2020/20200925_Future_Tech_Night(\347\254\2544\345\274\276\357\274\232Go_x_AWS_\343\202\271\343\203\236\343\203\274\343\203\210\345\267\245\345\240\264\347\267\250)\343\202\222\351\226\213\345\202\254\343\201\227\343\201\276\343\201\227\343\201\237\343\200\202.md" index fea0bb77492a..69421d01a149 100644 --- "a/source/_posts/2020/20200925_Future_Tech_Night(\347\254\2544\345\274\276\357\274\232Go_x_AWS_\343\202\271\343\203\236\343\203\274\343\203\210\345\267\245\345\240\264\347\267\250)\343\202\222\351\226\213\345\202\254\343\201\227\343\201\276\343\201\227\343\201\237\343\200\202.md" +++ "b/source/_posts/2020/20200925_Future_Tech_Night(\347\254\2544\345\274\276\357\274\232Go_x_AWS_\343\202\271\343\203\236\343\203\274\343\203\210\345\267\245\345\240\264\347\267\250)\343\202\222\351\226\213\345\202\254\343\201\227\343\201\276\343\201\227\343\201\237\343\200\202.md" @@ -10,15 +10,15 @@ tag: - 登壇レポート - StepFunctions category: - - Programming + - IoT thumbnail: /images/2020/20200925/thumbnail.png author: 辻大志郎 -lede: "こんにちは、TIGの栗田、伊藤、辻です。先日2020/9/25にオンラインにてFuture Tech Nightという社外勉強会を開催しました。今回は第4弾としてGoとAWSを使って工場制御する最新プロジェクトの事例を紹介しました。" +lede: "2020/9/25にオンラインにてFuture Tech Nightという社外勉強会を開催しました。今回は第4弾としてGoとAWSを使って工場制御する最新プロジェクトの事例を紹介しました。" --- ## はじめに -こんにちは、TIGの栗田、伊藤、辻です。先日2020/9/25にオンラインにてFuture Tech Nightという社外勉強会を開催しました。今回は第4弾としてGoとAWSを使って工場制御する最新プロジェクトの事例を紹介しました。 +こんにちは、TIGの栗田、伊藤、辻です。2020/9/25にオンラインにてFuture Tech Nightという社外勉強会を開催しました。今回は第4弾としてGoとAWSを使って工場制御する最新プロジェクトの事例を紹介しました。 - [第1弾【On-Line】Future Tech Night ~メディア業界変革編～](https://future.connpass.com/event/177093/) - [第2弾【On-Line】Future Tech Night ～MaaS ビジネス編～](https://future.connpass.com/event/179387/) diff --git "a/source/_posts/2020/20200930_Policy_as_Code_\343\202\222\345\256\237\347\217\276\343\201\231\343\202\213_Open_Policy_Agent_\343\201\253\346\206\247\343\202\214\343\201\246\343\200\202\351\241\214\346\235\220\343\201\253API\344\273\225\346\247\230\343\202\222Lint\343\201\227\343\201\246\343\201\277\343\201\237.md" "b/source/_posts/2020/20200930_Policy_as_Code_\343\202\222\345\256\237\347\217\276\343\201\231\343\202\213_Open_Policy_Agent_\343\201\253\346\206\247\343\202\214\343\201\246\343\200\202\351\241\214\346\235\220\343\201\253API\344\273\225\346\247\230\343\202\222Lint\343\201\227\343\201\246\343\201\277\343\201\237.md" index 42bbcfa4c67f..010ff7c8109e 100644 --- "a/source/_posts/2020/20200930_Policy_as_Code_\343\202\222\345\256\237\347\217\276\343\201\231\343\202\213_Open_Policy_Agent_\343\201\253\346\206\247\343\202\214\343\201\246\343\200\202\351\241\214\346\235\220\343\201\253API\344\273\225\346\247\230\343\202\222Lint\343\201\227\343\201\246\343\201\277\343\201\237.md" +++ "b/source/_posts/2020/20200930_Policy_as_Code_\343\202\222\345\256\237\347\217\276\343\201\231\343\202\213_Open_Policy_Agent_\343\201\253\346\206\247\343\202\214\343\201\246\343\200\202\351\241\214\346\235\220\343\201\253API\344\273\225\346\247\230\343\202\222Lint\343\201\227\343\201\246\343\201\277\343\201\237.md" @@ -10,7 +10,7 @@ tag: - Go - Policy-as-Code category: - - Programming + - DevOps thumbnail: /images/2020/20200930/thumbnail.png author: 真野隼記 lede: "Open Policy Agent（OPA）は汎用的なポリシーエンジンで、[Rego] と呼ばれるポリシー言語で定義されたルールに従って、入力がポリシーに沿っているか否かの判定を移譲させることができます。Regoで宣言的にポリシーを実装し、Policy as Code を実現できます。コーディング規約も一種のポリシーとみなして、Open API Spec（Swagger）をLinter的にチェックするツールを題材に、OPAを用いて開発してみたいと思います。" diff --git "a/source/_posts/2020/20201005_TiKV\343\201\253\350\247\246\343\202\214\343\202\213.md" "b/source/_posts/2020/20201005_TiKV\343\201\253\350\247\246\343\202\214\343\202\213.md" index 28148f937a93..eaa286f0a785 100644 --- "a/source/_posts/2020/20201005_TiKV\343\201\253\350\247\246\343\202\214\343\202\213.md" +++ "b/source/_posts/2020/20201005_TiKV\343\201\253\350\247\246\343\202\214\343\202\213.md" @@ -7,10 +7,10 @@ tag: - KVS - CNCF category: - - Programming + - DB thumbnail: /images/2020/20201005/thumbnail.png author: 伊藤真彦 -lede: "TIG DXグループの伊藤真彦です。CNCF連載最終回として、TiKVについて調査してみました。TiKVは分散型、トランザクション型Key-Valueデータベースです。" +lede: "CNCF連載最終回として、TiKVについて調査してみました。TiKVは分散型、トランザクション型Key-Valueデータベースです。" --- TIG DXグループの伊藤真彦です。 diff --git "a/source/_posts/2020/20201013_2020\345\271\264\347\247\213\343\201\253Vue.js\343\201\256\343\202\242\343\203\227\343\203\252\343\202\261\343\203\274\343\202\267\343\203\247\343\203\263\343\202\222\344\275\234\343\202\213\343\201\252\343\202\211\343\200\201\346\212\274\343\201\225\343\201\210\343\201\246\343\201\212\343\201\215\343\201\237\343\201\2045\343\201\244\343\201\256\343\203\235\343\202\244\343\203\263\343\203\210.md" "b/source/_posts/2020/20201013_2020\345\271\264\347\247\213\343\201\253Vue.js\343\201\256\343\202\242\343\203\227\343\203\252\343\202\261\343\203\274\343\202\267\343\203\247\343\203\263\343\202\222\344\275\234\343\202\213\343\201\252\343\202\211\343\200\201\346\212\274\343\201\225\343\201\210\343\201\246\343\201\212\343\201\215\343\201\237\343\201\2045\343\201\244\343\201\256\343\203\235\343\202\244\343\203\263\343\203\210.md" index 4b40b92d751e..45493c0ec576 100644 --- "a/source/_posts/2020/20201013_2020\345\271\264\347\247\213\343\201\253Vue.js\343\201\256\343\202\242\343\203\227\343\203\252\343\202\261\343\203\274\343\202\267\343\203\247\343\203\263\343\202\222\344\275\234\343\202\213\343\201\252\343\202\211\343\200\201\346\212\274\343\201\225\343\201\210\343\201\246\343\201\212\343\201\215\343\201\237\343\201\2045\343\201\244\343\201\256\343\203\235\343\202\244\343\203\263\343\203\210.md" +++ "b/source/_posts/2020/20201013_2020\345\271\264\347\247\213\343\201\253Vue.js\343\201\256\343\202\242\343\203\227\343\203\252\343\202\261\343\203\274\343\202\267\343\203\247\343\203\263\343\202\222\344\275\234\343\202\213\343\201\252\343\202\211\343\200\201\346\212\274\343\201\225\343\201\210\343\201\246\343\201\212\343\201\215\343\201\237\343\201\2045\343\201\244\343\201\256\343\203\235\343\202\244\343\203\263\343\203\210.md" @@ -5,13 +5,12 @@ postid: "" tag: - Vue.js - JavaScript - - フロントエンド - ESLint category: - - Programming + - Frontend thumbnail: /images/2020/20201013/thumbnail.png author: 伊藤真彦 -lede: "TIGの伊藤真彦です。ここ最近はVue.jsでのフロントエンド開発を行っています。ほぼ何もない状態からのスタート段階から始めたのですが、その際調査したことが学びになったので共有します。" +lede: "ここ最近はVue.jsでのフロントエンド開発を行っています。ほぼ何もない状態からのスタート段階から始めたのですが、その際調査したことが学びになったので共有します。" --- diff --git "a/source/_posts/2020/20201111_\343\200\220\346\212\200\350\241\223\343\203\226\343\203\255\343\202\260\343\200\221Parcel_2.0_beta.1\343\202\222\350\251\246\343\201\231.md" "b/source/_posts/2020/20201111_\343\200\220\346\212\200\350\241\223\343\203\226\343\203\255\343\202\260\343\200\221Parcel_2.0_beta.1\343\202\222\350\251\246\343\201\231.md" index 010ab230677a..61c1e527984b 100644 --- "a/source/_posts/2020/20201111_\343\200\220\346\212\200\350\241\223\343\203\226\343\203\255\343\202\260\343\200\221Parcel_2.0_beta.1\343\202\222\350\251\246\343\201\231.md" +++ "b/source/_posts/2020/20201111_\343\200\220\346\212\200\350\241\223\343\203\226\343\203\255\343\202\260\343\200\221Parcel_2.0_beta.1\343\202\222\350\251\246\343\201\231.md" @@ -5,9 +5,8 @@ postid: "" tag: - Parcel - TypeScript - - フロントエンド category: - - Programming + - Frontend thumbnail: /images/2020/20201111/thumbnail.png author: 澁川喜規 lede: "以前、TypeScriptのバンドラーとしてParcelの紹介をしました。* [今あえてTypeScriptのビルド＆バンドルツールを探してみる]その後、6月ぐらいに2.0のbeta.1がリリースされていましたので試してみました。ウェブサイトも公開されています。https://v2.parceljs.org/" diff --git "a/source/_posts/2020/20201124_Auth0\343\201\256\345\207\272\347\211\210\350\250\230\345\277\265\343\201\253\350\241\214\343\201\243\343\201\246\343\201\215\343\201\276\343\201\227\343\201\237\357\274\201.md" "b/source/_posts/2020/20201124_Auth0\343\201\256\345\207\272\347\211\210\350\250\230\345\277\265\343\201\253\350\241\214\343\201\243\343\201\246\343\201\215\343\201\276\343\201\227\343\201\237\357\274\201.md" index 6313bf9a9edc..eb29a1b98620 100644 --- "a/source/_posts/2020/20201124_Auth0\343\201\256\345\207\272\347\211\210\350\250\230\345\277\265\343\201\253\350\241\214\343\201\243\343\201\246\343\201\215\343\201\276\343\201\227\343\201\237\357\274\201.md" +++ "b/source/_posts/2020/20201124_Auth0\343\201\256\345\207\272\347\211\210\350\250\230\345\277\265\343\201\253\350\241\214\343\201\243\343\201\246\343\201\215\343\201\276\343\201\227\343\201\237\357\274\201.md" @@ -6,7 +6,7 @@ tag: - Auth0 - 出版 category: - - Programming + - 認証認可 thumbnail: /images/2020/20201124/thumbnail.jpg author: 山田勇一 lede: "Auth0さんより、クローズドの電子書籍出版記念にご招待いただき、Futureより3名で出席してまいりました。- マンガでわかる！Auth0誕生の秘密とは..." diff --git "a/source/_posts/2020/20201206_AWS\343\203\236\343\203\215\343\203\274\343\202\270\343\203\211Airflow(MWAA)\343\201\253\343\201\244\343\201\204\343\201\246\343\201\256FAQ.md" "b/source/_posts/2020/20201206_AWS\343\203\236\343\203\215\343\203\274\343\202\270\343\203\211Airflow(MWAA)\343\201\253\343\201\244\343\201\204\343\201\246\343\201\256FAQ.md" index c679137a7791..290976658836 100644 --- "a/source/_posts/2020/20201206_AWS\343\203\236\343\203\215\343\203\274\343\202\270\343\203\211Airflow(MWAA)\343\201\253\343\201\244\343\201\204\343\201\246\343\201\256FAQ.md" +++ "b/source/_posts/2020/20201206_AWS\343\203\236\343\203\215\343\203\274\343\202\270\343\203\211Airflow(MWAA)\343\201\253\343\201\244\343\201\204\343\201\246\343\201\256FAQ.md" @@ -8,7 +8,7 @@ tag: - Python - ジョブ設計 category: - - Programming + - Infrastructure thumbnail: /images/2020/20201206/thumbnail.png author: 多賀聡一朗 lede: "AWS マネージド Airflow が 2020/11/24 にリリースされました。 [Introducing Amazon Managed Workflows for Apache Airflow サービスを利用するにあたって知りたかったことを調査し、FAQ ベースで整理しましたので公開します。" diff --git "a/source/_posts/2021/20210107_Electron\343\201\256\344\275\277\343\201\204\346\226\271_Web\351\226\213\347\231\272\343\201\256\346\212\200\350\241\223\343\201\247\343\203\207\343\202\271\343\202\257\343\203\210\343\203\203\343\203\227\343\202\242\343\203\227\343\203\252\343\202\222\344\275\234\343\202\215\343\201\206.md" "b/source/_posts/2021/20210107_Electron\343\201\256\344\275\277\343\201\204\346\226\271_Web\351\226\213\347\231\272\343\201\256\346\212\200\350\241\223\343\201\247\343\203\207\343\202\271\343\202\257\343\203\210\343\203\203\343\203\227\343\202\242\343\203\227\343\203\252\343\202\222\344\275\234\343\202\215\343\201\206.md" index 80901b6e7c35..b077c547dfc5 100644 --- "a/source/_posts/2021/20210107_Electron\343\201\256\344\275\277\343\201\204\346\226\271_Web\351\226\213\347\231\272\343\201\256\346\212\200\350\241\223\343\201\247\343\203\207\343\202\271\343\202\257\343\203\210\343\203\203\343\203\227\343\202\242\343\203\227\343\203\252\343\202\222\344\275\234\343\202\215\343\201\206.md" +++ "b/source/_posts/2021/20210107_Electron\343\201\256\344\275\277\343\201\204\346\226\271_Web\351\226\213\347\231\272\343\201\256\346\212\200\350\241\223\343\201\247\343\203\207\343\202\271\343\202\257\343\203\210\343\203\203\343\203\227\343\202\242\343\203\227\343\203\252\343\202\222\344\275\234\343\202\215\343\201\206.md" @@ -6,7 +6,7 @@ tag: - Vue.js - Electron category: - - Programming + - Frontend thumbnail: /images/2021/20210107/thumbnail.png author: 伊藤真彦 lede: "Electronは、GitHubが開発したオープンソースのソフトウェアフレームワークです。ChromiumとNode.jsをコアとして採用する事で、Web開発と同じようにHTML,CSS,JavaScriptを用いて開発したものを.." diff --git "a/source/_posts/2021/20210108_\350\207\252\345\210\206\343\201\256\345\210\206\350\272\253(3D\343\202\242\343\203\220\343\202\277\343\203\274)\343\201\250\350\207\252\344\275\234\343\203\257\343\203\274\343\203\253\343\203\211\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" "b/source/_posts/2021/20210108_\350\207\252\345\210\206\343\201\256\345\210\206\350\272\253(3D\343\202\242\343\203\220\343\202\277\343\203\274)\343\201\250\350\207\252\344\275\234\343\203\257\343\203\274\343\203\253\343\203\211\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" index c23c59748907..bc062c7c6486 100644 --- "a/source/_posts/2021/20210108_\350\207\252\345\210\206\343\201\256\345\210\206\350\272\253(3D\343\202\242\343\203\220\343\202\277\343\203\274)\343\201\250\350\207\252\344\275\234\343\203\257\343\203\274\343\203\253\343\203\211\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" +++ "b/source/_posts/2021/20210108_\350\207\252\345\210\206\343\201\256\345\210\206\350\272\253(3D\343\202\242\343\203\220\343\202\277\343\203\274)\343\201\250\350\207\252\344\275\234\343\203\257\343\203\274\343\203\253\343\203\211\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" @@ -4,7 +4,7 @@ date: 2021/01/08 00:00:00 postid: "" tag: - Unity - - VR + - 3D - リモートワーク category: - VR diff --git "a/source/_posts/2021/20210122_\343\202\252\343\203\254\343\201\256DynamoDB_Streams\343\201\214\345\206\215\347\235\200\347\201\253\343\201\227\343\201\252\343\201\204\343\202\217\343\201\221\343\201\214\343\201\252\343\201\204.md" "b/source/_posts/2021/20210122_\343\202\252\343\203\254\343\201\256DynamoDB_Streams\343\201\214\345\206\215\347\235\200\347\201\253\343\201\227\343\201\252\343\201\204\343\202\217\343\201\221\343\201\214\343\201\252\343\201\204.md" index e051b9c15710..228591fdd72a 100644 --- "a/source/_posts/2021/20210122_\343\202\252\343\203\254\343\201\256DynamoDB_Streams\343\201\214\345\206\215\347\235\200\347\201\253\343\201\227\343\201\252\343\201\204\343\202\217\343\201\221\343\201\214\343\201\252\343\201\204.md" +++ "b/source/_posts/2021/20210122_\343\202\252\343\203\254\343\201\256DynamoDB_Streams\343\201\214\345\206\215\347\235\200\347\201\253\343\201\227\343\201\252\343\201\204\343\202\217\343\201\221\343\201\214\343\201\252\343\201\204.md" @@ -9,7 +9,7 @@ tag: - Go - トラブルシュート category: - - Programming + - DB thumbnail: /images/2021/20210122/thumbnail.png author: 真野隼記 lede: "DynamoDB Streamsは、DynamoDBに対する項目の追加、変更、削除をイベントとして検出できる機能です。テーブルの項目が変更されるとすぐに、新しいレコードがテーブルのストリームに表示されます" diff --git "a/source/_posts/2021/20210125_July_Tech_Festa_2021_winter\343\201\247\347\231\272\350\241\250\343\201\227\343\201\276\343\201\227\343\201\237.md" "b/source/_posts/2021/20210125_July_Tech_Festa_2021_winter\343\201\247\347\231\272\350\241\250\343\201\227\343\201\276\343\201\227\343\201\237.md" index f0093632757b..b1da4010e8ab 100644 --- "a/source/_posts/2021/20210125_July_Tech_Festa_2021_winter\343\201\247\347\231\272\350\241\250\343\201\227\343\201\276\343\201\227\343\201\237.md" +++ "b/source/_posts/2021/20210125_July_Tech_Festa_2021_winter\343\201\247\347\231\272\350\241\250\343\201\227\343\201\276\343\201\227\343\201\237.md" @@ -9,7 +9,7 @@ tag: - JulyTechFesta - Vue.js category: - - Programming + - Frontend thumbnail: /images/2021/20210125/thumbnail.png author: 伊藤真彦 lede: "先日July Tech Festa 2021 winterに登壇させていただきました。一足先にElectronの使い方 Web開発の技術でデスクトップアプリを作ろうというタイトルで入門記事を技術ブログでも書きました。その内容と重複する部分も..." diff --git "a/source/_posts/2021/20210203_WEB+DB_PRESS_Vol.120_\346\234\200\346\226\260Vue.js3\345\205\245\351\226\200\343\202\222\350\252\255\343\202\223\343\201\247.md" "b/source/_posts/2021/20210203_WEB+DB_PRESS_Vol.120_\346\234\200\346\226\260Vue.js3\345\205\245\351\226\200\343\202\222\350\252\255\343\202\223\343\201\247.md" index 1299e72a9ccf..5be3994f3240 100644 --- "a/source/_posts/2021/20210203_WEB+DB_PRESS_Vol.120_\346\234\200\346\226\260Vue.js3\345\205\245\351\226\200\343\202\222\350\252\255\343\202\223\343\201\247.md" +++ "b/source/_posts/2021/20210203_WEB+DB_PRESS_Vol.120_\346\234\200\346\226\260Vue.js3\345\205\245\351\226\200\343\202\222\350\252\255\343\202\223\343\201\247.md" @@ -9,7 +9,7 @@ tag: - 書評 - WEB+DBPRESS category: - - Programming + - Frontend thumbnail: /images/2021/20210203/thumbnail.jpg author: 久保勇暉 lede: "私はフロントエンドエンジニアとして約1年くらいVue2でのフロントエンド開発を行っています。そんなVue3を全く触ったことにのないエンジニアが読んだ｢WEB+DB PRESS Vol.120｣に掲載されている｢最新Vue.js3入門｣の記事感想文となります｡ " diff --git "a/source/_posts/2021/20210216_Service_Worker\351\226\213\347\231\272\343\201\247\350\265\267\343\201\215\343\201\237\344\270\215\345\205\267\345\220\210\343\202\222\346\214\257\343\202\212\350\277\224\343\202\213.md" "b/source/_posts/2021/20210216_Service_Worker\351\226\213\347\231\272\343\201\247\350\265\267\343\201\215\343\201\237\344\270\215\345\205\267\345\220\210\343\202\222\346\214\257\343\202\212\350\277\224\343\202\213.md" index 0f8ca5f8c887..5d8ce3f937b9 100644 --- "a/source/_posts/2021/20210216_Service_Worker\351\226\213\347\231\272\343\201\247\350\265\267\343\201\215\343\201\237\344\270\215\345\205\267\345\220\210\343\202\222\346\214\257\343\202\212\350\277\224\343\202\213.md" +++ "b/source/_posts/2021/20210216_Service_Worker\351\226\213\347\231\272\343\201\247\350\265\267\343\201\215\343\201\237\344\270\215\345\205\267\345\220\210\343\202\222\346\214\257\343\202\212\350\277\224\343\202\213.md" @@ -4,11 +4,11 @@ date: 2021/02/16 00:00:00 postid: "" tag: - JavaScript - - フロントエンド + - Service Worker - Vue.js - トラブルシュート category: - - Programming + - Frontend thumbnail: /images/2021/20210216/thumbnail.png author: 川端一輝 lede: "Service Worker開発で起きた不具合と対応方法を記載します。Service Workerは、ブラウザがWebページとは別にバックグラウンドで実行するJavaScriptになります。" diff --git "a/source/_posts/2021/20210222_Auth0\343\201\247\350\252\215\350\250\274\346\210\220\345\212\237\345\276\214\343\201\253\344\273\273\346\204\217\343\201\256Web\343\203\232\343\203\274\343\202\270\343\202\222\350\241\250\347\244\272\343\201\225\343\201\233\343\201\237\343\201\204.md" "b/source/_posts/2021/20210222_Auth0\343\201\247\350\252\215\350\250\274\346\210\220\345\212\237\345\276\214\343\201\253\344\273\273\346\204\217\343\201\256Web\343\203\232\343\203\274\343\202\270\343\202\222\350\241\250\347\244\272\343\201\225\343\201\233\343\201\237\343\201\204.md" index b173fa688674..c422a6d4d047 100644 --- "a/source/_posts/2021/20210222_Auth0\343\201\247\350\252\215\350\250\274\346\210\220\345\212\237\345\276\214\343\201\253\344\273\273\346\204\217\343\201\256Web\343\203\232\343\203\274\343\202\270\343\202\222\350\241\250\347\244\272\343\201\225\343\201\233\343\201\237\343\201\204.md" +++ "b/source/_posts/2021/20210222_Auth0\343\201\247\350\252\215\350\250\274\346\210\220\345\212\237\345\276\214\343\201\253\344\273\273\346\204\217\343\201\256Web\343\203\232\343\203\274\343\202\270\343\202\222\350\241\250\347\244\272\343\201\225\343\201\233\343\201\237\343\201\204.md" @@ -8,7 +8,7 @@ tag: - JavaScript - Vue.js category: - - 認証認可 + - Frontend thumbnail: /images/2021/20210222/thumbnail.png author: 先山賢一 lede: "とある案件で、ユーザがログインした後に任意のページを表示させたいニーズがありました。こういった時はアプリ側でやってあげれなくもないのですが、複数のアプリが Auth0 で認証している場合には、アプリの数だけ改修が発生してしまいます。今回は context.redirect という Auth0 のユニークな機能を使って、改修を最小限に抑える方法を紹介します。" diff --git "a/source/_posts/2021/20210226_\343\202\242\343\202\257\343\202\273\343\202\267\343\203\223\343\203\252\343\203\206\343\202\243\346\203\205\345\240\261\343\202\222\344\275\277\343\201\243\343\201\237\345\243\212\343\202\214\343\201\253\343\201\217\343\201\204E2E\343\203\206\343\202\271\343\203\210.md" "b/source/_posts/2021/20210226_\343\202\242\343\202\257\343\202\273\343\202\267\343\203\223\343\203\252\343\203\206\343\202\243\346\203\205\345\240\261\343\202\222\344\275\277\343\201\243\343\201\237\345\243\212\343\202\214\343\201\253\343\201\217\343\201\204E2E\343\203\206\343\202\271\343\203\210.md" index 3a1741d1cd2b..57ebe7198a90 100644 --- "a/source/_posts/2021/20210226_\343\202\242\343\202\257\343\202\273\343\202\267\343\203\223\343\203\252\343\203\206\343\202\243\346\203\205\345\240\261\343\202\222\344\275\277\343\201\243\343\201\237\345\243\212\343\202\214\343\201\253\343\201\217\343\201\204E2E\343\203\206\343\202\271\343\203\210.md" +++ "b/source/_posts/2021/20210226_\343\202\242\343\202\257\343\202\273\343\202\267\343\203\223\343\203\252\343\203\206\343\202\243\346\203\205\345\240\261\343\202\222\344\275\277\343\201\243\343\201\237\345\243\212\343\202\214\343\201\253\343\201\217\343\201\204E2E\343\203\206\343\202\271\343\203\210.md" @@ -11,7 +11,7 @@ tag: - Node学園 - テスト category: - - Infrastructure + - Frontend thumbnail: /images/2021/20210226/thumbnail.png author: 澁川喜規 lede: "E2Eテストはみんなしていますか？正直言うと、僕はあんまり好きじゃなかったです。お仕事では他の人が入れてくれたものが回っていたりしますが。前職で、SikuliXを使って社内向けのデスクトップアプリケーションのE2Eテストにトライしたことがあるんですが、すぐに壊れて動かなくなるので、費用対効果が出せなくてあきらめました（一人プロジェクトだったのもあります）。* 絵でマッチングを行うのでボタン画像をいっぱいスクショをとっていく必要がある" diff --git "a/source/_posts/2021/20210301_\343\200\220\347\231\273\345\243\207\343\201\227\343\201\276\343\201\227\343\201\237\343\200\221\343\202\242\343\203\254\343\202\257\343\202\265\343\202\242\343\203\227\343\203\252\343\202\222\351\226\213\347\231\272\343\201\227\343\201\246\343\201\277\343\201\237\343\202\211\344\270\255\343\200\205\345\244\247\345\244\211\343\201\240\343\201\243\343\201\237\350\251\261.md" "b/source/_posts/2021/20210301_\343\200\220\347\231\273\345\243\207\343\201\227\343\201\276\343\201\227\343\201\237\343\200\221\343\202\242\343\203\254\343\202\257\343\202\265\343\202\242\343\203\227\343\203\252\343\202\222\351\226\213\347\231\272\343\201\227\343\201\246\343\201\277\343\201\237\343\202\211\344\270\255\343\200\205\345\244\247\345\244\211\343\201\240\343\201\243\343\201\237\350\251\261.md" index 11cd487118ea..c38ee968f187 100644 --- "a/source/_posts/2021/20210301_\343\200\220\347\231\273\345\243\207\343\201\227\343\201\276\343\201\227\343\201\237\343\200\221\343\202\242\343\203\254\343\202\257\343\202\265\343\202\242\343\203\227\343\203\252\343\202\222\351\226\213\347\231\272\343\201\227\343\201\246\343\201\277\343\201\237\343\202\211\344\270\255\343\200\205\345\244\247\345\244\211\343\201\240\343\201\243\343\201\237\350\251\261.md" +++ "b/source/_posts/2021/20210301_\343\200\220\347\231\273\345\243\207\343\201\227\343\201\276\343\201\227\343\201\237\343\200\221\343\202\242\343\203\254\343\202\257\343\202\265\343\202\242\343\203\227\343\203\252\343\202\222\351\226\213\347\231\272\343\201\227\343\201\246\343\201\277\343\201\237\343\202\211\344\270\255\343\200\205\345\244\247\345\244\211\343\201\240\343\201\243\343\201\237\350\251\261.md" @@ -7,7 +7,7 @@ tag: - Alexa - Node学園 category: - - Programming + - Mobile thumbnail: /images/2021/20210301/thumbnail.png author: 伊藤真彦 lede: "リモート会議リマインダーというAlexaスキルを開発しました。リモート会議に特化したリマインダーです、会議時刻を話すと10分前と1分前にリマインダーをセットしてくれます。" diff --git "a/source/_posts/2021/20210303_Vis_Network\343\201\247\351\232\216\345\261\244\343\202\260\343\203\251\343\203\225\343\202\222\345\217\257\350\246\226\345\214\226\343\201\231\343\202\213.md" "b/source/_posts/2021/20210303_Vis_Network\343\201\247\351\232\216\345\261\244\343\202\260\343\203\251\343\203\225\343\202\222\345\217\257\350\246\226\345\214\226\343\201\231\343\202\213.md" index 5a2c377eb894..626695ca669a 100644 --- "a/source/_posts/2021/20210303_Vis_Network\343\201\247\351\232\216\345\261\244\343\202\260\343\203\251\343\203\225\343\202\222\345\217\257\350\246\226\345\214\226\343\201\231\343\202\213.md" +++ "b/source/_posts/2021/20210303_Vis_Network\343\201\247\351\232\216\345\261\244\343\202\260\343\203\251\343\203\225\343\202\222\345\217\257\350\246\226\345\214\226\343\201\231\343\202\213.md" @@ -10,7 +10,7 @@ tag: - 技術選定 - グラフ category: - - Programming + - Frontend thumbnail: /images/2021/20210303/thumbnail.png author: 山田修路 lede: "業務で階層グラフを可視化する機会があったので、階層グラフの可視化について共有させていただこうと思います。グラフとは関係を抽象化したもので、線グラフや棒グラフなどのチャートとは異なる概念です。" diff --git "a/source/_posts/2021/20210304_mxGraph\343\201\247\351\232\216\345\261\244\343\202\260\343\203\251\343\203\225\343\202\222\345\217\257\350\246\226\345\214\226\343\201\231\343\202\213.md" "b/source/_posts/2021/20210304_mxGraph\343\201\247\351\232\216\345\261\244\343\202\260\343\203\251\343\203\225\343\202\222\345\217\257\350\246\226\345\214\226\343\201\231\343\202\213.md" index b9902eba1ab7..3395547dd50f 100644 --- "a/source/_posts/2021/20210304_mxGraph\343\201\247\351\232\216\345\261\244\343\202\260\343\203\251\343\203\225\343\202\222\345\217\257\350\246\226\345\214\226\343\201\231\343\202\213.md" +++ "b/source/_posts/2021/20210304_mxGraph\343\201\247\351\232\216\345\261\244\343\202\260\343\203\251\343\203\225\343\202\222\345\217\257\350\246\226\345\214\226\343\201\231\343\202\213.md" @@ -9,7 +9,7 @@ tag: - コアテク - グラフ category: - - Programming + - Frontend thumbnail: /images/2021/20210304/thumbnail.png author: 平岡知隆 lede: "前回の記事では、JavaScript製のグラフ可視化ライブラリについて概観しました。また、その1つであるVis Networkについて紹介し、階層グラフの可視化を行いました。Vis Networkはcanvasでの高速な描画が可能で、階層グラフをライトに表示・加工する場合は非常に有用ですが、大きな階層グラフを表示する場合にエッジの交差が多くなってしまうという課題があることを見てきました。" diff --git "a/source/_posts/2021/20210308_Auth0_Rules\343\201\256\343\203\246\343\203\213\343\203\203\343\203\210\343\203\206\343\202\271\343\203\210\343\202\222\346\233\270\343\201\215\343\201\237\343\201\204.md" "b/source/_posts/2021/20210308_Auth0_Rules\343\201\256\343\203\246\343\203\213\343\203\203\343\203\210\343\203\206\343\202\271\343\203\210\343\202\222\346\233\270\343\201\215\343\201\237\343\201\204.md" index 5ad7738dd517..b02a1755bd7f 100644 --- "a/source/_posts/2021/20210308_Auth0_Rules\343\201\256\343\203\246\343\203\213\343\203\203\343\203\210\343\203\206\343\202\271\343\203\210\343\202\222\346\233\270\343\201\215\343\201\237\343\201\204.md" +++ "b/source/_posts/2021/20210308_Auth0_Rules\343\201\256\343\203\246\343\203\213\343\203\203\343\203\210\343\203\206\343\202\271\343\203\210\343\202\222\346\233\270\343\201\215\343\201\237\343\201\204.md" @@ -9,7 +9,7 @@ tag: - Auth0Rules - モック category: - - 認証認可 + - Frontend thumbnail: /images/2021/20210308/thumbnail.png author: 小林澪司 lede: "案件で認証プラットフォームである[Auth0]を利用していますが、Auth0の機能の中でもRulesと呼ばれるユーザ認証時にJavaScriptの関数を走らせる事が出来る機能は非常に強力で様々なニーズに対応することが可能になります。その中でJavaScriptの関数で書けるRulesに対して、ユニットテストを書く事が出来れば、Ruleの質も担保出来ます。" diff --git "a/source/_posts/2021/20210324_k6\343\201\256\344\275\277\343\201\204\346\226\271_\343\202\267\343\203\263\343\203\227\343\203\253&\350\273\275\345\277\253\343\201\252\350\262\240\350\215\267\350\251\246\351\250\223\343\203\204\343\203\274\343\203\253\343\202\222\350\251\246\343\201\231.md" "b/source/_posts/2021/20210324_k6\343\201\256\344\275\277\343\201\204\346\226\271_\343\202\267\343\203\263\343\203\227\343\203\253&\350\273\275\345\277\253\343\201\252\350\262\240\350\215\267\350\251\246\351\250\223\343\203\204\343\203\274\343\203\253\343\202\222\350\251\246\343\201\231.md" index 3a998c1bdc16..95051f243908 100644 --- "a/source/_posts/2021/20210324_k6\343\201\256\344\275\277\343\201\204\346\226\271_\343\202\267\343\203\263\343\203\227\343\203\253&\350\273\275\345\277\253\343\201\252\350\262\240\350\215\267\350\251\246\351\250\223\343\203\204\343\203\274\343\203\253\343\202\222\350\251\246\343\201\231.md" +++ "b/source/_posts/2021/20210324_k6\343\201\256\344\275\277\343\201\204\346\226\271_\343\202\267\343\203\263\343\203\227\343\203\253&\350\273\275\345\277\253\343\201\252\350\262\240\350\215\267\350\251\246\351\250\223\343\203\204\343\203\274\343\203\253\343\202\222\350\251\246\343\201\231.md" @@ -1,442 +1,442 @@ ---- -title: "k6の使い方 シンプル&軽快な負荷試験ツールを試す" -date: 2021/03/24 00:00:00 -postid: "" -tag: - - JavaScript - - k6 - - 性能検証 - - 負荷テスト -category: - - Programming -thumbnail: /images/2021/20210324/thumbnail.jpg -author: 伊藤真彦 -lede: "TIGの伊藤真彦です。業務で行っている開発がいよいよリリースを視野に入れたフェーズに入り、E2Eテストや各種性能試験を行いました。" ---- - - - -TIGの伊藤真彦です。 -業務で行っている開発がいよいよリリースを視野に入れたフェーズに入り、E2Eテストや各種性能試験を行いました。 - -# 負荷試験とは - -リリース前に行いたい試験の1つに負荷試験があります。 - -なるべく実際の運用に近い環境、データベースの状態を整え、実際に利用されるであろうユーザー数、もしくはそれ以上の同時接続にシステムが耐えられるかを試験します。特にソーシャルゲームの世界では想定を超えたアクセスによりリリース直後にサーバーがダウンしてしまう悲劇が発生しがちです。IT業界の外にいる人々にとっても覚えのある経験かもしれません。 - -そんな負荷試験ですが、実際に数百人、数万人規模の同時アクセスを人力で再現するには膨大な予算が必要です。そのため、一台のコンピュータで複数人からの同時アクセスを再現する負荷試験ツールが数多く存在します。 - -負荷試験ツールの定番と言えば[Apache Jmeter](https://jmeter.apache.org/)があります。改めて確認してみたところ2021年をもって生誕20周年を記念する老舗プロダクトでした、おめでとうございます。 - -Jmeterの使用は勿論検討したのですが、モダンな技術が大好きな性分であり、我らが[渋川さん](/authors/%E6%BE%81%E5%B7%9D%E5%96%9C%E8%A6%8F/)もおススメしているため[k6](https://k6.io/)を試してみました。 - - -## k6とは - -2016年頃から開発がスタートした負荷試験ツールです。 -ワニのキャラクターが印象的です、かわいいですね。 - - - -OSSとして公開されている事が特徴です、リポジトリは[こちら](https://github.com/loadimpact/k6)です。 - -k6はGoで開発されています、これだけでも今時な印象を受けますね。 - - -[公式サイトの説明](https://k6.io/about)にある通り。 -DevOpsの概念の成熟、現在のあり方に対応し、継続的な性能試験を行えるものである事を意識して設計されています。 - -> In tandem with the growth of DevOps, we started to notice gaps emerging in the market that we knew we could address. Users were no longer testing things one-off. APIs were becoming more prevalent in usage and required testing. Users wanted to test continuously. For many companies, testing was moving into the responsibility of developers. - -## k6のインストール - -k6のインストールはどのプラットフォームであっても簡単です。 -[installation](https://k6.io/docs/getting-started/installation)に記載があります、書いてあるコマンドをコピー&ペーストするだけで問題なく導入できました。 - -Windows向けにはインストーラが用意されています。 - - -`brew`, `apt-get`, `yum`, `dokcer`での配布がサポートされています、バイナリ形式でダウンロードすることも可能です、インストールに苦戦することはほぼ無いと言っても良いと思います。 - -docker形式の配布形態を利用し、CIで性能試験を行い、デフォルトの性能を下回ったら警告するような使い方もできるかもしれません。 - -## k6の使い方 - -#### 基本的な利用方法 - -k6は基本的に負荷試験のシナリオをJavaScriptで記載し、CLIで実行する利用形態で負荷試験を行います。 - -```js k6_test.js -import http from 'k6/http'; -export default function () { - http.get('http://localhost:8080/'); -} -``` - -各種ユーティリティをimportし、負荷試験のシナリオを記載します。 -特定のエンドポイント1か所にGETでアクセスするだけなら、上記のような4行程度の記載でテストを行うことが可能です。 - -今回は下記のシンプルなWebサーバーをローカル環境に立てて上記`k6_test.js`の動作を検証します。 - -```go main.go -package main - -import ( - "fmt" - "log" - "net/http" -) - -func main() { - http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) { - fmt.Fprintf(w, "Hello k6") - }) - log.Fatal(http.ListenAndServe(":8080", nil)) -} - -``` - -`k6 run ファイル名` で実行することが可能です。 -アスキーアートと試験結果が出力されます。 - -```sh -k6 run .\k6_test.js - - /\ |‾‾| /‾‾/ /‾‾/ - /\ / \ | |/ / / / - / \/ \ | ( / ‾‾\ - / \ | |\ \ | (‾) | - / __________ \ |__| \__\ \_____/ .io - - execution: local - script: .\k6_test.js - output: - - - scenarios: (100.00%) 1 scenario, 1 max VUs, 10m30s max duration (incl. graceful stop): - * default: 1 iterations for each of 1 VUs (maxDuration: 10m0s, gracefulStop: 30s) - - -running (00m00.0s), 0/1 VUs, 1 complete and 0 interrupted iterations -default ✓ [======================================] 1 VUs 00m00.0s/10m0s 1/1 iters, 1 per VU - - data_received..............: 124 B 7.8 kB/s - data_sent..................: 80 B 5.0 kB/s - http_req_blocked...........: avg=403.9µs min=403.9µs med=403.9µs max=403.9µs p(90)=403.9µs p(95)=403.9µs - http_req_connecting........: avg=403.9µs min=403.9µs med=403.9µs max=403.9µs p(90)=403.9µs p(95)=403.9µs - http_req_duration..........: avg=0s min=0s med=0s max=0s p(90)=0s p(95)=0s - http_req_receiving.........: avg=0s min=0s med=0s max=0s p(90)=0s p(95)=0s - http_req_sending...........: avg=0s min=0s med=0s max=0s p(90)=0s p(95)=0s - http_req_tls_handshaking...: avg=0s min=0s med=0s max=0s p(90)=0s p(95)=0s - http_req_waiting...........: avg=0s min=0s med=0s max=0s p(90)=0s p(95)=0s - http_reqs..................: 1 63.019517/s - iteration_duration.........: avg=1.9ms min=1.9ms med=1.9ms max=1.9ms p(90)=1.9ms p(95)=1.9ms - iterations.................: 1 63.019517/s -``` - -#### 負荷を変更する - -`--vus`オプション`--duration`等のオプションで負荷の重さを変えることが可能です。 -詳しくは[公式ドキュメント](https://k6.io/docs/using-k6/options)を参照してください。 - -主に使うものは、下記のオプションです。 - -```sh ---vus: 同時接続数 ---duration: 試験の実行時間 ---iteration: シナリオを繰り返す回数 -``` - -`--vus`オプションだけではエラーが発生します、試験時間、もしくはシナリオの実行回数を指定する必要があります。 - -```sh - k6 run .\k6_test.js --vus 10 - - /\ |‾‾| /‾‾/ /‾‾/ - /\ / \ | |/ / / / - / \/ \ | ( / ‾‾\ - / \ | |\ \ | (‾) | - / __________ \ |__| \__\ \_____/ .io - -time="2021-03-07T16:33:00+09:00" level=warning msg="the `vus=10` option will be ignored, it only works in conjunction with `iterations`, `duration`, or `stages`" - execution: local - script: .\k6_test.js - output: - - - scenarios: (100.00%) 1 scenario, 1 max VUs, 10m30s max duration (incl. graceful stop): - * default: 1 iterations for each of 1 VUs (maxDuration: 10m0s, gracefulStop: 30s) - -``` - -同時接続数10人で10秒間負荷をかけてみます。 -デフォルトの時間を超えるまでシナリオを繰り返します、レポートのiterationsを見ると999039回繰り返されたことがわかります。 - -``` - k6 run .\k6_test.js --vus 10 --duration 10s - - /\ |‾‾| /‾‾/ /‾‾/ - /\ / \ | |/ / / / - / \/ \ | ( / ‾‾\ - / \ | |\ \ | (‾) | - / __________ \ |__| \__\ \_____/ .io - - execution: local - script: .\k6_test.js - output: - - - scenarios: (100.00%) 1 scenario, 10 max VUs, 40s max duration (incl. graceful stop): - * default: 10 looping VUs for 10s (gracefulStop: 30s) - - -running (10.0s), 00/10 VUs, 999039 complete and 0 interrupted iterations -default ✓ [======================================] 10 VUs 10s0 - - data_received..............: 124 MB 12 MB/s - data_sent..................: 80 MB 8.0 MB/s - http_req_blocked...........: avg=1.19µs min=0s med=0s max=1.49ms p(90)=0s p(95)=0s - http_req_connecting........: avg=0s min=0s med=0s max=0s p(90)=0s p(95)=0s - http_req_duration..........: avg=67.92µs min=0s med=0s max=5.53ms p(90)=0s p(95)=513.9µs - http_req_receiving.........: avg=14.58µs min=0s med=0s max=1.99ms p(90)=0s p(95)=0s - http_req_sending...........: avg=6.07µs min=0s med=0s max=1.49ms p(90)=0s p(95)=0s - http_req_tls_handshaking...: avg=0s min=0s med=0s max=0s p(90)=0s p(95)=0s - http_req_waiting...........: avg=47.26µs min=0s med=0s max=5.49ms p(90)=0s p(95)=510.2µs - http_reqs..................: 999039 99705.733857/s - iteration_duration.........: avg=96.83µs min=0s med=0s max=17.46ms p(90)=511.3µs p(95)=996.7µs - iterations.................: 999039 99705.733857/s - vus........................: 10 min=10 max=10 - vus_max....................: 10 min=10 max=10 -``` - -同時接続数100人で100回シナリオを繰り返す例です。 - -```sh -k6 run .\k6_test.js --vus 100 --iterations 100 - - /\ |‾‾| /‾‾/ /‾‾/ - /\ / \ | |/ / / / - / \/ \ | ( / ‾‾\ - / \ | |\ \ | (‾) | - / __________ \ |__| \__\ \_____/ .io - - execution: local - script: .\k6_test.js - output: - - - scenarios: (100.00%) 1 scenario, 100 max VUs, 10m30s max duration (incl. graceful stop): - * default: 100 iterations shared among 100 VUs (maxDuration: 10m0s, gracefulStop: 30s) - - -running (00m00.0s), 000/100 VUs, 100 complete and 0 interrupted iterations -default ✓ [======================================] 100 VUs 00m00.0s/10m0s 100/100 shared iters - - data_received..............: 12 kB 623 kB/s - data_sent..................: 8.0 kB 402 kB/s - http_req_blocked...........: avg=1ms min=0s med=775.9µs max=2.35ms p(90)=2.35ms p(95)=2.35ms - http_req_connecting........: avg=525.37µs min=0s med=579.2µs max=1.35ms p(90)=775.9µs p(95)=775.9µs - http_req_duration..........: avg=2.52ms min=1.09ms med=2.54ms max=3.57ms p(90)=3.56ms p(95)=3.57ms - http_req_receiving.........: avg=5.23µs min=0s med=0s max=505.49µs p(90)=0s p(95)=0s - http_req_sending...........: avg=103.27µs min=0s med=0s max=775.9µs p(90)=775.9µs p(95)=775.9µs - http_req_tls_handshaking...: avg=0s min=0s med=0s max=0s p(90)=0s p(95)=0s - http_req_waiting...........: avg=2.41ms min=579.2µs med=2.54ms max=3.57ms p(90)=3.17ms p(95)=3.57ms - http_reqs..................: 100 5020.634809/s - iteration_duration.........: avg=4.07ms min=1.35ms med=4.14ms max=5.92ms p(90)=5.92ms p(95)=5.92ms - iterations.................: 100 5020.634809/s -``` - -これらの負荷設定はJavaScriptに記載することも可能です。 - -```js k6_test.js -import http from 'k6/http'; - -export let options = { - vus: 10, - iterations: 100 -}; - -export default function () { - http.get('http://localhost:8080/'); -} -``` - -`stages`という書き方で段階的に負荷を変更することも可能です。 -この場合`vus`ではなく`target`が同時接続数です。 -下記の書き方の場合、同時接続数10人で1秒負荷をかけた後に20人、30人と接続数を増やしていく試験になります。 -`--stages`のようにCLIオプションとして渡すことはできません。 - -```js k6_test.js -import http from 'k6/http'; - -export let options = { - stages: [ - { target: 10, duration: '1s' }, - { target: 20, duration: '1s' }, - { target: 30, duration: '1s' } - ] -}; - -export default function () { - http.get('http://localhost:8080/'); -} -``` - -#### GETリクエスト以外を検証する。 - -動作確認ではGETリクエストの確認を行いましたが、k6のhttpライブラリはGETリクエスト以外も検証可能です、GET, POSTなどは勿論OPTIONSなどのリクエストも対応しています。 -詳しくは[公式ドキュメント](https://k6.io/docs/javascript-api/k6-http)を確認してください。 - -よく使うであろうPOST, PUT, DELETEについて簡単なスニペットを用意しました。 - -```js k6_post.js -import http from 'k6/http'; - -export default function () { -import http from 'k6/http'; - -export default function () { - const body = { key: 'value' }; - const headers = { 'Content-Type': 'application/json' }; - http.post('http://localhost:8080/', JSON.stringify(body), headers); -} -``` - -```js k6_put.js -import http from 'k6/http'; - -export default function () { - const body = { key: 'value' }; - const headers = { 'Content-Type': 'application/json' }; - http.put('http://localhost:8080/', JSON.stringify(body), headers); -} -``` - -```js k6_delete.js -import http from 'k6/http'; - -export default function () { - const body = { key: 'value' }; - const params = { headers: { 'X-MyHeader': 'k6test' } }; - http.del('http://localhost:8080/', JSON.stringify(body), params); -} -``` - -DELETEリクエストの場合、リクエストボディにパラメータを含めることはあまり一般的ではありませんが、技術的には可能であったりといった側面に対応できるようになっています。 -(k6公式ドキュメントにもDELETEリクエストのリクエストボディはセマンティクスが定まっていないため非推奨と記載があります) - -#### リクエストの応答を検証する - -サーバーが負荷に耐えきれず正常な応答を返せない割合を`check`ライブラリで検証することが可能です。 - -```js k6_test.js -import http from 'k6/http'; -import { check } from 'k6'; - -export default function () { - const res = http.get('http://localhost:8080/'); - check(res, { - 'response code was 200': (res) => res.status == 200, - 'body size was 8 bytes': (res) => res.body.length == 8, - }); -} -``` - -上記コードで同時接続2万人分のリクエストの1割を捌くことに失敗することをレポートできました。 - -```sh -k6 run k6_test.js --vus 20000 --iterations 20000 - - - /\ |‾‾| /‾‾/ /‾‾/ - /\ / \ | |/ / / / - / \/ \ | ( / ‾‾\ - / \ | |\ \ | (‾) | - / __________ \ |__| \__\ \_____/ .io - -// サーバーエラー発生時にログが出力される為中略 - -running (01m31.8s), 00000/20000 VUs, 20000 complete and 0 interrupted iterations -default ✓ [======================================] 20000 VUs 01m31.7s/10m0s 20000/20000 shared iters - - ✗ response code was 200 - ↳ 90% — ✓ 18054 / ✗ 1946 - ✗ body size was 8 bytes - ↳ 90% — ✓ 18054 / ✗ 1946 - - checks.....................: 90.27% ✓ 36108 ✗ 3892 - data_received..............: 2.2 MB 24 kB/s - data_sent..................: 1.4 MB 16 kB/s - http_req_blocked...........: avg=11.47s min=0s med=16.54s max=19.94s p(90)=19.46s p(95)=19.78s - http_req_connecting........: avg=10.94s min=0s med=15.84s max=19.94s p(90)=19.45s p(95)=19.78s - http_req_duration..........: avg=3.55s min=0s med=944.07ms max=19.34s p(90)=11.12s p(95)=13.1s - http_req_receiving.........: avg=66.54ms min=0s med=0s max=11.01s p(90)=0s p(95)=997.5µs - http_req_sending...........: avg=976.15ms min=0s med=27.92ms max=16.22s p(90)=3.12s p(95)=5.93s - http_req_tls_handshaking...: avg=0s min=0s med=0s max=0s p(90)=0s p(95)=0s - http_req_waiting...........: avg=2.5s min=0s med=602.44ms max=18.21s p(90)=8.91s p(95)=10.96s - http_reqs..................: 20000 217.879289/s - iteration_duration.........: avg=18.18s min=0s med=19.68s max=1m5s p(90)=20s p(95)=25.89s - iterations.................: 20000 217.879289/s - vus........................: 38 min=38 max=16944 - vus_max....................: 20000 min=20000 max=20000 -``` - -ちなみに26000人～29000人分のアクセスを再現するあたりで64GBのメモリを使い切り動かなくなりました。 -要求スペック的には1000人オーダーであれば8～16GBのメモリのマシンであっても耐えられそうです。 -メモリに余裕のない環境ではマシンスペックの限界を超えたときにGoのランタイムエラーが出力され、Go製ツールであることを感じることができます。 - - - -`check`関数はそのまま真偽値として扱う事が可能です。 -試験の失敗をログ出力する`fail`ライブラリと組み合わせることが可能です。 - -```js k6_fail.js -import http from 'k6/http'; -import { check, fail } from 'k6'; - -export default function () { - const res = http.get('http://localhost:8080/'); - if ( - !check(res, { - 'status code MUST be 200': (res) => res.status == 200, - }) - ) { - fail('status code was *not* 200'); - } -} -``` - -その他テストシナリオの品質を高めるためのユーティリティ等が沢山用意されています、詳しくは[公式ドキュメントのjavascript-apiの章](https://k6.io/docs/javascript-api)を確認してください。 -JavaScriptで再利用性の高い高品質なテストシナリオをどのように書いていくかが、腕の見せ所ですね。 - -## 負荷試験のアウトプットについて - -試験レポートは標準出力で確認できるものを手作業で纏めるだけでも充分ではありますが、`--out`オプションで出力先、形式を変更することが可能です。 - -``` - k6 run .\k6_test.js --out json=out.json -``` - -[公式ドキュメント](https://k6.io/docs/getting-started/results-output)では下記のような形式が想定されています。 - -| plugin | usage | -| - | - | -| Amazon CloudWatch | k6 run --out statsd | -| Apache Kafka | k6 run --out kafka | -| Cloud | k6 run --out cloud | -| CSV | k6 run --out csv | -| Datadog |k6 run --out datadog | -| InfluxDB | k6 run --out influxdb | -| JSON | k6 run --out json | -| New Relic | k6 run --out statsd | -| StatsD | k6 run --out statsd | - -公式のダッシュボードである[k6 Cloud](https://k6.io/cloud)も提供されています。 -試験結果の可視化、前回との差分の比較を様々な手段で行う事や、CloudWatchのメトリクスとして定期的なパフォーマンスチェックを行う監視システムの構築等が想像できます。 -これらの機能の存在からも現在のDevOpsの成長に追従した継続的な性能試験という設計思想を感じることができます。 - -## まとめ - -* k6はGoで開発されたモダンな負荷試験ツールです。 -* 軽快なフットワークでインストールが可能です。 -* JavaScriptで書いたシナリオを実行する形で利用します。 -* 試験結果は様々な外部システムと組み合わせることが可能です。 - -負荷試験を検討の際はぜひ選択肢の1つとして検討してみてください。 +--- +title: "k6の使い方 シンプル&軽快な負荷試験ツールを試す" +date: 2021/03/24 00:00:00 +postid: "" +tag: + - JavaScript + - k6 + - 性能検証 + - 負荷テスト +category: + - Frontend +thumbnail: /images/2021/20210324/thumbnail.jpg +author: 伊藤真彦 +lede: "TIGの伊藤真彦です。業務で行っている開発がいよいよリリースを視野に入れたフェーズに入り、E2Eテストや各種性能試験を行いました。" +--- + + + +TIGの伊藤真彦です。 +業務で行っている開発がいよいよリリースを視野に入れたフェーズに入り、E2Eテストや各種性能試験を行いました。 + +# 負荷試験とは + +リリース前に行いたい試験の1つに負荷試験があります。 + +なるべく実際の運用に近い環境、データベースの状態を整え、実際に利用されるであろうユーザー数、もしくはそれ以上の同時接続にシステムが耐えられるかを試験します。特にソーシャルゲームの世界では想定を超えたアクセスによりリリース直後にサーバーがダウンしてしまう悲劇が発生しがちです。IT業界の外にいる人々にとっても覚えのある経験かもしれません。 + +そんな負荷試験ですが、実際に数百人、数万人規模の同時アクセスを人力で再現するには膨大な予算が必要です。そのため、一台のコンピュータで複数人からの同時アクセスを再現する負荷試験ツールが数多く存在します。 + +負荷試験ツールの定番と言えば[Apache Jmeter](https://jmeter.apache.org/)があります。改めて確認してみたところ2021年をもって生誕20周年を記念する老舗プロダクトでした、おめでとうございます。 + +Jmeterの使用は勿論検討したのですが、モダンな技術が大好きな性分であり、我らが[渋川さん](/authors/%E6%BE%81%E5%B7%9D%E5%96%9C%E8%A6%8F/)もおススメしているため[k6](https://k6.io/)を試してみました。 + + +## k6とは + +2016年頃から開発がスタートした負荷試験ツールです。 +ワニのキャラクターが印象的です、かわいいですね。 + + + +OSSとして公開されている事が特徴です、リポジトリは[こちら](https://github.com/loadimpact/k6)です。 + +k6はGoで開発されています、これだけでも今時な印象を受けますね。 + + +[公式サイトの説明](https://k6.io/about)にある通り。 +DevOpsの概念の成熟、現在のあり方に対応し、継続的な性能試験を行えるものである事を意識して設計されています。 + +> In tandem with the growth of DevOps, we started to notice gaps emerging in the market that we knew we could address. Users were no longer testing things one-off. APIs were becoming more prevalent in usage and required testing. Users wanted to test continuously. For many companies, testing was moving into the responsibility of developers. + +## k6のインストール + +k6のインストールはどのプラットフォームであっても簡単です。 +[installation](https://k6.io/docs/getting-started/installation)に記載があります、書いてあるコマンドをコピー&ペーストするだけで問題なく導入できました。 + +Windows向けにはインストーラが用意されています。 + + +`brew`, `apt-get`, `yum`, `dokcer`での配布がサポートされています、バイナリ形式でダウンロードすることも可能です、インストールに苦戦することはほぼ無いと言っても良いと思います。 + +docker形式の配布形態を利用し、CIで性能試験を行い、デフォルトの性能を下回ったら警告するような使い方もできるかもしれません。 + +## k6の使い方 + +#### 基本的な利用方法 + +k6は基本的に負荷試験のシナリオをJavaScriptで記載し、CLIで実行する利用形態で負荷試験を行います。 + +```js k6_test.js +import http from 'k6/http'; +export default function () { + http.get('http://localhost:8080/'); +} +``` + +各種ユーティリティをimportし、負荷試験のシナリオを記載します。 +特定のエンドポイント1か所にGETでアクセスするだけなら、上記のような4行程度の記載でテストを行うことが可能です。 + +今回は下記のシンプルなWebサーバーをローカル環境に立てて上記`k6_test.js`の動作を検証します。 + +```go main.go +package main + +import ( + "fmt" + "log" + "net/http" +) + +func main() { + http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) { + fmt.Fprintf(w, "Hello k6") + }) + log.Fatal(http.ListenAndServe(":8080", nil)) +} + +``` + +`k6 run ファイル名` で実行することが可能です。 +アスキーアートと試験結果が出力されます。 + +```sh +k6 run .\k6_test.js + + /\ |‾‾| /‾‾/ /‾‾/ + /\ / \ | |/ / / / + / \/ \ | ( / ‾‾\ + / \ | |\ \ | (‾) | + / __________ \ |__| \__\ \_____/ .io + + execution: local + script: .\k6_test.js + output: - + + scenarios: (100.00%) 1 scenario, 1 max VUs, 10m30s max duration (incl. graceful stop): + * default: 1 iterations for each of 1 VUs (maxDuration: 10m0s, gracefulStop: 30s) + + +running (00m00.0s), 0/1 VUs, 1 complete and 0 interrupted iterations +default ✓ [======================================] 1 VUs 00m00.0s/10m0s 1/1 iters, 1 per VU + + data_received..............: 124 B 7.8 kB/s + data_sent..................: 80 B 5.0 kB/s + http_req_blocked...........: avg=403.9µs min=403.9µs med=403.9µs max=403.9µs p(90)=403.9µs p(95)=403.9µs + http_req_connecting........: avg=403.9µs min=403.9µs med=403.9µs max=403.9µs p(90)=403.9µs p(95)=403.9µs + http_req_duration..........: avg=0s min=0s med=0s max=0s p(90)=0s p(95)=0s + http_req_receiving.........: avg=0s min=0s med=0s max=0s p(90)=0s p(95)=0s + http_req_sending...........: avg=0s min=0s med=0s max=0s p(90)=0s p(95)=0s + http_req_tls_handshaking...: avg=0s min=0s med=0s max=0s p(90)=0s p(95)=0s + http_req_waiting...........: avg=0s min=0s med=0s max=0s p(90)=0s p(95)=0s + http_reqs..................: 1 63.019517/s + iteration_duration.........: avg=1.9ms min=1.9ms med=1.9ms max=1.9ms p(90)=1.9ms p(95)=1.9ms + iterations.................: 1 63.019517/s +``` + +#### 負荷を変更する + +`--vus`オプション`--duration`等のオプションで負荷の重さを変えることが可能です。 +詳しくは[公式ドキュメント](https://k6.io/docs/using-k6/options)を参照してください。 + +主に使うものは、下記のオプションです。 + +```sh +--vus: 同時接続数 +--duration: 試験の実行時間 +--iteration: シナリオを繰り返す回数 +``` + +`--vus`オプションだけではエラーが発生します、試験時間、もしくはシナリオの実行回数を指定する必要があります。 + +```sh + k6 run .\k6_test.js --vus 10 + + /\ |‾‾| /‾‾/ /‾‾/ + /\ / \ | |/ / / / + / \/ \ | ( / ‾‾\ + / \ | |\ \ | (‾) | + / __________ \ |__| \__\ \_____/ .io + +time="2021-03-07T16:33:00+09:00" level=warning msg="the `vus=10` option will be ignored, it only works in conjunction with `iterations`, `duration`, or `stages`" + execution: local + script: .\k6_test.js + output: - + + scenarios: (100.00%) 1 scenario, 1 max VUs, 10m30s max duration (incl. graceful stop): + * default: 1 iterations for each of 1 VUs (maxDuration: 10m0s, gracefulStop: 30s) + +``` + +同時接続数10人で10秒間負荷をかけてみます。 +デフォルトの時間を超えるまでシナリオを繰り返します、レポートのiterationsを見ると999039回繰り返されたことがわかります。 + +``` + k6 run .\k6_test.js --vus 10 --duration 10s + + /\ |‾‾| /‾‾/ /‾‾/ + /\ / \ | |/ / / / + / \/ \ | ( / ‾‾\ + / \ | |\ \ | (‾) | + / __________ \ |__| \__\ \_____/ .io + + execution: local + script: .\k6_test.js + output: - + + scenarios: (100.00%) 1 scenario, 10 max VUs, 40s max duration (incl. graceful stop): + * default: 10 looping VUs for 10s (gracefulStop: 30s) + + +running (10.0s), 00/10 VUs, 999039 complete and 0 interrupted iterations +default ✓ [======================================] 10 VUs 10s0 + + data_received..............: 124 MB 12 MB/s + data_sent..................: 80 MB 8.0 MB/s + http_req_blocked...........: avg=1.19µs min=0s med=0s max=1.49ms p(90)=0s p(95)=0s + http_req_connecting........: avg=0s min=0s med=0s max=0s p(90)=0s p(95)=0s + http_req_duration..........: avg=67.92µs min=0s med=0s max=5.53ms p(90)=0s p(95)=513.9µs + http_req_receiving.........: avg=14.58µs min=0s med=0s max=1.99ms p(90)=0s p(95)=0s + http_req_sending...........: avg=6.07µs min=0s med=0s max=1.49ms p(90)=0s p(95)=0s + http_req_tls_handshaking...: avg=0s min=0s med=0s max=0s p(90)=0s p(95)=0s + http_req_waiting...........: avg=47.26µs min=0s med=0s max=5.49ms p(90)=0s p(95)=510.2µs + http_reqs..................: 999039 99705.733857/s + iteration_duration.........: avg=96.83µs min=0s med=0s max=17.46ms p(90)=511.3µs p(95)=996.7µs + iterations.................: 999039 99705.733857/s + vus........................: 10 min=10 max=10 + vus_max....................: 10 min=10 max=10 +``` + +同時接続数100人で100回シナリオを繰り返す例です。 + +```sh +k6 run .\k6_test.js --vus 100 --iterations 100 + + /\ |‾‾| /‾‾/ /‾‾/ + /\ / \ | |/ / / / + / \/ \ | ( / ‾‾\ + / \ | |\ \ | (‾) | + / __________ \ |__| \__\ \_____/ .io + + execution: local + script: .\k6_test.js + output: - + + scenarios: (100.00%) 1 scenario, 100 max VUs, 10m30s max duration (incl. graceful stop): + * default: 100 iterations shared among 100 VUs (maxDuration: 10m0s, gracefulStop: 30s) + + +running (00m00.0s), 000/100 VUs, 100 complete and 0 interrupted iterations +default ✓ [======================================] 100 VUs 00m00.0s/10m0s 100/100 shared iters + + data_received..............: 12 kB 623 kB/s + data_sent..................: 8.0 kB 402 kB/s + http_req_blocked...........: avg=1ms min=0s med=775.9µs max=2.35ms p(90)=2.35ms p(95)=2.35ms + http_req_connecting........: avg=525.37µs min=0s med=579.2µs max=1.35ms p(90)=775.9µs p(95)=775.9µs + http_req_duration..........: avg=2.52ms min=1.09ms med=2.54ms max=3.57ms p(90)=3.56ms p(95)=3.57ms + http_req_receiving.........: avg=5.23µs min=0s med=0s max=505.49µs p(90)=0s p(95)=0s + http_req_sending...........: avg=103.27µs min=0s med=0s max=775.9µs p(90)=775.9µs p(95)=775.9µs + http_req_tls_handshaking...: avg=0s min=0s med=0s max=0s p(90)=0s p(95)=0s + http_req_waiting...........: avg=2.41ms min=579.2µs med=2.54ms max=3.57ms p(90)=3.17ms p(95)=3.57ms + http_reqs..................: 100 5020.634809/s + iteration_duration.........: avg=4.07ms min=1.35ms med=4.14ms max=5.92ms p(90)=5.92ms p(95)=5.92ms + iterations.................: 100 5020.634809/s +``` + +これらの負荷設定はJavaScriptに記載することも可能です。 + +```js k6_test.js +import http from 'k6/http'; + +export let options = { + vus: 10, + iterations: 100 +}; + +export default function () { + http.get('http://localhost:8080/'); +} +``` + +`stages`という書き方で段階的に負荷を変更することも可能です。 +この場合`vus`ではなく`target`が同時接続数です。 +下記の書き方の場合、同時接続数10人で1秒負荷をかけた後に20人、30人と接続数を増やしていく試験になります。 +`--stages`のようにCLIオプションとして渡すことはできません。 + +```js k6_test.js +import http from 'k6/http'; + +export let options = { + stages: [ + { target: 10, duration: '1s' }, + { target: 20, duration: '1s' }, + { target: 30, duration: '1s' } + ] +}; + +export default function () { + http.get('http://localhost:8080/'); +} +``` + +#### GETリクエスト以外を検証する。 + +動作確認ではGETリクエストの確認を行いましたが、k6のhttpライブラリはGETリクエスト以外も検証可能です、GET, POSTなどは勿論OPTIONSなどのリクエストも対応しています。 +詳しくは[公式ドキュメント](https://k6.io/docs/javascript-api/k6-http)を確認してください。 + +よく使うであろうPOST, PUT, DELETEについて簡単なスニペットを用意しました。 + +```js k6_post.js +import http from 'k6/http'; + +export default function () { +import http from 'k6/http'; + +export default function () { + const body = { key: 'value' }; + const headers = { 'Content-Type': 'application/json' }; + http.post('http://localhost:8080/', JSON.stringify(body), headers); +} +``` + +```js k6_put.js +import http from 'k6/http'; + +export default function () { + const body = { key: 'value' }; + const headers = { 'Content-Type': 'application/json' }; + http.put('http://localhost:8080/', JSON.stringify(body), headers); +} +``` + +```js k6_delete.js +import http from 'k6/http'; + +export default function () { + const body = { key: 'value' }; + const params = { headers: { 'X-MyHeader': 'k6test' } }; + http.del('http://localhost:8080/', JSON.stringify(body), params); +} +``` + +DELETEリクエストの場合、リクエストボディにパラメータを含めることはあまり一般的ではありませんが、技術的には可能であったりといった側面に対応できるようになっています。 +(k6公式ドキュメントにもDELETEリクエストのリクエストボディはセマンティクスが定まっていないため非推奨と記載があります) + +#### リクエストの応答を検証する + +サーバーが負荷に耐えきれず正常な応答を返せない割合を`check`ライブラリで検証することが可能です。 + +```js k6_test.js +import http from 'k6/http'; +import { check } from 'k6'; + +export default function () { + const res = http.get('http://localhost:8080/'); + check(res, { + 'response code was 200': (res) => res.status == 200, + 'body size was 8 bytes': (res) => res.body.length == 8, + }); +} +``` + +上記コードで同時接続2万人分のリクエストの1割を捌くことに失敗することをレポートできました。 + +```sh +k6 run k6_test.js --vus 20000 --iterations 20000 + + + /\ |‾‾| /‾‾/ /‾‾/ + /\ / \ | |/ / / / + / \/ \ | ( / ‾‾\ + / \ | |\ \ | (‾) | + / __________ \ |__| \__\ \_____/ .io + +// サーバーエラー発生時にログが出力される為中略 + +running (01m31.8s), 00000/20000 VUs, 20000 complete and 0 interrupted iterations +default ✓ [======================================] 20000 VUs 01m31.7s/10m0s 20000/20000 shared iters + + ✗ response code was 200 + ↳ 90% — ✓ 18054 / ✗ 1946 + ✗ body size was 8 bytes + ↳ 90% — ✓ 18054 / ✗ 1946 + + checks.....................: 90.27% ✓ 36108 ✗ 3892 + data_received..............: 2.2 MB 24 kB/s + data_sent..................: 1.4 MB 16 kB/s + http_req_blocked...........: avg=11.47s min=0s med=16.54s max=19.94s p(90)=19.46s p(95)=19.78s + http_req_connecting........: avg=10.94s min=0s med=15.84s max=19.94s p(90)=19.45s p(95)=19.78s + http_req_duration..........: avg=3.55s min=0s med=944.07ms max=19.34s p(90)=11.12s p(95)=13.1s + http_req_receiving.........: avg=66.54ms min=0s med=0s max=11.01s p(90)=0s p(95)=997.5µs + http_req_sending...........: avg=976.15ms min=0s med=27.92ms max=16.22s p(90)=3.12s p(95)=5.93s + http_req_tls_handshaking...: avg=0s min=0s med=0s max=0s p(90)=0s p(95)=0s + http_req_waiting...........: avg=2.5s min=0s med=602.44ms max=18.21s p(90)=8.91s p(95)=10.96s + http_reqs..................: 20000 217.879289/s + iteration_duration.........: avg=18.18s min=0s med=19.68s max=1m5s p(90)=20s p(95)=25.89s + iterations.................: 20000 217.879289/s + vus........................: 38 min=38 max=16944 + vus_max....................: 20000 min=20000 max=20000 +``` + +ちなみに26000人～29000人分のアクセスを再現するあたりで64GBのメモリを使い切り動かなくなりました。 +要求スペック的には1000人オーダーであれば8～16GBのメモリのマシンであっても耐えられそうです。 +メモリに余裕のない環境ではマシンスペックの限界を超えたときにGoのランタイムエラーが出力され、Go製ツールであることを感じることができます。 + + + +`check`関数はそのまま真偽値として扱う事が可能です。 +試験の失敗をログ出力する`fail`ライブラリと組み合わせることが可能です。 + +```js k6_fail.js +import http from 'k6/http'; +import { check, fail } from 'k6'; + +export default function () { + const res = http.get('http://localhost:8080/'); + if ( + !check(res, { + 'status code MUST be 200': (res) => res.status == 200, + }) + ) { + fail('status code was *not* 200'); + } +} +``` + +その他テストシナリオの品質を高めるためのユーティリティ等が沢山用意されています、詳しくは[公式ドキュメントのjavascript-apiの章](https://k6.io/docs/javascript-api)を確認してください。 +JavaScriptで再利用性の高い高品質なテストシナリオをどのように書いていくかが、腕の見せ所ですね。 + +## 負荷試験のアウトプットについて + +試験レポートは標準出力で確認できるものを手作業で纏めるだけでも充分ではありますが、`--out`オプションで出力先、形式を変更することが可能です。 + +``` + k6 run .\k6_test.js --out json=out.json +``` + +[公式ドキュメント](https://k6.io/docs/getting-started/results-output)では下記のような形式が想定されています。 + +| plugin | usage | +| - | - | +| Amazon CloudWatch | k6 run --out statsd | +| Apache Kafka | k6 run --out kafka | +| Cloud | k6 run --out cloud | +| CSV | k6 run --out csv | +| Datadog |k6 run --out datadog | +| InfluxDB | k6 run --out influxdb | +| JSON | k6 run --out json | +| New Relic | k6 run --out statsd | +| StatsD | k6 run --out statsd | + +公式のダッシュボードである[k6 Cloud](https://k6.io/cloud)も提供されています。 +試験結果の可視化、前回との差分の比較を様々な手段で行う事や、CloudWatchのメトリクスとして定期的なパフォーマンスチェックを行う監視システムの構築等が想像できます。 +これらの機能の存在からも現在のDevOpsの成長に追従した継続的な性能試験という設計思想を感じることができます。 + +## まとめ + +* k6はGoで開発されたモダンな負荷試験ツールです。 +* 軽快なフットワークでインストールが可能です。 +* JavaScriptで書いたシナリオを実行する形で利用します。 +* 試験結果は様々な外部システムと組み合わせることが可能です。 + +負荷試験を検討の際はぜひ選択肢の1つとして検討してみてください。 diff --git "a/source/_posts/2021/20210326_Terraform_+_Auth0_\343\202\222\350\252\277\346\237\273\343\201\227\343\201\246\343\201\277\343\202\213.md" "b/source/_posts/2021/20210326_Terraform_+_Auth0_\343\202\222\350\252\277\346\237\273\343\201\227\343\201\246\343\201\277\343\202\213.md" index 5c0e6b571903..bfb8f015fd55 100644 --- "a/source/_posts/2021/20210326_Terraform_+_Auth0_\343\202\222\350\252\277\346\237\273\343\201\227\343\201\246\343\201\277\343\202\213.md" +++ "b/source/_posts/2021/20210326_Terraform_+_Auth0_\343\202\222\350\252\277\346\237\273\343\201\227\343\201\246\343\201\277\343\202\213.md" @@ -6,7 +6,7 @@ tag: - Auth0 - Terraform category: - - DevOps + - 認証認可 thumbnail: /images/2021/20210326/thumbnail.png author: 小林澪司 lede: "アルバイトの小林です。案件で認証プラットフォームである[Auth0]を利用しています。Auth0がHashiCorpとのパートナーシップを結び、TerraformでAuth0リソースの管理が可能となりました。" diff --git "a/source/_posts/2021/20210327_\350\255\260\344\272\213\351\214\262\343\202\222\343\202\265\343\203\203\343\201\250\346\272\226\345\202\231\343\201\231\343\202\213.md" "b/source/_posts/2021/20210327_\350\255\260\344\272\213\351\214\262\343\202\222\343\202\265\343\203\203\343\201\250\346\272\226\345\202\231\343\201\231\343\202\213.md" index 2828c126c630..85d71214ce7d 100644 --- "a/source/_posts/2021/20210327_\350\255\260\344\272\213\351\214\262\343\202\222\343\202\265\343\203\203\343\201\250\346\272\226\345\202\231\343\201\231\343\202\213.md" +++ "b/source/_posts/2021/20210327_\350\255\260\344\272\213\351\214\262\343\202\222\343\202\265\343\203\203\343\201\250\346\272\226\345\202\231\343\201\231\343\202\213.md" @@ -9,7 +9,7 @@ tag: - Slack - BOT category: - - Programming + - Business thumbnail: /images/2021/20210327/thumbnail.png author: 棚井龍之介 lede: "GASにWebサーバを立て、エンドポイントを公開する- ユーザのform入力を受け取る- 議事録を自動作成してSlackに投稿する" diff --git "a/source/_posts/2021/20210410_OpenAPI\343\201\213\343\202\211\343\203\242\343\203\203\343\202\257\343\202\265\343\203\274\343\203\220\343\202\222\345\273\272\343\201\246\343\202\211\343\202\214\343\202\213Prism\343\202\222\345\256\237\351\232\233\343\201\256\343\203\227\343\203\255\343\202\270\343\202\247\343\202\257\343\203\210\343\201\253\345\260\216\345\205\245\343\201\227\343\201\246\343\201\277\343\201\237.md" "b/source/_posts/2021/20210410_OpenAPI\343\201\213\343\202\211\343\203\242\343\203\203\343\202\257\343\202\265\343\203\274\343\203\220\343\202\222\345\273\272\343\201\246\343\202\211\343\202\214\343\202\213Prism\343\202\222\345\256\237\351\232\233\343\201\256\343\203\227\343\203\255\343\202\270\343\202\247\343\202\257\343\203\210\343\201\253\345\260\216\345\205\245\343\201\227\343\201\246\343\201\277\343\201\237.md" index a02ba91ed01c..32ed0dfdd7ac 100644 --- "a/source/_posts/2021/20210410_OpenAPI\343\201\213\343\202\211\343\203\242\343\203\203\343\202\257\343\202\265\343\203\274\343\203\220\343\202\222\345\273\272\343\201\246\343\202\211\343\202\214\343\202\213Prism\343\202\222\345\256\237\351\232\233\343\201\256\343\203\227\343\203\255\343\202\270\343\202\247\343\202\257\343\203\210\343\201\253\345\260\216\345\205\245\343\201\227\343\201\246\343\201\277\343\201\237.md" +++ "b/source/_posts/2021/20210410_OpenAPI\343\201\213\343\202\211\343\203\242\343\203\203\343\202\257\343\202\265\343\203\274\343\203\220\343\202\222\345\273\272\343\201\246\343\202\211\343\202\214\343\202\213Prism\343\202\222\345\256\237\351\232\233\343\201\256\343\203\227\343\203\255\343\202\270\343\202\247\343\202\257\343\203\210\343\201\253\345\260\216\345\205\245\343\201\227\343\201\246\343\201\277\343\201\237.md" @@ -9,7 +9,7 @@ tag: - Vue.js - モック category: - - Programming + - Frontend thumbnail: /images/2021/20210410/thumbnail.png author: 大岩潤矢 lede: "参加しているプロジェクトで、OpenAPI定義ファイルからモックサーバを建てることができるOSSツール「Prism」を導入することになりました。この記事では、Prism導入の手順や、躓いた点などを紹介します。" diff --git "a/source/_posts/2021/20210413b_\343\203\201\343\202\261\343\203\203\343\203\210\343\201\224\343\201\250\343\201\253Slack\343\202\271\343\203\254\343\203\203\343\203\211\343\202\222\345\210\206\343\201\221\343\201\246\351\200\232\347\237\245\343\201\231\343\202\213Redmine\343\203\227\343\203\251\343\202\260\343\202\244\343\203\263\343\202\222\344\275\234\346\210\220\343\201\227\343\201\276\343\201\227\343\201\237\357\274\201.md" "b/source/_posts/2021/20210413b_\343\203\201\343\202\261\343\203\203\343\203\210\343\201\224\343\201\250\343\201\253Slack\343\202\271\343\203\254\343\203\203\343\203\211\343\202\222\345\210\206\343\201\221\343\201\246\351\200\232\347\237\245\343\201\231\343\202\213Redmine\343\203\227\343\203\251\343\202\260\343\202\244\343\203\263\343\202\222\344\275\234\346\210\220\343\201\227\343\201\276\343\201\227\343\201\237\357\274\201.md" index d2f7e7eaf594..bc8a68072906 100644 --- "a/source/_posts/2021/20210413b_\343\203\201\343\202\261\343\203\203\343\203\210\343\201\224\343\201\250\343\201\253Slack\343\202\271\343\203\254\343\203\203\343\203\211\343\202\222\345\210\206\343\201\221\343\201\246\351\200\232\347\237\245\343\201\231\343\202\213Redmine\343\203\227\343\203\251\343\202\260\343\202\244\343\203\263\343\202\222\344\275\234\346\210\220\343\201\227\343\201\276\343\201\227\343\201\237\357\274\201.md" +++ "b/source/_posts/2021/20210413b_\343\203\201\343\202\261\343\203\203\343\203\210\343\201\224\343\201\250\343\201\253Slack\343\202\271\343\203\254\343\203\203\343\203\211\343\202\222\345\210\206\343\201\221\343\201\246\351\200\232\347\237\245\343\201\231\343\202\213Redmine\343\203\227\343\203\251\343\202\260\343\202\244\343\203\263\343\202\222\344\275\234\346\210\220\343\201\227\343\201\276\343\201\227\343\201\237\357\274\201.md" @@ -8,7 +8,7 @@ tag: - OSS - コアテク category: - - Infrastructure + - DevOps thumbnail: /images/2021/20210413b/thumbnail.png author: 小松裕二 lede: "Futureでは約一年前にコミュニケーションツールとして採用され社内外のコミュニケーションにSlackを使うことも増えました。そしてプロジェクト管理で利用しているRedmineは相変わらず現役です。個人的にはRedmine4.2のリリースを心待ちにしています。さて、そうなるとRedmineからSlackへ通知したくなりますね。" diff --git "a/source/_posts/2021/20210419a_\343\203\226\343\203\251\343\202\265\343\202\253\346\264\273\345\213\225\345\240\261\345\221\212~\343\202\271\343\203\210\343\203\274\343\203\263\343\203\225\343\203\252\343\203\274\343\203\227\343\203\255\343\202\270\343\202\247\343\202\257\343\203\210\347\267\250~.md" "b/source/_posts/2021/20210419a_\343\203\226\343\203\251\343\202\265\343\202\253\346\264\273\345\213\225\345\240\261\345\221\212~\343\202\271\343\203\210\343\203\274\343\203\263\343\203\225\343\203\252\343\203\274\343\203\227\343\203\255\343\202\270\343\202\247\343\202\257\343\203\210\347\267\250~.md" index 4de3b34cc188..1ebbfdbf5fc1 100644 --- "a/source/_posts/2021/20210419a_\343\203\226\343\203\251\343\202\265\343\202\253\346\264\273\345\213\225\345\240\261\345\221\212~\343\202\271\343\203\210\343\203\274\343\203\263\343\203\225\343\203\252\343\203\274\343\203\227\343\203\255\343\202\270\343\202\247\343\202\257\343\203\210\347\267\250~.md" +++ "b/source/_posts/2021/20210419a_\343\203\226\343\203\251\343\202\265\343\202\253\346\264\273\345\213\225\345\240\261\345\221\212~\343\202\271\343\203\210\343\203\274\343\203\263\343\203\225\343\203\252\343\203\274\343\203\227\343\203\255\343\202\270\343\202\247\343\202\257\343\203\210\347\267\250~.md" @@ -4,7 +4,6 @@ date: 2021/04/19 00:00:00 postid: a tag: - Unity - - VR - スポーツ×IT - ブラインドサッカー category: diff --git "a/source/_posts/2021/20210426a_AWS_CLI\343\201\247\347\224\250\343\201\204\343\202\213MFA\343\202\222\343\201\241\343\202\207\343\201\243\343\201\250\343\201\240\343\201\221\344\276\277\345\210\251\343\201\253\346\211\261\343\201\210\343\202\213\343\203\204\343\203\274\343\203\253\343\202\222\345\205\254\351\226\213\343\201\227\343\201\276\343\201\227\343\201\237.md" "b/source/_posts/2021/20210426a_AWS_CLI\343\201\247\347\224\250\343\201\204\343\202\213MFA\343\202\222\343\201\241\343\202\207\343\201\243\343\201\250\343\201\240\343\201\221\344\276\277\345\210\251\343\201\253\346\211\261\343\201\210\343\202\213\343\203\204\343\203\274\343\203\253\343\202\222\345\205\254\351\226\213\343\201\227\343\201\276\343\201\227\343\201\237.md" index 73b40fa482ee..950d33dde021 100644 --- "a/source/_posts/2021/20210426a_AWS_CLI\343\201\247\347\224\250\343\201\204\343\202\213MFA\343\202\222\343\201\241\343\202\207\343\201\243\343\201\250\343\201\240\343\201\221\344\276\277\345\210\251\343\201\253\346\211\261\343\201\210\343\202\213\343\203\204\343\203\274\343\203\253\343\202\222\345\205\254\351\226\213\343\201\227\343\201\276\343\201\227\343\201\237.md" +++ "b/source/_posts/2021/20210426a_AWS_CLI\343\201\247\347\224\250\343\201\204\343\202\213MFA\343\202\222\343\201\241\343\202\207\343\201\243\343\201\250\343\201\240\343\201\221\344\276\277\345\210\251\343\201\253\346\211\261\343\201\210\343\202\213\343\203\204\343\203\274\343\203\253\343\202\222\345\205\254\351\226\213\343\201\227\343\201\276\343\201\227\343\201\237.md" @@ -8,7 +8,7 @@ tag: - OSS - Go category: - - Programming + - Security thumbnail: /images/2021/20210426a/thumbnail.jpg author: 辻大志郎 lede: "AWSのIAMユーザのセキュリティ上、IAMユーザにMFAを導入するケースがあります。MFAを有効にしているIAMユーザでGUI経由でログインする場合は、ログイン時に認証情報が求められて、MFAデバイスが出力するトークンを入力することでログインできます。一方AWS CLIを用いてリソースにアクセス場合はコマンド発行時に認証情報は求められません。代わりに以下のような記事にかかれているような..." diff --git "a/source/_posts/2021/20210426b_Go_1.16\343\201\256embed\343\201\250go-swagger\343\202\222\347\265\204\343\201\277\345\220\210\343\202\217\343\201\233\343\201\246\343\203\225\343\203\253\343\202\271\343\202\277\343\203\203\343\202\257\350\207\252\345\213\225\347\224\237\346\210\220\343\203\225\343\203\254\343\203\274\343\203\240\343\203\257\343\203\274\343\202\257\343\202\222\344\275\234\343\202\213.md" "b/source/_posts/2021/20210426b_Go_1.16\343\201\256embed\343\201\250go-swagger\343\202\222\347\265\204\343\201\277\345\220\210\343\202\217\343\201\233\343\201\246\343\203\225\343\203\253\343\202\271\343\202\277\343\203\203\343\202\257\350\207\252\345\213\225\347\224\237\346\210\220\343\203\225\343\203\254\343\203\274\343\203\240\343\203\257\343\203\274\343\202\257\343\202\222\344\275\234\343\202\213.md" index 00899c50c0e4..e61f6a7e0227 100644 --- "a/source/_posts/2021/20210426b_Go_1.16\343\201\256embed\343\201\250go-swagger\343\202\222\347\265\204\343\201\277\345\220\210\343\202\217\343\201\233\343\201\246\343\203\225\343\203\253\343\202\271\343\202\277\343\203\203\343\202\257\350\207\252\345\213\225\347\224\237\346\210\220\343\203\225\343\203\254\343\203\274\343\203\240\343\203\257\343\203\274\343\202\257\343\202\222\344\275\234\343\202\213.md" +++ "b/source/_posts/2021/20210426b_Go_1.16\343\201\256embed\343\201\250go-swagger\343\202\222\347\265\204\343\201\277\345\220\210\343\202\217\343\201\233\343\201\246\343\203\225\343\203\253\343\202\271\343\202\277\343\203\203\343\202\257\350\207\252\345\213\225\347\224\237\346\210\220\343\203\225\343\203\254\343\203\274\343\203\240\343\203\257\343\203\274\343\202\257\343\202\222\344\275\234\343\202\213.md" @@ -6,10 +6,9 @@ tag: - Vue.js - Go1.16 - Go - - フロントエンド - go:embed category: - - Programming + - Frontend thumbnail: /images/2021/20210426b/thumbnail.png author: 伊藤真彦 lede: "Go 1.16のembedとchiとSingle Page Application、Go 1.16のgo:embedとNext.jsの相性が悪い問題と戦うに近い感じの研究記事です。" diff --git "a/source/_posts/2021/20210428a_Cypress\345\205\245\351\226\200\357\275\236\345\210\235\345\277\203\350\200\205\343\201\247\343\202\202\347\260\241\345\215\230\343\201\253E2E\343\203\206\343\202\271\343\203\210\343\201\214\344\275\234\343\202\214\343\202\213\357\275\236.md" "b/source/_posts/2021/20210428a_Cypress\345\205\245\351\226\200\357\275\236\345\210\235\345\277\203\350\200\205\343\201\247\343\202\202\347\260\241\345\215\230\343\201\253E2E\343\203\206\343\202\271\343\203\210\343\201\214\344\275\234\343\202\214\343\202\213\357\275\236.md" index 8003dd372c2a..bf03e8ebbaf0 100644 --- "a/source/_posts/2021/20210428a_Cypress\345\205\245\351\226\200\357\275\236\345\210\235\345\277\203\350\200\205\343\201\247\343\202\202\347\260\241\345\215\230\343\201\253E2E\343\203\206\343\202\271\343\203\210\343\201\214\344\275\234\343\202\214\343\202\213\357\275\236.md" +++ "b/source/_posts/2021/20210428a_Cypress\345\205\245\351\226\200\357\275\236\345\210\235\345\277\203\350\200\205\343\201\247\343\202\202\347\260\241\345\215\230\343\201\253E2E\343\203\206\343\202\271\343\203\210\343\201\214\344\275\234\343\202\214\343\202\213\357\275\236.md" @@ -9,7 +9,7 @@ tag: - 登壇レポート - E2Eテスト category: - - Infrastructure + - Frontend thumbnail: /images/2021/20210428a/thumbnail.png author: 木戸俊輔 lede: "皆さんは普段どのようにE2Eテストを行っていますか？忍耐強く手動でポチポチ画面を触って...というのはなかなかにしんどいですよね。自動化ツールを使って楽したいけど難しくてよくわからない、という方もいらっしゃると思います。本記事では、テスト自動化ツールを全く使ったことのなかった私が、テスト自動化ツールである[Cypress]の導入から基本的な使い方までをご紹介していきます。" diff --git "a/source/_posts/2021/20210428b_Cypress_-_\350\250\255\345\256\232\347\267\250.md" "b/source/_posts/2021/20210428b_Cypress_-_\350\250\255\345\256\232\347\267\250.md" index 417c6671cce4..ee0adfe7901e 100644 --- "a/source/_posts/2021/20210428b_Cypress_-_\350\250\255\345\256\232\347\267\250.md" +++ "b/source/_posts/2021/20210428b_Cypress_-_\350\250\255\345\256\232\347\267\250.md" @@ -8,7 +8,7 @@ tag: - 登壇レポート - E2Eテスト category: - - Programming + - Frontend thumbnail: /images/2021/20210428b/thumbnail.png author: 澁川喜規 lede: "Cypressの設定周りについて紹介します。何も手を加えないデフォルトでも動作はする" diff --git "a/source/_posts/2021/20210428c_\344\277\235\345\256\210\343\203\273\346\213\241\345\274\265\343\202\222\343\201\227\343\202\204\343\201\231\343\201\204\343\202\253\343\203\227\343\202\273\343\203\253\345\214\226\343\201\227\343\201\237Cypress.md" "b/source/_posts/2021/20210428c_\344\277\235\345\256\210\343\203\273\346\213\241\345\274\265\343\202\222\343\201\227\343\202\204\343\201\231\343\201\204\343\202\253\343\203\227\343\202\273\343\203\253\345\214\226\343\201\227\343\201\237Cypress.md" index e3e6b227c2da..6a348ec3adba 100644 --- "a/source/_posts/2021/20210428c_\344\277\235\345\256\210\343\203\273\346\213\241\345\274\265\343\202\222\343\201\227\343\202\204\343\201\231\343\201\204\343\202\253\343\203\227\343\202\273\343\203\253\345\214\226\343\201\227\343\201\237Cypress.md" +++ "b/source/_posts/2021/20210428c_\344\277\235\345\256\210\343\203\273\346\213\241\345\274\265\343\202\222\343\201\227\343\202\204\343\201\231\343\201\204\343\202\253\343\203\227\343\202\273\343\203\253\345\214\226\343\201\227\343\201\237Cypress.md" @@ -9,7 +9,7 @@ tag: - E2Eテスト - 可読性 category: - - Programming + - Frontend thumbnail: /images/2021/20210428c/thumbnail.png author: 枇榔晃裕 lede: "Future Tech Night #8というイベントで、E2EテストをCypressで快適に行う方法を紹介しました。文字起こし兼補足として投稿します。壊れやすい上に読みにくくなりがちなE2Eテストは、cypressのCustom Commandsなどでカプセル化すると読みやすくなおしやすい。" diff --git "a/source/_posts/2021/20210428d_Cypress_-_\346\233\270\343\201\215\343\202\204\343\201\231\343\201\204\343\203\206\343\202\271\343\203\210\343\201\256\347\247\230\345\257\206\343\201\250\347\213\254\350\207\252\343\202\263\343\203\236\343\203\263\343\203\211\343\201\256\345\256\237\350\243\205.md" "b/source/_posts/2021/20210428d_Cypress_-_\346\233\270\343\201\215\343\202\204\343\201\231\343\201\204\343\203\206\343\202\271\343\203\210\343\201\256\347\247\230\345\257\206\343\201\250\347\213\254\350\207\252\343\202\263\343\203\236\343\203\263\343\203\211\343\201\256\345\256\237\350\243\205.md" index 7842d0b6bd0f..4d1697c423d0 100644 --- "a/source/_posts/2021/20210428d_Cypress_-_\346\233\270\343\201\215\343\202\204\343\201\231\343\201\204\343\203\206\343\202\271\343\203\210\343\201\256\347\247\230\345\257\206\343\201\250\347\213\254\350\207\252\343\202\263\343\203\236\343\203\263\343\203\211\343\201\256\345\256\237\350\243\205.md" +++ "b/source/_posts/2021/20210428d_Cypress_-_\346\233\270\343\201\215\343\202\204\343\201\231\343\201\204\343\203\206\343\202\271\343\203\210\343\201\256\347\247\230\345\257\206\343\201\250\347\213\254\350\207\252\343\202\263\343\203\236\343\203\263\343\203\211\343\201\256\345\256\237\350\243\205.md" @@ -8,7 +8,7 @@ tag: - 登壇レポート - E2Eテスト category: - - Programming + - Frontend thumbnail: /images/2021/20210428d/thumbnail.png author: 澁川喜規 lede: "@testing-library/cypressの存在を知らずに、それっぽいものを作ろうとしたときにいろいろ調査した記録です。Cypressにはテストコードが縦と横に短くなる工夫がされており、そのメカニズムにしたがった独自コマンドを実装するにはコツが必要です。実装は次のところにありますが、@testing-library/cypressの方がメンテされているので、こちらは実際には使わないのをお勧めします。https://gitlab.com/osaki-lab/cypress-aria" diff --git "a/source/_posts/2021/20210525b_VS_Code_\357\274\217_plugin\343\202\222\346\264\273\347\224\250\343\201\227\343\201\237Draw.io\343\201\256\344\276\277\345\210\251\343\201\252\344\275\277\343\201\204\346\226\271.md" "b/source/_posts/2021/20210525b_VS_Code_\357\274\217_plugin\343\202\222\346\264\273\347\224\250\343\201\227\343\201\237Draw.io\343\201\256\344\276\277\345\210\251\343\201\252\344\275\277\343\201\204\346\226\271.md" index 9eaac792e2e0..82ed92168ba6 100644 --- "a/source/_posts/2021/20210525b_VS_Code_\357\274\217_plugin\343\202\222\346\264\273\347\224\250\343\201\227\343\201\237Draw.io\343\201\256\344\276\277\345\210\251\343\201\252\344\275\277\343\201\204\346\226\271.md" +++ "b/source/_posts/2021/20210525b_VS_Code_\357\274\217_plugin\343\202\222\346\264\273\347\224\250\343\201\227\343\201\237Draw.io\343\201\256\344\276\277\345\210\251\343\201\252\344\275\277\343\201\204\346\226\271.md" @@ -6,7 +6,7 @@ tag: - draw.io - VSCode category: - - Programming + - DevOps thumbnail: /images/2021/20210525b/thumbnail.gif author: 山田勇一 lede: "Draｗ.io（Diagrams.net）はとても便利ですが、VScodeやプラグインと組み合わせると更に便利になります。特に便利と感じた機能を紹介します。ここ数年、GitHubでドキュメント（Markdown）を管理するケースが増えており、Markdownに埋め込む編集可能な図として、Draｗ.ioのメタ情報を埋め込んだ画像を利用しています。" diff --git "a/source/_posts/2021/20210528a_Airflow_Breeze_\343\202\222\345\210\251\347\224\250\343\201\227\343\201\246\343\203\255\343\203\274\343\202\253\343\203\253\343\201\247_Airflow_\343\202\222\350\265\267\345\213\225\343\201\231\343\202\213.md" "b/source/_posts/2021/20210528a_Airflow_Breeze_\343\202\222\345\210\251\347\224\250\343\201\227\343\201\246\343\203\255\343\203\274\343\202\253\343\203\253\343\201\247_Airflow_\343\202\222\350\265\267\345\213\225\343\201\231\343\202\213.md" index 6f9b35f6e25e..9deb63db5445 100644 --- "a/source/_posts/2021/20210528a_Airflow_Breeze_\343\202\222\345\210\251\347\224\250\343\201\227\343\201\246\343\203\255\343\203\274\343\202\253\343\203\253\343\201\247_Airflow_\343\202\222\350\265\267\345\213\225\343\201\231\343\202\213.md" +++ "b/source/_posts/2021/20210528a_Airflow_Breeze_\343\202\222\345\210\251\347\224\250\343\201\227\343\201\246\343\203\255\343\203\274\343\202\253\343\203\253\343\201\247_Airflow_\343\202\222\350\265\267\345\213\225\343\201\231\343\202\213.md" @@ -6,7 +6,7 @@ tag: - Airflow - OSS category: - - Programming + - Infrastructure thumbnail: /images/2021/20210528a/thumbnail.png author: 多賀聡一朗 lede: "OSS として Airflow へ貢献するにあたり、ローカルでの実行やテストの環境整備が必要になります。また、 Airflow を利用するにあたってもローカルでの動作確認をしたいケースは多いかと思います。Airflow では、 Airflow Breeze と呼ばれる環境が整備され、公式より提供されています。当記事では、 Airflow Breeze について概要を記載し、 Airflow への OSS 貢献の入り口となれば良いと考えています。" diff --git "a/source/_posts/2021/20210607a_AWS_Certified_Solutions_Architect_-_Professional\345\220\210\346\240\274\344\275\223\351\250\223\350\250\230.md" "b/source/_posts/2021/20210607a_AWS_Certified_Solutions_Architect_-_Professional\345\220\210\346\240\274\344\275\223\351\250\223\350\250\230.md" index 38b92dc72dbe..cdad0b59ab49 100644 --- "a/source/_posts/2021/20210607a_AWS_Certified_Solutions_Architect_-_Professional\345\220\210\346\240\274\344\275\223\351\250\223\350\250\230.md" +++ "b/source/_posts/2021/20210607a_AWS_Certified_Solutions_Architect_-_Professional\345\220\210\346\240\274\344\275\223\351\250\223\350\250\230.md" @@ -6,10 +6,10 @@ tag: - 合格記 - AWS category: - - Programming + - Infrastructure thumbnail: /images/2021/20210607a/thumbnail.png author: 伊藤真彦 -lede: "TIGの伊藤真彦です。先日AWS Certified Solutions Architect - Professionalを受験し合格できました。合格までの学習方法を共有します。" +lede: "AWS Certified Solutions Architect - Professionalを受験し合格できました。合格までの学習方法を共有します。" --- TIGの伊藤真彦です。 diff --git "a/source/_posts/2021/20210614a_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\351\200\243\350\274\2112021.md" "b/source/_posts/2021/20210614a_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\351\200\243\350\274\2112021.md" index 30f6f83e4e13..efb169695186 100644 --- "a/source/_posts/2021/20210614a_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\351\200\243\350\274\2112021.md" +++ "b/source/_posts/2021/20210614a_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\351\200\243\350\274\2112021.md" @@ -4,9 +4,10 @@ date: 2021/06/14 00:00:00 postid: a tag: - インデックス - - フロントエンド + - Vue.js + - TypeScript category: - - Programming + - Frontend thumbnail: /images/2021/20210614a/thumbnail.jpg author: 真野隼記 lede: "2021の06.14～6.24にかけてフロントエンド技術をテーマにしたブログ連載を始めます。ES2021/TS/Node/Vue/Reactなどなど、ざっくりとフロントエンド界隈で話されるような技術をテーマにします。" diff --git "a/source/_posts/2021/20210614b_Jest_+_TypeScript_+_Vue_3\347\222\260\345\242\203\343\201\247_Vue_Testing_Library(@testing-library\357\274\217vue)_\343\202\222\345\213\225\343\201\213\343\201\231.md" "b/source/_posts/2021/20210614b_Jest_+_TypeScript_+_Vue_3\347\222\260\345\242\203\343\201\247_Vue_Testing_Library(@testing-library\357\274\217vue)_\343\202\222\345\213\225\343\201\213\343\201\231.md" index 4004f2e7e72b..5dde690c33b0 100644 --- "a/source/_posts/2021/20210614b_Jest_+_TypeScript_+_Vue_3\347\222\260\345\242\203\343\201\247_Vue_Testing_Library(@testing-library\357\274\217vue)_\343\202\222\345\213\225\343\201\213\343\201\231.md" +++ "b/source/_posts/2021/20210614b_Jest_+_TypeScript_+_Vue_3\347\222\260\345\242\203\343\201\247_Vue_Testing_Library(@testing-library\357\274\217vue)_\343\202\222\345\213\225\343\201\213\343\201\231.md" @@ -5,9 +5,10 @@ postid: b tag: - Vue.js - テスト - - フロントエンド + - Jest + - TypeScript category: - - Programming + - Frontend thumbnail: /images/2021/20210614b/thumbnail.png author: 中川旭 lede: "フロントエンド記事連載の1記事目です。Vue Testing LibraryはVue.js公式のライブラリであるvue-test-utilをベースとする、DOM Testing LibraryのVue.js用拡張です。Vue Testing Libraryを用いると、Vue.js公式ライブラリであるvue-test-utilと比較して内部構造を意識せずにテストを作成できます。" diff --git "a/source/_posts/2021/20210615a_\343\200\214\343\203\252\343\202\242\343\202\257\343\203\206\343\202\243\343\203\226\343\202\263\343\203\263\343\203\210\343\203\255\343\203\274\343\203\251\343\200\215\345\260\216\345\205\245\343\201\214\343\202\202\343\201\237\343\202\211\343\201\231\343\201\213\343\202\202\343\201\227\343\202\214\343\201\252\343\201\204\343\202\246\343\202\247\343\203\226\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\350\250\255\350\250\210\343\201\256\345\244\211\345\214\226.md" "b/source/_posts/2021/20210615a_\343\200\214\343\203\252\343\202\242\343\202\257\343\203\206\343\202\243\343\203\226\343\202\263\343\203\263\343\203\210\343\203\255\343\203\274\343\203\251\343\200\215\345\260\216\345\205\245\343\201\214\343\202\202\343\201\237\343\202\211\343\201\231\343\201\213\343\202\202\343\201\227\343\202\214\343\201\252\343\201\204\343\202\246\343\202\247\343\203\226\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\350\250\255\350\250\210\343\201\256\345\244\211\345\214\226.md" index 45d6af5601bf..62be134d6d63 100644 --- "a/source/_posts/2021/20210615a_\343\200\214\343\203\252\343\202\242\343\202\257\343\203\206\343\202\243\343\203\226\343\202\263\343\203\263\343\203\210\343\203\255\343\203\274\343\203\251\343\200\215\345\260\216\345\205\245\343\201\214\343\202\202\343\201\237\343\202\211\343\201\231\343\201\213\343\202\202\343\201\227\343\202\214\343\201\252\343\201\204\343\202\246\343\202\247\343\203\226\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\350\250\255\350\250\210\343\201\256\345\244\211\345\214\226.md" +++ "b/source/_posts/2021/20210615a_\343\200\214\343\203\252\343\202\242\343\202\257\343\203\206\343\202\243\343\203\226\343\202\263\343\203\263\343\203\210\343\203\255\343\203\274\343\203\251\343\200\215\345\260\216\345\205\245\343\201\214\343\202\202\343\201\237\343\202\211\343\201\231\343\201\213\343\202\202\343\201\227\343\202\214\343\201\252\343\201\204\343\202\246\343\202\247\343\203\226\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\350\250\255\350\250\210\343\201\256\345\244\211\345\214\226.md" @@ -1,324 +1,323 @@ ---- -title: "「リアクティブコントローラ」導入がもたらすかもしれないウェブフロントエンド設計の変化" -date: 2021/06/15 00:00:00 -postid: a -tag: - - WebComponents - - フロントエンド - - リアクティブプログラミング - - 設計 -category: - - Programming -thumbnail: /images/2021/20210615a/thumbnail.png -author: 澁川喜規 -lede: "フロントエンド連載2日目のエントリーです。あまり話題になっていないような気がしますが、Web Componentsを実装するためのフレームワークのLit-Element v3がバージョンアップして、ついでにリブランディングしてLit v2.0となりました。ロゴも変わり、ウェブサイトも新しくなりました。" ---- - -[フロントエンド連載](/articles/20210614a/)2日目のエントリーです。 - -あまり話題になっていないような気がしますが、Web Componentsを実装するためのフレームワークのLit-Element v3がバージョンアップして、ついでにリブランディングしてLit v2.0となりました。ロゴも変わり、[ウェブサイトも新しく](https://lit.dev/)なりました。 - -Lit-Elementトップページ - -* [Introducing "Lit" for Web Components](https://zenn.dev/takanorip/articles/640f9fe9c6c8ca) - -本当はこのLitの紹介をこの連載でしようとしたのですが、上記のウェブサイトがすごく詳しいので、単に紹介するだけの記事だとあまり価値がないので、この中のコントローラ機能のみをとりあげようと思いますが、まずはWeb Componentsとは、というところを説明します。 - -# n回目のWeb Components元年 - -以前次のような記事を書きました。最初のPolymerというフレームワークが推進していたころよりも、ブラウザ対応も進み、ReactやVueといった人気のフレームワークとも気軽に組み合わせられるようになり、使えるところがぐん、と増えました。 - -* [2019年はWebComponents元年(2回目)！WebComponentsをReact/Angular/Vueと一緒に使う](https://qiita.com/shibukawa/items/5a36147ec103d35c1b5e) - -jxckさんの発表で、3回目の元年な話もあります。主にWebPackingなどのAPIの進化がこれからWeb Componentsの普及に一役買うのでは、という内容のようです。 - -* [Web Components 元年 v3 / Web Components first year v3](https://speakerdeck.com/jxck/web-components-first-year-v3) - -[Headless UI](https://headlessui.dev/)がもしWeb Components版を出してくれたら、世のWeb/CSSデザイナーの人たちのポートフォリオに載せやすいものとなって作ろう、という人は増えるのでは？ という気はするのですが、それがなかったとしても、2021年は本当の元年になってくれそうな気がすごいしています。 - -Web Componentsが普及したあかつきには、多種多様なコンポーネント集が手に入り、ReactでもVueでもSvelteでもなんでもフロントエンド開発のときに各フロントエンド専用のUI部品集だけでなく「Web Components製の部品も利用の選択肢に入る」状態になると思います。そのためにはWeb Componentsで作られた部品集がたくさん世の中に作られることが大事だと思っていましたが、リニューアルされたLitのウェブサイトのフッター付近にたくさん部品集のリンクがあります。 - -* [Adobe: Spectrum Web Components](https://opensource.adobe.com/spectrum-web-components/) -* [Alaska Airlines: Auro Design System](https://auro.alaskaair.com/philosophy) -* [Cisco Systems: Momentum UI](https://github.com/momentum-design/momentum-ui/tree/master/web-components) -* [Home Assistant: Frontend UI](https://github.com/home-assistant/frontend) -* [IBM: Carbon Web Components](https://github.com/carbon-design-system/carbon-web-components) -* [ING Bank: Lion Web Components](https://lion-web.netlify.app/) -* [Microsoft: PWA Starter](https://github.com/pwa-builder/pwa-starter) -* [Red Hat: One Platform Components](https://github.com/1-Platform) -* [SAP: UI5 Web Components](https://github.com/SAP/ui5-webcomponents/blob/master/docs/dev/Developing%20Web%20Components.md) -* [Shoelace Components](https://shoelace.style/) -* [Vaadin Ltd: Fusion Framework](https://vaadin.com/docs/latest/fusion/overview) -* [VMWare: Clarity Core](https://clarity.design/storybook/core/) -* [Wired Elements](https://github.com/rough-stuff/wired-elements) - -注目はアラスカエアラインのフライト情報コンポーネントですね。こういうのがWeb Componentsっぽい。このサイトの、コンポーネントの背景を斜めストライプにすることでコンポーネントのビジュアルと背景の区別がつきやすくなっているの、めちゃ良いですね。Storybookとかでコンポーネント集作る人はみんなやっても良さそう。 - -アラスカエアラインのコンポーネント一覧 - -それらのコンポーネント集以上の起爆剤となりそうと思っているのが、Google I/O 2021で発表されたAndroidの新UIコンセプトのMaterial Youです。 - -

✨ Announcing Material You, a transformation in design at Google ✨

Be a co-creator of your digital experiences. Coming first to Pixel with #Android12

Learn more about the #MaterialDesign vision 👉https://t.co/Otb86qTQRR pic.twitter.com/04ARxOTbVa

— Material Design (@materialdesign) May 18, 2021
- -Material Designが発表されたときも、モバイルからウェブまで全部をカバーするUIコンセプトということで、CSSも提供され、[material-design-lite](https://getmdl.io/)というライブラリが出たり、それらを元にしたBootstrapのテーマが出たりしつつ、React向けには[Material UI](https://material-ui.com/)、Vue.jsには[Vuetify](https://vuetifyjs.com/en/)、Angularでは[Angular Material](https://material.angular.io/)がそれぞれ開発されています。ですが、「とりあえずこれ使っておこう」となるまでには年単位の時間がかかっていました。 - -一方で、細々と[Material DesignのUI部品のLit Element実装も行われている](https://github.com/material-components/material-components-web-components)な、と思っていたら、Material Design本家のチュートリアルもいつのまにか[Web Components前提](https://material.io/develop/web/getting-started)となっていますし、なにより、Material YouはLitで実装する==Web Componentsになるよ、と中の人からレスポンスが！！ - -

Material You for web will be #builtWithLit

— Elliott (@techytacos) May 21, 2021
- -Material UIやVuetifyやAngular MaterialがMaterial Youに対応するか、別のそういうバージョンが実装されるよりも、Web Components版を使った方が圧倒的に早い、ということになりそうです。やったね！！ - -# Litの新機能のリアクティブコントローラとは何者か - -Lit Elementからの変化は[こちら](https://zenn.dev/takanorip/articles/640f9fe9c6c8ca)をみていただくのが確実ですが軽くリストアップします。 - -* ビルド結果のサイズはより小さく(minify時で30％)、より高速に(初期表示が5-20％、更新が7-15％) -* リアクティブコントローラというコンセプトが入った -* experimental: Reactコンポーネントを作るアダプターが導入 -* experimental: サーバーサイドレンダリングができるようになる - -ここでとりあげるのはコントローラです。ライフサイクルイベントのハンドラーをどこにどう実装するのか、というのはいろいろ試行錯誤があり、クラスのメソッドだったり、Hooksが導入されたり、といろいろ変わってきました。Hooksもライフサイクルイベントのハンドラーの再利用がしやすくなる仕組みでしたが、コントローラはこのハンドラーのセットをオブジェクトして切り出しておける機能となります。Javaとかのオブジェクト指向をやっていた人にはわかりやすいものかと思います。 - -コントローラという概念自体はモバイルな開発では以前から使われているアイデアで、[iOSの開発でも見かける](https://developer.apple.com/tutorials/app-dev-training/setting-up-a-table-view)し、[Flutterにもあります](https://medium.com/@ntaoo/widget%E3%81%8B%E3%82%89controller%E3%82%92%E5%88%86%E9%9B%A2%E3%81%99%E3%82%8B-cf2f0c646e78)ね。Jetpack Composeはユーザーがロジックを定義する対象ではないのかな？[ナビゲーション周りぐらいでしかコントローラという言葉が出てこなく](https://developer.android.com/jetpack/compose/navigation)て、UIを持たない提供ロジックの置き場っぽい使われ方っぽいですね。一般名詞なのでフレームワークごとに用法が違ってきがちですが、iOS的なコントローラに近そうです。 - -Litのドキュメント中はたんにコントローラと書かれているところもありますが、ページや段落の初出時には「Reactive Controller」と書かれているので正式名称はこちらっぽいです。APIのインタフェース名もこれになっています。一般名詞を特定用法で振り回すのはあんまり好きじゃない（用語を大切にするはずのDDDがリポジトリとかサービスとかといった名前でよく混乱を引き起こしている）ので、この記事でもリアクティブコントローラと書くようにします。 - -Litのリアクティブコントローラの設計は単にLitに閉じるものではなく、他のフレームワークからも使えるようなアダプターが提供されようとしています。 - -https://github.com/lit/lit/issues/1682 - -litのIssue1682 - -# リアクティブコントローラのAPI - -リアクティブコントローラを実装するにはReactiveController interfaceを実装したクラスを作ります。コンストラクタの中で呼び出している`addConttoller()`で、ホストとなるコンポーネントと接続されます。リアクティブコントローラからはホストの`requestUpdate()`メソッドを呼び出すことで変更を通知します。 - -次のサンプルはLit.devにあったタイマーのコントローラです。 - -```ts -import {ReactiveController, ReactiveControllerHost} from 'lit'; - -export class ClockController implements ReactiveController { - host: ReactiveControllerHost; - - value = new Date(); - timeout: number; - private _timerID?: number; - - constructor(host: ReactiveControllerHost, timeout = 1000) { - (this.host = host).addController(this); - this.timeout = timeout; - } - hostConnected() { - // Start a timer when the host is connected - this._timerID = setInterval(() => { - this.value = new Date(); - // Update the host with new value - this.host.requestUpdate(); - }); - } - hostDisconnected() { - // Clear the timer when the host is disconnected - clearInterval(this._timerID); - this._timerID = undefined; - } -} -``` - -この手のやつが欲しくなるのって、Cheetah-GridとかagGridとかのテーブルコンポーネント系や、ツリービューとかですよね。プロパティに値を入れたらその通りにステートレスで仮想DOMやらなんやらで表示される、というのが今時のウェブ開発の目指すところですが、テーブル部品が入ると途端にその構造が大きく変更されがちです。 - -そもそも、外から与えるのは初期データで、更新後のデータは内部だけ、とかの設計になっている部品なら良いのですが（ReactのuseState的な)、全部のデータを上流に戻す前提とか、更新のトリガーは中と外のどちらが担当するか、など、まあたいてい再利用できないし、そこだけ大きく重力場が歪む感じがあります。ライフサイクルメソッドを駆使する形になるし、　ReduxとかVuex的なストアとの共存もまた厳しいものがあります。 - -この手のデータは、データを取得してくるキーは少なく、実態のデータが多くなりがちです。例えば、キーとなる入力はページ番号とソートキーの2つだけど、持っているデータは1ページ分の100行のデータ、といった具合です。ReactとかVueのプログラミングモデルとちょっと相性が悪いのはこの部分かな、と思います。 - -テーブルコンポーネントの場合、固定のデータをとってくるのか、無限スクロール的にデータを取ってくるのか、ページングなのか、いくつか選択肢があります。そのあたり、ユーザーが自分の使いたいユースケースに合わせて選択できると夢が広がります。 - -# コントローラを外から設定する - -ドキュメントを隅から隅まで読んでも、コントローラをコンポーネントの外から渡すというのはサンプルはありませんでしたが、イベントとして処理すれば良さそうです。こんな感じで書けばconnectedと表示されました。これでテーブルデータの更新をお任せすることが可能な気がします。 - -```ts -import { LitElement, html, css } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; - -@customElement('my-component') -// eslint-disable-next-line @typescript-eslint/no-unused-vars -class MyComponent extends LitElement { - private controller?: ReactiveController; - - render() { - return html` - - - - - - -``` - -これは生DOM APIを読んでいるので冗長な感じですが、Vueとかならイベントハンドラはタグ宣言の中で行えますし、そこまで大変ではないかなと思います。まあ、将来的にReactラッパーみたいな感じで、各コンポーネント向けのラッパーが簡単に作れるようになれば・・・ - -# テーブルのデータ取得用のコントローラを作ってみる - -みんな大好き[Cheetah-Grid](https://future-architect.github.io/cheetah-grid/#/)のデータを取ってくるコントローラを作ってみます。ただ、サンプルとして作っているので、そこまで実用的ではないです。たいていのこの手のコンポーネントは、データ元を表すオブジェクトが提供されており、それをコンポーネントに渡せばだいたいやりたいことはできてしまいます。Cheetah-Gridも例に漏れず、[DataSource](https://future-architect.github.io/cheetah-grid/documents/api/js/grid_data/#using-array-object)で無限スクロールな用途での内部のキャッシュやら描画やらはいい感じにやってくれます。 - -ですが、ちょっとダサいページングなUIを要望された、という想定で、ページングのデータ取得のリアクティブコントローラを実装してみます。 - -本当は[GrapeCityのWijmo](https://devlog.grapecity.co.jp/wijmo-webcomponents/)のサンプルみたいにカラム定義もタグで書きたかったけど、まあ今回はリアクティブコントローラのサンプルなのでそこは省略しておきます。 - -データソースはどこかのウェブサイトかもしれないし、固定テーブルかもしれないし、計算で作るかもしれません。テーブルのユーザーは次のインタフェースを実装し、その中でデータ取得を行うものとします。 - -```ts DataSourceController.ts -import { ReactiveController } from 'lit'; - -interface DataSourceController extends ReactiveController { - setPage(page: number); -} -``` - -* `setPage()`が呼ばれたら中でデータを取得。中でホストの`setData()`を呼ぶ。 -* サーバー側で更新がかかったらそれを検知できるように、変更検知時にはホストの`setData()`を呼んでもいいものとする - -データをどこから取ってくるかを利用者が定義できるようになりますね。`ReactiveController`インタフェースを`extends`していますが、これにも対応することで、コンポーネントが表示されているかどうかが検知できるのでサーバー接続を開始したり終了したりといったこともコントローラ実装者が制御できるようになりますね。 - -とりあえず、何も考えず、数値と、それを7で割った余りの数値をリストアップするという実用的じゃないサンプルを作ってみます。本当はかっこいいCheetah-Gridをとりあえず固定長テーブル表示で使うWeb Componentsはこんな感じでできます。 - -```ts -import { LitElement, html, css, ReactiveController } from 'lit'; -import { customElement } from 'lit/decorators.js'; -import { ref, Ref, createRef } from 'lit/directives/ref.js'; -import { ListGrid } from 'cheetah-grid'; - -interface DataSourceController extends ReactiveController { - setPage(page: number): void; -} - -@customElement('page-grid') -// eslint-disable-next-line @typescript-eslint/no-unused-vars -class PageGrid extends LitElement { - tagRef: Ref = createRef(); - - private controller?: DataSourceController<{ num: number; rem: number }>; - - listGrid?: ListGrid<{ num: number; rem: number }>; - - static styles = css` - div.grid { - height: 600px; - border: solid 1px #ddd; - } - `; - - render() { - return html`
`; - } - - firstUpdated() { - console.log('firstUpdated'); - const tag = this.tagRef.value; - this.listGrid = new ListGrid({ - parentElement: tag, - header: [ - { field: 'num', caption: 'num' }, - { field: 'rem', caption: 'rem 7' }, - ], - }); - const myEvent = new CustomEvent('oninit', { - detail: { message: 'onInit happened.' }, - bubbles: true, - composed: true, - }); - this.dispatchEvent(myEvent); - } - - setController( - controller: DataSourceController<{ num: number; rem: number }> - ) { - this.controller = controller; - this.addController(controller); - } - - setData(data: { num: number; rem: number }[]) { - if (this.listGrid) { - this.listGrid.records = data; - } - } -} -``` - -利用側はこんな感じで、コントローラを作成し、初期化のコールバックでコントローラを設定します。ページング機構を作るのがめんどくさかったので、一秒間に1ページ進むようにしています。 - -```html - - - - - - - -``` - -ユーザーがデータ取得をリアクティブコントローラでカスタマイズ可能なWeb Componentsのテーブルコンポーネントが簡単にできました。 - -テーブルコンポーネント - -# まとめ - -データソースをリアクティブコントローラとして分離する実装について解説しました。まあコントローラを外部から与えるという方法は公式ドキュメントにないので、本当にこれでいいのかは不明ですが、今まで悩みの種だった、ちょっと大きめなデータを扱うコンポーネント、テーブルとかツリービューを実装するときの光明になりそうです。仮想DOMではなく、Cheetah-GridのようにCanvas描画で超高速みたいにうたう高性能な部品に、大きめのデータをフレームワークの中でどう渡すかというところで、フレームワークとステート管理機構で、データ取得のキーだけ管理して、実体の生データはリアクティブコントローラが保持して、高性能な部品に渡す、ということになれば、ライブラリとの接合部分がスパゲティになりがちなところが簡潔になるんじゃないかと思います。 - -この機構はLitだけではなく、他のコンポーネントでも活用できそうなところもいいですね。うちの会社だと技術選定はお客さんの要望次第なところもあってここ三年でReactもVueもAngularも全部さわりました。Web ComponentsでUI部品も共通化されるといいな、といつも思っていましたが、ちょっとしたロジック、たとえばページを開いたタイミングでサーバーからデータ取得とかそういうのも再利用したり、結合が疎になってテストしやすくなるとさらに良いですね。 - -あとはMaterial YouのリリースでLit製コンポーネントをみんなが使うようになるのが楽しみですね。2021年がWeb Componentsの3回目の元年だとして、4回目と言わなくても済むぐらい広まって欲しいですね。 +--- +title: "「リアクティブコントローラ」導入がもたらすかもしれないウェブフロントエンド設計の変化" +date: 2021/06/15 00:00:00 +postid: a +tag: + - WebComponents + - リアクティブプログラミング + - 設計 +category: + - Frontend +thumbnail: /images/2021/20210615a/thumbnail.png +author: 澁川喜規 +lede: "フロントエンド連載2日目のエントリーです。あまり話題になっていないような気がしますが、Web Componentsを実装するためのフレームワークのLit-Element v3がバージョンアップして、ついでにリブランディングしてLit v2.0となりました。ロゴも変わり、ウェブサイトも新しくなりました。" +--- + +[フロントエンド連載](/articles/20210614a/)2日目のエントリーです。 + +あまり話題になっていないような気がしますが、Web Componentsを実装するためのフレームワークのLit-Element v3がバージョンアップして、ついでにリブランディングしてLit v2.0となりました。ロゴも変わり、[ウェブサイトも新しく](https://lit.dev/)なりました。 + +Lit-Elementトップページ + +* [Introducing "Lit" for Web Components](https://zenn.dev/takanorip/articles/640f9fe9c6c8ca) + +本当はこのLitの紹介をこの連載でしようとしたのですが、上記のウェブサイトがすごく詳しいので、単に紹介するだけの記事だとあまり価値がないので、この中のコントローラ機能のみをとりあげようと思いますが、まずはWeb Componentsとは、というところを説明します。 + +# n回目のWeb Components元年 + +以前次のような記事を書きました。最初のPolymerというフレームワークが推進していたころよりも、ブラウザ対応も進み、ReactやVueといった人気のフレームワークとも気軽に組み合わせられるようになり、使えるところがぐん、と増えました。 + +* [2019年はWebComponents元年(2回目)！WebComponentsをReact/Angular/Vueと一緒に使う](https://qiita.com/shibukawa/items/5a36147ec103d35c1b5e) + +jxckさんの発表で、3回目の元年な話もあります。主にWebPackingなどのAPIの進化がこれからWeb Componentsの普及に一役買うのでは、という内容のようです。 + +* [Web Components 元年 v3 / Web Components first year v3](https://speakerdeck.com/jxck/web-components-first-year-v3) + +[Headless UI](https://headlessui.dev/)がもしWeb Components版を出してくれたら、世のWeb/CSSデザイナーの人たちのポートフォリオに載せやすいものとなって作ろう、という人は増えるのでは？ という気はするのですが、それがなかったとしても、2021年は本当の元年になってくれそうな気がすごいしています。 + +Web Componentsが普及したあかつきには、多種多様なコンポーネント集が手に入り、ReactでもVueでもSvelteでもなんでもフロントエンド開発のときに各フロントエンド専用のUI部品集だけでなく「Web Components製の部品も利用の選択肢に入る」状態になると思います。そのためにはWeb Componentsで作られた部品集がたくさん世の中に作られることが大事だと思っていましたが、リニューアルされたLitのウェブサイトのフッター付近にたくさん部品集のリンクがあります。 + +* [Adobe: Spectrum Web Components](https://opensource.adobe.com/spectrum-web-components/) +* [Alaska Airlines: Auro Design System](https://auro.alaskaair.com/philosophy) +* [Cisco Systems: Momentum UI](https://github.com/momentum-design/momentum-ui/tree/master/web-components) +* [Home Assistant: Frontend UI](https://github.com/home-assistant/frontend) +* [IBM: Carbon Web Components](https://github.com/carbon-design-system/carbon-web-components) +* [ING Bank: Lion Web Components](https://lion-web.netlify.app/) +* [Microsoft: PWA Starter](https://github.com/pwa-builder/pwa-starter) +* [Red Hat: One Platform Components](https://github.com/1-Platform) +* [SAP: UI5 Web Components](https://github.com/SAP/ui5-webcomponents/blob/master/docs/dev/Developing%20Web%20Components.md) +* [Shoelace Components](https://shoelace.style/) +* [Vaadin Ltd: Fusion Framework](https://vaadin.com/docs/latest/fusion/overview) +* [VMWare: Clarity Core](https://clarity.design/storybook/core/) +* [Wired Elements](https://github.com/rough-stuff/wired-elements) + +注目はアラスカエアラインのフライト情報コンポーネントですね。こういうのがWeb Componentsっぽい。このサイトの、コンポーネントの背景を斜めストライプにすることでコンポーネントのビジュアルと背景の区別がつきやすくなっているの、めちゃ良いですね。Storybookとかでコンポーネント集作る人はみんなやっても良さそう。 + +アラスカエアラインのコンポーネント一覧 + +それらのコンポーネント集以上の起爆剤となりそうと思っているのが、Google I/O 2021で発表されたAndroidの新UIコンセプトのMaterial Youです。 + + + +Material Designが発表されたときも、モバイルからウェブまで全部をカバーするUIコンセプトということで、CSSも提供され、[material-design-lite](https://getmdl.io/)というライブラリが出たり、それらを元にしたBootstrapのテーマが出たりしつつ、React向けには[Material UI](https://material-ui.com/)、Vue.jsには[Vuetify](https://vuetifyjs.com/en/)、Angularでは[Angular Material](https://material.angular.io/)がそれぞれ開発されています。ですが、「とりあえずこれ使っておこう」となるまでには年単位の時間がかかっていました。 + +一方で、細々と[Material DesignのUI部品のLit Element実装も行われている](https://github.com/material-components/material-components-web-components)な、と思っていたら、Material Design本家のチュートリアルもいつのまにか[Web Components前提](https://material.io/develop/web/getting-started)となっていますし、なにより、Material YouはLitで実装する==Web Componentsになるよ、と中の人からレスポンスが！！ + + + +Material UIやVuetifyやAngular MaterialがMaterial Youに対応するか、別のそういうバージョンが実装されるよりも、Web Components版を使った方が圧倒的に早い、ということになりそうです。やったね！！ + +# Litの新機能のリアクティブコントローラとは何者か + +Lit Elementからの変化は[こちら](https://zenn.dev/takanorip/articles/640f9fe9c6c8ca)をみていただくのが確実ですが軽くリストアップします。 + +* ビルド結果のサイズはより小さく(minify時で30％)、より高速に(初期表示が5-20％、更新が7-15％) +* リアクティブコントローラというコンセプトが入った +* experimental: Reactコンポーネントを作るアダプターが導入 +* experimental: サーバーサイドレンダリングができるようになる + +ここでとりあげるのはコントローラです。ライフサイクルイベントのハンドラーをどこにどう実装するのか、というのはいろいろ試行錯誤があり、クラスのメソッドだったり、Hooksが導入されたり、といろいろ変わってきました。Hooksもライフサイクルイベントのハンドラーの再利用がしやすくなる仕組みでしたが、コントローラはこのハンドラーのセットをオブジェクトして切り出しておける機能となります。Javaとかのオブジェクト指向をやっていた人にはわかりやすいものかと思います。 + +コントローラという概念自体はモバイルな開発では以前から使われているアイデアで、[iOSの開発でも見かける](https://developer.apple.com/tutorials/app-dev-training/setting-up-a-table-view)し、[Flutterにもあります](https://medium.com/@ntaoo/widget%E3%81%8B%E3%82%89controller%E3%82%92%E5%88%86%E9%9B%A2%E3%81%99%E3%82%8B-cf2f0c646e78)ね。Jetpack Composeはユーザーがロジックを定義する対象ではないのかな？[ナビゲーション周りぐらいでしかコントローラという言葉が出てこなく](https://developer.android.com/jetpack/compose/navigation)て、UIを持たない提供ロジックの置き場っぽい使われ方っぽいですね。一般名詞なのでフレームワークごとに用法が違ってきがちですが、iOS的なコントローラに近そうです。 + +Litのドキュメント中はたんにコントローラと書かれているところもありますが、ページや段落の初出時には「Reactive Controller」と書かれているので正式名称はこちらっぽいです。APIのインタフェース名もこれになっています。一般名詞を特定用法で振り回すのはあんまり好きじゃない（用語を大切にするはずのDDDがリポジトリとかサービスとかといった名前でよく混乱を引き起こしている）ので、この記事でもリアクティブコントローラと書くようにします。 + +Litのリアクティブコントローラの設計は単にLitに閉じるものではなく、他のフレームワークからも使えるようなアダプターが提供されようとしています。 + +https://github.com/lit/lit/issues/1682 + +litのIssue1682 + +# リアクティブコントローラのAPI + +リアクティブコントローラを実装するにはReactiveController interfaceを実装したクラスを作ります。コンストラクタの中で呼び出している`addConttoller()`で、ホストとなるコンポーネントと接続されます。リアクティブコントローラからはホストの`requestUpdate()`メソッドを呼び出すことで変更を通知します。 + +次のサンプルはLit.devにあったタイマーのコントローラです。 + +```ts +import {ReactiveController, ReactiveControllerHost} from 'lit'; + +export class ClockController implements ReactiveController { + host: ReactiveControllerHost; + + value = new Date(); + timeout: number; + private _timerID?: number; + + constructor(host: ReactiveControllerHost, timeout = 1000) { + (this.host = host).addController(this); + this.timeout = timeout; + } + hostConnected() { + // Start a timer when the host is connected + this._timerID = setInterval(() => { + this.value = new Date(); + // Update the host with new value + this.host.requestUpdate(); + }); + } + hostDisconnected() { + // Clear the timer when the host is disconnected + clearInterval(this._timerID); + this._timerID = undefined; + } +} +``` + +この手のやつが欲しくなるのって、Cheetah-GridとかagGridとかのテーブルコンポーネント系や、ツリービューとかですよね。プロパティに値を入れたらその通りにステートレスで仮想DOMやらなんやらで表示される、というのが今時のウェブ開発の目指すところですが、テーブル部品が入ると途端にその構造が大きく変更されがちです。 + +そもそも、外から与えるのは初期データで、更新後のデータは内部だけ、とかの設計になっている部品なら良いのですが（ReactのuseState的な)、全部のデータを上流に戻す前提とか、更新のトリガーは中と外のどちらが担当するか、など、まあたいてい再利用できないし、そこだけ大きく重力場が歪む感じがあります。ライフサイクルメソッドを駆使する形になるし、　ReduxとかVuex的なストアとの共存もまた厳しいものがあります。 + +この手のデータは、データを取得してくるキーは少なく、実態のデータが多くなりがちです。例えば、キーとなる入力はページ番号とソートキーの2つだけど、持っているデータは1ページ分の100行のデータ、といった具合です。ReactとかVueのプログラミングモデルとちょっと相性が悪いのはこの部分かな、と思います。 + +テーブルコンポーネントの場合、固定のデータをとってくるのか、無限スクロール的にデータを取ってくるのか、ページングなのか、いくつか選択肢があります。そのあたり、ユーザーが自分の使いたいユースケースに合わせて選択できると夢が広がります。 + +# コントローラを外から設定する + +ドキュメントを隅から隅まで読んでも、コントローラをコンポーネントの外から渡すというのはサンプルはありませんでしたが、イベントとして処理すれば良さそうです。こんな感じで書けばconnectedと表示されました。これでテーブルデータの更新をお任せすることが可能な気がします。 + +```ts +import { LitElement, html, css } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; + +@customElement('my-component') +// eslint-disable-next-line @typescript-eslint/no-unused-vars +class MyComponent extends LitElement { + private controller?: ReactiveController; + + render() { + return html` + + + + + + +``` + +これは生DOM APIを読んでいるので冗長な感じですが、Vueとかならイベントハンドラはタグ宣言の中で行えますし、そこまで大変ではないかなと思います。まあ、将来的にReactラッパーみたいな感じで、各コンポーネント向けのラッパーが簡単に作れるようになれば・・・ + +# テーブルのデータ取得用のコントローラを作ってみる + +みんな大好き[Cheetah-Grid](https://future-architect.github.io/cheetah-grid/#/)のデータを取ってくるコントローラを作ってみます。ただ、サンプルとして作っているので、そこまで実用的ではないです。たいていのこの手のコンポーネントは、データ元を表すオブジェクトが提供されており、それをコンポーネントに渡せばだいたいやりたいことはできてしまいます。Cheetah-Gridも例に漏れず、[DataSource](https://future-architect.github.io/cheetah-grid/documents/api/js/grid_data/#using-array-object)で無限スクロールな用途での内部のキャッシュやら描画やらはいい感じにやってくれます。 + +ですが、ちょっとダサいページングなUIを要望された、という想定で、ページングのデータ取得のリアクティブコントローラを実装してみます。 + +本当は[GrapeCityのWijmo](https://devlog.grapecity.co.jp/wijmo-webcomponents/)のサンプルみたいにカラム定義もタグで書きたかったけど、まあ今回はリアクティブコントローラのサンプルなのでそこは省略しておきます。 + +データソースはどこかのウェブサイトかもしれないし、固定テーブルかもしれないし、計算で作るかもしれません。テーブルのユーザーは次のインタフェースを実装し、その中でデータ取得を行うものとします。 + +```ts DataSourceController.ts +import { ReactiveController } from 'lit'; + +interface DataSourceController extends ReactiveController { + setPage(page: number); +} +``` + +* `setPage()`が呼ばれたら中でデータを取得。中でホストの`setData()`を呼ぶ。 +* サーバー側で更新がかかったらそれを検知できるように、変更検知時にはホストの`setData()`を呼んでもいいものとする + +データをどこから取ってくるかを利用者が定義できるようになりますね。`ReactiveController`インタフェースを`extends`していますが、これにも対応することで、コンポーネントが表示されているかどうかが検知できるのでサーバー接続を開始したり終了したりといったこともコントローラ実装者が制御できるようになりますね。 + +とりあえず、何も考えず、数値と、それを7で割った余りの数値をリストアップするという実用的じゃないサンプルを作ってみます。本当はかっこいいCheetah-Gridをとりあえず固定長テーブル表示で使うWeb Componentsはこんな感じでできます。 + +```ts +import { LitElement, html, css, ReactiveController } from 'lit'; +import { customElement } from 'lit/decorators.js'; +import { ref, Ref, createRef } from 'lit/directives/ref.js'; +import { ListGrid } from 'cheetah-grid'; + +interface DataSourceController extends ReactiveController { + setPage(page: number): void; +} + +@customElement('page-grid') +// eslint-disable-next-line @typescript-eslint/no-unused-vars +class PageGrid extends LitElement { + tagRef: Ref = createRef(); + + private controller?: DataSourceController<{ num: number; rem: number }>; + + listGrid?: ListGrid<{ num: number; rem: number }>; + + static styles = css` + div.grid { + height: 600px; + border: solid 1px #ddd; + } + `; + + render() { + return html`
`; + } + + firstUpdated() { + console.log('firstUpdated'); + const tag = this.tagRef.value; + this.listGrid = new ListGrid({ + parentElement: tag, + header: [ + { field: 'num', caption: 'num' }, + { field: 'rem', caption: 'rem 7' }, + ], + }); + const myEvent = new CustomEvent('oninit', { + detail: { message: 'onInit happened.' }, + bubbles: true, + composed: true, + }); + this.dispatchEvent(myEvent); + } + + setController( + controller: DataSourceController<{ num: number; rem: number }> + ) { + this.controller = controller; + this.addController(controller); + } + + setData(data: { num: number; rem: number }[]) { + if (this.listGrid) { + this.listGrid.records = data; + } + } +} +``` + +利用側はこんな感じで、コントローラを作成し、初期化のコールバックでコントローラを設定します。ページング機構を作るのがめんどくさかったので、一秒間に1ページ進むようにしています。 + +```html + + + + + + + +``` + +ユーザーがデータ取得をリアクティブコントローラでカスタマイズ可能なWeb Componentsのテーブルコンポーネントが簡単にできました。 + +テーブルコンポーネント + +# まとめ + +データソースをリアクティブコントローラとして分離する実装について解説しました。まあコントローラを外部から与えるという方法は公式ドキュメントにないので、本当にこれでいいのかは不明ですが、今まで悩みの種だった、ちょっと大きめなデータを扱うコンポーネント、テーブルとかツリービューを実装するときの光明になりそうです。仮想DOMではなく、Cheetah-GridのようにCanvas描画で超高速みたいにうたう高性能な部品に、大きめのデータをフレームワークの中でどう渡すかというところで、フレームワークとステート管理機構で、データ取得のキーだけ管理して、実体の生データはリアクティブコントローラが保持して、高性能な部品に渡す、ということになれば、ライブラリとの接合部分がスパゲティになりがちなところが簡潔になるんじゃないかと思います。 + +この機構はLitだけではなく、他のコンポーネントでも活用できそうなところもいいですね。うちの会社だと技術選定はお客さんの要望次第なところもあってここ三年でReactもVueもAngularも全部さわりました。Web ComponentsでUI部品も共通化されるといいな、といつも思っていましたが、ちょっとしたロジック、たとえばページを開いたタイミングでサーバーからデータ取得とかそういうのも再利用したり、結合が疎になってテストしやすくなるとさらに良いですね。 + +あとはMaterial YouのリリースでLit製コンポーネントをみんなが使うようになるのが楽しみですね。2021年がWeb Componentsの3回目の元年だとして、4回目と言わなくても済むぐらい広まって欲しいですね。 diff --git "a/source/_posts/2021/20210616a_Vue_CLI\343\201\256\343\203\207\343\203\225\343\202\251\343\203\253\343\203\210\350\250\255\345\256\232\343\201\213\343\202\211ESLint\343\201\256\343\203\231\343\202\271\343\203\210\343\203\227\343\203\251\343\202\257\343\203\206\343\202\243\343\202\271\343\202\222\346\244\234\350\250\216\343\201\231\343\202\213.md" "b/source/_posts/2021/20210616a_Vue_CLI\343\201\256\343\203\207\343\203\225\343\202\251\343\203\253\343\203\210\350\250\255\345\256\232\343\201\213\343\202\211ESLint\343\201\256\343\203\231\343\202\271\343\203\210\343\203\227\343\203\251\343\202\257\343\203\206\343\202\243\343\202\271\343\202\222\346\244\234\350\250\216\343\201\231\343\202\213.md" index ff88915fb189..7053788a9f9f 100644 --- "a/source/_posts/2021/20210616a_Vue_CLI\343\201\256\343\203\207\343\203\225\343\202\251\343\203\253\343\203\210\350\250\255\345\256\232\343\201\213\343\202\211ESLint\343\201\256\343\203\231\343\202\271\343\203\210\343\203\227\343\203\251\343\202\257\343\203\206\343\202\243\343\202\271\343\202\222\346\244\234\350\250\216\343\201\231\343\202\213.md" +++ "b/source/_posts/2021/20210616a_Vue_CLI\343\201\256\343\203\207\343\203\225\343\202\251\343\203\253\343\203\210\350\250\255\345\256\232\343\201\213\343\202\211ESLint\343\201\256\343\203\231\343\202\271\343\203\210\343\203\227\343\203\251\343\202\257\343\203\206\343\202\243\343\202\271\343\202\222\346\244\234\350\250\216\343\201\231\343\202\213.md" @@ -7,7 +7,7 @@ tag: - Node.js - ESLint category: - - Infrastructure + - Frontend thumbnail: /images/2021/20210616a/thumbnail.png author: 伊藤真彦 lede: "TIGの伊藤真彦です。この記事はフロントエンド連載の3記事目です。今回は愛用しているVue CLIを利用して、フロントエンドアプリケーションの詳細な設定について調査してみました。" diff --git "a/source/_posts/2021/20210617a_ES2021\357\274\217ES2022\343\202\222\347\237\245\343\202\215\343\201\206.md" "b/source/_posts/2021/20210617a_ES2021\357\274\217ES2022\343\202\222\347\237\245\343\202\215\343\201\206.md" index f497998d158f..84c35296174f 100644 --- "a/source/_posts/2021/20210617a_ES2021\357\274\217ES2022\343\202\222\347\237\245\343\202\215\343\201\206.md" +++ "b/source/_posts/2021/20210617a_ES2021\357\274\217ES2022\343\202\222\347\237\245\343\202\215\343\201\206.md" @@ -4,9 +4,10 @@ date: 2021/06/17 00:00:00 postid: a tag: - JavaScript - - フロントエンド + - ES2021 + - ES2022 category: - - Programming + - Frontend thumbnail: /images/2021/20210617a/thumbnail.png author: 柏木祥子 lede: "少し前にES2021にて変更される新機能が発表されました。JavaScriptを扱う上では知っとくべき！と意気込んだもののECMAScriptが何者なのかすら曖昧な理解だったので、この機会に学んだことをまとめてみようと思います。* ECMAScriptがJavaScriptにとってどのような役割を持つのかを知る" diff --git "a/source/_posts/2021/20210621a_\343\201\251\343\201\206\343\201\227\343\201\246HTML5\343\201\214\345\273\203\346\255\242\343\201\225\343\202\214\343\201\237\343\201\256\343\201\213.md" "b/source/_posts/2021/20210621a_\343\201\251\343\201\206\343\201\227\343\201\246HTML5\343\201\214\345\273\203\346\255\242\343\201\225\343\202\214\343\201\237\343\201\256\343\201\213.md" index 085588e0161b..027a75aee2b7 100644 --- "a/source/_posts/2021/20210621a_\343\201\251\343\201\206\343\201\227\343\201\246HTML5\343\201\214\345\273\203\346\255\242\343\201\225\343\202\214\343\201\237\343\201\256\343\201\213.md" +++ "b/source/_posts/2021/20210621a_\343\201\251\343\201\206\343\201\227\343\201\246HTML5\343\201\214\345\273\203\346\255\242\343\201\225\343\202\214\343\201\237\343\201\256\343\201\213.md" @@ -5,9 +5,8 @@ postid: a tag: - HTML - Web - - フロントエンド category: - - Programming + - Frontend thumbnail: /images/2021/20210621a/thumbnail.png author: 枇榔晃裕 lede: "HTML5が2021年の1月に廃止されました。Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように..." diff --git "a/source/_posts/2021/20210622a_Svelte\343\201\253\345\205\245\351\226\200\343\201\227\343\201\237.md" "b/source/_posts/2021/20210622a_Svelte\343\201\253\345\205\245\351\226\200\343\201\227\343\201\237.md" index ab685ff33aa4..9c2c6e526446 100644 --- "a/source/_posts/2021/20210622a_Svelte\343\201\253\345\205\245\351\226\200\343\201\227\343\201\237.md" +++ "b/source/_posts/2021/20210622a_Svelte\343\201\253\345\205\245\351\226\200\343\201\227\343\201\237.md" @@ -4,10 +4,9 @@ date: 2021/06/22 00:00:00 postid: a tag: - Svelte - - フロントエンド - 入門 category: - - Programming + - Frontend thumbnail: /images/2021/20210622a/thumbnail.png author: 太田洋介 lede: "今年のゴールデンウィーク（STAY HOME週間）に最近話題のSvelteに入門したので紹介を書きます。Svelteは主にブラウザ上で動作するユーザーインタフェースを作るフレームワークで、ReactやVue.jsの対抗馬的な存在です。" diff --git "a/source/_posts/2021/20210623a_\351\235\231\347\232\204\343\202\265\343\202\244\343\203\210\343\202\270\343\202\247\343\203\215\343\203\254\343\203\274\343\202\277\343\202\222\347\224\250\343\201\204\343\201\237\343\202\265\343\202\244\343\203\210\351\201\213\345\226\266\343\201\247\345\255\246\343\202\223\343\201\240JavaScript\343\201\256\343\202\263\343\203\254\343\202\257\343\202\267\343\203\247\343\203\263\346\223\215\344\275\234\345\205\245\351\226\200.md" "b/source/_posts/2021/20210623a_\351\235\231\347\232\204\343\202\265\343\202\244\343\203\210\343\202\270\343\202\247\343\203\215\343\203\254\343\203\274\343\202\277\343\202\222\347\224\250\343\201\204\343\201\237\343\202\265\343\202\244\343\203\210\351\201\213\345\226\266\343\201\247\345\255\246\343\202\223\343\201\240JavaScript\343\201\256\343\202\263\343\203\254\343\202\257\343\202\267\343\203\247\343\203\263\346\223\215\344\275\234\345\205\245\351\226\200.md" index 4aef9c9dde54..fc25a6183b44 100644 --- "a/source/_posts/2021/20210623a_\351\235\231\347\232\204\343\202\265\343\202\244\343\203\210\343\202\270\343\202\247\343\203\215\343\203\254\343\203\274\343\202\277\343\202\222\347\224\250\343\201\204\343\201\237\343\202\265\343\202\244\343\203\210\351\201\213\345\226\266\343\201\247\345\255\246\343\202\223\343\201\240JavaScript\343\201\256\343\202\263\343\203\254\343\202\257\343\202\267\343\203\247\343\203\263\346\223\215\344\275\234\345\205\245\351\226\200.md" +++ "b/source/_posts/2021/20210623a_\351\235\231\347\232\204\343\202\265\343\202\244\343\203\210\343\202\270\343\202\247\343\203\215\343\203\254\343\203\274\343\202\277\343\202\222\347\224\250\343\201\204\343\201\237\343\202\265\343\202\244\343\203\210\351\201\213\345\226\266\343\201\247\345\255\246\343\202\223\343\201\240JavaScript\343\201\256\343\202\263\343\203\254\343\202\257\343\202\267\343\203\247\343\203\263\346\223\215\344\275\234\345\205\245\351\226\200.md" @@ -5,9 +5,8 @@ postid: a tag: - JavaScript - TechBlog - - フロントエンド category: - - Programming + - Frontend thumbnail: /images/2021/20210623a/thumbnail.png author: 真野隼記 lede: "この記事ではこのフューチャー技術ブログを機能拡張する過程で学んだコレクション操作で利用頻度が高い順にまとめます。ブログ運営（？）の保守運用な雰囲気が少しでも伝わればなと思います。" @@ -96,7 +95,7 @@ tag: - インデックス - フロントエンド category: - - Programming + - Frontend thumbnail: /images/2021/20210614a/thumbnail.jpg author: 真野隼記 --- diff --git "a/source/_posts/2021/20210706a_Airflow_Study_#1\343\200\214Airflow\343\201\256\345\206\205\351\203\250\346\247\213\351\200\240\343\201\250\345\213\225\343\201\213\343\201\227\346\226\271\343\202\222\347\220\206\350\247\243\343\201\231\343\202\213\343\200\215\343\201\247\347\231\272\350\241\250\343\201\227\343\201\276\343\201\227\343\201\237.md" "b/source/_posts/2021/20210706a_Airflow_Study_#1\343\200\214Airflow\343\201\256\345\206\205\351\203\250\346\247\213\351\200\240\343\201\250\345\213\225\343\201\213\343\201\227\346\226\271\343\202\222\347\220\206\350\247\243\343\201\231\343\202\213\343\200\215\343\201\247\347\231\272\350\241\250\343\201\227\343\201\276\343\201\227\343\201\237.md" index ca1acde6d0c1..657e3f69c274 100644 --- "a/source/_posts/2021/20210706a_Airflow_Study_#1\343\200\214Airflow\343\201\256\345\206\205\351\203\250\346\247\213\351\200\240\343\201\250\345\213\225\343\201\213\343\201\227\346\226\271\343\202\222\347\220\206\350\247\243\343\201\231\343\202\213\343\200\215\343\201\247\347\231\272\350\241\250\343\201\227\343\201\276\343\201\227\343\201\237.md" +++ "b/source/_posts/2021/20210706a_Airflow_Study_#1\343\200\214Airflow\343\201\256\345\206\205\351\203\250\346\247\213\351\200\240\343\201\250\345\213\225\343\201\213\343\201\227\346\226\271\343\202\222\347\220\206\350\247\243\343\201\231\343\202\213\343\200\215\343\201\247\347\231\272\350\241\250\343\201\227\343\201\276\343\201\227\343\201\237.md" @@ -6,7 +6,7 @@ tag: - Airflow - 登壇レポート category: - - Programming + - Infrastructure thumbnail: /images/2021/20210706a/thumbnail.png author: 多賀聡一朗 lede: "「Airflow Breeze を使ったローカル環境構築」について発表してきました。当ブログでの Airflow 関連の記事を見ていただき、お声がけいただいたということで、大変嬉しく思うとともに、色々ブログ記事書いてきて良かったなと思っています。" diff --git "a/source/_posts/2021/20210714a_Go\343\201\256\343\201\212\343\201\231\343\201\231\343\202\201\343\201\256\343\203\225\343\203\254\343\203\274\343\203\240\343\203\257\343\203\274\343\202\257\343\201\257net\357\274\217http.md" "b/source/_posts/2021/20210714a_Go\343\201\256\343\201\212\343\201\231\343\201\231\343\202\201\343\201\256\343\203\225\343\203\254\343\203\274\343\203\240\343\203\257\343\203\274\343\202\257\343\201\257net\357\274\217http.md" index aa0c83f293b3..214b286002dc 100644 --- "a/source/_posts/2021/20210714a_Go\343\201\256\343\201\212\343\201\231\343\201\231\343\202\201\343\201\256\343\203\225\343\203\254\343\203\274\343\203\240\343\203\257\343\203\274\343\202\257\343\201\257net\357\274\217http.md" +++ "b/source/_posts/2021/20210714a_Go\343\201\256\343\201\212\343\201\231\343\201\231\343\202\201\343\201\256\343\203\225\343\203\254\343\203\274\343\203\240\343\203\257\343\203\274\343\202\257\343\201\257net\357\274\217http.md" @@ -5,6 +5,7 @@ postid: a tag: - Go - 技術選定 + - net/http categories: - Programming thumbnail: /images/2021/20210714a/thumbnail.png diff --git "a/source/_posts/2021/20210804b_Future_Tech_Night_#13\343\200\214\343\202\242\343\202\270\343\203\243\343\202\244\343\203\253\343\201\250\345\223\201\350\263\252\344\277\235\350\250\274\343\202\222\350\200\203\343\201\210\343\202\213\345\213\211\345\274\267\344\274\232\343\200\215.md" "b/source/_posts/2021/20210804b_Future_Tech_Night_#13\343\200\214\343\202\242\343\202\270\343\203\243\343\202\244\343\203\253\343\201\250\345\223\201\350\263\252\344\277\235\350\250\274\343\202\222\350\200\203\343\201\210\343\202\213\345\213\211\345\274\267\344\274\232\343\200\215.md" index dd5cbd86d70f..0ed782168a06 100644 --- "a/source/_posts/2021/20210804b_Future_Tech_Night_#13\343\200\214\343\202\242\343\202\270\343\203\243\343\202\244\343\203\253\343\201\250\345\223\201\350\263\252\344\277\235\350\250\274\343\202\222\350\200\203\343\201\210\343\202\213\345\213\211\345\274\267\344\274\232\343\200\215.md" +++ "b/source/_posts/2021/20210804b_Future_Tech_Night_#13\343\200\214\343\202\242\343\202\270\343\203\243\343\202\244\343\203\253\343\201\250\345\223\201\350\263\252\344\277\235\350\250\274\343\202\222\350\200\203\343\201\210\343\202\213\345\213\211\345\274\267\344\274\232\343\200\215.md" @@ -7,7 +7,7 @@ tag: - TechNight - 登壇レポート category: - - Programming + - DevOps thumbnail: /images/2021/20210804b/thumbnail.jpg author: 岡部荘太郎 lede: " 2021/7/9（金）にFuture Tech Night #13～アジャイルと品質保証を考える勉強会～を開催しました。私は新卒でフューチャーアーキテクトに入社して、現在は品質管理部門で、全社横断で設計開発の品質向上プロセスの策定・実行を担っています。品質管理部門として、アジャイル開発を採用しているプロジェクトに関わることがあり、縁があって今回の勉強会に登壇することになりました。" diff --git "a/source/_posts/2021/20210806a_Cypress\343\201\247\343\203\206\343\202\271\343\203\210\345\217\257\350\203\275\343\201\252\343\203\211\343\203\251\343\203\203\343\202\260\343\202\242\343\203\263\343\203\211\343\203\211\343\203\255\343\203\203\343\203\227\345\256\237\350\243\205.md" "b/source/_posts/2021/20210806a_Cypress\343\201\247\343\203\206\343\202\271\343\203\210\345\217\257\350\203\275\343\201\252\343\203\211\343\203\251\343\203\203\343\202\260\343\202\242\343\203\263\343\203\211\343\203\211\343\203\255\343\203\203\343\203\227\345\256\237\350\243\205.md" index 31bd15820319..edc61f5737a8 100644 --- "a/source/_posts/2021/20210806a_Cypress\343\201\247\343\203\206\343\202\271\343\203\210\345\217\257\350\203\275\343\201\252\343\203\211\343\203\251\343\203\203\343\202\260\343\202\242\343\203\263\343\203\211\343\203\211\343\203\255\343\203\203\343\203\227\345\256\237\350\243\205.md" +++ "b/source/_posts/2021/20210806a_Cypress\343\201\247\343\203\206\343\202\271\343\203\210\345\217\257\350\203\275\343\201\252\343\203\211\343\203\251\343\203\203\343\202\260\343\202\242\343\203\263\343\203\211\343\203\211\343\203\255\343\203\203\343\203\227\345\256\237\350\243\205.md" @@ -5,10 +5,10 @@ postid: a tag: - Cypress - React - - フロントエンド - TailwindCSS + - E2Eテスト category: - - Programming + - Frontend thumbnail: /images/2021/20210806a/thumbnail.png author: 澁川喜規 lede: "お仕事コードで、「Cypressで頑張ったけどドラッグアンドドロップのテストができない」という相談を受けました。僕も試行錯誤してみたのですが、どうもうまくいかず・・・CypressとかのE2Eテストは、完全なユーザーの入力をエミュレーションするわけではなくて、ユーザーが入力したときに発生するであろうイベントを擬似的に作って投げているにすぎません。実際に発生するイベントよりも少ないです。例えば..." diff --git "a/source/_posts/2021/20210810b_Cypress\343\201\247API\343\201\256\345\256\237\350\241\214\343\200\201\347\225\260\345\270\270\347\263\273\343\201\256\343\203\206\343\202\271\343\203\210\343\202\222\350\241\214\343\201\206.md" "b/source/_posts/2021/20210810b_Cypress\343\201\247API\343\201\256\345\256\237\350\241\214\343\200\201\347\225\260\345\270\270\347\263\273\343\201\256\343\203\206\343\202\271\343\203\210\343\202\222\350\241\214\343\201\206.md" index 4d8bc104a892..7b7496517b8f 100644 --- "a/source/_posts/2021/20210810b_Cypress\343\201\247API\343\201\256\345\256\237\350\241\214\343\200\201\347\225\260\345\270\270\347\263\273\343\201\256\343\203\206\343\202\271\343\203\210\343\202\222\350\241\214\343\201\206.md" +++ "b/source/_posts/2021/20210810b_Cypress\343\201\247API\343\201\256\345\256\237\350\241\214\343\200\201\347\225\260\345\270\270\347\263\273\343\201\256\343\203\206\343\202\271\343\203\210\343\202\222\350\241\214\343\201\206.md" @@ -7,7 +7,7 @@ tag: - Node.js - E2Eテスト category: - - Programming + - Frontend thumbnail: /images/2021/20210810b/thumbnail.jpg author: 伊藤真彦 lede: "フューチャー技術ブログでも何度か取り上げているCypressですが、私も最近触り始めました。今回取り上げたいテーマは、フロントエンドアプリケーションで、特定の画面に表示する情報をサーバーから取得する機能や、ボタンを押すとバックエンドサーバーなどにHTTPリクエストを送信するような機能が実装されている場合の話です。" diff --git "a/source/_posts/2021/20210811a_Go1.17\343\201\256encoding\357\274\217csv.md" "b/source/_posts/2021/20210811a_Go1.17\343\201\256encoding\357\274\217csv.md" index 7cce5dfc615d..8e36b0115927 100644 --- "a/source/_posts/2021/20210811a_Go1.17\343\201\256encoding\357\274\217csv.md" +++ "b/source/_posts/2021/20210811a_Go1.17\343\201\256encoding\357\274\217csv.md" @@ -5,6 +5,8 @@ postid: a tag: - Go - Go1.17 + - encoding/csv + - CSV category: - Programming thumbnail: /images/2021/20210811a/thumbnail.png diff --git "a/source/_posts/2021/20210818b_AWS_Certified_Solutions_Architect_-_Associate_\345\220\210\346\240\274\344\275\223\351\250\223\350\250\230.md" "b/source/_posts/2021/20210818b_AWS_Certified_Solutions_Architect_-_Associate_\345\220\210\346\240\274\344\275\223\351\250\223\350\250\230.md" index 689e4ccc56e5..b4908e04849d 100644 --- "a/source/_posts/2021/20210818b_AWS_Certified_Solutions_Architect_-_Associate_\345\220\210\346\240\274\344\275\223\351\250\223\350\250\230.md" +++ "b/source/_posts/2021/20210818b_AWS_Certified_Solutions_Architect_-_Associate_\345\220\210\346\240\274\344\275\223\351\250\223\350\250\230.md" @@ -6,10 +6,10 @@ tag: - AWS - 合格記 category: - - Programming + - Infrastructure thumbnail: /images/2021/20210818b/thumbnail.png author: 市川浩暉 -lede: "TIGの市川浩暉です。先日、業務の合間を縫って少しづつ勉強を進めていた、AWS Certified Solutions Architect - Associate（AWS SAA）を受験し、合格することができました。今回は合格までの学習方法と試験を受けた感想を共有したいと思います。この記事がこれから受験する人の一助となれば幸いです。" +lede: "先日、業務の合間を縫って少しづつ勉強を進めていた、AWS Certified Solutions Architect - Associate（AWS SAA）を受験し、合格することができました。今回は合格までの学習方法と試験を受けた感想を共有したいと思います。この記事がこれから受験する人の一助となれば幸いです。" --- こんにちは、TIGの市川浩暉です。 diff --git "a/source/_posts/2021/20210825b_\346\234\200\351\253\230\343\201\256\346\214\201\343\201\241\346\255\251\343\201\215\343\202\255\343\203\274\343\203\234\343\203\274\343\203\211\350\200\203.md" "b/source/_posts/2021/20210825b_\346\234\200\351\253\230\343\201\256\346\214\201\343\201\241\346\255\251\343\201\215\343\202\255\343\203\274\343\203\234\343\203\274\343\203\211\350\200\203.md" index ecce97facd4d..8e38010ced85 100644 --- "a/source/_posts/2021/20210825b_\346\234\200\351\253\230\343\201\256\346\214\201\343\201\241\346\255\251\343\201\215\343\202\255\343\203\274\343\203\234\343\203\274\343\203\211\350\200\203.md" +++ "b/source/_posts/2021/20210825b_\346\234\200\351\253\230\343\201\256\346\214\201\343\201\241\346\255\251\343\201\215\343\202\255\343\203\274\343\203\234\343\203\274\343\203\211\350\200\203.md" @@ -7,7 +7,7 @@ tag: - リモートワーク - 電子工作 category: - - Culture + - IoT thumbnail: /images/2021/20210825b/thumbnail.jpg author: 大野朱理 lede: "フューチャー夏の自由研究連載2021の3日目です。はじめまして。TIGの大野です。2021年4月新卒入社です。夏の自由研究連載の2日目「[Sesame3にICカード施錠/解錠機能を実装してみた ~with Golang & Python~]」を投稿された宮永さんの同期です。" diff --git "a/source/_posts/2021/20210826a_MONET\343\203\236\343\203\274\343\202\261\343\203\203\343\203\210\343\203\227\343\203\254\343\202\244\343\202\271_\303\227_OSS\346\264\273\347\224\250\343\201\247\343\201\225\343\201\243\343\201\217\343\202\212\343\203\207\343\203\242\343\202\242\343\203\227\343\203\252\351\226\213\347\231\272.md" "b/source/_posts/2021/20210826a_MONET\343\203\236\343\203\274\343\202\261\343\203\203\343\203\210\343\203\227\343\203\254\343\202\244\343\202\271_\303\227_OSS\346\264\273\347\224\250\343\201\247\343\201\225\343\201\243\343\201\217\343\202\212\343\203\207\343\203\242\343\202\242\343\203\227\343\203\252\351\226\213\347\231\272.md" index 429a8bfbdd1b..c79fddd3162e 100644 --- "a/source/_posts/2021/20210826a_MONET\343\203\236\343\203\274\343\202\261\343\203\203\343\203\210\343\203\227\343\203\254\343\202\244\343\202\271_\303\227_OSS\346\264\273\347\224\250\343\201\247\343\201\225\343\201\243\343\201\217\343\202\212\343\203\207\343\203\242\343\202\242\343\203\227\343\203\252\351\226\213\347\231\272.md" +++ "b/source/_posts/2021/20210826a_MONET\343\203\236\343\203\274\343\202\261\343\203\203\343\203\210\343\203\227\343\203\254\343\202\244\343\202\271_\303\227_OSS\346\264\273\347\224\250\343\201\247\343\201\225\343\201\243\343\201\217\343\202\212\343\203\207\343\203\242\343\202\242\343\203\227\343\203\252\351\226\213\347\231\272.md" @@ -10,7 +10,7 @@ tag: - TypeScript - Vuetify category: - - Programming + - Frontend thumbnail: /images/2021/20210826a/thumbnail.gif author: kazuma-takeuchi lede: "MONET Technologies Inc. の竹内です。このたび、フューチャー技術ブログに寄稿させていただいています。今回は、弊社のMONETマーケットプレイス上のプロダクトを使って、MaaSアプリをイメージしたデモアプリを作ってみました。今回イメージしたデモアプリは「イベント会場へのマルチモーダル移動経路検索&予約&搭乗Webアプリ」です。" diff --git "a/source/_posts/2021/20210902a_Looker_\343\202\222\351\201\213\345\226\266\343\201\231\343\202\213\347\265\204\347\271\224\343\202\222\350\200\203\345\257\237\343\201\227\343\201\246\343\201\277\343\202\213.md" "b/source/_posts/2021/20210902a_Looker_\343\202\222\351\201\213\345\226\266\343\201\231\343\202\213\347\265\204\347\271\224\343\202\222\350\200\203\345\257\237\343\201\227\343\201\246\343\201\277\343\202\213.md" index ef557a97d446..efe1bf720be7 100644 --- "a/source/_posts/2021/20210902a_Looker_\343\202\222\351\201\213\345\226\266\343\201\231\343\202\213\347\265\204\347\271\224\343\202\222\350\200\203\345\257\237\343\201\227\343\201\246\343\201\277\343\202\213.md" +++ "b/source/_posts/2021/20210902a_Looker_\343\202\222\351\201\213\345\226\266\343\201\231\343\202\213\347\265\204\347\271\224\343\202\222\350\200\203\345\257\237\343\201\227\343\201\246\343\201\277\343\202\213.md" @@ -10,7 +10,7 @@ tag: - データガバナンス - データマネジメント category: - - Programming + - Management thumbnail: /images/2021/20210902a/thumbnail.png author: 西田好孝 lede: "フューチャー夏休みの自由研究連載2021の9回目です。業務で `GCP` のインフラの設計/構築/運用を担当しております。私が感じている『GCP の特徴』というと、Gartner の Magic Quadrant などでも毎回紹介されているデータ分析領域だと思っています。今回はGoogle社が買収したLookerという技術の簡単な紹介とそして、それを使うとなった場合、何が必要になるか？という事を考察してみようと思います。" diff --git "a/source/_posts/2021/20210908a_Redmine\343\201\250Gitlab\343\201\256\351\200\243\346\220\272\343\203\227\343\203\251\343\202\260\343\202\244\343\203\263\343\202\222\351\226\213\347\231\272\343\201\227\343\201\276\343\201\227\343\201\237\357\274\201.md" "b/source/_posts/2021/20210908a_Redmine\343\201\250Gitlab\343\201\256\351\200\243\346\220\272\343\203\227\343\203\251\343\202\260\343\202\244\343\203\263\343\202\222\351\226\213\347\231\272\343\201\227\343\201\276\343\201\227\343\201\237\357\274\201.md" index aa8f5293e8f6..0c912116e0a5 100644 --- "a/source/_posts/2021/20210908a_Redmine\343\201\250Gitlab\343\201\256\351\200\243\346\220\272\343\203\227\343\203\251\343\202\260\343\202\244\343\203\263\343\202\222\351\226\213\347\231\272\343\201\227\343\201\276\343\201\227\343\201\237\357\274\201.md" +++ "b/source/_posts/2021/20210908a_Redmine\343\201\250Gitlab\343\201\256\351\200\243\346\220\272\343\203\227\343\203\251\343\202\260\343\202\244\343\203\263\343\202\222\351\226\213\347\231\272\343\201\227\343\201\276\343\201\227\343\201\237\357\274\201.md" @@ -8,7 +8,7 @@ tag: - GitLab - コアテク category: - - Programming + - DevOps thumbnail: /images/2021/20210908a/thumbnail.png author: 高橋健 lede: "RedmineとGitLabリポジトリを連携するRedmine GitLab Adapter Pluginを開発しましたので紹介させていただきます。" diff --git "a/source/_posts/2021/20210924a_VPC\345\206\205\343\201\256Amazon_API_Gateway\343\202\222\343\202\244\343\203\263\343\202\277\343\203\274\343\203\215\343\203\203\343\203\210\343\202\252\343\203\274\343\203\220\343\203\274\343\201\247\347\226\216\351\200\232\347\242\272\350\252\215\343\201\231\343\202\213.md" "b/source/_posts/2021/20210924a_VPC\345\206\205\343\201\256Amazon_API_Gateway\343\202\222\343\202\244\343\203\263\343\202\277\343\203\274\343\203\215\343\203\203\343\203\210\343\202\252\343\203\274\343\203\220\343\203\274\343\201\247\347\226\216\351\200\232\347\242\272\350\252\215\343\201\231\343\202\213.md" index 11184538489b..3f5d755e5af4 100644 --- "a/source/_posts/2021/20210924a_VPC\345\206\205\343\201\256Amazon_API_Gateway\343\202\222\343\202\244\343\203\263\343\202\277\343\203\274\343\203\215\343\203\203\343\203\210\343\202\252\343\203\274\343\203\220\343\203\274\343\201\247\347\226\216\351\200\232\347\242\272\350\252\215\343\201\231\343\202\213.md" +++ "b/source/_posts/2021/20210924a_VPC\345\206\205\343\201\256Amazon_API_Gateway\343\202\222\343\202\244\343\203\263\343\202\277\343\203\274\343\203\215\343\203\203\343\203\210\343\202\252\343\203\274\343\203\220\343\203\274\343\201\247\347\226\216\351\200\232\347\242\272\350\252\215\343\201\231\343\202\213.md" @@ -8,7 +8,7 @@ tag: - Go - VPC category: - - Programming + - Infrastructure thumbnail: /images/2021/20210924a/thumbnail.png author: 真野隼記 lede: " Gateway+Lambda という構成でWebAPI開発を行う際、ちょっと便利に使える疎通方法をまとめます。API GatewayですがPublicなエンドポイントがあれば `curl`コマンドや`Postman`を用いての動作検証も容易だと思います。" diff --git "a/source/_posts/2021/20210927a_Redmine_Slack_Integration_Plugin\343\201\253\343\203\241\343\203\263\343\202\267\343\203\247\343\203\263\346\251\237\350\203\275\343\202\222\350\277\275\345\212\240\343\201\227\343\201\276\343\201\227\343\201\237\357\274\201.md" "b/source/_posts/2021/20210927a_Redmine_Slack_Integration_Plugin\343\201\253\343\203\241\343\203\263\343\202\267\343\203\247\343\203\263\346\251\237\350\203\275\343\202\222\350\277\275\345\212\240\343\201\227\343\201\276\343\201\227\343\201\237\357\274\201.md" index c6fc65b63ef9..07a907914152 100644 --- "a/source/_posts/2021/20210927a_Redmine_Slack_Integration_Plugin\343\201\253\343\203\241\343\203\263\343\202\267\343\203\247\343\203\263\346\251\237\350\203\275\343\202\222\350\277\275\345\212\240\343\201\227\343\201\276\343\201\227\343\201\237\357\274\201.md" +++ "b/source/_posts/2021/20210927a_Redmine_Slack_Integration_Plugin\343\201\253\343\203\241\343\203\263\343\202\267\343\203\247\343\203\263\346\251\237\350\203\275\343\202\222\350\277\275\345\212\240\343\201\227\343\201\276\343\201\227\343\201\237\357\274\201.md" @@ -8,10 +8,10 @@ tag: - OSS - コアテク category: - - Infrastructure + - DevOps thumbnail: /images/2021/20210927a/thumbnail.png author: 高橋健 -lede: "こんにちは、TIGコアテクノロジーユニットの高橋・小松です。Gitlabのマークはきつねではなくたぬきだったんですね...。今回はRedmine Slack Integration Pluginにメンション機能を追加したので紹介させていただきます。" +lede: "Gitlabのマークはきつねではなくたぬきだったんですね...。今回はRedmine Slack Integration Pluginにメンション機能を追加したので紹介させていただきます。" --- ## はじめに diff --git "a/source/_posts/2021/20211006a_AWS_Glue_Data_Catalog\343\201\247CSV\343\202\222\346\211\261\343\201\206.md" "b/source/_posts/2021/20211006a_AWS_Glue_Data_Catalog\343\201\247CSV\343\202\222\346\211\261\343\201\206.md" index 0c36adaefb63..9e6efae1790d 100644 --- "a/source/_posts/2021/20211006a_AWS_Glue_Data_Catalog\343\201\247CSV\343\202\222\346\211\261\343\201\206.md" +++ "b/source/_posts/2021/20211006a_AWS_Glue_Data_Catalog\343\201\247CSV\343\202\222\346\211\261\343\201\206.md" @@ -8,7 +8,7 @@ tag: - AWS - データカタログ category: - - Programming + - Infrastructure thumbnail: /images/2021/20211006a/thumbnail.png author: 山田勇一 lede: "PySparkで予定しておりましたが、PySpark関連として、Glueを題材にさせていただきます。Glueといっても大きく下記の３種類、処理系をいれると4種類に分かれると思っていますが、それぞれ全く別のプロダクトという理解をしています。" diff --git "a/source/_posts/2021/20211007b_pandas_1.0\344\273\245\351\231\215\343\201\247\343\201\256\345\244\211\346\233\264\347\202\271\343\202\222\344\270\200\351\203\250\347\264\271\344\273\213\343\201\227\343\201\276\343\201\231.md" "b/source/_posts/2021/20211007b_pandas_1.0\344\273\245\351\231\215\343\201\247\343\201\256\345\244\211\346\233\264\347\202\271\343\202\222\344\270\200\351\203\250\347\264\271\344\273\213\343\201\227\343\201\276\343\201\231.md" index 2b8a8b091f61..7c356b6d98f9 100644 --- "a/source/_posts/2021/20211007b_pandas_1.0\344\273\245\351\231\215\343\201\247\343\201\256\345\244\211\346\233\264\347\202\271\343\202\222\344\270\200\351\203\250\347\264\271\344\273\213\343\201\227\343\201\276\343\201\231.md" +++ "b/source/_posts/2021/20211007b_pandas_1.0\344\273\245\351\231\215\343\201\247\343\201\256\345\244\211\346\233\264\347\202\271\343\202\222\344\270\200\351\203\250\347\264\271\344\273\213\343\201\227\343\201\276\343\201\231.md" @@ -6,7 +6,7 @@ tag: - pandas - Python category: - - Programming + - DataScience thumbnail: /images/2021/20211007b/thumbnail.png author: 小橋昌明 lede: "SAIGの小橋昌明です。業務ではずっとPythonを書いています。Pythonを使ってデータ分析をする上で無くてはならないのがpandasです。リリースノートを見てみると、メジャーアップデートによる1.0.0 がリリースされたのが2020年の1月で、現時点での最新は1.3.3です。" diff --git "a/source/_posts/2021/20211018a_\343\203\225\343\203\245\343\203\274\343\203\201\343\203\243\343\203\274Engineer_Camp2021_\343\201\247\343\201\256\345\255\246\343\201\263.md" "b/source/_posts/2021/20211018a_\343\203\225\343\203\245\343\203\274\343\203\201\343\203\243\343\203\274Engineer_Camp2021_\343\201\247\343\201\256\345\255\246\343\201\263.md" index 4449b94d385a..f7efc1152d0f 100644 --- "a/source/_posts/2021/20211018a_\343\203\225\343\203\245\343\203\274\343\203\201\343\203\243\343\203\274Engineer_Camp2021_\343\201\247\343\201\256\345\255\246\343\201\263.md" +++ "b/source/_posts/2021/20211018a_\343\203\225\343\203\245\343\203\274\343\203\201\343\203\243\343\203\274Engineer_Camp2021_\343\201\247\343\201\256\345\255\246\343\201\263.md" @@ -7,10 +7,10 @@ tag: - インターン2021 - 工場 category: - - Programming + - IoT thumbnail: /images/2021/20211018a/thumbnail.png author: 森下俊平 -lede: "こんにちは。フューチャーの夏季インターンシップEngineer Camp 2021に参加した森下です。このインターンシップを通じて得た経験や学んだことをお話ししていきます。" +lede: "フューチャーの夏季インターンシップEngineer Camp 2021に参加した森下です。このインターンシップを通じて得た経験や学んだことをお話ししていきます。" --- # はじめに diff --git "a/source/_posts/2021/20211101a_\343\202\255\343\203\274\343\203\221\343\203\203\343\203\211\343\202\222\343\200\201\345\237\272\346\235\277\343\201\213\343\202\211\350\207\252\344\275\234\343\201\227\343\201\246\343\201\277\343\201\237.md" "b/source/_posts/2021/20211101a_\343\202\255\343\203\274\343\203\221\343\203\203\343\203\211\343\202\222\343\200\201\345\237\272\346\235\277\343\201\213\343\202\211\350\207\252\344\275\234\343\201\227\343\201\246\343\201\277\343\201\237.md" index ebfabc982ad2..fe4374f4906e 100644 --- "a/source/_posts/2021/20211101a_\343\202\255\343\203\274\343\203\221\343\203\203\343\203\211\343\202\222\343\200\201\345\237\272\346\235\277\343\201\213\343\202\211\350\207\252\344\275\234\343\201\227\343\201\246\343\201\277\343\201\237.md" +++ "b/source/_posts/2021/20211101a_\343\202\255\343\203\274\343\203\221\343\203\203\343\203\211\343\202\222\343\200\201\345\237\272\346\235\277\343\201\213\343\202\211\350\207\252\344\275\234\343\201\227\343\201\246\343\201\277\343\201\237.md" @@ -7,7 +7,7 @@ tag: - 電子工作 - KiCAD category: - - Programming + - IoT thumbnail: /images/2021/20211101a/thumbnail.png author: 井上圭 lede: "本ブログでは何度か自作キーボードの記事を書いていますが、基本的には「誰かが設計したものを組み立てる」物でした。最近まではある程度満足して使っていたのですが、もう少しこうだと（私は）使いやすいかもしれない、という点が色々出てきたので、キーボードを基板から作ろうと思い始めました。- 市販の自作キーボードは、キーアサインの変更は可能です- しかしながら、物理的な配置等も変えたい場合は、自作するしかないです" diff --git "a/source/_posts/2021/20211104a_Cheetah_Grid_\343\202\222_React\343\201\213\343\202\211\345\210\251\347\224\250\343\201\231\343\202\213\343\201\237\343\202\201\343\201\256\343\203\251\343\203\203\343\203\221\343\203\274\343\202\222\345\256\237\350\243\205\343\201\227\343\201\246\343\201\277\343\202\213.md" "b/source/_posts/2021/20211104a_Cheetah_Grid_\343\202\222_React\343\201\213\343\202\211\345\210\251\347\224\250\343\201\231\343\202\213\343\201\237\343\202\201\343\201\256\343\203\251\343\203\203\343\203\221\343\203\274\343\202\222\345\256\237\350\243\205\343\201\227\343\201\246\343\201\277\343\202\213.md" index 4fd1da9f852d..5f14cedae894 100644 --- "a/source/_posts/2021/20211104a_Cheetah_Grid_\343\202\222_React\343\201\213\343\202\211\345\210\251\347\224\250\343\201\231\343\202\213\343\201\237\343\202\201\343\201\256\343\203\251\343\203\203\343\203\221\343\203\274\343\202\222\345\256\237\350\243\205\343\201\227\343\201\246\343\201\277\343\202\213.md" +++ "b/source/_posts/2021/20211104a_Cheetah_Grid_\343\202\222_React\343\201\213\343\202\211\345\210\251\347\224\250\343\201\231\343\202\213\343\201\237\343\202\201\343\201\256\343\203\251\343\203\203\343\203\221\343\203\274\343\202\222\345\256\237\350\243\205\343\201\227\343\201\246\343\201\277\343\202\213.md" @@ -3,13 +3,12 @@ title: "Cheetah Grid を Reactから利用するためのラッパーを実装 date: 2021/11/04 00:00:00 postid: a tag: - - フロントエンド - TypeScript - React - CheetahGrid - OSS category: - - Programming + - Frontend thumbnail: /images/2021/20211104a/thumbnail.png author: 澁川喜規 lede: "秋のブログ週間連載の6本目です。FutureにはCheetah Gridという最速のウェブフロントエンド用のテーブルコンポーネントがあります。会社のお仕事コードは基本的にVue.jsが採用されることが多く、Cheetah GridもVue.js版のコンポーネントも提供されています。僕はなぜかReact案件が多くて慣れていることもあり、ちょっとしたコードもReactで書きたいと思っています。ちょっとしたツールを実装する上でかっこよくて性能が良いテーブルコンポーネントも欲しいのでCheetah GridのReact版が欲しいなとずっと思っていたので、今回作ってみました。" diff --git "a/source/_posts/2021/20211116a_Go\350\250\200\350\252\236\343\201\253\343\202\210\343\202\213CFB8\346\232\227\345\217\267\345\214\226.md" "b/source/_posts/2021/20211116a_Go\350\250\200\350\252\236\343\201\253\343\202\210\343\202\213CFB8\346\232\227\345\217\267\345\214\226.md" index eecdc018e332..c02466becfca 100644 --- "a/source/_posts/2021/20211116a_Go\350\250\200\350\252\236\343\201\253\343\202\210\343\202\213CFB8\346\232\227\345\217\267\345\214\226.md" +++ "b/source/_posts/2021/20211116a_Go\350\250\200\350\252\236\343\201\253\343\202\210\343\202\213CFB8\346\232\227\345\217\267\345\214\226.md" @@ -7,7 +7,7 @@ tag: - 暗号 - CFB category: - - Programming + - Security thumbnail: /images/2021/20211116a/thumbnail.png author: 八巻達紀 lede: "プロジェクトで利用したデータ取得のAPIで、リクエストパラメータを暗号化利用モード「CFB8」で暗号化する必要がありました。この暗号化利用モード「CFB8」をGo言語で実装する際に躓いたため、実装内容を備忘として記載したいと思います。" diff --git "a/source/_posts/2021/20211124a_JS\343\203\254\343\202\271Bootstrap\343\201\252daisyUI\343\201\256\347\247\230\345\257\206.md" "b/source/_posts/2021/20211124a_JS\343\203\254\343\202\271Bootstrap\343\201\252daisyUI\343\201\256\347\247\230\345\257\206.md" index c43830985c6d..dd299310315c 100644 --- "a/source/_posts/2021/20211124a_JS\343\203\254\343\202\271Bootstrap\343\201\252daisyUI\343\201\256\347\247\230\345\257\206.md" +++ "b/source/_posts/2021/20211124a_JS\343\203\254\343\202\271Bootstrap\343\201\252daisyUI\343\201\256\347\247\230\345\257\206.md" @@ -6,9 +6,8 @@ tag: - CSS - TailwindCSS - daisyUI - - フロントエンド category: - - Programming + - Frontend thumbnail: /images/2021/20211124a/thumbnail.png author: 澁川喜規 lede: "最近、趣味開発でフロントエンドをいじる場合とか、Reactの技術サポートで手っ取り早く使い捨ての環境を作る場合は次の組み合わせで作っています。[Vite.jsでReact + TypeScriptプロジェクト作成。Tailwind CSS。これにESLintとPrettierを入れて完了です。。" diff --git "a/source/_posts/2021/20211203a_Redmine_single_mail\343\203\227\343\203\251\343\202\260\343\202\244\343\203\263\343\202\222\351\226\213\347\231\272\343\201\227\343\201\276\343\201\227\343\201\237\357\274\201.md" "b/source/_posts/2021/20211203a_Redmine_single_mail\343\203\227\343\203\251\343\202\260\343\202\244\343\203\263\343\202\222\351\226\213\347\231\272\343\201\227\343\201\276\343\201\227\343\201\237\357\274\201.md" index ed5d22911385..0ef6dd3ad0c8 100644 --- "a/source/_posts/2021/20211203a_Redmine_single_mail\343\203\227\343\203\251\343\202\260\343\202\244\343\203\263\343\202\222\351\226\213\347\231\272\343\201\227\343\201\276\343\201\227\343\201\237\357\274\201.md" +++ "b/source/_posts/2021/20211203a_Redmine_single_mail\343\203\227\343\203\251\343\202\260\343\202\244\343\203\263\343\202\222\351\226\213\347\231\272\343\201\227\343\201\276\343\201\227\343\201\237\357\274\201.md" @@ -8,7 +8,7 @@ tag: - Redmine - メール category: - - Infrastructure + - DevOps thumbnail: /images/2021/20211203a/thumbnail.png author: 高橋健 lede: "Redmine4系からメール送信仕様が変わっていることが判明しました。そこで3系と同等のメール送信方式となるようなRedmine_single_mailプラグインを開発しましたので紹介させていただきます。" diff --git "a/source/_posts/2021/20211207a_\347\224\273\351\235\242\343\201\256\350\247\243\345\203\217\345\272\246\343\201\256\350\246\201\344\273\266\345\256\232\347\276\251\343\201\256\350\251\261.md" "b/source/_posts/2021/20211207a_\347\224\273\351\235\242\343\201\256\350\247\243\345\203\217\345\272\246\343\201\256\350\246\201\344\273\266\345\256\232\347\276\251\343\201\256\350\251\261.md" index b76571347520..171320188142 100644 --- "a/source/_posts/2021/20211207a_\347\224\273\351\235\242\343\201\256\350\247\243\345\203\217\345\272\246\343\201\256\350\246\201\344\273\266\345\256\232\347\276\251\343\201\256\350\251\261.md" +++ "b/source/_posts/2021/20211207a_\347\224\273\351\235\242\343\201\256\350\247\243\345\203\217\345\272\246\343\201\256\350\246\201\344\273\266\345\256\232\347\276\251\343\201\256\350\251\261.md" @@ -5,10 +5,9 @@ postid: a tag: - 要件定義 - UI/UX - - フロントエンド - Flutter category: - - Mobile + - Frontend thumbnail: /images/2021/20211207a/thumbnail.png author: 澁川喜規 lede: "最近、企業内システムのウェブサービス開発や、B2B2B案件とかでウェブの画面を作るケース、Flutterでスマートフォンアプリを開発するときに、画面の要件をどうしましょう、という話が出てくることが多く、毎回似たような説明をしている気がするので、時間節約のためにまとめておきます。単にパソコンやモニターのカタログスペックを持ってくるだけじゃだめだということがお分かりいただければ大丈夫です。AppleがRetinaを世に出すまでは..." diff --git "a/source/_posts/2021/20211218a__Software_Design_2022\345\271\2641\346\234\210\345\217\267\343\201\253\347\237\255\346\234\237\351\200\243\350\274\211\343\200\214Cypress\343\201\247\344\275\234\343\202\213\346\266\210\350\200\227\343\201\227\343\201\252\343\201\204E2E\343\203\206\343\202\271\343\203\210\347\222\260\345\242\203\343\200\215\343\202\222\345\257\204\347\250\277\343\201\227\343\201\276\343\201\227\343\201\237.md" "b/source/_posts/2021/20211218a__Software_Design_2022\345\271\2641\346\234\210\345\217\267\343\201\253\347\237\255\346\234\237\351\200\243\350\274\211\343\200\214Cypress\343\201\247\344\275\234\343\202\213\346\266\210\350\200\227\343\201\227\343\201\252\343\201\204E2E\343\203\206\343\202\271\343\203\210\347\222\260\345\242\203\343\200\215\343\202\222\345\257\204\347\250\277\343\201\227\343\201\276\343\201\227\343\201\237.md" index 01f9dbc3c6ff..e63ddabbd82a 100644 --- "a/source/_posts/2021/20211218a__Software_Design_2022\345\271\2641\346\234\210\345\217\267\343\201\253\347\237\255\346\234\237\351\200\243\350\274\211\343\200\214Cypress\343\201\247\344\275\234\343\202\213\346\266\210\350\200\227\343\201\227\343\201\252\343\201\204E2E\343\203\206\343\202\271\343\203\210\347\222\260\345\242\203\343\200\215\343\202\222\345\257\204\347\250\277\343\201\227\343\201\276\343\201\227\343\201\237.md" +++ "b/source/_posts/2021/20211218a__Software_Design_2022\345\271\2641\346\234\210\345\217\267\343\201\253\347\237\255\346\234\237\351\200\243\350\274\211\343\200\214Cypress\343\201\247\344\275\234\343\202\213\346\266\210\350\200\227\343\201\227\343\201\252\343\201\204E2E\343\203\206\343\202\271\343\203\210\347\222\260\345\242\203\343\200\215\343\202\222\345\257\204\347\250\277\343\201\227\343\201\276\343\201\227\343\201\237.md" @@ -7,7 +7,7 @@ tag: - SoftwareDesign - 出版 category: - - Programming + - Frontend thumbnail: /images/2021/20211218a/thumbnail.png author: 木戸俊輔 lede: "[Software Design 2022年1月号]に短期連載「Cypressで作る消耗しないE2Eテスト環境」を寄稿しました！" diff --git "a/source/_posts/2022/20220111a_Step_Functions_\343\202\222\345\210\251\347\224\250\343\201\227\343\201\246\346\204\237\343\201\230\343\201\237_Airflow_\343\201\250\343\201\256\346\257\224\350\274\203.md" "b/source/_posts/2022/20220111a_Step_Functions_\343\202\222\345\210\251\347\224\250\343\201\227\343\201\246\346\204\237\343\201\230\343\201\237_Airflow_\343\201\250\343\201\256\346\257\224\350\274\203.md" index d5adcfa7d055..a429a38b7404 100644 --- "a/source/_posts/2022/20220111a_Step_Functions_\343\202\222\345\210\251\347\224\250\343\201\227\343\201\246\346\204\237\343\201\230\343\201\237_Airflow_\343\201\250\343\201\256\346\257\224\350\274\203.md" +++ "b/source/_posts/2022/20220111a_Step_Functions_\343\202\222\345\210\251\347\224\250\343\201\227\343\201\246\346\204\237\343\201\230\343\201\237_Airflow_\343\201\250\343\201\256\346\257\224\350\274\203.md" @@ -8,7 +8,7 @@ tag: - StepFunctions - Airflow category: - - Programming + - Infrastructure thumbnail: /images/2022/20220111a/thumbnail.png author: 多賀聡一朗 lede: "TIG 所属の多賀です。AWS 上でのワークフロー構築のため、Step Functions を直近で導入しました。 " diff --git "a/source/_posts/2022/20220119a_DatoCMS\343\201\247\343\203\235\343\203\274\343\203\210\343\203\225\343\202\251\343\203\252\343\202\252\343\202\222\343\202\265\343\202\257\343\203\203\343\201\250\343\201\244\343\201\217\343\202\213.md" "b/source/_posts/2022/20220119a_DatoCMS\343\201\247\343\203\235\343\203\274\343\203\210\343\203\225\343\202\251\343\203\252\343\202\252\343\202\222\343\202\265\343\202\257\343\203\203\343\201\250\343\201\244\343\201\217\343\202\213.md" index 33c37d4e42f0..0ce1f4ae1d97 100644 --- "a/source/_posts/2022/20220119a_DatoCMS\343\201\247\343\203\235\343\203\274\343\203\210\343\203\225\343\202\251\343\203\252\343\202\252\343\202\222\343\202\265\343\202\257\343\203\203\343\201\250\343\201\244\343\201\217\343\202\213.md" +++ "b/source/_posts/2022/20220119a_DatoCMS\343\201\247\343\203\235\343\203\274\343\203\210\343\203\225\343\202\251\343\203\252\343\202\252\343\202\222\343\202\265\343\202\257\343\203\203\343\201\250\343\201\244\343\201\217\343\202\213.md" @@ -7,9 +7,8 @@ tag: - HeadlessCMS - CMS - Vue.js - - フロントエンド category: - - Programming + - Frontend thumbnail: /images/2022/20220119a/thumbnail.png author: 宮永崇史 lede: "Headless CMSサービスであるDatoCMSをつかってポートフォリオをサクッと作成する方法をご紹介します" diff --git "a/source/_posts/2022/20220207a_\343\202\252\343\203\263\343\203\251\343\202\244\343\203\263\345\213\211\345\274\267\344\274\232\343\201\256\347\231\272\350\241\250\351\240\206\343\202\222\346\261\272\343\202\201\343\202\213\343\202\265\343\203\274\343\203\223\343\202\271\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" "b/source/_posts/2022/20220207a_\343\202\252\343\203\263\343\203\251\343\202\244\343\203\263\345\213\211\345\274\267\344\274\232\343\201\256\347\231\272\350\241\250\351\240\206\343\202\222\346\261\272\343\202\201\343\202\213\343\202\265\343\203\274\343\203\223\343\202\271\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" index af5f703e211e..d88ead867635 100644 --- "a/source/_posts/2022/20220207a_\343\202\252\343\203\263\343\203\251\343\202\244\343\203\263\345\213\211\345\274\267\344\274\232\343\201\256\347\231\272\350\241\250\351\240\206\343\202\222\346\261\272\343\202\201\343\202\213\343\202\265\343\203\274\343\203\223\343\202\271\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" +++ "b/source/_posts/2022/20220207a_\343\202\252\343\203\263\343\203\251\343\202\244\343\203\263\345\213\211\345\274\267\344\274\232\343\201\256\347\231\272\350\241\250\351\240\206\343\202\222\346\261\272\343\202\201\343\202\213\343\202\265\343\203\274\343\203\223\343\202\271\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" @@ -8,9 +8,8 @@ tag: - 勉強会 - 運営 - OSS - - フロントエンド category: - - Programming + - Frontend thumbnail: /images/2022/20220207a/thumbnail.png author: 澁川喜規 lede: "オンライン勉強会をする上で、ちょっと悩むポイントは発表順を決めることです。meetなどで表示されるユーザー一覧は、人によって表示順序が異なるため「画面上の右上の人から順番に」という技が使えなかったりします。" diff --git "a/source/_posts/2022/20220406a_\343\203\227\343\203\255\343\203\210\343\202\277\343\202\244\343\203\224\343\203\263\343\202\260\343\201\256\345\213\247\343\202\201.md" "b/source/_posts/2022/20220406a_\343\203\227\343\203\255\343\203\210\343\202\277\343\202\244\343\203\224\343\203\263\343\202\260\343\201\256\345\213\247\343\202\201.md" index efb68969738b..42aaf543e6b3 100644 --- "a/source/_posts/2022/20220406a_\343\203\227\343\203\255\343\203\210\343\202\277\343\202\244\343\203\224\343\203\263\343\202\260\343\201\256\345\213\247\343\202\201.md" +++ "b/source/_posts/2022/20220406a_\343\203\227\343\203\255\343\203\210\343\202\277\343\202\244\343\203\224\343\203\263\343\202\260\343\201\256\345\213\247\343\202\201.md" @@ -10,10 +10,10 @@ tag: - UIFlow - microPython category: - - Programming + - IoT thumbnail: /images/2022/20220406a/thumbnail.png author: 井上圭 -lede: "こんにちわ。フューチャーの井上です。M5Stackというマイコンモジュールを使って、「バイクの各種情報を簡単に表示できたらいいな」という思い付きを形にしていく過程を記事にしようと思います。" +lede: "M5Stackというマイコンモジュールを使って、「バイクの各種情報を簡単に表示できたらいいな」という思い付きを形にしていく過程を記事にしようと思います。" --- [電子工作/IoT連載](/articles/20220404a/) の3本目です。 diff --git "a/source/_posts/2022/20220415a_SvelteKit\343\201\256\343\203\207\343\203\225\343\202\251\343\203\253\343\203\210\343\203\227\343\203\255\343\202\270\343\202\247\343\202\257\343\203\210\343\201\213\343\202\211\345\255\246\343\201\266.md" "b/source/_posts/2022/20220415a_SvelteKit\343\201\256\343\203\207\343\203\225\343\202\251\343\203\253\343\203\210\343\203\227\343\203\255\343\202\270\343\202\247\343\202\257\343\203\210\343\201\213\343\202\211\345\255\246\343\201\266.md" index 2c49687f088b..25951d87c7c1 100644 --- "a/source/_posts/2022/20220415a_SvelteKit\343\201\256\343\203\207\343\203\225\343\202\251\343\203\253\343\203\210\343\203\227\343\203\255\343\202\270\343\202\247\343\202\257\343\203\210\343\201\213\343\202\211\345\255\246\343\201\266.md" +++ "b/source/_posts/2022/20220415a_SvelteKit\343\201\256\343\203\207\343\203\225\343\202\251\343\203\253\343\203\210\343\203\227\343\203\255\343\202\270\343\202\247\343\202\257\343\203\210\343\201\213\343\202\211\345\255\246\343\201\266.md" @@ -6,7 +6,7 @@ tag: - Svelte - SvelteKit category: - - Programming + - Frontend thumbnail: /images/2022/20220415a/thumbnail.png author: 澁川喜規 lede: "ウェブアプリケーションフレームワークとして最近注目度が少しずつ上がっているのがSvelteです。以前、Svelteをちょびっとサンプルを触ってみた感じ、コードの雰囲気はscript setup版のVue 3っぽいなー、という感じです。あとはプロパティ入力のあるコンポーネントでHTMLを生成するという基本構成はReactもAngularもみんなそうなので、今時のウェブフロントエンドのフレームワークを触ったことがあれば難しくはない気がします。1コンポーネントでおさまる範囲では[ちょっと前に]かんたんなアプリの試作をしてみましたが、じゃあ、一本分のアプリを作るときはどうなんだ、ということでSvelteKitでプロジェクトを新規で作ってみたけど、いろいろな未知の要素がでてきて、これはどうなんだ？というのをドキュメントから探す、という学び方もまあ悪くないな、ということでブログにしてみました。" diff --git "a/source/_posts/2022/20220606a_RDS\343\201\256\350\207\252\345\213\225\345\206\215\350\265\267\345\213\225\343\201\253\343\202\210\343\202\213\343\202\244\343\203\263\343\203\225\343\203\251\343\202\263\343\202\271\343\203\210\343\201\256\346\202\262\345\212\207.md" "b/source/_posts/2022/20220606a_RDS\343\201\256\350\207\252\345\213\225\345\206\215\350\265\267\345\213\225\343\201\253\343\202\210\343\202\213\343\202\244\343\203\263\343\203\225\343\203\251\343\202\263\343\202\271\343\203\210\343\201\256\346\202\262\345\212\207.md" index cafbc56e17d8..ad66438e9dd0 100644 --- "a/source/_posts/2022/20220606a_RDS\343\201\256\350\207\252\345\213\225\345\206\215\350\265\267\345\213\225\343\201\253\343\202\210\343\202\213\343\202\244\343\203\263\343\203\225\343\203\251\343\202\263\343\202\271\343\203\210\343\201\256\346\202\262\345\212\207.md" +++ "b/source/_posts/2022/20220606a_RDS\343\201\256\350\207\252\345\213\225\345\206\215\350\265\267\345\213\225\343\201\253\343\202\210\343\202\213\343\202\244\343\203\263\343\203\225\343\203\251\343\202\263\343\202\271\343\203\210\343\201\256\346\202\262\345\212\207.md" @@ -8,7 +8,7 @@ tag: - 失敗談 - コスト削減 category: - - Infrastructure + - DB thumbnail: /images/2022/20220606a/thumbnail.jpg author: 藤井亮佑 lede: "この記事ではクラウドインフラにはつきものの、インフラコストについての失敗談をご紹介します。ぜひご一読いただき、私の屍を乗り越えていく事で、悲劇の発生を未然に防いでいただければと思います。" diff --git "a/source/_posts/2022/20220721a_Redis\343\201\256\343\202\270\343\202\252\343\203\241\343\203\210\343\203\252\346\251\237\350\203\275.md" "b/source/_posts/2022/20220721a_Redis\343\201\256\343\202\270\343\202\252\343\203\241\343\203\210\343\203\252\346\251\237\350\203\275.md" index 5631b000012b..b119d47c5b96 100644 --- "a/source/_posts/2022/20220721a_Redis\343\201\256\343\202\270\343\202\252\343\203\241\343\203\210\343\203\252\346\251\237\350\203\275.md" +++ "b/source/_posts/2022/20220721a_Redis\343\201\256\343\202\270\343\202\252\343\203\241\343\203\210\343\203\252\346\251\237\350\203\275.md" @@ -6,7 +6,7 @@ tag: - Redis - ジオメトリ category: - - Infrastructure + - DB thumbnail: /images/2022/20220721a/thumbnail.png author: 澁川喜規 lede: "Quad-Treeみたいなゲームでよくある座標系を収めるデータ構造を使って、近くのメンバーを探す機能とかを作ろうと思っていましたが、ふと「座標系をそのまま格納して検索できるデータベースとかありそうだな」と思って調べたところRedisがヒットして横道にそれてしまったのでそのまま横道を突き進んでみました。Redisは[2010年ぐらいに有志でドキュメント翻訳したり]したりして、チョットワカル程度でしたが、久々にドキュメントを見ていたら座標情報を保持したり検索したりするコマンドが増えていました。その辺りを少し調べてみました。" diff --git "a/source/_posts/2022/20220802a_Go1.19_encoding\357\274\217csv_\343\201\256\343\202\242\343\203\203\343\203\227\343\203\207\343\203\274\343\203\210.md" "b/source/_posts/2022/20220802a_Go1.19_encoding\357\274\217csv_\343\201\256\343\202\242\343\203\203\343\203\227\343\203\207\343\203\274\343\203\210.md" index 670280647707..367b4090d1d3 100644 --- "a/source/_posts/2022/20220802a_Go1.19_encoding\357\274\217csv_\343\201\256\343\202\242\343\203\203\343\203\227\343\203\207\343\203\274\343\203\210.md" +++ "b/source/_posts/2022/20220802a_Go1.19_encoding\357\274\217csv_\343\201\256\343\202\242\343\203\203\343\203\227\343\203\207\343\203\274\343\203\210.md" @@ -6,6 +6,7 @@ tag: - Go1.19 - CSV - Go + - encoding/csv category: - Programming thumbnail: /images/2022/20220802a/thumbnail.png diff --git "a/source/_posts/2022/20220816a_Next.js\345\205\254\345\274\217\343\201\256MDX\343\203\227\343\203\251\343\202\260\343\202\244\343\203\263\343\201\247\343\200\201Markdown\343\201\247\343\203\232\343\203\274\343\202\270\343\202\222\344\275\234\343\202\213\346\251\237\350\203\275\343\202\222\350\251\246\343\201\227\343\201\246\343\201\277\343\201\237.md" "b/source/_posts/2022/20220816a_Next.js\345\205\254\345\274\217\343\201\256MDX\343\203\227\343\203\251\343\202\260\343\202\244\343\203\263\343\201\247\343\200\201Markdown\343\201\247\343\203\232\343\203\274\343\202\270\343\202\222\344\275\234\343\202\213\346\251\237\350\203\275\343\202\222\350\251\246\343\201\227\343\201\246\343\201\277\343\201\237.md" index 272025c392a7..5f0094775e85 100644 --- "a/source/_posts/2022/20220816a_Next.js\345\205\254\345\274\217\343\201\256MDX\343\203\227\343\203\251\343\202\260\343\202\244\343\203\263\343\201\247\343\200\201Markdown\343\201\247\343\203\232\343\203\274\343\202\270\343\202\222\344\275\234\343\202\213\346\251\237\350\203\275\343\202\222\350\251\246\343\201\227\343\201\246\343\201\277\343\201\237.md" +++ "b/source/_posts/2022/20220816a_Next.js\345\205\254\345\274\217\343\201\256MDX\343\203\227\343\203\251\343\202\260\343\202\244\343\203\263\343\201\247\343\200\201Markdown\343\201\247\343\203\232\343\203\274\343\202\270\343\202\222\344\275\234\343\202\213\346\251\237\350\203\275\343\202\222\350\251\246\343\201\227\343\201\246\343\201\277\343\201\237.md" @@ -6,9 +6,8 @@ tag: - Next.js - Markdown - MDX - - フロントエンド category: - - Programming + - Frontend thumbnail: /images/2022/20220816a/thumbnail.png author: 澁川喜規 lede: "お客様と一緒にNext.jsのドキュメントの輪読会をやっているのですが、その中で初めて知った機能がMDXというマークダウンでページを作成する機能です。https://nextjs.org/docs/advanced-features/using-mdx利用規約とか、プライバシーポリシーのページ、ヘルプページの作成とか、Reactコンポーネントも表示できるので、Storybookがわりのコンポーネントカタログを作るのに便利そうという話になったので、ちょっと試してみました。" diff --git "a/source/_posts/2022/20220819a_gRPC\343\201\214\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\351\200\232\344\277\241\343\201\256\347\254\254\344\270\200\343\201\256\351\201\270\346\212\236\350\202\242\343\201\253\343\201\252\343\202\213\346\231\202\344\273\243\343\201\214\343\202\204\343\201\243\343\201\246\343\201\215\343\201\237\343\201\213\343\202\202\357\274\237.md" "b/source/_posts/2022/20220819a_gRPC\343\201\214\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\351\200\232\344\277\241\343\201\256\347\254\254\344\270\200\343\201\256\351\201\270\346\212\236\350\202\242\343\201\253\343\201\252\343\202\213\346\231\202\344\273\243\343\201\214\343\202\204\343\201\243\343\201\246\343\201\215\343\201\237\343\201\213\343\202\202\357\274\237.md" index 09c8e63c62a8..16cabcd42305 100644 --- "a/source/_posts/2022/20220819a_gRPC\343\201\214\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\351\200\232\344\277\241\343\201\256\347\254\254\344\270\200\343\201\256\351\201\270\346\212\236\350\202\242\343\201\253\343\201\252\343\202\213\346\231\202\344\273\243\343\201\214\343\202\204\343\201\243\343\201\246\343\201\215\343\201\237\343\201\213\343\202\202\357\274\237.md" +++ "b/source/_posts/2022/20220819a_gRPC\343\201\214\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\351\200\232\344\277\241\343\201\256\347\254\254\344\270\200\343\201\256\351\201\270\346\212\236\350\202\242\343\201\253\343\201\252\343\202\213\346\231\202\344\273\243\343\201\214\343\202\204\343\201\243\343\201\246\343\201\215\343\201\237\343\201\213\343\202\202\357\274\237.md" @@ -3,11 +3,10 @@ title: "gRPCがフロントエンド通信の第一の選択肢になる時代 date: 2022/08/19 00:00:00 postid: a tag: - - フロントエンド - gRPC - Connect category: - - Programming + - Frontend thumbnail: /images/2022/20220819a/thumbnail.png author: 澁川喜規 lede: "サービス間通信とIDL（インタフェース記述言語）連載の中でご紹介したgRPCのGo実装の新星、Connectのアップデートについて紹介します。Go 1.19が出たらconnect-goは1.0にして以後後方互換性を守るよ、connect-webを出すよという2点です。" diff --git "a/source/_posts/2022/20220823a_Quest2\343\201\256\343\203\217\343\203\263\343\203\211\343\203\210\343\203\251\343\203\203\343\202\255\343\203\263\343\202\260\343\201\247VR\343\203\206\343\203\253\343\203\237\343\203\263\343\202\267\343\203\237\343\203\245\343\203\254\343\203\274\343\202\277\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" "b/source/_posts/2022/20220823a_Quest2\343\201\256\343\203\217\343\203\263\343\203\211\343\203\210\343\203\251\343\203\203\343\202\255\343\203\263\343\202\260\343\201\247VR\343\203\206\343\203\253\343\203\237\343\203\263\343\202\267\343\203\237\343\203\245\343\203\254\343\203\274\343\202\277\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" index e6f86e7cb069..7662934d59b4 100644 --- "a/source/_posts/2022/20220823a_Quest2\343\201\256\343\203\217\343\203\263\343\203\211\343\203\210\343\203\251\343\203\203\343\202\255\343\203\263\343\202\260\343\201\247VR\343\203\206\343\203\253\343\203\237\343\203\263\343\202\267\343\203\237\343\203\245\343\203\254\343\203\274\343\202\277\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" +++ "b/source/_posts/2022/20220823a_Quest2\343\201\256\343\203\217\343\203\263\343\203\211\343\203\210\343\203\251\343\203\203\343\202\255\343\203\263\343\202\260\343\201\247VR\343\203\206\343\203\253\343\203\237\343\203\263\343\202\267\343\203\237\343\203\245\343\203\254\343\203\274\343\202\277\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" @@ -4,7 +4,6 @@ date: 2022/08/23 00:00:00 postid: a tag: - Unity - - VR - テルミン - ハンドトラッキング category: diff --git "a/source/_posts/2022/20220825a_\343\200\214\346\245\255\345\213\231\343\202\222\351\200\232\343\201\230\343\201\246\345\255\246\343\201\266\343\200\215vs\343\200\214\346\245\255\345\213\231\345\244\226\343\201\247\345\255\246\343\201\266\343\200\215Vue.js\343\201\247\344\272\272\346\260\227\346\233\262\343\203\251\343\203\263\343\202\255\343\203\263\343\202\260\343\202\222\345\275\223\343\201\246\343\202\213Web\343\202\242\343\203\227\343\203\252\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" "b/source/_posts/2022/20220825a_\343\200\214\346\245\255\345\213\231\343\202\222\351\200\232\343\201\230\343\201\246\345\255\246\343\201\266\343\200\215vs\343\200\214\346\245\255\345\213\231\345\244\226\343\201\247\345\255\246\343\201\266\343\200\215Vue.js\343\201\247\344\272\272\346\260\227\346\233\262\343\203\251\343\203\263\343\202\255\343\203\263\343\202\260\343\202\222\345\275\223\343\201\246\343\202\213Web\343\202\242\343\203\227\343\203\252\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" index 8ed7549acdd9..290a384d49d9 100644 --- "a/source/_posts/2022/20220825a_\343\200\214\346\245\255\345\213\231\343\202\222\351\200\232\343\201\230\343\201\246\345\255\246\343\201\266\343\200\215vs\343\200\214\346\245\255\345\213\231\345\244\226\343\201\247\345\255\246\343\201\266\343\200\215Vue.js\343\201\247\344\272\272\346\260\227\346\233\262\343\203\251\343\203\263\343\202\255\343\203\263\343\202\260\343\202\222\345\275\223\343\201\246\343\202\213Web\343\202\242\343\203\227\343\203\252\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" +++ "b/source/_posts/2022/20220825a_\343\200\214\346\245\255\345\213\231\343\202\222\351\200\232\343\201\230\343\201\246\345\255\246\343\201\266\343\200\215vs\343\200\214\346\245\255\345\213\231\345\244\226\343\201\247\345\255\246\343\201\266\343\200\215Vue.js\343\201\247\344\272\272\346\260\227\346\233\262\343\203\251\343\203\263\343\202\255\343\203\263\343\202\260\343\202\222\345\275\223\343\201\246\343\202\213Web\343\202\242\343\203\227\343\203\252\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" @@ -7,7 +7,7 @@ tag: - TypeScript - Vuetify category: - - Programming + - Frontend thumbnail: /images/2022/20220825a/thumbnail.gif author: 佐々木駿 lede: "フューチャー夏休みの自由研究連載の3本目です。はじめまして。TIG DXユニットの佐々木です。2022年4月に新卒入社し、7月からプロジェクトに参画しています。未経験の技術が採用されている開発にも携わっているのですが、技術のキャッチアップ方法には試行錯誤の毎日です...!!" diff --git "a/source/_posts/2022/20220826a_React_+_Go\343\201\247\347\260\241\347\264\240\343\201\252\346\216\262\347\244\272\346\235\277\343\202\242\343\203\227\343\203\252\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" "b/source/_posts/2022/20220826a_React_+_Go\343\201\247\347\260\241\347\264\240\343\201\252\346\216\262\347\244\272\346\235\277\343\202\242\343\203\227\343\203\252\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" index f787c5cb7d99..ae8c63dc2e05 100644 --- "a/source/_posts/2022/20220826a_React_+_Go\343\201\247\347\260\241\347\264\240\343\201\252\346\216\262\347\244\272\346\235\277\343\202\242\343\203\227\343\203\252\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" +++ "b/source/_posts/2022/20220826a_React_+_Go\343\201\247\347\260\241\347\264\240\343\201\252\346\216\262\347\244\272\346\235\277\343\202\242\343\203\227\343\203\252\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" @@ -6,7 +6,7 @@ tag: - React - TypeScript category: - - Programming + - Frontend thumbnail: /images/2022/20220826a/thumbnail.png author: 藤戸四恩 lede: "夏の自由研究ブログ連載2022の 5日目の記事です。今回は勉強中のReact、TypeScript、Goを使って掲示板アプリを作りました。" diff --git "a/source/_posts/2022/20220913a_\346\235\261\344\272\254Node\345\255\246\345\234\22240\346\231\202\351\231\220\347\233\256\343\201\247\350\251\261\343\202\222\343\201\227\343\201\246\343\201\215\343\201\276\343\201\227\343\201\237.md" "b/source/_posts/2022/20220913a_\346\235\261\344\272\254Node\345\255\246\345\234\22240\346\231\202\351\231\220\347\233\256\343\201\247\350\251\261\343\202\222\343\201\227\343\201\246\343\201\215\343\201\276\343\201\227\343\201\237.md" index 1adb7c2d5465..21ec81b71985 100644 --- "a/source/_posts/2022/20220913a_\346\235\261\344\272\254Node\345\255\246\345\234\22240\346\231\202\351\231\220\347\233\256\343\201\247\350\251\261\343\202\222\343\201\227\343\201\246\343\201\215\343\201\276\343\201\227\343\201\237.md" +++ "b/source/_posts/2022/20220913a_\346\235\261\344\272\254Node\345\255\246\345\234\22240\346\231\202\351\231\220\347\233\256\343\201\247\350\251\261\343\202\222\343\201\227\343\201\246\343\201\215\343\201\276\343\201\227\343\201\237.md" @@ -7,9 +7,8 @@ tag: - Node学園 - 登壇レポート - Connect - - フロントエンド category: - - Programming + - Frontend thumbnail: /images/2022/20220913a/thumbnail.png author: 澁川喜規 lede: "オンライン開催された東京Node学園40時限目で発表してきました。内容としてはこのブログに書いた、gRPCがフロントエンド通信の第一の選択肢になる時代がやってきたかも？という記事をベースにして、gRPCとは何かとか、Connectプロトコルの存在や、今までの公式実装ととどのように開発のスタイルが変わるか、みたいな話を絵つきで説明したりしました。" diff --git "a/source/_posts/2022/20220920b_Dataflow\345\276\214\347\267\250\357\274\210Dataflow\343\201\256\344\272\213\345\211\215\346\272\226\345\202\231\343\201\213\343\202\211Pub\357\274\217Sub\343\203\273BigQuery\343\201\250\343\201\256\351\200\243\346\220\272\344\276\213\343\201\276\343\201\247\357\274\211.md" "b/source/_posts/2022/20220920b_Dataflow\345\276\214\347\267\250\357\274\210Dataflow\343\201\256\344\272\213\345\211\215\346\272\226\345\202\231\343\201\213\343\202\211Pub\357\274\217Sub\343\203\273BigQuery\343\201\250\343\201\256\351\200\243\346\220\272\344\276\213\343\201\276\343\201\247\357\274\211.md" index e62370dfd570..094ddd4a8260 100644 --- "a/source/_posts/2022/20220920b_Dataflow\345\276\214\347\267\250\357\274\210Dataflow\343\201\256\344\272\213\345\211\215\346\272\226\345\202\231\343\201\213\343\202\211Pub\357\274\217Sub\343\203\273BigQuery\343\201\250\343\201\256\351\200\243\346\220\272\344\276\213\343\201\276\343\201\247\357\274\211.md" +++ "b/source/_posts/2022/20220920b_Dataflow\345\276\214\347\267\250\357\274\210Dataflow\343\201\256\344\272\213\345\211\215\346\272\226\345\202\231\343\201\213\343\202\211Pub\357\274\217Sub\343\203\273BigQuery\343\201\250\343\201\256\351\200\243\346\220\272\344\276\213\343\201\276\343\201\247\357\274\211.md" @@ -10,7 +10,7 @@ tag: - インターン2022 - BigQuery category: - - Programming + - Infrastructure thumbnail: /images/2022/20220920b/thumbnail.png author: "平野甫" lede: "Dataflowを使うための事前準備からパイプライン実行までの一連の流れについて説明します。次の手順で進めていきます。APIの有効化、IAMの設定、Apache Beam SDKのインストール..." diff --git "a/source/_posts/2022/20221020a_DynamoDB_Streams\343\201\257\345\220\214\344\270\200\343\203\217\343\203\203\343\202\267\343\203\245\343\202\255\343\203\274\343\201\247\343\202\202\343\202\275\343\203\274\343\203\210\343\202\255\343\203\274\343\201\214\347\225\260\343\201\252\343\202\214\343\201\260\351\240\206\345\272\217\344\277\235\350\250\274\343\201\225\343\202\214\343\201\252\343\201\204.md" "b/source/_posts/2022/20221020a_DynamoDB_Streams\343\201\257\345\220\214\344\270\200\343\203\217\343\203\203\343\202\267\343\203\245\343\202\255\343\203\274\343\201\247\343\202\202\343\202\275\343\203\274\343\203\210\343\202\255\343\203\274\343\201\214\347\225\260\343\201\252\343\202\214\343\201\260\351\240\206\345\272\217\344\277\235\350\250\274\343\201\225\343\202\214\343\201\252\343\201\204.md" index 60a18b927938..66fdb59a01c8 100644 --- "a/source/_posts/2022/20221020a_DynamoDB_Streams\343\201\257\345\220\214\344\270\200\343\203\217\343\203\203\343\202\267\343\203\245\343\202\255\343\203\274\343\201\247\343\202\202\343\202\275\343\203\274\343\203\210\343\202\255\343\203\274\343\201\214\347\225\260\343\201\252\343\202\214\343\201\260\351\240\206\345\272\217\344\277\235\350\250\274\343\201\225\343\202\214\343\201\252\343\201\204.md" +++ "b/source/_posts/2022/20221020a_DynamoDB_Streams\343\201\257\345\220\214\344\270\200\343\203\217\343\203\203\343\202\267\343\203\245\343\202\255\343\203\274\343\201\247\343\202\202\343\202\275\343\203\274\343\203\210\343\202\255\343\203\274\343\201\214\347\225\260\343\201\252\343\202\214\343\201\260\351\240\206\345\272\217\344\277\235\350\250\274\343\201\225\343\202\214\343\201\252\343\201\204.md" @@ -9,7 +9,7 @@ tag: - Lambda - 失敗談 category: - - Infrastructure + - DB thumbnail: /images/2022/20221020a/thumbnail.png author: 真野隼記 lede: "TIG DXユニットの真野です。タイトルに書いたままの内容の記事です。おそらくDynamoDB Streams について調べたことがある方の多くの人には自明な内容だと思います。サマリです。* DynamoDB Streamsの起動順序が保たれるのは 項目単位" diff --git "a/source/_posts/2022/20221021a_CSV\345\207\246\347\220\206\343\201\253\343\201\212\343\201\221\343\202\213\345\205\261\351\200\232\345\207\246\347\220\206\343\202\222Decorator\343\203\221\343\202\277\343\203\274\343\203\263\343\201\247\345\256\237\347\217\276\343\201\231\343\202\213.md" "b/source/_posts/2022/20221021a_CSV\345\207\246\347\220\206\343\201\253\343\201\212\343\201\221\343\202\213\345\205\261\351\200\232\345\207\246\347\220\206\343\202\222Decorator\343\203\221\343\202\277\343\203\274\343\203\263\343\201\247\345\256\237\347\217\276\343\201\231\343\202\213.md" index 0175c1452a3a..3e5903be6dc2 100644 --- "a/source/_posts/2022/20221021a_CSV\345\207\246\347\220\206\343\201\253\343\201\212\343\201\221\343\202\213\345\205\261\351\200\232\345\207\246\347\220\206\343\202\222Decorator\343\203\221\343\202\277\343\203\274\343\203\263\343\201\247\345\256\237\347\217\276\343\201\231\343\202\213.md" +++ "b/source/_posts/2022/20221021a_CSV\345\207\246\347\220\206\343\201\253\343\201\212\343\201\221\343\202\213\345\205\261\351\200\232\345\207\246\347\220\206\343\202\222Decorator\343\203\221\343\202\277\343\203\274\343\203\263\343\201\247\345\256\237\347\217\276\343\201\231\343\202\213.md" @@ -8,6 +8,7 @@ tag: - CSV - ファイル連携 - 共通処理 + - encoding/csv category: - Programming thumbnail: /images/2022/20221021a/thumbnail.png diff --git "a/source/_posts/2022/20221024a_Go\343\201\247\344\275\234\343\201\243\343\201\237\343\203\255\343\202\270\343\203\203\343\202\257\343\201\253WebUI\343\202\222\343\201\244\343\201\221\343\201\246GitHub\343\203\232\343\203\274\343\202\270\343\201\253\345\205\254\351\226\213\343\201\231\343\202\213.md" "b/source/_posts/2022/20221024a_Go\343\201\247\344\275\234\343\201\243\343\201\237\343\203\255\343\202\270\343\203\203\343\202\257\343\201\253WebUI\343\202\222\343\201\244\343\201\221\343\201\246GitHub\343\203\232\343\203\274\343\202\270\343\201\253\345\205\254\351\226\213\343\201\231\343\202\213.md" index 6e29e1509d72..d8fab9568601 100644 --- "a/source/_posts/2022/20221024a_Go\343\201\247\344\275\234\343\201\243\343\201\237\343\203\255\343\202\270\343\203\203\343\202\257\343\201\253WebUI\343\202\222\343\201\244\343\201\221\343\201\246GitHub\343\203\232\343\203\274\343\202\270\343\201\253\345\205\254\351\226\213\343\201\231\343\202\213.md" +++ "b/source/_posts/2022/20221024a_Go\343\201\247\344\275\234\343\201\243\343\201\237\343\203\255\343\202\270\343\203\203\343\202\257\343\201\253WebUI\343\202\222\343\201\244\343\201\221\343\201\246GitHub\343\203\232\343\203\274\343\202\270\343\201\253\345\205\254\351\226\213\343\201\231\343\202\213.md" @@ -6,9 +6,8 @@ tag: - Next.js - Go - WebAssembly - - フロントエンド category: - - Programming + - Frontend thumbnail: /images/2022/20221024a/thumbnail.png author: 澁川喜規 lede: "ちょっとしたツールをGoで作ってみたのですが、わざわざインストールしなくてもいいようにWebのUIをつけてブラウザで使えるようにしてみました。ウェブフロントエンド部分はNext.jsの静的サイトで、GoはWASMにしてロードして実行しています。WASMを使うのは初めてなのであえて選んでみました。" diff --git "a/source/_posts/2022/20221027a_Mermaid.js\343\202\222React\344\270\212\343\201\247\343\203\254\343\203\263\343\203\200\343\203\252\343\203\263\343\202\260\343\201\231\343\202\213.md" "b/source/_posts/2022/20221027a_Mermaid.js\343\202\222React\344\270\212\343\201\247\343\203\254\343\203\263\343\203\200\343\203\252\343\203\263\343\202\260\343\201\231\343\202\213.md" index d2199178746e..17b71ec9455f 100644 --- "a/source/_posts/2022/20221027a_Mermaid.js\343\202\222React\344\270\212\343\201\247\343\203\254\343\203\263\343\203\200\343\203\252\343\203\263\343\202\260\343\201\231\343\202\213.md" +++ "b/source/_posts/2022/20221027a_Mermaid.js\343\202\222React\344\270\212\343\201\247\343\203\254\343\203\263\343\203\200\343\203\252\343\203\263\343\202\260\343\201\231\343\202\213.md" @@ -5,10 +5,9 @@ postid: a tag: - React - Mermaid.js - - フロントエンド - UML category: - - Programming + - Frontend thumbnail: /images/2022/20221027a/thumbnail.png author: 澁川喜規 lede: "Mermaid.jsをReactで表示しようとしたものの、Reactラッパーとしてnpmに公開されているものがどれも古くてメンテナンスされていなそうという問題がありました。この手のアダプター系のライブラリはどうしてもメンテナンスがされなくて放置されるのが早くなりがちです。脆弱性が残り続けたりします。そこで自前でやったところ、思ったよりも簡単だったのでそのやり方を紹介します。" diff --git "a/source/_posts/2022/20221028a_PlantUML\343\202\222React\344\270\212\343\201\247\343\203\254\343\203\263\343\203\200\343\203\252\343\203\263\343\202\260\343\201\231\343\202\213.md" "b/source/_posts/2022/20221028a_PlantUML\343\202\222React\344\270\212\343\201\247\343\203\254\343\203\263\343\203\200\343\203\252\343\203\263\343\202\260\343\201\231\343\202\213.md" index 93d57ec3192a..00c63384f13f 100644 --- "a/source/_posts/2022/20221028a_PlantUML\343\202\222React\344\270\212\343\201\247\343\203\254\343\203\263\343\203\200\343\203\252\343\203\263\343\202\260\343\201\231\343\202\213.md" +++ "b/source/_posts/2022/20221028a_PlantUML\343\202\222React\344\270\212\343\201\247\343\203\254\343\203\263\343\203\200\343\203\252\343\203\263\343\202\260\343\201\231\343\202\213.md" @@ -5,10 +5,9 @@ postid: a tag: - PlantUML - React - - フロントエンド - UML category: - - Programming + - Frontend thumbnail: /images/2022/20221028a/thumbnail.png author: 澁川喜規 lede: "前回の記事ではMermaid.jsをレンダリングしましたが、次はPlantUMLをレンダリングしてみます。こちらも、前回のMermaid.js同様、メンテナンスされているPlantUML対応コンポーネントはありません。PlantUMLもMermaid.js同様、多様なダイアグラムをサポートしています。" diff --git "a/source/_posts/2022/20221031b_\343\203\220\343\203\274\343\203\201\343\203\243\343\203\253\343\203\207\343\202\271\343\202\257\343\203\210\343\203\203\343\203\227\347\222\260\345\242\203\343\201\256\347\217\276\347\212\266\343\201\250\343\200\201VR\343\201\256\345\200\213\344\272\272\347\232\204\343\201\252\346\204\237\346\203\263.md" "b/source/_posts/2022/20221031b_\343\203\220\343\203\274\343\203\201\343\203\243\343\203\253\343\203\207\343\202\271\343\202\257\343\203\210\343\203\203\343\203\227\347\222\260\345\242\203\343\201\256\347\217\276\347\212\266\343\201\250\343\200\201VR\343\201\256\345\200\213\344\272\272\347\232\204\343\201\252\346\204\237\346\203\263.md" index b2e70c873525..aaaf50a824f4 100644 --- "a/source/_posts/2022/20221031b_\343\203\220\343\203\274\343\203\201\343\203\243\343\203\253\343\203\207\343\202\271\343\202\257\343\203\210\343\203\203\343\203\227\347\222\260\345\242\203\343\201\256\347\217\276\347\212\266\343\201\250\343\200\201VR\343\201\256\345\200\213\344\272\272\347\232\204\343\201\252\346\204\237\346\203\263.md" +++ "b/source/_posts/2022/20221031b_\343\203\220\343\203\274\343\203\201\343\203\243\343\203\253\343\203\207\343\202\271\343\202\257\343\203\210\343\203\203\343\203\227\347\222\260\345\242\203\343\201\256\347\217\276\347\212\266\343\201\250\343\200\201VR\343\201\256\345\200\213\344\272\272\347\232\204\343\201\252\346\204\237\346\203\263.md" @@ -4,7 +4,6 @@ date: 2022/10/31 00:00:01 postid: b tag: - VirtualDesktop - - VR - リモートワーク category: - VR diff --git "a/source/_posts/2022/20221104a_\343\203\201\343\203\274\343\203\240\343\201\256\351\226\213\347\231\272\347\224\237\347\224\243\346\200\247\343\202\222\351\253\230\343\202\201\343\202\213\343\201\237\343\202\201\343\201\256\345\277\203\343\201\214\343\201\221.md" "b/source/_posts/2022/20221104a_\343\203\201\343\203\274\343\203\240\343\201\256\351\226\213\347\231\272\347\224\237\347\224\243\346\200\247\343\202\222\351\253\230\343\202\201\343\202\213\343\201\237\343\202\201\343\201\256\345\277\203\343\201\214\343\201\221.md" index 1f54f8482f5a..3bb26534950f 100644 --- "a/source/_posts/2022/20221104a_\343\203\201\343\203\274\343\203\240\343\201\256\351\226\213\347\231\272\347\224\237\347\224\243\346\200\247\343\202\222\351\253\230\343\202\201\343\202\213\343\201\237\343\202\201\343\201\256\345\277\203\343\201\214\343\201\221.md" +++ "b/source/_posts/2022/20221104a_\343\203\201\343\203\274\343\203\240\343\201\256\351\226\213\347\231\272\347\224\237\347\224\243\346\200\247\343\202\222\351\253\230\343\202\201\343\202\213\343\201\237\343\202\201\343\201\256\345\277\203\343\201\214\343\201\221.md" @@ -9,7 +9,7 @@ tag: - コードレビュー - 可読性 category: - - Programming + - DevOps thumbnail: /images/2022/20221104a/thumbnail.jpg author: 辻大志郎 lede: "最近はアーキテクトとしてチームにジョインすることも増えてきました。より素早く、継続的にビジネス上の価値を提供するためにチームの開発生産性は重要です。チームの生産性を高めるために私が心がけているいくつかの内容を紹介します。" diff --git "a/source/_posts/2022/20221116a_Plotly.py\343\201\253\343\202\210\343\202\213\343\203\207\343\203\274\343\202\277\345\217\257\350\246\226\345\214\226\343\201\256\343\201\231\343\201\231\343\202\201.md" "b/source/_posts/2022/20221116a_Plotly.py\343\201\253\343\202\210\343\202\213\343\203\207\343\203\274\343\202\277\345\217\257\350\246\226\345\214\226\343\201\256\343\201\231\343\201\231\343\202\201.md" index 84c82624f224..85a348208494 100644 --- "a/source/_posts/2022/20221116a_Plotly.py\343\201\253\343\202\210\343\202\213\343\203\207\343\203\274\343\202\277\345\217\257\350\246\226\345\214\226\343\201\256\343\201\231\343\201\231\343\202\201.md" +++ "b/source/_posts/2022/20221116a_Plotly.py\343\201\253\343\202\210\343\202\213\343\203\207\343\203\274\343\202\277\345\217\257\350\246\226\345\214\226\343\201\256\343\201\231\343\201\231\343\202\201.md" @@ -9,7 +9,7 @@ tag: - グラフ - ヒストグラム category: - - Programming + - DataScience thumbnail: /images/2022/20221116a/thumbnail.gif author: 柴田健太 lede: "現在業務でいわゆるビッグデータを扱っていまして、アウトプットを可視化する機会が多くあります。Pythonでデータ可視化といえばmatplotlibが定番で、メンバー単位でのアウトプット共有なら特に不便は無いのですが、クライアントへの説明資料などに使い回すことを考えると、もう少し見栄え良く仕上げたくなる時があります。" diff --git "a/source/_posts/2022/20221122a_AzureAD\357\274\213MSAL_for_Go\343\201\247\343\203\220\343\203\203\343\203\201\343\202\263\343\203\236\343\203\263\343\203\211\343\201\256\350\252\215\350\250\274.md" "b/source/_posts/2022/20221122a_AzureAD\357\274\213MSAL_for_Go\343\201\247\343\203\220\343\203\203\343\203\201\343\202\263\343\203\236\343\203\263\343\203\211\343\201\256\350\252\215\350\250\274.md" index 59af1cf446c0..d5a0c128ddf4 100644 --- "a/source/_posts/2022/20221122a_AzureAD\357\274\213MSAL_for_Go\343\201\247\343\203\220\343\203\203\343\203\201\343\202\263\343\203\236\343\203\263\343\203\211\343\201\256\350\252\215\350\250\274.md" +++ "b/source/_posts/2022/20221122a_AzureAD\357\274\213MSAL_for_Go\343\201\247\343\203\220\343\203\203\343\203\201\343\202\263\343\203\236\343\203\263\343\203\211\343\201\256\350\252\215\350\250\274.md" @@ -9,7 +9,7 @@ tag: - Go - EntraID category: - - Programming + - 認証認可 thumbnail: /images/2022/20221122a/thumbnail.png author: 澁川喜規 lede: "前回の記事ではMSAL.jsを使い、シングルページアプリケーションの認証を試してみました。業務システムで扱う認証にはいろいろな種類がありますが、だいたい以下のどれかに該当するケースが多いと思います。" diff --git "a/source/_posts/2022/20221124a_Language_Server_Protocol\343\202\222\347\224\250\343\201\204\343\201\237VSCode\346\213\241\345\274\265\346\251\237\350\203\275\351\226\213\347\231\272_(\345\211\215\347\267\250).md" "b/source/_posts/2022/20221124a_Language_Server_Protocol\343\202\222\347\224\250\343\201\204\343\201\237VSCode\346\213\241\345\274\265\346\251\237\350\203\275\351\226\213\347\231\272_(\345\211\215\347\267\250).md" index 12c52fbf63a6..53cc3a29ba2c 100644 --- "a/source/_posts/2022/20221124a_Language_Server_Protocol\343\202\222\347\224\250\343\201\204\343\201\237VSCode\346\213\241\345\274\265\346\251\237\350\203\275\351\226\213\347\231\272_(\345\211\215\347\267\250).md" +++ "b/source/_posts/2022/20221124a_Language_Server_Protocol\343\202\222\347\224\250\343\201\204\343\201\237VSCode\346\213\241\345\274\265\346\251\237\350\203\275\351\226\213\347\231\272_(\345\211\215\347\267\250).md" @@ -10,7 +10,7 @@ tag: - SQL - フォーマッター category: - - Programming + - Frontend thumbnail: /images/2022/20221124a/thumbnail.png author: 川渕皓太 lede: "SQLフォーマッタをVSCodeの拡張機能にする作業を行っており、そのための方法を学んでいます。本記事ではLanguage Server Protocolを用いたVSCode拡張機能開発について説明します。。" diff --git "a/source/_posts/2022/20221125a_Language_Server_Protocol\343\202\222\347\224\250\343\201\204\343\201\237VSCode\346\213\241\345\274\265\346\251\237\350\203\275\351\226\213\347\231\272_(\345\276\214\347\267\250).md" "b/source/_posts/2022/20221125a_Language_Server_Protocol\343\202\222\347\224\250\343\201\204\343\201\237VSCode\346\213\241\345\274\265\346\251\237\350\203\275\351\226\213\347\231\272_(\345\276\214\347\267\250).md" index 9d6e5883995f..ad6c19b8a2f1 100644 --- "a/source/_posts/2022/20221125a_Language_Server_Protocol\343\202\222\347\224\250\343\201\204\343\201\237VSCode\346\213\241\345\274\265\346\251\237\350\203\275\351\226\213\347\231\272_(\345\276\214\347\267\250).md" +++ "b/source/_posts/2022/20221125a_Language_Server_Protocol\343\202\222\347\224\250\343\201\204\343\201\237VSCode\346\213\241\345\274\265\346\251\237\350\203\275\351\226\213\347\231\272_(\345\276\214\347\267\250).md" @@ -10,7 +10,7 @@ tag: - SQL - フォーマッター category: - - Programming + - Frontend thumbnail: /images/2022/20221125a/thumbnail.png author: 川渕皓太 lede: "こんにちは、Futureでアルバイトをしている川渕です。[前編]ではLSPを用いたVSCode拡張機能開発チュートリアルとサンプルコードの解説を行いました。後編では前編で解説した[lsp-sample]に機能を追加する方法について説明します。" diff --git "a/source/_posts/2022/20221213a_React\343\201\247\346\261\272\343\202\201\343\202\211\343\202\214\343\201\237\345\200\231\350\243\234\343\201\213\343\202\211\351\201\270\346\212\236\343\201\225\343\201\233\343\202\213\343\202\263\343\203\263\343\203\234\343\203\234\343\203\203\343\202\257\343\202\271\343\202\222\345\256\237\350\243\205\343\201\231\343\202\213\357\274\210\343\202\265\343\203\274\343\203\220\343\203\274\343\202\242\343\202\257\343\202\273\343\202\271\343\201\244\343\201\215\357\274\211.md" "b/source/_posts/2022/20221213a_React\343\201\247\346\261\272\343\202\201\343\202\211\343\202\214\343\201\237\345\200\231\350\243\234\343\201\213\343\202\211\351\201\270\346\212\236\343\201\225\343\201\233\343\202\213\343\202\263\343\203\263\343\203\234\343\203\234\343\203\203\343\202\257\343\202\271\343\202\222\345\256\237\350\243\205\343\201\231\343\202\213\357\274\210\343\202\265\343\203\274\343\203\220\343\203\274\343\202\242\343\202\257\343\202\273\343\202\271\343\201\244\343\201\215\357\274\211.md" index e75f6d67f963..3b8204357207 100644 --- "a/source/_posts/2022/20221213a_React\343\201\247\346\261\272\343\202\201\343\202\211\343\202\214\343\201\237\345\200\231\350\243\234\343\201\213\343\202\211\351\201\270\346\212\236\343\201\225\343\201\233\343\202\213\343\202\263\343\203\263\343\203\234\343\203\234\343\203\203\343\202\257\343\202\271\343\202\222\345\256\237\350\243\205\343\201\231\343\202\213\357\274\210\343\202\265\343\203\274\343\203\220\343\203\274\343\202\242\343\202\257\343\202\273\343\202\271\343\201\244\343\201\215\357\274\211.md" +++ "b/source/_posts/2022/20221213a_React\343\201\247\346\261\272\343\202\201\343\202\211\343\202\214\343\201\237\345\200\231\350\243\234\343\201\213\343\202\211\351\201\270\346\212\236\343\201\225\343\201\233\343\202\213\343\202\263\343\203\263\343\203\234\343\203\234\343\203\203\343\202\257\343\202\271\343\202\222\345\256\237\350\243\205\343\201\231\343\202\213\357\274\210\343\202\265\343\203\274\343\203\220\343\203\274\343\202\242\343\202\257\343\202\273\343\202\271\343\201\244\343\201\215\357\274\211.md" @@ -4,9 +4,8 @@ date: 2022/12/13 00:00:00 postid: a tag: - React - - フロントエンド category: - - Programming + - Frontend thumbnail: /images/2022/20221213a/thumbnail.png author: 澁川喜規 lede: "技術コンサルを行っているお客様から質問があったのですが、なかなかドンピシャな情報がなく、試行錯誤したのでその検討結果をまとめてみました。" diff --git "a/source/_posts/2022/20221223a_\344\277\272\343\201\256\343\202\267\343\202\271\343\203\206\343\203\240\343\201\214\343\201\223\343\202\223\343\201\252\343\201\253\350\204\206\345\274\261\346\200\247\343\201\240\343\202\211\343\201\221\343\201\256\343\202\217\343\201\221\343\201\214\343\201\252\343\201\204(linkedpackage\343\201\256\347\264\271\344\273\213).md" "b/source/_posts/2022/20221223a_\344\277\272\343\201\256\343\202\267\343\202\271\343\203\206\343\203\240\343\201\214\343\201\223\343\202\223\343\201\252\343\201\253\350\204\206\345\274\261\346\200\247\343\201\240\343\202\211\343\201\221\343\201\256\343\202\217\343\201\221\343\201\214\343\201\252\343\201\204(linkedpackage\343\201\256\347\264\271\344\273\213).md" index e5217663a4c0..d6c56fef6244 100644 --- "a/source/_posts/2022/20221223a_\344\277\272\343\201\256\343\202\267\343\202\271\343\203\206\343\203\240\343\201\214\343\201\223\343\202\223\343\201\252\343\201\253\350\204\206\345\274\261\346\200\247\343\201\240\343\202\211\343\201\221\343\201\256\343\202\217\343\201\221\343\201\214\343\201\252\343\201\204(linkedpackage\343\201\256\347\264\271\344\273\213).md" +++ "b/source/_posts/2022/20221223a_\344\277\272\343\201\256\343\202\267\343\202\271\343\203\206\343\203\240\343\201\214\343\201\223\343\202\223\343\201\252\343\201\253\350\204\206\345\274\261\346\200\247\343\201\240\343\202\211\343\201\221\343\201\256\343\202\217\343\201\221\343\201\214\343\201\252\343\201\204(linkedpackage\343\201\256\347\264\271\344\273\213).md" @@ -8,7 +8,7 @@ tag: - npm - 脆弱性 category: - - Security + - Frontend thumbnail: /images/2022/20221223a/thumbnail.jpg author: 澁川喜規 lede: "セキュリティに対して、きちんとお金をかけて対応すべきである、というのが近年の風潮です。そんな中、システム開発では多くのオープンソースのコンポーネントを組み合わせてシステムを構築するようになってきたため、使っている部品の脆弱性管理、というのがかなり大きな市場になってきました。当社にはOSSのVulsが有名ですね。" diff --git "a/source/_posts/2023/20230120a_MailSlurper\343\202\222\344\275\277\343\201\243\343\201\2466\346\241\201\343\201\256\343\202\263\343\203\274\343\203\211\343\201\256\351\200\201\344\277\241\343\202\263\343\203\274\343\203\211\343\201\256\343\203\206\343\202\271\343\203\210\343\202\222\343\201\231\343\202\213.md" "b/source/_posts/2023/20230120a_MailSlurper\343\202\222\344\275\277\343\201\243\343\201\2466\346\241\201\343\201\256\343\202\263\343\203\274\343\203\211\343\201\256\351\200\201\344\277\241\343\202\263\343\203\274\343\203\211\343\201\256\343\203\206\343\202\271\343\203\210\343\202\222\343\201\231\343\202\213.md" index 271b8b16cf8b..009b0158b9ba 100644 --- "a/source/_posts/2023/20230120a_MailSlurper\343\202\222\344\275\277\343\201\243\343\201\2466\346\241\201\343\201\256\343\202\263\343\203\274\343\203\211\343\201\256\351\200\201\344\277\241\343\202\263\343\203\274\343\203\211\343\201\256\343\203\206\343\202\271\343\203\210\343\202\222\343\201\231\343\202\213.md" +++ "b/source/_posts/2023/20230120a_MailSlurper\343\202\222\344\275\277\343\201\243\343\201\2466\346\241\201\343\201\256\343\202\263\343\203\274\343\203\211\343\201\256\351\200\201\344\277\241\343\202\263\343\203\274\343\203\211\343\201\256\343\203\206\343\202\271\343\203\210\343\202\222\343\201\231\343\202\213.md" @@ -8,7 +8,7 @@ tag: - メール - TOTP category: - - Infrastructure + - 認証認可 thumbnail: /images/2023/20230120a/thumbnail.png author: 澁川喜規 lede: "以前、認証ミドルウェアのhankoの紹介の中で、hankoがテストで使っているMailSlurperというメールサーバーが面白いという紹介をしました。テストにおいては、モックは使うものの、モックを差し込むレイヤーはソースコードレベルではなくて、インフラレベルで仕掛ける方がいいよ、というのはほぼコンセンサスとなっていると思います。" diff --git "a/source/_posts/2023/20230214a_\345\257\276\345\277\234\343\203\226\343\203\251\343\202\246\343\202\266\343\203\220\343\203\274\343\202\270\343\203\247\343\203\263\343\202\222\350\200\203\343\201\210\343\202\213.md" "b/source/_posts/2023/20230214a_\345\257\276\345\277\234\343\203\226\343\203\251\343\202\246\343\202\266\343\203\220\343\203\274\343\202\270\343\203\247\343\203\263\343\202\222\350\200\203\343\201\210\343\202\213.md" index c129e4510cbb..b8d1610fa277 100644 --- "a/source/_posts/2023/20230214a_\345\257\276\345\277\234\343\203\226\343\203\251\343\202\246\343\202\266\343\203\220\343\203\274\343\202\270\343\203\247\343\203\263\343\202\222\350\200\203\343\201\210\343\202\213.md" +++ "b/source/_posts/2023/20230214a_\345\257\276\345\277\234\343\203\226\343\203\251\343\202\246\343\202\266\343\203\220\343\203\274\343\202\270\343\203\247\343\203\263\343\202\222\350\200\203\343\201\210\343\202\213.md" @@ -7,7 +7,7 @@ tag: - Web - バージョン管理 category: - - Programming + - Frontend thumbnail: /images/2023/20230214a/thumbnail.png author: 澁川喜規 lede: "新しいウェブベースのシステムを開発する場合、あるいは更新する場合に問題になるのがブラウザのバージョンです。アプリケーションを実装する場合、場合によっては最新の機能を利用したいと思うかもしれませんが、場合によってはその機能を実装したブラウザのシェアが高くないかも？ということが考えられます。どの機能が使えるのかを選択するには、まずはブラウザのバージョンを決めなければなりません。" diff --git "a/source/_posts/2023/20230215a_Recoil\343\203\211\343\202\255\343\203\245\343\203\241\343\203\263\343\203\210\345\205\245\351\226\200.md" "b/source/_posts/2023/20230215a_Recoil\343\203\211\343\202\255\343\203\245\343\203\241\343\203\263\343\203\210\345\205\245\351\226\200.md" index fdb460b07e98..802d5ccc196b 100644 --- "a/source/_posts/2023/20230215a_Recoil\343\203\211\343\202\255\343\203\245\343\203\241\343\203\263\343\203\210\345\205\245\351\226\200.md" +++ "b/source/_posts/2023/20230215a_Recoil\343\203\211\343\202\255\343\203\245\343\203\241\343\203\263\343\203\210\345\205\245\351\226\200.md" @@ -5,9 +5,10 @@ postid: a tag: - Recoil - React - - フロントエンド + - 状態管理 + - 入門 category: - - Programming + - Frontend thumbnail: /images/2023/20230215a/thumbnail.png author: 澁川喜規 lede: "RecoilはFacebookのMeta社製のReact用状態管理ライブラリです。この分野はFacebook自体がFluxという概念を発表してから、さまざまなライブラリが開発されてきました。特に広く利用されたのがReduxです。" diff --git "a/source/_posts/2023/20230216a_Mac_\346\205\243\343\202\214\343\201\227\343\201\237\347\247\201\343\201\253_Windows_\343\201\214\346\224\257\347\265\246\343\201\225\343\202\214\343\201\237\343\201\256\343\201\247\343\200\201\343\201\276\343\201\232\350\250\255\345\256\232\343\201\227\343\201\237\343\201\223\343\201\250.md" "b/source/_posts/2023/20230216a_Mac_\346\205\243\343\202\214\343\201\227\343\201\237\347\247\201\343\201\253_Windows_\343\201\214\346\224\257\347\265\246\343\201\225\343\202\214\343\201\237\343\201\256\343\201\247\343\200\201\343\201\276\343\201\232\350\250\255\345\256\232\343\201\227\343\201\237\343\201\223\343\201\250.md" index 105625c25b52..cd8967ee1ae5 100644 --- "a/source/_posts/2023/20230216a_Mac_\346\205\243\343\202\214\343\201\227\343\201\237\347\247\201\343\201\253_Windows_\343\201\214\346\224\257\347\265\246\343\201\225\343\202\214\343\201\237\343\201\256\343\201\247\343\200\201\343\201\276\343\201\232\350\250\255\345\256\232\343\201\227\343\201\237\343\201\223\343\201\250.md" +++ "b/source/_posts/2023/20230216a_Mac_\346\205\243\343\202\214\343\201\227\343\201\237\347\247\201\343\201\253_Windows_\343\201\214\346\224\257\347\265\246\343\201\225\343\202\214\343\201\237\343\201\256\343\201\247\343\200\201\343\201\276\343\201\232\350\250\255\345\256\232\343\201\227\343\201\237\343\201\223\343\201\250.md" @@ -4,7 +4,6 @@ date: 2023/02/16 00:00:00 postid: a tag: - Windows - - キーボード - キーバインド - Mac - ショートカット diff --git "a/source/_posts/2023/20230221a_\343\200\214\345\256\237\350\267\265Redis\345\205\245\351\226\200\343\200\215\346\211\200\346\204\237_~\343\200\214E.G.\343\202\263\343\203\263\343\203\220\343\203\203\343\203\210\343\200\215\343\201\256\350\246\263\347\202\271\343\201\213\343\202\211\350\252\236\343\202\213~.md" "b/source/_posts/2023/20230221a_\343\200\214\345\256\237\350\267\265Redis\345\205\245\351\226\200\343\200\215\346\211\200\346\204\237_~\343\200\214E.G.\343\202\263\343\203\263\343\203\220\343\203\203\343\203\210\343\200\215\343\201\256\350\246\263\347\202\271\343\201\213\343\202\211\350\252\236\343\202\213~.md" index c368c28a2343..51c021646a66 100644 --- "a/source/_posts/2023/20230221a_\343\200\214\345\256\237\350\267\265Redis\345\205\245\351\226\200\343\200\215\346\211\200\346\204\237_~\343\200\214E.G.\343\202\263\343\203\263\343\203\220\343\203\203\343\203\210\343\200\215\343\201\256\350\246\263\347\202\271\343\201\213\343\202\211\350\252\236\343\202\213~.md" +++ "b/source/_posts/2023/20230221a_\343\200\214\345\256\237\350\267\265Redis\345\205\245\351\226\200\343\200\215\346\211\200\346\204\237_~\343\200\214E.G.\343\202\263\343\203\263\343\203\220\343\203\203\343\203\210\343\200\215\343\201\256\350\246\263\347\202\271\343\201\213\343\202\211\350\252\236\343\202\213~.md" @@ -7,7 +7,7 @@ tag: - 書評 - 書籍 category: - - Infrastructure + - DB thumbnail: /images/2023/20230221a/thumbnail.jpg author: 原木翔 lede: "「実践Redis入門」は、2023年現在AWSのAmazon EMR開発チーム、システム開発エンジニアとして働いている林 昌吾さんという方が書かれた『Redisの基礎から、実践、運用や調査に役立つ仕様などの詳細について解説した入門書です。』入門書とありますが、単なる機能紹介にとどまらず..." diff --git "a/source/_posts/2023/20230301a_\343\203\236\343\202\244\343\202\257\343\203\255\343\202\265\343\203\274\343\203\223\343\202\271\343\203\221\343\202\277\343\203\274\343\203\263_MicroServicePatterns_\343\201\256\346\204\237\346\203\263\346\226\207.md" "b/source/_posts/2023/20230301a_\343\203\236\343\202\244\343\202\257\343\203\255\343\202\265\343\203\274\343\203\223\343\202\271\343\203\221\343\202\277\343\203\274\343\203\263_MicroServicePatterns_\343\201\256\346\204\237\346\203\263\346\226\207.md" index ede7396d0dfb..a10f56f0fbbf 100644 --- "a/source/_posts/2023/20230301a_\343\203\236\343\202\244\343\202\257\343\203\255\343\202\265\343\203\274\343\203\223\343\202\271\343\203\221\343\202\277\343\203\274\343\203\263_MicroServicePatterns_\343\201\256\346\204\237\346\203\263\346\226\207.md" +++ "b/source/_posts/2023/20230301a_\343\203\236\343\202\244\343\202\257\343\203\255\343\202\265\343\203\274\343\203\223\343\202\271\343\203\221\343\202\277\343\203\274\343\203\263_MicroServicePatterns_\343\201\256\346\204\237\346\203\263\346\226\207.md" @@ -7,7 +7,7 @@ tag: - 書籍 - 書評 category: - - Programming + - DevOps thumbnail: /images/2023/20230301a/thumbnail.jpg author: 川口翔大 lede: "最初に配属されたチームでは、いわゆるマイクロサービスアーキテクチャが導入されておりました。ただ当時は、マイクロサービスアーキテクチャは経験したことがなく本書を読んで勉強した覚えがあります。それからはまた別でその知見を活かし..." diff --git "a/source/_posts/2023/20230516a_JS\343\203\221\343\203\203\343\202\261\343\203\274\343\202\270\347\256\241\347\220\206\343\203\204\343\203\274\343\203\253pnpm\343\201\256\346\246\202\350\246\201\343\201\250\345\206\205\351\203\250\346\247\213\351\200\240\343\202\222\347\234\272\343\202\201\343\202\213.md" "b/source/_posts/2023/20230516a_JS\343\203\221\343\203\203\343\202\261\343\203\274\343\202\270\347\256\241\347\220\206\343\203\204\343\203\274\343\203\253pnpm\343\201\256\346\246\202\350\246\201\343\201\250\345\206\205\351\203\250\346\247\213\351\200\240\343\202\222\347\234\272\343\202\201\343\202\213.md" index 801c5ed8de1f..c903d4340edb 100644 --- "a/source/_posts/2023/20230516a_JS\343\203\221\343\203\203\343\202\261\343\203\274\343\202\270\347\256\241\347\220\206\343\203\204\343\203\274\343\203\253pnpm\343\201\256\346\246\202\350\246\201\343\201\250\345\206\205\351\203\250\346\247\213\351\200\240\343\202\222\347\234\272\343\202\201\343\202\213.md" +++ "b/source/_posts/2023/20230516a_JS\343\203\221\343\203\203\343\202\261\343\203\274\343\202\270\347\256\241\347\220\206\343\203\204\343\203\274\343\203\253pnpm\343\201\256\346\246\202\350\246\201\343\201\250\345\206\205\351\203\250\346\247\213\351\200\240\343\202\222\347\234\272\343\202\201\343\202\213.md" @@ -5,11 +5,10 @@ postid: a tag: - pnpm - npm - - フロントエンド - パッケージ管理 - コアテク category: - - Programming + - Frontend thumbnail: /images/2023/20230516a/thumbnail.png author: 斎藤賢太 lede: "Vercelに触れてみようVercel CLIのインストール方法を調べていたところ、パッケージ管理ツールを用いたインストール方法としてnpm, Yarnと並んでpnpmが書かれていました。pnpmではどのようにパッケージを管理しているかなどの特徴を調べました。" diff --git "a/source/_posts/2023/20230525a_Amazon_OpenSearch_Serverless_\343\202\222\350\247\246\343\201\243\343\201\246\343\201\277\343\201\237.md" "b/source/_posts/2023/20230525a_Amazon_OpenSearch_Serverless_\343\202\222\350\247\246\343\201\243\343\201\246\343\201\277\343\201\237.md" index 95f2f26a9b62..3224fc248471 100644 --- "a/source/_posts/2023/20230525a_Amazon_OpenSearch_Serverless_\343\202\222\350\247\246\343\201\243\343\201\246\343\201\277\343\201\237.md" +++ "b/source/_posts/2023/20230525a_Amazon_OpenSearch_Serverless_\343\202\222\350\247\246\343\201\243\343\201\246\343\201\277\343\201\237.md" @@ -8,10 +8,10 @@ tag: - 全文検索 - AWS category: - - Programming + - Infrastructure thumbnail: /images/2023/20230525a/thumbnail.png author: 齊藤英比古 -lede: "Amazon OpenSearch Service を触る機会があり、興味があったのでプレビューで公開されていたServerless版でいろいろ試していました" +lede: "Amazon OpenSearch Service を触る機会があり、興味があったのでプレビューで公開されていたServerless版でいろいろ試していました" --- [春の入門連載2023](/articles/20230417a)、17日ぶり2回目の寄稿、23日目を担当します齊藤です。よろしくお願いします。 運良く2個目の記事をアップできることになりました！ (やったね) diff --git "a/source/_posts/2023/20230530a_\347\256\241\347\220\206\347\224\273\351\235\242\347\255\211\343\201\247Next.js\343\202\222Better_React\343\201\250\343\201\227\343\201\246\344\275\277\343\201\206.md" "b/source/_posts/2023/20230530a_\347\256\241\347\220\206\347\224\273\351\235\242\347\255\211\343\201\247Next.js\343\202\222Better_React\343\201\250\343\201\227\343\201\246\344\275\277\343\201\206.md" index 94ef2f56afbe..0138c7227675 100644 --- "a/source/_posts/2023/20230530a_\347\256\241\347\220\206\347\224\273\351\235\242\347\255\211\343\201\247Next.js\343\202\222Better_React\343\201\250\343\201\227\343\201\246\344\275\277\343\201\206.md" +++ "b/source/_posts/2023/20230530a_\347\256\241\347\220\206\347\224\273\351\235\242\347\255\211\343\201\247Next.js\343\202\222Better_React\343\201\250\343\201\227\343\201\246\344\275\277\343\201\206.md" @@ -5,9 +5,8 @@ postid: a tag: - Next.js - React - - フロントエンド category: - - Programming + - Frontend thumbnail: /images/2023/20230530a/thumbnail.png author: 澁川喜規 lede: "最近、Next.jsが複雑になりすぎて、単なるウェブ画面を作る用途にはNext.jsは重すぎるので別のものが良いとか、Vercel統合のための機能が多いんでしょ、みたいな感想を見かけることが増えた気がします。特に管理画面とか社内システムとかですね。B2Cでも設定画面系とかは当てはまるかもしれません。" diff --git "a/source/_posts/2023/20230615a_\346\212\200\350\202\262CAMP\343\202\242\343\202\253\343\203\207\343\203\237\343\202\242\343\201\247\343\200\214\343\202\246\343\202\247\343\203\226\346\212\200\350\241\223\343\201\256\343\203\210\343\203\254\343\203\263\343\203\211\343\200\215\343\201\250\343\201\204\343\201\206\343\202\277\343\202\244\343\203\210\343\203\253\343\201\247\347\231\272\350\241\250\343\201\227\343\201\276\343\201\227\343\201\237.md" "b/source/_posts/2023/20230615a_\346\212\200\350\202\262CAMP\343\202\242\343\202\253\343\203\207\343\203\237\343\202\242\343\201\247\343\200\214\343\202\246\343\202\247\343\203\226\346\212\200\350\241\223\343\201\256\343\203\210\343\203\254\343\203\263\343\203\211\343\200\215\343\201\250\343\201\204\343\201\206\343\202\277\343\202\244\343\203\210\343\203\253\343\201\247\347\231\272\350\241\250\343\201\227\343\201\276\343\201\227\343\201\237.md" index af6acce3c698..7bf694e04a0a 100644 --- "a/source/_posts/2023/20230615a_\346\212\200\350\202\262CAMP\343\202\242\343\202\253\343\203\207\343\203\237\343\202\242\343\201\247\343\200\214\343\202\246\343\202\247\343\203\226\346\212\200\350\241\223\343\201\256\343\203\210\343\203\254\343\203\263\343\203\211\343\200\215\343\201\250\343\201\204\343\201\206\343\202\277\343\202\244\343\203\210\343\203\253\343\201\247\347\231\272\350\241\250\343\201\227\343\201\276\343\201\227\343\201\237.md" +++ "b/source/_posts/2023/20230615a_\346\212\200\350\202\262CAMP\343\202\242\343\202\253\343\203\207\343\203\237\343\202\242\343\201\247\343\200\214\343\202\246\343\202\247\343\203\226\346\212\200\350\241\223\343\201\256\343\203\210\343\203\254\343\203\263\343\203\211\343\200\215\343\201\250\343\201\204\343\201\206\343\202\277\343\202\244\343\203\210\343\203\253\343\201\247\347\231\272\350\241\250\343\201\227\343\201\276\343\201\227\343\201\237.md" @@ -5,10 +5,9 @@ postid: a tag: - 外部登壇 - 技育CAMPアカデミア - - フロントエンド - Web category: - - Programming + - Frontend thumbnail: /images/2023/20230615a/thumbnail.jpg author: 澁川喜規 lede: "技育CAMPアカデミアというイベントで発表をさせていただきました。勉強会で、手っ取り早く学んで役立ててもらえるものはなんだろうか、ということでウェブアプリケーションの構造について説明してきました" diff --git "a/source/_posts/2023/20230628a__RFC\351\226\262\350\246\247\350\243\234\345\212\251\343\203\204\343\203\274\343\203\253\343\202\222\344\275\234\343\202\212\343\201\276\343\201\227\343\201\237_+_\343\203\252\343\202\242\343\202\257\343\203\206\343\202\243\343\203\226\343\203\227\343\203\255\343\202\260\343\203\251\343\203\237\343\203\263\343\202\260.md" "b/source/_posts/2023/20230628a__RFC\351\226\262\350\246\247\350\243\234\345\212\251\343\203\204\343\203\274\343\203\253\343\202\222\344\275\234\343\202\212\343\201\276\343\201\227\343\201\237_+_\343\203\252\343\202\242\343\202\257\343\203\206\343\202\243\343\203\226\343\203\227\343\203\255\343\202\260\343\203\251\343\203\237\343\203\263\343\202\260.md" index 71e6becedd11..7b04036c1fd7 100644 --- "a/source/_posts/2023/20230628a__RFC\351\226\262\350\246\247\350\243\234\345\212\251\343\203\204\343\203\274\343\203\253\343\202\222\344\275\234\343\202\212\343\201\276\343\201\227\343\201\237_+_\343\203\252\343\202\242\343\202\257\343\203\206\343\202\243\343\203\226\343\203\227\343\203\255\343\202\260\343\203\251\343\203\237\343\203\263\343\202\260.md" +++ "b/source/_posts/2023/20230628a__RFC\351\226\262\350\246\247\350\243\234\345\212\251\343\203\204\343\203\274\343\203\253\343\202\222\344\275\234\343\202\212\343\201\276\343\201\227\343\201\237_+_\343\203\252\343\202\242\343\202\257\343\203\206\343\202\243\343\203\226\343\203\227\343\203\255\343\202\260\343\203\251\343\203\237\343\203\263\343\202\260.md" @@ -9,7 +9,7 @@ tag: - RFC - Web category: - - Programming + - Frontend thumbnail: /images/2023/20230628a/thumbnail.png author: 澁川喜規 lede: "お仕事をしていて、たまにRFCを読みたくなることってよくあると思うのですが、読む対象のRFCがたくさんあると、どれから読めばいいのかな？読み落としたのはないのか？みたいなところが脳のワーキングメモリーから溢れて収集がつかなくなりがちなので、Graphvizで出力してRFCの関連を簡単に確認できるツールを作ってみました。" diff --git "a/source/_posts/2023/20230724a_Angular\343\202\222\343\201\214\343\202\223\343\201\260\343\202\211\343\201\252\343\201\204\343\201\247\346\233\270\343\201\217.md" "b/source/_posts/2023/20230724a_Angular\343\202\222\343\201\214\343\202\223\343\201\260\343\202\211\343\201\252\343\201\204\343\201\247\346\233\270\343\201\217.md" index c1c89bdb12bb..78457ad6c4f8 100644 --- "a/source/_posts/2023/20230724a_Angular\343\202\222\343\201\214\343\202\223\343\201\260\343\202\211\343\201\252\343\201\204\343\201\247\346\233\270\343\201\217.md" +++ "b/source/_posts/2023/20230724a_Angular\343\202\222\343\201\214\343\202\223\343\201\260\343\202\211\343\201\252\343\201\204\343\201\247\346\233\270\343\201\217.md" @@ -4,11 +4,10 @@ date: 2023/07/24 00:00:00 postid: a tag: - Angular - - フロントエンド - RxJS - DI category: - - Programming + - Frontend thumbnail: /images/2023/20230724a/thumbnail.png author: 澁川喜規 lede: "他のフレームワークをいろいろ触ると、Angularはかなり独特な雰囲気があります。隠しきれないJava感というか、他のフレームワークでは存在しない様々な概念が見え隠れして、それをキャッチアップするだけでも結構重いです。もちろん、それぞれ意味があって..." diff --git "a/source/_posts/2023/20230821a_Playwright\351\200\243\350\274\211\345\247\213\343\201\276\343\202\212\343\201\276\343\201\231.md" "b/source/_posts/2023/20230821a_Playwright\351\200\243\350\274\211\345\247\213\343\201\276\343\202\212\343\201\276\343\201\231.md" index f2a020141c81..46cb901af4a3 100644 --- "a/source/_posts/2023/20230821a_Playwright\351\200\243\350\274\211\345\247\213\343\201\276\343\202\212\343\201\276\343\201\231.md" +++ "b/source/_posts/2023/20230821a_Playwright\351\200\243\350\274\211\345\247\213\343\201\276\343\202\212\343\201\276\343\201\231.md" @@ -5,10 +5,9 @@ postid: a tag: - Playwright - E2Eテスト - - フロントエンド - Cypress category: - - Programming + - Frontend thumbnail: /images/2023/20230821a/thumbnail.png author: 澁川喜規 lede: "現在人気が高まりつつあって、Cypressを追い抜こうとしているのがPlaywrightです。かなりCypressを意識して機能追加を行なってきている印象があります。現時点では..." diff --git "a/source/_posts/2023/20230822a_Playwright\343\201\256\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253\346\226\271\346\263\225\343\201\250\344\275\277\343\201\204\346\226\271.md" "b/source/_posts/2023/20230822a_Playwright\343\201\256\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253\346\226\271\346\263\225\343\201\250\344\275\277\343\201\204\346\226\271.md" index 1a4a81853ede..1f9d0c492091 100644 --- "a/source/_posts/2023/20230822a_Playwright\343\201\256\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253\346\226\271\346\263\225\343\201\250\344\275\277\343\201\204\346\226\271.md" +++ "b/source/_posts/2023/20230822a_Playwright\343\201\256\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253\346\226\271\346\263\225\343\201\250\344\275\277\343\201\204\346\226\271.md" @@ -6,7 +6,7 @@ tag: - Playwright - 環境構築 category: - - Programming + - Frontend thumbnail: /images/2023/20230822a/thumbnail.png author: 藤戸四恩 lede: "Playwrightは、Microsoftが開発したE2Eテストフレームワークです。Cypressと同様に、Chromium、Firefox、Safariなどのブラウザ上でE2Eテストの実行を自動化できます。 " diff --git "a/source/_posts/2023/20230823a_Playwright\343\201\256\347\222\260\345\242\203\346\247\213\347\257\211\357\274\210VSCode_Dev_Container\347\267\250\357\274\211.md" "b/source/_posts/2023/20230823a_Playwright\343\201\256\347\222\260\345\242\203\346\247\213\347\257\211\357\274\210VSCode_Dev_Container\347\267\250\357\274\211.md" index 60069e241e43..a40956bdad74 100644 --- "a/source/_posts/2023/20230823a_Playwright\343\201\256\347\222\260\345\242\203\346\247\213\347\257\211\357\274\210VSCode_Dev_Container\347\267\250\357\274\211.md" +++ "b/source/_posts/2023/20230823a_Playwright\343\201\256\347\222\260\345\242\203\346\247\213\347\257\211\357\274\210VSCode_Dev_Container\347\267\250\357\274\211.md" @@ -8,7 +8,7 @@ tag: - Docker - 環境構築 category: - - DevOps + - Frontend thumbnail: /images/2023/20230823a/thumbnail.png author: 武田大輝 lede: "VSCode Dev Containersを利用してPlaywrightの実行環境をコンテナ上に構築する手順を説明します。" diff --git "a/source/_posts/2023/20230824a_\343\202\244\343\203\201\346\212\274\343\201\227\343\200\202Playwright\343\201\256\345\277\253\351\201\251\346\251\237\350\203\275.md" "b/source/_posts/2023/20230824a_\343\202\244\343\203\201\346\212\274\343\201\227\343\200\202Playwright\343\201\256\345\277\253\351\201\251\346\251\237\350\203\275.md" index d4563da1f5b2..72809bc0017a 100644 --- "a/source/_posts/2023/20230824a_\343\202\244\343\203\201\346\212\274\343\201\227\343\200\202Playwright\343\201\256\345\277\253\351\201\251\346\251\237\350\203\275.md" +++ "b/source/_posts/2023/20230824a_\343\202\244\343\203\201\346\212\274\343\201\227\343\200\202Playwright\343\201\256\345\277\253\351\201\251\346\251\237\350\203\275.md" @@ -5,9 +5,8 @@ postid: a tag: - Playwright - E2Eテスト - - フロントエンド category: - - Programming + - Frontend thumbnail: /images/2023/20230824a/thumbnail.png author: 木戸俊輔 lede: "Playwright連載3日目の今回は、その便利機能たちをCypressと比較しながら紹介します。Cypressで馴染みの便利機能がPlaywrightではどう実現されているのか、E2Eテストに関わる関係者の悩みを解決するどんな便利機能が備わっているのか、詳しく見てみましょう。" diff --git "a/source/_posts/2023/20230825a_Playwright\343\201\256\343\203\206\343\202\271\343\203\210\343\203\251\343\203\263\343\203\212\343\203\274\343\202\222\344\273\226\343\201\256\343\203\206\343\202\271\343\203\210\343\203\251\343\202\244\343\203\226\343\203\251\343\203\252\343\201\250\346\257\224\350\274\203\343\201\231\343\202\213.md" "b/source/_posts/2023/20230825a_Playwright\343\201\256\343\203\206\343\202\271\343\203\210\343\203\251\343\203\263\343\203\212\343\203\274\343\202\222\344\273\226\343\201\256\343\203\206\343\202\271\343\203\210\343\203\251\343\202\244\343\203\226\343\203\251\343\203\252\343\201\250\346\257\224\350\274\203\343\201\231\343\202\213.md" index 7223b0aec606..5eb65f0bc66a 100644 --- "a/source/_posts/2023/20230825a_Playwright\343\201\256\343\203\206\343\202\271\343\203\210\343\203\251\343\203\263\343\203\212\343\203\274\343\202\222\344\273\226\343\201\256\343\203\206\343\202\271\343\203\210\343\203\251\343\202\244\343\203\226\343\203\251\343\203\252\343\201\250\346\257\224\350\274\203\343\201\231\343\202\213.md" +++ "b/source/_posts/2023/20230825a_Playwright\343\201\256\343\203\206\343\202\271\343\203\210\343\203\251\343\203\263\343\203\212\343\203\274\343\202\222\344\273\226\343\201\256\343\203\206\343\202\271\343\203\210\343\203\251\343\202\244\343\203\226\343\203\251\343\203\252\343\201\250\346\257\224\350\274\203\343\201\231\343\202\213.md" @@ -13,7 +13,7 @@ tag: - Jest - Mocha category: - - Programming + - Frontend thumbnail: /images/2023/20230825a/thumbnail.png author: 澁川喜規 lede: "テスティングフレームワークには大きく2つの流派があります。ひとつはJUnit、あるいはその祖先の　SUnitをベースにしたTDDスタイルものです。TDDスタイルはテスト関数、もしくはメソッドを実行します。" diff --git "a/source/_posts/2023/20230829a_\343\202\257\343\203\251\343\202\244\343\202\242\343\203\263\343\203\210\357\274\217\343\202\265\343\203\274\343\203\220\346\247\213\346\210\220\343\201\247\343\201\277\343\202\213Playwright.md" "b/source/_posts/2023/20230829a_\343\202\257\343\203\251\343\202\244\343\202\242\343\203\263\343\203\210\357\274\217\343\202\265\343\203\274\343\203\220\346\247\213\346\210\220\343\201\247\343\201\277\343\202\213Playwright.md" index bf3dfd998b02..ff066e22d9a1 100644 --- "a/source/_posts/2023/20230829a_\343\202\257\343\203\251\343\202\244\343\202\242\343\203\263\343\203\210\357\274\217\343\202\265\343\203\274\343\203\220\346\247\213\346\210\220\343\201\247\343\201\277\343\202\213Playwright.md" +++ "b/source/_posts/2023/20230829a_\343\202\257\343\203\251\343\202\244\343\202\242\343\203\263\343\203\210\357\274\217\343\202\265\343\203\274\343\203\220\346\247\213\346\210\220\343\201\247\343\201\277\343\202\213Playwright.md" @@ -5,7 +5,7 @@ postid: a tag: - Playwright category: - - Programming + - Frontend thumbnail: /images/2023/20230829a/thumbnail.png author: 武田大輝 lede: "Playwrightはさまざまな言語でテストを記述することが可能です。このような他言語展開を可能にしているPlaywrightのアーキテクチャについて調べてみました。" diff --git "a/source/_posts/2023/20230901a_Unity\343\201\256Shader\343\201\247VR\343\203\227\343\203\251\343\203\215\343\202\277\343\203\252\343\202\246\343\203\240\343\202\222\344\275\234\343\201\243\343\201\237\343\201\221\343\201\251\343\201\206\343\201\276\343\201\217\343\201\204\343\201\213\343\201\232\346\202\224\343\201\227\343\201\213\343\201\243\343\201\237\343\201\256\343\201\247\350\207\252\344\275\234\343\201\256\346\230\237\343\202\222\344\275\234\343\201\243\343\201\237\343\202\211\345\256\207\345\256\231\343\201\214\347\265\202\343\202\217\343\201\243\343\201\237.md" "b/source/_posts/2023/20230901a_Unity\343\201\256Shader\343\201\247VR\343\203\227\343\203\251\343\203\215\343\202\277\343\203\252\343\202\246\343\203\240\343\202\222\344\275\234\343\201\243\343\201\237\343\201\221\343\201\251\343\201\206\343\201\276\343\201\217\343\201\204\343\201\213\343\201\232\346\202\224\343\201\227\343\201\213\343\201\243\343\201\237\343\201\256\343\201\247\350\207\252\344\275\234\343\201\256\346\230\237\343\202\222\344\275\234\343\201\243\343\201\237\343\202\211\345\256\207\345\256\231\343\201\214\347\265\202\343\202\217\343\201\243\343\201\237.md" index 87389e0f5069..d8d3c78f8875 100644 --- "a/source/_posts/2023/20230901a_Unity\343\201\256Shader\343\201\247VR\343\203\227\343\203\251\343\203\215\343\202\277\343\203\252\343\202\246\343\203\240\343\202\222\344\275\234\343\201\243\343\201\237\343\201\221\343\201\251\343\201\206\343\201\276\343\201\217\343\201\204\343\201\213\343\201\232\346\202\224\343\201\227\343\201\213\343\201\243\343\201\237\343\201\256\343\201\247\350\207\252\344\275\234\343\201\256\346\230\237\343\202\222\344\275\234\343\201\243\343\201\237\343\202\211\345\256\207\345\256\231\343\201\214\347\265\202\343\202\217\343\201\243\343\201\237.md" +++ "b/source/_posts/2023/20230901a_Unity\343\201\256Shader\343\201\247VR\343\203\227\343\203\251\343\203\215\343\202\277\343\203\252\343\202\246\343\203\240\343\202\222\344\275\234\343\201\243\343\201\237\343\201\221\343\201\251\343\201\206\343\201\276\343\201\217\343\201\204\343\201\213\343\201\232\346\202\224\343\201\227\343\201\213\343\201\243\343\201\237\343\201\256\343\201\247\350\207\252\344\275\234\343\201\256\346\230\237\343\202\222\344\275\234\343\201\243\343\201\237\343\202\211\345\256\207\345\256\231\343\201\214\347\265\202\343\202\217\343\201\243\343\201\237.md" @@ -5,10 +5,9 @@ postid: a tag: - Unity - Shader - - VR - プラネタリウム category: - - Programming + - VR thumbnail: /images/2023/20230901a/thumbnail.png author: 藤井亮佑 lede: "実は私、星を見るのが好きなので、天体望遠鏡を買ったり、星を撮るためにカメラを買ったりしています。せっかくならいい環境で見たいので、南は沖縄から北は北海道まで星を見に行っています。（海外も行きたい）" diff --git "a/source/_posts/2023/20230925a_ChatGPT\343\201\247E2E\343\203\206\343\202\271\343\203\210\343\202\263\343\203\274\343\203\211\350\207\252\345\213\225\344\275\234\346\210\220.md" "b/source/_posts/2023/20230925a_ChatGPT\343\201\247E2E\343\203\206\343\202\271\343\203\210\343\202\263\343\203\274\343\203\211\350\207\252\345\213\225\344\275\234\346\210\220.md" index 2be8e61c4aa5..b8448198bb08 100644 --- "a/source/_posts/2023/20230925a_ChatGPT\343\201\247E2E\343\203\206\343\202\271\343\203\210\343\202\263\343\203\274\343\203\211\350\207\252\345\213\225\344\275\234\346\210\220.md" +++ "b/source/_posts/2023/20230925a_ChatGPT\343\201\247E2E\343\203\206\343\202\271\343\203\210\343\202\263\343\203\274\343\203\211\350\207\252\345\213\225\344\275\234\346\210\220.md" @@ -11,7 +11,7 @@ tag: - Cypress - 登壇レポート category: - - Programming + - Frontend thumbnail: /images/2023/20230925a/thumbnail.png author: 澁川喜規 lede: "9/7に行われた技育CAMPアカデミアというイベントでPlaywrightについて話をしてきました。テストというと、設計手法であるところのテスト駆動開発は別としてちょっと業務っぽい感じがして学生さんにはちょっと響かないかな、というのも心配でしたが" diff --git "a/source/_posts/2023/20231003a_\343\202\242\343\202\257\343\202\273\343\202\267\343\203\223\343\203\252\343\203\206\343\202\243\343\201\253\350\200\203\346\205\256\343\201\227\343\201\237\345\207\272\345\212\233\345\200\244\343\201\256HTML\343\203\236\343\203\274\343\202\257\343\202\242\343\203\203\343\203\227.md" "b/source/_posts/2023/20231003a_\343\202\242\343\202\257\343\202\273\343\202\267\343\203\223\343\203\252\343\203\206\343\202\243\343\201\253\350\200\203\346\205\256\343\201\227\343\201\237\345\207\272\345\212\233\345\200\244\343\201\256HTML\343\203\236\343\203\274\343\202\257\343\202\242\343\203\203\343\203\227.md" index 375b04c669a7..695ebe06b0ed 100644 --- "a/source/_posts/2023/20231003a_\343\202\242\343\202\257\343\202\273\343\202\267\343\203\223\343\203\252\343\203\206\343\202\243\343\201\253\350\200\203\346\205\256\343\201\227\343\201\237\345\207\272\345\212\233\345\200\244\343\201\256HTML\343\203\236\343\203\274\343\202\257\343\202\242\343\203\203\343\203\227.md" +++ "b/source/_posts/2023/20231003a_\343\202\242\343\202\257\343\202\273\343\202\267\343\203\223\343\203\252\343\203\206\343\202\243\343\201\253\350\200\203\346\205\256\343\201\227\343\201\237\345\207\272\345\212\233\345\200\244\343\201\256HTML\343\203\236\343\203\274\343\202\257\343\202\242\343\203\203\343\203\227.md" @@ -8,7 +8,7 @@ tag: - Playwright - accessibility category: - - Programming + - Frontend thumbnail: /images/2023/20231003a/thumbnail.png author: 澁川喜規 lede: "以前書いたCypressの記事で、アクセシビリティ情報を使うことで壊れにくくなるよ、と（今では当たり前のようにみんな言っていますが）いう記事を書きました。この時は出力に使うべきロールが何か？というのがわかっていませんでした。> サーバーからとってきた動的な値を表示するテキスト" diff --git "a/source/_posts/2023/20231013a_Meta_Quest_3\351\226\213\345\260\201\343\201\256\345\204\200\357\274\206\343\203\225\343\203\253\343\202\253\343\203\251\343\203\274\343\203\221\343\202\271\343\202\271\343\203\253\343\203\274\343\201\247\345\256\266\343\201\253\343\203\206\343\203\253\343\203\237\343\203\263\343\202\222\347\275\256\343\201\204\343\201\237.md" "b/source/_posts/2023/20231013a_Meta_Quest_3\351\226\213\345\260\201\343\201\256\345\204\200\357\274\206\343\203\225\343\203\253\343\202\253\343\203\251\343\203\274\343\203\221\343\202\271\343\202\271\343\203\253\343\203\274\343\201\247\345\256\266\343\201\253\343\203\206\343\203\253\343\203\237\343\203\263\343\202\222\347\275\256\343\201\204\343\201\237.md" index 9cbe5af72e29..41a4be0ef2f1 100644 --- "a/source/_posts/2023/20231013a_Meta_Quest_3\351\226\213\345\260\201\343\201\256\345\204\200\357\274\206\343\203\225\343\203\253\343\202\253\343\203\251\343\203\274\343\203\221\343\202\271\343\202\271\343\203\253\343\203\274\343\201\247\345\256\266\343\201\253\343\203\206\343\203\253\343\203\237\343\203\263\343\202\222\347\275\256\343\201\204\343\201\237.md" +++ "b/source/_posts/2023/20231013a_Meta_Quest_3\351\226\213\345\260\201\343\201\256\345\204\200\357\274\206\343\203\225\343\203\253\343\202\253\343\203\251\343\203\274\343\203\221\343\202\271\343\202\271\343\203\253\343\203\274\343\201\247\345\256\266\343\201\253\343\203\206\343\203\253\343\203\237\343\203\263\343\202\222\347\275\256\343\201\204\343\201\237.md" @@ -3,7 +3,6 @@ title: "Meta Quest 3開封の儀＆フルカラーパススルーで家にテル date: 2023/10/13 00:00:00 postid: a tag: - - VR - MetaQuest3 category: - VR @@ -15,7 +14,7 @@ lede: "2023年10月10日、とうとう発売されましたね。Meta Quest 3 こんにちは。TIG DX ユニット所属、金欠コンサルタントの藤井です。 -2023年10月10日、とうとう発売されましたね。[Meta Quest 3](https://www.meta.com/jp/quest/quest-3/)（以下 Quest3 と略記）が。しっかり予約して発売日に手に入れようとしたんですが、何故か配達日がズレて 1 日遅れで入手しました。 +2023年10月10日、とうとう発売されましたね。[Meta Quest 3](https://www.meta.com/jp/quest/quest-3/)（以下 Quest3 と略記）が。しっかり予約して発売日に手に入れようとしたんですが、何故か配達日がズレて 1 日遅れで入手しました。 せっかくなので、開封の儀と、Quest3 の目玉機能の1つである、[フルカラーパススルー](https://www.meta.com/ja-jp/help/quest/articles/getting-started/getting-started-with-quest-pro/full-color-passthrough/)を使って遊んでみようと思います。 ちなみに、この記事は[immersed](https://immersed.com/)を用いて、VR 空間のバーチャルディスプレイを使って書いています。バーチャルデスクトップについては[井上さんの記事をご参照](/articles/20221031b)ください。 diff --git "a/source/_posts/2023/20231017a_\345\256\237\345\213\231\347\265\214\351\250\223\343\202\274\343\203\255\343\201\213\343\202\211\343\201\256\343\202\242\343\203\253\343\203\220\343\202\244\343\203\210\344\275\223\351\250\223\350\250\230.md" "b/source/_posts/2023/20231017a_\345\256\237\345\213\231\347\265\214\351\250\223\343\202\274\343\203\255\343\201\213\343\202\211\343\201\256\343\202\242\343\203\253\343\203\220\343\202\244\343\203\210\344\275\223\351\250\223\350\250\230.md" index 06c51a4b6a9a..69db1c00b0fa 100644 --- "a/source/_posts/2023/20231017a_\345\256\237\345\213\231\347\265\214\351\250\223\343\202\274\343\203\255\343\201\213\343\202\211\343\201\256\343\202\242\343\203\253\343\203\220\343\202\244\343\203\210\344\275\223\351\250\223\350\250\230.md" +++ "b/source/_posts/2023/20231017a_\345\256\237\345\213\231\347\265\214\351\250\223\343\202\274\343\203\255\343\201\213\343\202\211\343\201\256\343\202\242\343\203\253\343\203\220\343\202\244\343\203\210\344\275\223\351\250\223\350\250\230.md" @@ -7,7 +7,7 @@ tag: - アルバイト - AtCoder category: - - Programming + - DataScience thumbnail: /images/2023/20231017a/thumbnail.jpg author: 戸北匠 lede: "SAIGからアルバイトに応募して、現在6ヶ月くらい勤務しています。記事を執筆する機会をいただいたので、アルバイト体験記と題して、この半年で行った業務やその感想、成長できたことを振り返ります。" diff --git "a/source/_posts/2023/20231128a_data-testid\343\201\257\343\201\204\343\201\244\344\275\277\343\201\206\343\201\271\343\201\215\343\201\213\357\274\237\343\201\235\343\202\202\343\201\235\343\202\202\344\275\277\343\201\206\343\201\271\343\201\215\343\201\252\343\201\256\343\201\213\357\274\237.md" "b/source/_posts/2023/20231128a_data-testid\343\201\257\343\201\204\343\201\244\344\275\277\343\201\206\343\201\271\343\201\215\343\201\213\357\274\237\343\201\235\343\202\202\343\201\235\343\202\202\344\275\277\343\201\206\343\201\271\343\201\215\343\201\252\343\201\256\343\201\213\357\274\237.md" index 0c7d690a7deb..500bf2c66edb 100644 --- "a/source/_posts/2023/20231128a_data-testid\343\201\257\343\201\204\343\201\244\344\275\277\343\201\206\343\201\271\343\201\215\343\201\213\357\274\237\343\201\235\343\202\202\343\201\235\343\202\202\344\275\277\343\201\206\343\201\271\343\201\215\343\201\252\343\201\256\343\201\213\357\274\237.md" +++ "b/source/_posts/2023/20231128a_data-testid\343\201\257\343\201\204\343\201\244\344\275\277\343\201\206\343\201\271\343\201\215\343\201\213\357\274\237\343\201\235\343\202\202\343\201\235\343\202\202\344\275\277\343\201\206\343\201\271\343\201\215\343\201\252\343\201\256\343\201\213\357\274\237.md" @@ -7,7 +7,7 @@ tag: - Cypress - Playwright category: - - Programming + - Frontend thumbnail: /images/2023/20231128a/thumbnail.png author: 澁川喜規 lede: "Playwrightあるいはそのロケーターの元ネタとなっているTesting Libraryでは、DOMを指定する方法として data-testid 属性を扱ったクエリーを提供しています。" diff --git "a/source/_posts/2023/20231130a_Next.js\343\201\256Server_Actions\343\201\257\343\200\201\343\202\265\343\203\274\343\203\220\343\203\274\345\201\264\343\201\256\343\203\220\343\203\252\343\203\207\343\203\274\343\202\267\343\203\247\343\203\263\343\201\257\344\270\215\350\246\201\343\201\252\343\201\256\343\201\213\357\274\237.md" "b/source/_posts/2023/20231130a_Next.js\343\201\256Server_Actions\343\201\257\343\200\201\343\202\265\343\203\274\343\203\220\343\203\274\345\201\264\343\201\256\343\203\220\343\203\252\343\203\207\343\203\274\343\202\267\343\203\247\343\203\263\343\201\257\344\270\215\350\246\201\343\201\252\343\201\256\343\201\213\357\274\237.md" index 257505976f1c..1f8c619f352d 100644 --- "a/source/_posts/2023/20231130a_Next.js\343\201\256Server_Actions\343\201\257\343\200\201\343\202\265\343\203\274\343\203\220\343\203\274\345\201\264\343\201\256\343\203\220\343\203\252\343\203\207\343\203\274\343\202\267\343\203\247\343\203\263\343\201\257\344\270\215\350\246\201\343\201\252\343\201\256\343\201\213\357\274\237.md" +++ "b/source/_posts/2023/20231130a_Next.js\343\201\256Server_Actions\343\201\257\343\200\201\343\202\265\343\203\274\343\203\220\343\203\274\345\201\264\343\201\256\343\203\220\343\203\252\343\203\207\343\203\274\343\202\267\343\203\247\343\203\263\343\201\257\344\270\215\350\246\201\343\201\252\343\201\256\343\201\213\357\274\237.md" @@ -5,11 +5,10 @@ postid: a tag: - Next.js - React - - フロントエンド - Web - バリデーション category: - - Programming + - Frontend thumbnail: /images/2023/20231130a/thumbnail.png author: 澁川喜規 lede: "Next.jsの新機能でTwitter上でも少しバズったのがServer Actionsです。クライアントコンポーネント上にサーバー上で行うロジックを直接書き込むことが可能です。" diff --git "a/source/_posts/2023/20231214a_React_Server_Component\343\201\247\343\202\202Context\343\201\247\347\212\266\346\205\213\343\202\222\345\205\261\346\234\211\343\201\231\343\202\213.md" "b/source/_posts/2023/20231214a_React_Server_Component\343\201\247\343\202\202Context\343\201\247\347\212\266\346\205\213\343\202\222\345\205\261\346\234\211\343\201\231\343\202\213.md" index 658c9b2c093a..145c02367bcc 100644 --- "a/source/_posts/2023/20231214a_React_Server_Component\343\201\247\343\202\202Context\343\201\247\347\212\266\346\205\213\343\202\222\345\205\261\346\234\211\343\201\231\343\202\213.md" +++ "b/source/_posts/2023/20231214a_React_Server_Component\343\201\247\343\202\202Context\343\201\247\347\212\266\346\205\213\343\202\222\345\205\261\346\234\211\343\201\231\343\202\213.md" @@ -6,9 +6,8 @@ tag: - React - Next.js - RSC - - フロントエンド category: - - Programming + - Frontend thumbnail: /images/2023/20231214a/thumbnail.png author: 澁川喜規 lede: "Next.jsの最近の大きな目玉機能はReact Server Componentです。パフォーマンスアップに有効だったり、gRPCだRESTだGraphQLだ論争を終わりにするServer Actionsなど盛りだくさんです。一方で、サーバーコンポーネントはコーディング上の制約がいろいろあります。" diff --git "a/source/_posts/2023/20231215a_\343\203\211\343\202\255\343\203\245\343\203\241\343\203\263\343\203\210\347\256\241\347\220\206\343\202\222\345\210\266\343\201\231\343\202\213_\351\231\263\350\205\220\345\214\226\343\202\222\351\230\262\343\201\220\343\201\237\343\202\201\343\201\256\345\256\237\350\267\265\344\272\213\344\276\213_Lunch_LT_\343\201\253\347\231\273\345\243\207\343\201\227\343\201\276\343\201\227\343\201\237.md" "b/source/_posts/2023/20231215a_\343\203\211\343\202\255\343\203\245\343\203\241\343\203\263\343\203\210\347\256\241\347\220\206\343\202\222\345\210\266\343\201\231\343\202\213_\351\231\263\350\205\220\345\214\226\343\202\222\351\230\262\343\201\220\343\201\237\343\202\201\343\201\256\345\256\237\350\267\265\344\272\213\344\276\213_Lunch_LT_\343\201\253\347\231\273\345\243\207\343\201\227\343\201\276\343\201\227\343\201\237.md" index c1249d33f6f3..b43661dadfb4 100644 --- "a/source/_posts/2023/20231215a_\343\203\211\343\202\255\343\203\245\343\203\241\343\203\263\343\203\210\347\256\241\347\220\206\343\202\222\345\210\266\343\201\231\343\202\213_\351\231\263\350\205\220\345\214\226\343\202\222\351\230\262\343\201\220\343\201\237\343\202\201\343\201\256\345\256\237\350\267\265\344\272\213\344\276\213_Lunch_LT_\343\201\253\347\231\273\345\243\207\343\201\227\343\201\276\343\201\227\343\201\237.md" +++ "b/source/_posts/2023/20231215a_\343\203\211\343\202\255\343\203\245\343\203\241\343\203\263\343\203\210\347\256\241\347\220\206\343\202\222\345\210\266\343\201\231\343\202\213_\351\231\263\350\205\220\345\214\226\343\202\222\351\230\262\343\201\220\343\201\237\343\202\201\343\201\256\345\256\237\350\267\265\344\272\213\344\276\213_Lunch_LT_\343\201\253\347\231\273\345\243\207\343\201\227\343\201\276\343\201\227\343\201\237.md" @@ -7,7 +7,7 @@ tag: - ドキュメント - 開発手法 category: - - Programming + - DevOps thumbnail: /images/2023/20231215a/thumbnail.png author: 真野隼記 lede: "Findyさん主催のドキュメント管理を制する 陳腐化を防ぐための実践事例 Lunch LTに「設計ドキュメント腐る問題、Git管理で運用してみた本当のところ」というタイトルで登壇しました" diff --git "a/source/_posts/2024/20240124a_\343\201\274\343\201\217\343\201\256\343\201\213\343\202\223\343\201\214\343\201\210\343\201\237\343\201\225\343\201\204\343\201\215\343\202\207\343\201\206\343\201\256\343\202\255\343\203\243\343\203\203\343\202\267\343\203\245\346\210\246\347\225\245.md" "b/source/_posts/2024/20240124a_\343\201\274\343\201\217\343\201\256\343\201\213\343\202\223\343\201\214\343\201\210\343\201\237\343\201\225\343\201\204\343\201\215\343\202\207\343\201\206\343\201\256\343\202\255\343\203\243\343\203\203\343\202\267\343\203\245\346\210\246\347\225\245.md" index 69df63b1b746..a80bc1b85cc5 100644 --- "a/source/_posts/2024/20240124a_\343\201\274\343\201\217\343\201\256\343\201\213\343\202\223\343\201\214\343\201\210\343\201\237\343\201\225\343\201\204\343\201\215\343\202\207\343\201\206\343\201\256\343\202\255\343\203\243\343\203\203\343\202\267\343\203\245\346\210\246\347\225\245.md" +++ "b/source/_posts/2024/20240124a_\343\201\274\343\201\217\343\201\256\343\201\213\343\202\223\343\201\214\343\201\210\343\201\237\343\201\225\343\201\204\343\201\215\343\202\207\343\201\206\343\201\256\343\202\255\343\203\243\343\203\203\343\202\267\343\203\245\346\210\246\347\225\245.md" @@ -9,7 +9,7 @@ tag: - Redis - memcached category: - - Infrastructure + - DB thumbnail: /images/2024/20240124a/thumbnail.png author: 村瀬善則 lede: "動作が遅いサービスはストレスがたまるので利用したくないですよね。例えばネットショッピングする際に商品ページの表示が遅かったり検索してもすぐに結果が表示されないとそのサービスを利用するのをやめてしまいたくなります。" diff --git "a/source/_posts/2024/20240208a_\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260\343\202\202\343\202\242\343\203\251\343\203\274\343\203\210\343\202\202\343\200\201React\343\201\247\345\255\220\343\202\263\343\203\263\343\203\235\343\203\274\343\203\215\343\203\263\343\203\210\343\201\256\351\226\213\351\226\211\347\256\241\347\220\206\343\202\222\345\256\237\350\243\205\343\201\231\343\202\213.md" "b/source/_posts/2024/20240208a_\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260\343\202\202\343\202\242\343\203\251\343\203\274\343\203\210\343\202\202\343\200\201React\343\201\247\345\255\220\343\202\263\343\203\263\343\203\235\343\203\274\343\203\215\343\203\263\343\203\210\343\201\256\351\226\213\351\226\211\347\256\241\347\220\206\343\202\222\345\256\237\350\243\205\343\201\231\343\202\213.md" index 38e2e2b91646..a468a485f37f 100644 --- "a/source/_posts/2024/20240208a_\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260\343\202\202\343\202\242\343\203\251\343\203\274\343\203\210\343\202\202\343\200\201React\343\201\247\345\255\220\343\202\263\343\203\263\343\203\235\343\203\274\343\203\215\343\203\263\343\203\210\343\201\256\351\226\213\351\226\211\347\256\241\347\220\206\343\202\222\345\256\237\350\243\205\343\201\231\343\202\213.md" +++ "b/source/_posts/2024/20240208a_\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260\343\202\202\343\202\242\343\203\251\343\203\274\343\203\210\343\202\202\343\200\201React\343\201\247\345\255\220\343\202\263\343\203\263\343\203\235\343\203\274\343\203\215\343\203\263\343\203\210\343\201\256\351\226\213\351\226\211\347\256\241\347\220\206\343\202\222\345\256\237\350\243\205\343\201\231\343\202\213.md" @@ -4,10 +4,9 @@ date: 2024/02/08 00:00:00 postid: a tag: - React - - フロントエンド - TypeScript category: - - Programming + - Frontend thumbnail: /images/2024/20240208a/thumbnail.png author: 澁川喜規 lede: "Reactでは、画面に関わる表示の制御はかならず何かしらのステート管理を行いそれで行います。ダイアログの場合は開閉をuseStateで作ったフラグで管理するみたいな感じです。たとえば..." @@ -75,7 +74,7 @@ import { useCallback, useState } from "react" export function useOpener(callback?: (v: T, isOpen: boolean) => void): [()=>void, {isOpen: boolean, close: ()=>void, callback:(isOpen: boolean, v: T)=>void}] { const [ isOpen, setIsOpen ] = useState(false); - + const cb = useCallback((isOpen: boolean, v: T) => { if (callback) { callback(v, isOpen) @@ -200,7 +199,7 @@ export function Alert({children, opener}: {children : ReactNode, opener: Opener< }, [isOpen]) return ( - isOpen ? + isOpen ?
{children}
: null diff --git "a/source/_posts/2024/20240226a_AWS_Lambda\343\201\256\343\203\251\343\203\263\343\202\277\343\202\244\343\203\240\343\202\222_provided.al2023_\343\201\253\346\233\264\346\226\260\343\201\231\343\202\213\351\232\233\343\200\2012\343\203\220\343\202\244\343\203\212\343\203\252\343\202\222zip\343\201\227\343\201\246\345\257\276\345\277\234\343\201\227\343\201\246\343\201\277\343\201\237.md" "b/source/_posts/2024/20240226a_AWS_Lambda\343\201\256\343\203\251\343\203\263\343\202\277\343\202\244\343\203\240\343\202\222_provided.al2023_\343\201\253\346\233\264\346\226\260\343\201\231\343\202\213\351\232\233\343\200\2012\343\203\220\343\202\244\343\203\212\343\203\252\343\202\222zip\343\201\227\343\201\246\345\257\276\345\277\234\343\201\227\343\201\246\343\201\277\343\201\237.md" index 051b2e743548..bbc1fa118c1f 100644 --- "a/source/_posts/2024/20240226a_AWS_Lambda\343\201\256\343\203\251\343\203\263\343\202\277\343\202\244\343\203\240\343\202\222_provided.al2023_\343\201\253\346\233\264\346\226\260\343\201\231\343\202\213\351\232\233\343\200\2012\343\203\220\343\202\244\343\203\212\343\203\252\343\202\222zip\343\201\227\343\201\246\345\257\276\345\277\234\343\201\227\343\201\246\343\201\277\343\201\237.md" +++ "b/source/_posts/2024/20240226a_AWS_Lambda\343\201\256\343\203\251\343\203\263\343\202\277\343\202\244\343\203\240\343\202\222_provided.al2023_\343\201\253\346\233\264\346\226\260\343\201\231\343\202\213\351\232\233\343\200\2012\343\203\220\343\202\244\343\203\212\343\203\252\343\202\222zip\343\201\227\343\201\246\345\257\276\345\277\234\343\201\227\343\201\246\343\201\277\343\201\237.md" @@ -7,7 +7,7 @@ tag: - AWS - Makefile category: - - Programming + - DevOps thumbnail: /images/2024/20240226a/thumbnail.png author: 真野隼記 lede: "2023年末にAWS Lambda界隈で話題だった「AWS LambdaのGo 1.xランタイムのサポートが2023年12月31日で終了する」への対応を、あまりネットに無い特殊なやり方を採用して行ったので、考え方や実施メモを残します。" diff --git "a/source/_posts/2024/20240228a_Next.js\343\201\253\343\201\231\343\202\213\343\201\213\344\273\226\343\201\256\343\203\225\343\203\254\343\203\274\343\203\240\343\203\257\343\203\274\343\202\257\343\201\253\343\201\231\343\202\213\343\201\213\350\277\267\343\201\243\343\201\246\343\201\204\343\202\213\344\272\272\343\201\257Next.js\343\202\222\351\201\270\343\201\271\343\201\260\343\201\204\343\201\204.md" "b/source/_posts/2024/20240228a_Next.js\343\201\253\343\201\231\343\202\213\343\201\213\344\273\226\343\201\256\343\203\225\343\203\254\343\203\274\343\203\240\343\203\257\343\203\274\343\202\257\343\201\253\343\201\231\343\202\213\343\201\213\350\277\267\343\201\243\343\201\246\343\201\204\343\202\213\344\272\272\343\201\257Next.js\343\202\222\351\201\270\343\201\271\343\201\260\343\201\204\343\201\204.md" index 9840d927f5bd..261b5e039730 100644 --- "a/source/_posts/2024/20240228a_Next.js\343\201\253\343\201\231\343\202\213\343\201\213\344\273\226\343\201\256\343\203\225\343\203\254\343\203\274\343\203\240\343\203\257\343\203\274\343\202\257\343\201\253\343\201\231\343\202\213\343\201\213\350\277\267\343\201\243\343\201\246\343\201\204\343\202\213\344\272\272\343\201\257Next.js\343\202\222\351\201\270\343\201\271\343\201\260\343\201\204\343\201\204.md" +++ "b/source/_posts/2024/20240228a_Next.js\343\201\253\343\201\231\343\202\213\343\201\213\344\273\226\343\201\256\343\203\225\343\203\254\343\203\274\343\203\240\343\203\257\343\203\274\343\202\257\343\201\253\343\201\231\343\202\213\343\201\213\350\277\267\343\201\243\343\201\246\343\201\204\343\202\213\344\272\272\343\201\257Next.js\343\202\222\351\201\270\343\201\271\343\201\260\343\201\204\343\201\204.md" @@ -6,9 +6,8 @@ tag: - "Next.js" - React - 技術選定 - - フロントエンド category: - - Programming + - Frontend thumbnail: /images/2024/20240228a/thumbnail.jpg author: 澁川喜規 lede: "タイトルで言いたいことは言ってしまっているのですが、2017年ぐらいからNext.jsを使ってきて、最新の情報のキャッチアップとかもそんなに苦労はなくて、こだわりがないならNext.jsでいいのでは？という記事です。" diff --git "a/source/_posts/2024/20240402a_Dify\343\201\247\347\224\237\346\210\220AI\343\202\242\343\203\227\343\203\252\343\202\261\343\203\274\343\202\267\343\203\247\343\203\263\345\205\245\351\226\200\343\200\200\345\211\215\347\267\250\357\274\232\347\224\237\346\210\220AI\343\202\242\343\203\227\343\203\252\343\202\261\343\203\274\343\202\267\343\203\247\343\203\263\343\202\222\343\203\216\343\203\274\343\202\263\343\203\274\343\203\211\343\201\247\351\226\213\347\231\272.md" "b/source/_posts/2024/20240402a_Dify\343\201\247\347\224\237\346\210\220AI\343\202\242\343\203\227\343\203\252\343\202\261\343\203\274\343\202\267\343\203\247\343\203\263\345\205\245\351\226\200\343\200\200\345\211\215\347\267\250\357\274\232\347\224\237\346\210\220AI\343\202\242\343\203\227\343\203\252\343\202\261\343\203\274\343\202\267\343\203\247\343\203\263\343\202\222\343\203\216\343\203\274\343\202\263\343\203\274\343\203\211\343\201\247\351\226\213\347\231\272.md" index b4dbd0bab8f4..ea1fa00c3b95 100644 --- "a/source/_posts/2024/20240402a_Dify\343\201\247\347\224\237\346\210\220AI\343\202\242\343\203\227\343\203\252\343\202\261\343\203\274\343\202\267\343\203\247\343\203\263\345\205\245\351\226\200\343\200\200\345\211\215\347\267\250\357\274\232\347\224\237\346\210\220AI\343\202\242\343\203\227\343\203\252\343\202\261\343\203\274\343\202\267\343\203\247\343\203\263\343\202\222\343\203\216\343\203\274\343\202\263\343\203\274\343\203\211\343\201\247\351\226\213\347\231\272.md" +++ "b/source/_posts/2024/20240402a_Dify\343\201\247\347\224\237\346\210\220AI\343\202\242\343\203\227\343\203\252\343\202\261\343\203\274\343\202\267\343\203\247\343\203\263\345\205\245\351\226\200\343\200\200\345\211\215\347\267\250\357\274\232\347\224\237\346\210\220AI\343\202\242\343\203\227\343\203\252\343\202\261\343\203\274\343\202\267\343\203\247\343\203\263\343\202\222\343\203\216\343\203\274\343\202\263\343\203\274\343\203\211\343\201\247\351\226\213\347\231\272.md" @@ -8,7 +8,7 @@ tag: - ノーコード - Claude category: - - Programming + - DataScience thumbnail: /images/2024/20240402a/thumbnail.png author: 前川喜洋 lede: "DifyとAnthropic Claudeを使って簡単に生成AIアプリケーションを構築する方法をご紹介します。" diff --git "a/source/_posts/2024/20240404a_Dify\343\201\247\347\224\237\346\210\220AI\343\202\242\343\203\227\343\203\252\343\202\261\343\203\274\343\202\267\343\203\247\343\203\263\345\205\245\351\226\200\343\200\200\345\276\214\347\267\250\357\274\232\350\207\252\344\275\234\343\203\227\343\203\255\343\202\260\343\203\251\343\203\240\343\201\247\346\251\237\350\203\275\350\277\275\345\212\240\343\201\227\343\201\246\347\224\237\346\210\220AI\343\201\256\346\214\207\345\220\221\346\200\247\343\201\250\347\262\276\345\272\246\343\202\222\351\253\230\343\202\201\343\202\213.md" "b/source/_posts/2024/20240404a_Dify\343\201\247\347\224\237\346\210\220AI\343\202\242\343\203\227\343\203\252\343\202\261\343\203\274\343\202\267\343\203\247\343\203\263\345\205\245\351\226\200\343\200\200\345\276\214\347\267\250\357\274\232\350\207\252\344\275\234\343\203\227\343\203\255\343\202\260\343\203\251\343\203\240\343\201\247\346\251\237\350\203\275\350\277\275\345\212\240\343\201\227\343\201\246\347\224\237\346\210\220AI\343\201\256\346\214\207\345\220\221\346\200\247\343\201\250\347\262\276\345\272\246\343\202\222\351\253\230\343\202\201\343\202\213.md" index dc5f6059bb17..090c68301963 100644 --- "a/source/_posts/2024/20240404a_Dify\343\201\247\347\224\237\346\210\220AI\343\202\242\343\203\227\343\203\252\343\202\261\343\203\274\343\202\267\343\203\247\343\203\263\345\205\245\351\226\200\343\200\200\345\276\214\347\267\250\357\274\232\350\207\252\344\275\234\343\203\227\343\203\255\343\202\260\343\203\251\343\203\240\343\201\247\346\251\237\350\203\275\350\277\275\345\212\240\343\201\227\343\201\246\347\224\237\346\210\220AI\343\201\256\346\214\207\345\220\221\346\200\247\343\201\250\347\262\276\345\272\246\343\202\222\351\253\230\343\202\201\343\202\213.md" +++ "b/source/_posts/2024/20240404a_Dify\343\201\247\347\224\237\346\210\220AI\343\202\242\343\203\227\343\203\252\343\202\261\343\203\274\343\202\267\343\203\247\343\203\263\345\205\245\351\226\200\343\200\200\345\276\214\347\267\250\357\274\232\350\207\252\344\275\234\343\203\227\343\203\255\343\202\260\343\203\251\343\203\240\343\201\247\346\251\237\350\203\275\350\277\275\345\212\240\343\201\227\343\201\246\347\224\237\346\210\220AI\343\201\256\346\214\207\345\220\221\346\200\247\343\201\250\347\262\276\345\272\246\343\202\222\351\253\230\343\202\201\343\202\213.md" @@ -9,7 +9,7 @@ tag: - Claude - Java category: - - Programming + - DataScience thumbnail: /images/2024/20240404a/thumbnail.png author: 前川喜洋 lede: "前編のチュートリアル1で作ったSQL生成チャットbotをベースに、セルフレビュー機能を追加し、間違ったSQL文や存在しないテーブルやカラムを使用しようとした時に自動でやり直すように改修します。" diff --git "a/source/_posts/2024/20240405a_Vue.js\343\202\2222\343\201\213\343\202\2113\343\201\270\343\203\220\343\203\274\343\202\270\343\203\247\343\203\263\343\202\242\343\203\203\343\203\227\343\201\227\343\201\237\350\251\261.md" "b/source/_posts/2024/20240405a_Vue.js\343\202\2222\343\201\213\343\202\2113\343\201\270\343\203\220\343\203\274\343\202\270\343\203\247\343\203\263\343\202\242\343\203\203\343\203\227\343\201\227\343\201\237\350\251\261.md" index f826b9ff8a56..ddf254cce567 100644 --- "a/source/_posts/2024/20240405a_Vue.js\343\202\2222\343\201\213\343\202\2113\343\201\270\343\203\220\343\203\274\343\202\270\343\203\247\343\203\263\343\202\242\343\203\203\343\203\227\343\201\227\343\201\237\350\251\261.md" +++ "b/source/_posts/2024/20240405a_Vue.js\343\202\2222\343\201\213\343\202\2113\343\201\270\343\203\220\343\203\274\343\202\270\343\203\247\343\203\263\343\202\242\343\203\203\343\203\227\343\201\227\343\201\237\350\251\261.md" @@ -9,7 +9,7 @@ tag: - Vue3 - バージョン管理 category: - - Programming + - Frontend thumbnail: /images/2024/20240405a/thumbnail.png author: 太田寛明 lede: "Vueのバージョンアップを行って得た、所感や躓いたポイントを共有します。" diff --git "a/source/_posts/2024/20240422a_Vue.js\343\201\247\343\202\252\343\202\273\343\203\255\344\275\234\343\201\243\343\201\237\350\251\261.md" "b/source/_posts/2024/20240422a_Vue.js\343\201\247\343\202\252\343\202\273\343\203\255\344\275\234\343\201\243\343\201\237\350\251\261.md" index b475203adc6d..eb95749d2cda 100644 --- "a/source/_posts/2024/20240422a_Vue.js\343\201\247\343\202\252\343\202\273\343\203\255\344\275\234\343\201\243\343\201\237\350\251\261.md" +++ "b/source/_posts/2024/20240422a_Vue.js\343\201\247\343\202\252\343\202\273\343\203\255\344\275\234\343\201\243\343\201\237\350\251\261.md" @@ -8,7 +8,7 @@ tag: - やってみた - ゲーム制作 category: - - Programming + - Frontend thumbnail: /images/2024/20240422a/thumbnail.png author: 吉原涼子 lede: "社会人1年目のIT基礎知識向上のための取り組みの1つとして、Vue.jsでオセロを使った話をしたいと思います。" diff --git "a/source/_posts/2024/20240426b_GAS\343\201\247GoogleTasks\343\201\250\343\202\271\343\203\227\343\203\254\343\203\203\343\203\211\343\202\267\343\203\274\343\203\210\343\202\222\346\223\254\344\274\274\347\232\204\343\201\253\345\217\214\346\226\271\345\220\221\343\203\220\343\202\244\343\203\263\343\203\207\343\202\243\343\203\263\343\202\260\343\201\225\343\201\233\343\201\246\343\201\277\343\201\237.md" "b/source/_posts/2024/20240426b_GAS\343\201\247GoogleTasks\343\201\250\343\202\271\343\203\227\343\203\254\343\203\203\343\203\211\343\202\267\343\203\274\343\203\210\343\202\222\346\223\254\344\274\274\347\232\204\343\201\253\345\217\214\346\226\271\345\220\221\343\203\220\343\202\244\343\203\263\343\203\207\343\202\243\343\203\263\343\202\260\343\201\225\343\201\233\343\201\246\343\201\277\343\201\237.md" index 5c4c1ebbed85..eca5258ff674 100644 --- "a/source/_posts/2024/20240426b_GAS\343\201\247GoogleTasks\343\201\250\343\202\271\343\203\227\343\203\254\343\203\203\343\203\211\343\202\267\343\203\274\343\203\210\343\202\222\346\223\254\344\274\274\347\232\204\343\201\253\345\217\214\346\226\271\345\220\221\343\203\220\343\202\244\343\203\263\343\203\207\343\202\243\343\203\263\343\202\260\343\201\225\343\201\233\343\201\246\343\201\277\343\201\237.md" +++ "b/source/_posts/2024/20240426b_GAS\343\201\247GoogleTasks\343\201\250\343\202\271\343\203\227\343\203\254\343\203\203\343\203\211\343\202\267\343\203\274\343\203\210\343\202\222\346\223\254\344\274\274\347\232\204\343\201\253\345\217\214\346\226\271\345\220\221\343\203\220\343\202\244\343\203\263\343\203\207\343\202\243\343\203\263\343\202\260\343\201\225\343\201\233\343\201\246\343\201\277\343\201\237.md" @@ -8,7 +8,7 @@ tag: - 初心者向け - Vue.js category: - - Programming + - Frontend thumbnail: /images/2024/20240426b/thumbnail.png author: 後藤喜斗 lede: "フロントエンドの開発をする際にはVueを使用しています。Vueでの開発に慣れていくにつれて、「Vue使いやすいな、よくできているなぁ。」と思うとともに、普段何気なく使っているスプレッドシートに対して、今まで感じたことのなかった不便さを感じるようになりました。" diff --git "a/source/_posts/2024/20240501a_Cloudflare_C3\343\201\247\345\247\213\343\202\201\343\202\213Cloudflare_Pages\345\205\245\351\226\200.md" "b/source/_posts/2024/20240501a_Cloudflare_C3\343\201\247\345\247\213\343\202\201\343\202\213Cloudflare_Pages\345\205\245\351\226\200.md" index 4c3e871e3bdf..7e004887584b 100644 --- "a/source/_posts/2024/20240501a_Cloudflare_C3\343\201\247\345\247\213\343\202\201\343\202\213Cloudflare_Pages\345\205\245\351\226\200.md" +++ "b/source/_posts/2024/20240501a_Cloudflare_C3\343\201\247\345\247\213\343\202\201\343\202\213Cloudflare_Pages\345\205\245\351\226\200.md" @@ -8,7 +8,7 @@ tag: - Cloudflare C3 - Vue.js category: - - Programming + - Frontend thumbnail: /images/2024/20240501a/thumbnail.png author: 大岩潤矢 lede: "Cloudflareが提供するCLIツール「Cloudflare C3」を利用して、Cloudflare Pagesへ簡単に入門する方法について、ハンズオンを中心に紹介します。" diff --git "a/source/_posts/2024/20240502a_\350\207\252\344\275\23440%\343\202\255\343\203\274\343\203\234\343\203\274\343\203\211\343\201\270\343\201\256\345\205\245\351\226\200\343\200\234\343\202\255\343\203\274\343\203\234\343\203\274\343\203\211\343\202\202\346\226\255\346\215\250\351\233\242\343\201\256\346\231\202\344\273\243\343\201\270\343\200\234.md" "b/source/_posts/2024/20240502a_\350\207\252\344\275\23440%\343\202\255\343\203\274\343\203\234\343\203\274\343\203\211\343\201\270\343\201\256\345\205\245\351\226\200\343\200\234\343\202\255\343\203\274\343\203\234\343\203\274\343\203\211\343\202\202\346\226\255\346\215\250\351\233\242\343\201\256\346\231\202\344\273\243\343\201\270\343\200\234.md" index 923008f7146d..b52f6dae0651 100644 --- "a/source/_posts/2024/20240502a_\350\207\252\344\275\23440%\343\202\255\343\203\274\343\203\234\343\203\274\343\203\211\343\201\270\343\201\256\345\205\245\351\226\200\343\200\234\343\202\255\343\203\274\343\203\234\343\203\274\343\203\211\343\202\202\346\226\255\346\215\250\351\233\242\343\201\256\346\231\202\344\273\243\343\201\270\343\200\234.md" +++ "b/source/_posts/2024/20240502a_\350\207\252\344\275\23440%\343\202\255\343\203\274\343\203\234\343\203\274\343\203\211\343\201\270\343\201\256\345\205\245\351\226\200\343\200\234\343\202\255\343\203\274\343\203\234\343\203\274\343\203\211\343\202\202\346\226\255\346\215\250\351\233\242\343\201\256\346\231\202\344\273\243\343\201\270\343\200\234.md" @@ -8,7 +8,7 @@ tag: - 電子工作 - リモートワーク category: - - Infrastructure + - IoT thumbnail: /images/2024/20240502a/thumbnail.jpg author: 山本竜玄 lede: "以前から自作キーボード、分割キーボード、XX％キーボードといった単語には興味を惹かれていたのですが、電子工作初心者の自分としてはなかなか敷居を高く感じていました。" diff --git "a/source/_posts/2024/20240514a_Zod\343\201\247JSON\343\201\256\343\202\252\343\203\226\343\202\270\343\202\247\343\202\257\343\203\210\343\202\222\345\256\237\350\241\214\346\231\202\343\201\253\351\203\275\345\220\210\343\201\256\350\211\257\343\201\204\345\236\213\343\201\253\345\244\211\346\217\233\343\201\231\343\202\213.md" "b/source/_posts/2024/20240514a_Zod\343\201\247JSON\343\201\256\343\202\252\343\203\226\343\202\270\343\202\247\343\202\257\343\203\210\343\202\222\345\256\237\350\241\214\346\231\202\343\201\253\351\203\275\345\220\210\343\201\256\350\211\257\343\201\204\345\236\213\343\201\253\345\244\211\346\217\233\343\201\231\343\202\213.md" index fc99ebfea3f5..7c0c3d3c5aab 100644 --- "a/source/_posts/2024/20240514a_Zod\343\201\247JSON\343\201\256\343\202\252\343\203\226\343\202\270\343\202\247\343\202\257\343\203\210\343\202\222\345\256\237\350\241\214\346\231\202\343\201\253\351\203\275\345\220\210\343\201\256\350\211\257\343\201\204\345\236\213\343\201\253\345\244\211\346\217\233\343\201\231\343\202\213.md" +++ "b/source/_posts/2024/20240514a_Zod\343\201\247JSON\343\201\256\343\202\252\343\203\226\343\202\270\343\202\247\343\202\257\343\203\210\343\202\222\345\256\237\350\241\214\346\231\202\343\201\253\351\203\275\345\220\210\343\201\256\350\211\257\343\201\204\345\236\213\343\201\253\345\244\211\346\217\233\343\201\231\343\202\213.md" @@ -6,10 +6,9 @@ tag: - Zod - JSON - TypeScript - - フロントエンド - バリデーション category: - - Programming + - Frontend thumbnail: /images/2024/20240514a/thumbnail.png author: 澁川喜規 lede: "いろんなJavaScriptの統計を見ると、今時のウェブフロントエンドの新規開発は80%はTypeScriptになっているということです。また、TypeScript自身を使わなくても、TypeScriptで培われた型推論のパワーで、JavaScriptであってもVSCode上で補完とか思いの外うまくいったりしちゃうので..." diff --git "a/source/_posts/2024/20240515a_Vue3\343\201\247\343\203\242\343\203\274\343\203\200\343\203\253\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260\343\201\256\350\265\267\345\213\225\343\202\222\343\201\204\343\201\204\346\204\237\343\201\230\343\201\253\345\256\237\350\243\205\343\201\231\343\202\213.md" "b/source/_posts/2024/20240515a_Vue3\343\201\247\343\203\242\343\203\274\343\203\200\343\203\253\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260\343\201\256\350\265\267\345\213\225\343\202\222\343\201\204\343\201\204\346\204\237\343\201\230\343\201\253\345\256\237\350\243\205\343\201\231\343\202\213.md" index b584b24276a1..64d2977b0a52 100644 --- "a/source/_posts/2024/20240515a_Vue3\343\201\247\343\203\242\343\203\274\343\203\200\343\203\253\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260\343\201\256\350\265\267\345\213\225\343\202\222\343\201\204\343\201\204\346\204\237\343\201\230\343\201\253\345\256\237\350\243\205\343\201\231\343\202\213.md" +++ "b/source/_posts/2024/20240515a_Vue3\343\201\247\343\203\242\343\203\274\343\203\200\343\203\253\343\203\200\343\202\244\343\202\242\343\203\255\343\202\260\343\201\256\350\265\267\345\213\225\343\202\222\343\201\204\343\201\204\346\204\237\343\201\230\343\201\253\345\256\237\350\243\205\343\201\231\343\202\213.md" @@ -6,7 +6,7 @@ tag: - Vue.js - Vue3 category: - - Programming + - Frontend thumbnail: /images/2024/20240515a/thumbnail.png author: 澁川喜規 lede: "Reactでのダイアログの開閉制御については以前、別のエントリーで書きました。Vue3でも、何か簡単に書ける方法はないかと試行錯誤して、ちょっといい感じかな？という方針を見つけたので..." diff --git "a/source/_posts/2024/20240516b_ChatGPT\343\202\222\345\276\271\345\272\225\346\264\273\347\224\250!_\343\203\223\343\202\270\343\203\215\343\202\271\343\203\221\343\203\274\343\202\275\343\203\263\343\201\256\343\201\237\343\202\201\343\201\256\343\203\227\343\203\255\343\202\260\343\203\251\343\203\237\343\203\263\343\202\260\345\213\211\345\274\267\346\263\225\343\201\256\343\203\254\343\203\223\343\203\245\343\203\274\343\201\253\345\217\202\345\212\240\343\201\227\343\201\276\343\201\227\343\201\237.md" "b/source/_posts/2024/20240516b_ChatGPT\343\202\222\345\276\271\345\272\225\346\264\273\347\224\250!_\343\203\223\343\202\270\343\203\215\343\202\271\343\203\221\343\203\274\343\202\275\343\203\263\343\201\256\343\201\237\343\202\201\343\201\256\343\203\227\343\203\255\343\202\260\343\203\251\343\203\237\343\203\263\343\202\260\345\213\211\345\274\267\346\263\225\343\201\256\343\203\254\343\203\223\343\203\245\343\203\274\343\201\253\345\217\202\345\212\240\343\201\227\343\201\276\343\201\227\343\201\237.md" index b3b27bdc2c4e..311ed1a42e13 100644 --- "a/source/_posts/2024/20240516b_ChatGPT\343\202\222\345\276\271\345\272\225\346\264\273\347\224\250!_\343\203\223\343\202\270\343\203\215\343\202\271\343\203\221\343\203\274\343\202\275\343\203\263\343\201\256\343\201\237\343\202\201\343\201\256\343\203\227\343\203\255\343\202\260\343\203\251\343\203\237\343\203\263\343\202\260\345\213\211\345\274\267\346\263\225\343\201\256\343\203\254\343\203\223\343\203\245\343\203\274\343\201\253\345\217\202\345\212\240\343\201\227\343\201\276\343\201\227\343\201\237.md" +++ "b/source/_posts/2024/20240516b_ChatGPT\343\202\222\345\276\271\345\272\225\346\264\273\347\224\250!_\343\203\223\343\202\270\343\203\215\343\202\271\343\203\221\343\203\274\343\202\275\343\203\263\343\201\256\343\201\237\343\202\201\343\201\256\343\203\227\343\203\255\343\202\260\343\203\251\343\203\237\343\203\263\343\202\260\345\213\211\345\274\267\346\263\225\343\201\256\343\203\254\343\203\223\343\203\245\343\203\274\343\201\253\345\217\202\345\212\240\343\201\227\343\201\276\343\201\227\343\201\237.md" @@ -8,7 +8,7 @@ tag: - ChatGPTを徹底活用! - 書評 category: - - Programming + - DataScience thumbnail: /images/2024/20240516b/thumbnail.png author: 澁川喜規 lede: "翔泳社さんからこれから発売される、「ChatGPTを徹底活用! ビジネスパーソンのためのプログラミング勉強法」のレビューに参加しました。著者は元フューチャーで、グループ会社のIT教育を行っているコードキャンプで社長もされていた堀内さんです。" diff --git "a/source/_posts/2024/20240624a_package.json_dependencies_\343\203\241\343\203\263\343\203\206\343\201\256\344\273\225\346\226\271_\346\234\200\347\237\255\343\203\253\343\203\274\343\203\210.md" "b/source/_posts/2024/20240624a_package.json_dependencies_\343\203\241\343\203\263\343\203\206\343\201\256\344\273\225\346\226\271_\346\234\200\347\237\255\343\203\253\343\203\274\343\203\210.md" index cd0c8adbf9c1..f8b4f6656f1e 100644 --- "a/source/_posts/2024/20240624a_package.json_dependencies_\343\203\241\343\203\263\343\203\206\343\201\256\344\273\225\346\226\271_\346\234\200\347\237\255\343\203\253\343\203\274\343\203\210.md" +++ "b/source/_posts/2024/20240624a_package.json_dependencies_\343\203\241\343\203\263\343\203\206\343\201\256\344\273\225\346\226\271_\346\234\200\347\237\255\343\203\253\343\203\274\343\203\210.md" @@ -8,7 +8,7 @@ tag: - JavaScript - Node.js category: - - Security + - Frontend thumbnail: /images/2024/20240624a/thumbnail.png author: 枇榔晃裕 lede: "package.json の dependencies をメンテナンスするにはどこから手を付ければいいか、を解説します。" diff --git "a/source/_posts/2024/20240627a_\343\202\250\343\203\263\343\202\277\343\203\274\343\203\227\343\203\251\343\202\244\343\202\272Java\343\201\247\344\275\277\343\201\210\343\202\213ORM\343\200\214uroboroSQL\343\200\215\343\201\276\343\201\250\343\202\201\357\274\210\343\203\252\343\203\220\343\202\244\343\203\220\343\203\253\357\274\211.md" "b/source/_posts/2024/20240627a_\343\202\250\343\203\263\343\202\277\343\203\274\343\203\227\343\203\251\343\202\244\343\202\272Java\343\201\247\344\275\277\343\201\210\343\202\213ORM\343\200\214uroboroSQL\343\200\215\343\201\276\343\201\250\343\202\201\357\274\210\343\203\252\343\203\220\343\202\244\343\203\220\343\203\253\357\274\211.md" index 8307f49fc560..14463581aeba 100644 --- "a/source/_posts/2024/20240627a_\343\202\250\343\203\263\343\202\277\343\203\274\343\203\227\343\203\251\343\202\244\343\202\272Java\343\201\247\344\275\277\343\201\210\343\202\213ORM\343\200\214uroboroSQL\343\200\215\343\201\276\343\201\250\343\202\201\357\274\210\343\203\252\343\203\220\343\202\244\343\203\220\343\203\253\357\274\211.md" +++ "b/source/_posts/2024/20240627a_\343\202\250\343\203\263\343\202\277\343\203\274\343\203\227\343\203\251\343\202\244\343\202\272Java\343\201\247\344\275\277\343\201\210\343\202\213ORM\343\200\214uroboroSQL\343\200\215\343\201\276\343\201\250\343\202\201\357\274\210\343\203\252\343\203\220\343\202\244\343\203\220\343\203\253\357\274\211.md" @@ -7,7 +7,6 @@ tag: - SQL - 2WaySQL - ORM - - 永続化 - uroboroSQL category: - Programming @@ -132,7 +131,7 @@ SqlConfig config = UroboroSQL.builder("jdbc:h2:mem:test;DB_CLOSE_DELAY=-1", "sa" ```java try (SqlAgent agent = config.agent()) { - // + // agent.required(() -> { // insert/update/delete }); @@ -455,7 +454,7 @@ try (SqlAgent agent = config.agent()) { d.location = "Chicago"; return d; }) - ); + ); }); } diff --git "a/source/_posts/2024/20240701a_\357\274\273\345\205\245\351\226\200\357\274\275Web\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211_E2E_\343\203\206\343\202\271\343\203\210_\343\202\222\345\207\272\347\211\210\343\201\227\343\201\276\343\201\227\343\201\237.md" "b/source/_posts/2024/20240701a_\357\274\273\345\205\245\351\226\200\357\274\275Web\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211_E2E_\343\203\206\343\202\271\343\203\210_\343\202\222\345\207\272\347\211\210\343\201\227\343\201\276\343\201\227\343\201\237.md" index 3a573e70e186..faa33d9f27ef 100644 --- "a/source/_posts/2024/20240701a_\357\274\273\345\205\245\351\226\200\357\274\275Web\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211_E2E_\343\203\206\343\202\271\343\203\210_\343\202\222\345\207\272\347\211\210\343\201\227\343\201\276\343\201\227\343\201\237.md" +++ "b/source/_posts/2024/20240701a_\357\274\273\345\205\245\351\226\200\357\274\275Web\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211_E2E_\343\203\206\343\202\271\343\203\210_\343\202\222\345\207\272\347\211\210\343\201\227\343\201\276\343\201\227\343\201\237.md" @@ -8,7 +8,7 @@ tag: - E2Eテスト - Playwright category: - - Infrastructure + - Frontend thumbnail: /images/2024/20240701a/thumbnail.png author: 武田大輝 lede: "[入門］Webフロントエンド E2E テスト ――PlaywrightによるWebアプリの自動テストから良いテストの書き方まで をフューチャーの有志と共に出版いたしました。" diff --git "a/source/_posts/2024/20241024a_Playwright\343\201\247\343\201\252\343\201\234\343\201\213\343\203\234\343\202\277\343\203\263\343\201\253\343\203\222\343\203\203\343\203\210\343\201\227\343\201\252\343\201\204.md" "b/source/_posts/2024/20241024a_Playwright\343\201\247\343\201\252\343\201\234\343\201\213\343\203\234\343\202\277\343\203\263\343\201\253\343\203\222\343\203\203\343\203\210\343\201\227\343\201\252\343\201\204.md" index c0c22560436a..1e90de5f0d52 100644 --- "a/source/_posts/2024/20241024a_Playwright\343\201\247\343\201\252\343\201\234\343\201\213\343\203\234\343\202\277\343\203\263\343\201\253\343\203\222\343\203\203\343\203\210\343\201\227\343\201\252\343\201\204.md" +++ "b/source/_posts/2024/20241024a_Playwright\343\201\247\343\201\252\343\201\234\343\201\213\343\203\234\343\202\277\343\203\263\343\201\253\343\203\222\343\203\203\343\203\210\343\201\227\343\201\252\343\201\204.md" @@ -5,10 +5,10 @@ postid: a tag: - Playwright - E2Eテスト - - フロントエンド - accessibility + - トラブルシュート category: - - Programming + - Frontend thumbnail: /images/2024/20241024a/thumbnail.jpg author: 澁川喜規 lede: "getByRoleでボタンがヒットしないです、という相談を受けて調べた内容のメモです。次のようなHTMLになっていました。" diff --git "a/source/_posts/2024/20241111a_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\203\225\343\203\254\343\203\274\343\203\240\343\203\257\343\203\274\343\202\257\343\201\213\343\202\211\343\202\265\343\203\274\343\203\220\343\203\274\343\201\253\343\202\242\343\202\257\343\202\273\343\202\271\343\201\231\343\202\213\343\203\221\343\202\277\343\203\274\343\203\263.md" "b/source/_posts/2024/20241111a_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\203\225\343\203\254\343\203\274\343\203\240\343\203\257\343\203\274\343\202\257\343\201\213\343\202\211\343\202\265\343\203\274\343\203\220\343\203\274\343\201\253\343\202\242\343\202\257\343\202\273\343\202\271\343\201\231\343\202\213\343\203\221\343\202\277\343\203\274\343\203\263.md" index b864841935c8..f6664bb7540c 100644 --- "a/source/_posts/2024/20241111a_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\203\225\343\203\254\343\203\274\343\203\240\343\203\257\343\203\274\343\202\257\343\201\213\343\202\211\343\202\265\343\203\274\343\203\220\343\203\274\343\201\253\343\202\242\343\202\257\343\202\273\343\202\271\343\201\231\343\202\213\343\203\221\343\202\277\343\203\274\343\203\263.md" +++ "b/source/_posts/2024/20241111a_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\203\225\343\203\254\343\203\274\343\203\240\343\203\257\343\203\274\343\202\257\343\201\213\343\202\211\343\202\265\343\203\274\343\203\220\343\203\274\343\201\253\343\202\242\343\202\257\343\202\273\343\202\271\343\201\231\343\202\213\343\203\221\343\202\277\343\203\274\343\203\263.md" @@ -3,13 +3,12 @@ title: "フロントエンドフレームワークからサーバーにアクセ date: 2024/11/11 00:00:00 postid: a tag: - - フロントエンド - React - Next.js - サーバーアクション - サーバーコンポーネント category: - - Programming + - Frontend thumbnail: /images/2024/20241111a/thumbnail.png author: 澁川喜規 lede: "僕が触り始めた頃のウェブフロントエンド開発はデバッガーもなく、ダイナミックHTMLと呼ばれて文字をチカチカさせたりするようなものでした。IE6という超安定ブラウザが出てきたり" diff --git "a/source/_posts/2024/20241125a_Vue.js\351\200\243\350\274\211\345\247\213\343\202\201\343\201\276\343\201\231_&_Nuxt\343\201\256\351\200\232\344\277\241\343\203\221\343\202\277\343\203\274\343\203\263\343\202\202\350\246\213\343\201\246\343\201\277\343\202\213.md" "b/source/_posts/2024/20241125a_Vue.js\351\200\243\350\274\211\345\247\213\343\202\201\343\201\276\343\201\231_&_Nuxt\343\201\256\351\200\232\344\277\241\343\203\221\343\202\277\343\203\274\343\203\263\343\202\202\350\246\213\343\201\246\343\201\277\343\202\213.md" index a0a235418a0a..327c0e537732 100644 --- "a/source/_posts/2024/20241125a_Vue.js\351\200\243\350\274\211\345\247\213\343\202\201\343\201\276\343\201\231_&_Nuxt\343\201\256\351\200\232\344\277\241\343\203\221\343\202\277\343\203\274\343\203\263\343\202\202\350\246\213\343\201\246\343\201\277\343\202\213.md" +++ "b/source/_posts/2024/20241125a_Vue.js\351\200\243\350\274\211\345\247\213\343\202\201\343\201\276\343\201\231_&_Nuxt\343\201\256\351\200\232\344\277\241\343\203\221\343\202\277\343\203\274\343\203\263\343\202\202\350\246\213\343\201\246\343\201\277\343\202\213.md" @@ -5,10 +5,9 @@ postid: a tag: - Vue.js - Nuxt - - フロントエンド - インデックス category: - - Programming + - Frontend thumbnail: /images/2024/20241125a/thumbnail.png author: 澁川喜規 lede: "フロントエンドフレームワークからサーバーにアクセスするパターンという記事を書いたところ、ちょっとバズったので、そういえば調べきれてなかったNuxtの話でも書こうかな、と思って調べてみた記事です。" @@ -16,7 +15,6 @@ lede: "フロントエンドフレームワークからサーバーにアクセ - Vue.js連載企画を始めます。今年は勤労感謝の日が土曜日で、勤労に感謝できなくて残念でしたね。 | Date | Name | Title | diff --git "a/source/_posts/2024/20241126a_2015\345\271\264\351\240\203\343\201\256\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\202\270\343\203\213\343\202\242\343\201\240\343\201\243\343\201\246void(0)\343\201\256\343\203\257\343\202\257\343\203\257\343\202\257\343\202\222\347\220\206\350\247\243\343\201\227\343\201\237\343\201\204.md" "b/source/_posts/2024/20241126a_2015\345\271\264\351\240\203\343\201\256\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\202\270\343\203\213\343\202\242\343\201\240\343\201\243\343\201\246void(0)\343\201\256\343\203\257\343\202\257\343\203\257\343\202\257\343\202\222\347\220\206\350\247\243\343\201\227\343\201\237\343\201\204.md" index 9fc1ca9af9fe..5caba030643f 100644 --- "a/source/_posts/2024/20241126a_2015\345\271\264\351\240\203\343\201\256\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\202\270\343\203\213\343\202\242\343\201\240\343\201\243\343\201\246void(0)\343\201\256\343\203\257\343\202\257\343\203\257\343\202\257\343\202\222\347\220\206\350\247\243\343\201\227\343\201\237\343\201\204.md" +++ "b/source/_posts/2024/20241126a_2015\345\271\264\351\240\203\343\201\256\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\202\270\343\203\213\343\202\242\343\201\240\343\201\243\343\201\246void(0)\343\201\256\343\203\257\343\202\257\343\203\257\343\202\257\343\202\222\347\220\206\350\247\243\343\201\227\343\201\237\343\201\204.md" @@ -7,7 +7,7 @@ tag: - Vite - gulp category: - - Infrastructure + - Frontend thumbnail: /images/2024/20241126a/thumbnail.png author: 村田靖拓 lede: "「void(0)」がどんなものなのか、どんなうれしみや期待があるのかなど、これを期に自分なりに調査・整理しようというのが本記事のモチベーションです" diff --git "a/source/_posts/2024/20241127a_Vue3\343\201\247\344\275\234\343\201\243\343\201\237Web\343\202\265\343\202\244\343\203\210\343\202\222_Vite_PWA_\343\201\247PWA\345\214\226\343\201\231\343\202\213\346\226\271\346\263\225_2024\345\271\264\347\211\210.md" "b/source/_posts/2024/20241127a_Vue3\343\201\247\344\275\234\343\201\243\343\201\237Web\343\202\265\343\202\244\343\203\210\343\202\222_Vite_PWA_\343\201\247PWA\345\214\226\343\201\231\343\202\213\346\226\271\346\263\225_2024\345\271\264\347\211\210.md" index 3e7cd444da8d..c43d236f8efd 100644 --- "a/source/_posts/2024/20241127a_Vue3\343\201\247\344\275\234\343\201\243\343\201\237Web\343\202\265\343\202\244\343\203\210\343\202\222_Vite_PWA_\343\201\247PWA\345\214\226\343\201\231\343\202\213\346\226\271\346\263\225_2024\345\271\264\347\211\210.md" +++ "b/source/_posts/2024/20241127a_Vue3\343\201\247\344\275\234\343\201\243\343\201\237Web\343\202\265\343\202\244\343\203\210\343\202\222_Vite_PWA_\343\201\247PWA\345\214\226\343\201\231\343\202\213\346\226\271\346\263\225_2024\345\271\264\347\211\210.md" @@ -7,7 +7,7 @@ tag: - PWA - Vite category: - - Programming + - Frontend thumbnail: /images/2024/20241127a/thumbnail.png author: 大岩潤矢 lede: "Vue3で作ったWebサイトをPWA(Progressive Web Apps)化する方法を紹介します。" diff --git "a/source/_posts/2024/20241128a_Vue_Fes_Japan_2024\343\201\256\343\203\227\343\203\251\343\203\201\343\203\212\343\202\271\343\203\235\343\203\263\343\202\265\343\203\274\343\202\273\343\203\203\343\202\267\343\203\247\343\203\263\343\201\253\347\231\273\345\243\207\343\201\227\343\201\276\343\201\227\343\201\237.md" "b/source/_posts/2024/20241128a_Vue_Fes_Japan_2024\343\201\256\343\203\227\343\203\251\343\203\201\343\203\212\343\202\271\343\203\235\343\203\263\343\202\265\343\203\274\343\202\273\343\203\203\343\202\267\343\203\247\343\203\263\343\201\253\347\231\273\345\243\207\343\201\227\343\201\276\343\201\227\343\201\237.md" index d9c8396c67ed..05d54e0dc71f 100644 --- "a/source/_posts/2024/20241128a_Vue_Fes_Japan_2024\343\201\256\343\203\227\343\203\251\343\203\201\343\203\212\343\202\271\343\203\235\343\203\263\343\202\265\343\203\274\343\202\273\343\203\203\343\202\267\343\203\247\343\203\263\343\201\253\347\231\273\345\243\207\343\201\227\343\201\276\343\201\227\343\201\237.md" +++ "b/source/_posts/2024/20241128a_Vue_Fes_Japan_2024\343\201\256\343\203\227\343\203\251\343\203\201\343\203\212\343\202\271\343\203\235\343\203\263\343\202\265\343\203\274\343\202\273\343\203\203\343\202\267\343\203\247\343\203\263\343\201\253\347\231\273\345\243\207\343\201\227\343\201\276\343\201\227\343\201\237.md" @@ -8,7 +8,7 @@ tag: - 登壇レポート - 新人研修 category: - - Programming + - Frontend thumbnail: /images/2024/20241128a/thumbnail.jpg author: 永井優斗 lede: "フューチャーアーキテクト株式会社は10月19日（土）に開催されたVue Fes Japan 2024のプラチナスポンサーとして参加し、私はプラチナスポンサーセッションに登壇させていただきました。" diff --git "a/source/_posts/2024/20241129a_Deno_\303\227_Vue\343\202\222\350\247\246\343\201\243\343\201\246\343\201\277\343\201\237(2024\345\271\264\345\206\254).md" "b/source/_posts/2024/20241129a_Deno_\303\227_Vue\343\202\222\350\247\246\343\201\243\343\201\246\343\201\277\343\201\237(2024\345\271\264\345\206\254).md" index 1334114dfc47..914191bfd13b 100644 --- "a/source/_posts/2024/20241129a_Deno_\303\227_Vue\343\202\222\350\247\246\343\201\243\343\201\246\343\201\277\343\201\237(2024\345\271\264\345\206\254).md" +++ "b/source/_posts/2024/20241129a_Deno_\303\227_Vue\343\202\222\350\247\246\343\201\243\343\201\246\343\201\277\343\201\237(2024\345\271\264\345\206\254).md" @@ -6,7 +6,7 @@ tag: - Vue.js - Deno category: - - Programming + - Frontend thumbnail: /images/2024/20241129a/thumbnail.png author: 山本竜玄 lede: "eno v2とVue.jsを組み合わせた公式チュートリアルの実施を通して、2024年冬時点での現状や特徴について解説していきます。" diff --git "a/source/_posts/2024/20241205a_TypeScript\357\274\217JavaScript_Array\345\256\214\345\205\250\346\224\273\347\225\2452024.md" "b/source/_posts/2024/20241205a_TypeScript\357\274\217JavaScript_Array\345\256\214\345\205\250\346\224\273\347\225\2452024.md" index ace3a0e51c8b..250aa2de269b 100644 --- "a/source/_posts/2024/20241205a_TypeScript\357\274\217JavaScript_Array\345\256\214\345\205\250\346\224\273\347\225\2452024.md" +++ "b/source/_posts/2024/20241205a_TypeScript\357\274\217JavaScript_Array\345\256\214\345\205\250\346\224\273\347\225\2452024.md" @@ -6,7 +6,7 @@ tag: - TypeScript - JavaSCript category: - - Programming + - Frontend thumbnail: /images/2024/20241205a/thumbnail.png author: 澁川喜規 lede: "イマドキのJavaScriptの書き方2018]というのを以前書いたのだけど、配列周りはかなり変わっているな、というのを思ったので、そこの部分だけアップデートするつもりで書いてみました。" diff --git "a/source/_posts/2025/20250109a_\346\247\213\351\200\240\345\214\226\343\203\206\343\202\255\343\202\271\343\203\210(URL)\343\202\222\346\226\207\345\255\227\345\210\227\347\265\220\345\220\210\343\201\247\344\275\234\343\202\211\343\201\252\343\201\204\343\202\210\343\201\206\343\201\253\343\201\231\343\202\213\343\203\251\343\202\244\343\203\226\343\203\251\343\203\252\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" "b/source/_posts/2025/20250109a_\346\247\213\351\200\240\345\214\226\343\203\206\343\202\255\343\202\271\343\203\210(URL)\343\202\222\346\226\207\345\255\227\345\210\227\347\265\220\345\220\210\343\201\247\344\275\234\343\202\211\343\201\252\343\201\204\343\202\210\343\201\206\343\201\253\343\201\231\343\202\213\343\203\251\343\202\244\343\203\226\343\203\251\343\203\252\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" index 21b31f4c668e..87ab9e87d9da 100644 --- "a/source/_posts/2025/20250109a_\346\247\213\351\200\240\345\214\226\343\203\206\343\202\255\343\202\271\343\203\210(URL)\343\202\222\346\226\207\345\255\227\345\210\227\347\265\220\345\220\210\343\201\247\344\275\234\343\202\211\343\201\252\343\201\204\343\202\210\343\201\206\343\201\253\343\201\231\343\202\213\343\203\251\343\202\244\343\203\226\343\203\251\343\203\252\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" +++ "b/source/_posts/2025/20250109a_\346\247\213\351\200\240\345\214\226\343\203\206\343\202\255\343\202\271\343\203\210(URL)\343\202\222\346\226\207\345\255\227\345\210\227\347\265\220\345\220\210\343\201\247\344\275\234\343\202\211\343\201\252\343\201\204\343\202\210\343\201\206\343\201\253\343\201\231\343\202\213\343\203\251\343\202\244\343\203\226\343\203\251\343\203\252\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237.md" @@ -8,7 +8,7 @@ tag: - tsup - Go category: - - Programming + - Frontend thumbnail: /images/2025/20250109a/thumbnail.png author: 澁川喜規 lede: "SQL、ファイルパスなどの構造化テキストを文字列結合で作ると、不正な文字列が入ってきた時に困るよ、というのはプログラミングの基本原則ですが、URLはついついやってしまいがちな部分です。だいたいの言語には" diff --git "a/source/_posts/2025/20250314a_Tailwind_CSS\343\201\256\343\203\211\343\202\255\343\203\245\343\203\241\343\203\263\343\203\210\343\201\213\343\202\211\350\246\213\343\201\210\343\201\246\343\201\217\343\202\213\344\275\277\343\201\204\346\226\271\343\201\250CSS\350\250\255\350\250\210\343\201\256\343\203\222\343\203\263\343\203\210.md" "b/source/_posts/2025/20250314a_Tailwind_CSS\343\201\256\343\203\211\343\202\255\343\203\245\343\203\241\343\203\263\343\203\210\343\201\213\343\202\211\350\246\213\343\201\210\343\201\246\343\201\217\343\202\213\344\275\277\343\201\204\346\226\271\343\201\250CSS\350\250\255\350\250\210\343\201\256\343\203\222\343\203\263\343\203\210.md" index 7642c9b4b011..e88145a35873 100644 --- "a/source/_posts/2025/20250314a_Tailwind_CSS\343\201\256\343\203\211\343\202\255\343\203\245\343\203\241\343\203\263\343\203\210\343\201\213\343\202\211\350\246\213\343\201\210\343\201\246\343\201\217\343\202\213\344\275\277\343\201\204\346\226\271\343\201\250CSS\350\250\255\350\250\210\343\201\256\343\203\222\343\203\263\343\203\210.md" +++ "b/source/_posts/2025/20250314a_Tailwind_CSS\343\201\256\343\203\211\343\202\255\343\203\245\343\203\241\343\203\263\343\203\210\343\201\213\343\202\211\350\246\213\343\201\210\343\201\246\343\201\217\343\202\213\344\275\277\343\201\204\346\226\271\343\201\250CSS\350\250\255\350\250\210\343\201\256\343\203\222\343\203\263\343\203\210.md" @@ -5,9 +5,8 @@ postid: a tag: - TailwindCSS - CSS - - フロントエンド category: - - Programming + - Frontend thumbnail: /images/2025/20250314a/thumbnail.png author: 澁川喜規 lede: "CSSをわかりやすくメンテナンス性高く書くというのは長い間試行錯誤され続けてきました。命名規則でがんばる、SCSSのようなプリプロセッサを使う、CSS in JSなどいろいろな仕組みがかつて作られたりしてきましたが..." diff --git "a/source/_posts/2025/20250418a_AI\346\231\202\344\273\243\343\201\256\347\224\273\345\203\217to3D\343\203\242\343\203\207\343\203\252\343\203\263\343\202\260\345\205\245\351\226\200.md" "b/source/_posts/2025/20250418a_AI\346\231\202\344\273\243\343\201\256\347\224\273\345\203\217to3D\343\203\242\343\203\207\343\203\252\343\203\263\343\202\260\345\205\245\351\226\200.md" index 5e6868937372..9df8cca130ee 100644 --- "a/source/_posts/2025/20250418a_AI\346\231\202\344\273\243\343\201\256\347\224\273\345\203\217to3D\343\203\242\343\203\207\343\203\252\343\203\263\343\202\260\345\205\245\351\226\200.md" +++ "b/source/_posts/2025/20250418a_AI\346\231\202\344\273\243\343\201\256\347\224\273\345\203\217to3D\343\203\242\343\203\207\343\203\252\343\203\263\343\202\260\345\205\245\351\226\200.md" @@ -8,7 +8,7 @@ tag: - Blender - 3D category: - - Infrastructure + - DataScience thumbnail: /images/2025/20250418a/thumbnail.png author: 山本竜玄 lede: "大学時代に少し触っていて苦手としていた、3Dモデリングの世界でどのようなことができるようになっているのか、Blender MCPとMeshyという2つのAI駆動ツールを使った3Dモデル製作を試してしてみました" diff --git "a/source/_posts/2025/20250423a_\343\203\201\343\203\274\343\203\240\343\202\222\347\225\260\345\213\225\343\201\247\347\222\260\345\242\203\343\201\214\345\244\211\343\202\217\343\201\243\343\201\237\345\276\214\343\201\256\347\253\213\343\201\241\344\270\212\343\201\214\343\202\212\343\201\253\343\201\244\343\201\204\343\201\246.md" "b/source/_posts/2025/20250423a_\343\203\201\343\203\274\343\203\240\343\202\222\347\225\260\345\213\225\343\201\247\347\222\260\345\242\203\343\201\214\345\244\211\343\202\217\343\201\243\343\201\237\345\276\214\343\201\256\347\253\213\343\201\241\344\270\212\343\201\214\343\202\212\343\201\253\343\201\244\343\201\204\343\201\246.md" index 419ff015bc7a..81f25841f59b 100644 --- "a/source/_posts/2025/20250423a_\343\203\201\343\203\274\343\203\240\343\202\222\347\225\260\345\213\225\343\201\247\347\222\260\345\242\203\343\201\214\345\244\211\343\202\217\343\201\243\343\201\237\345\276\214\343\201\256\347\253\213\343\201\241\344\270\212\343\201\214\343\202\212\343\201\253\343\201\244\343\201\204\343\201\246.md" +++ "b/source/_posts/2025/20250423a_\343\203\201\343\203\274\343\203\240\343\202\222\347\225\260\345\213\225\343\201\247\347\222\260\345\242\203\343\201\214\345\244\211\343\202\217\343\201\243\343\201\237\345\276\214\343\201\256\347\253\213\343\201\241\344\270\212\343\201\214\343\202\212\343\201\253\343\201\244\343\201\204\343\201\246.md" @@ -7,7 +7,7 @@ tag: - 新人向け - ビジネス category: - - Culture + - Business thumbnail: /images/2025/20250423a/thumbnail.png author: 金森翼 lede: "春は新しいスタートの季節です。学校や職場など、多くの人が変化の中で新たなチャレンジに向き合う時期ではないでしょうか。" diff --git "a/source/_posts/2025/20250428a_Cursor\343\201\253\343\202\210\343\202\213AI\351\247\206\345\213\225\351\226\213\347\231\272\345\205\245\351\226\200.md" "b/source/_posts/2025/20250428a_Cursor\343\201\253\343\202\210\343\202\213AI\351\247\206\345\213\225\351\226\213\347\231\272\345\205\245\351\226\200.md" index 17dbe705eb64..3ff0a537a48a 100644 --- "a/source/_posts/2025/20250428a_Cursor\343\201\253\343\202\210\343\202\213AI\351\247\206\345\213\225\351\226\213\347\231\272\345\205\245\351\226\200.md" +++ "b/source/_posts/2025/20250428a_Cursor\343\201\253\343\202\210\343\202\213AI\351\247\206\345\213\225\351\226\213\347\231\272\345\205\245\351\226\200.md" @@ -9,7 +9,7 @@ tag: - cursor - VibeCoding category: - - Programming + - DataScience thumbnail: /images/2025/20250428a/thumbnail.gif author: 小橋昌明 lede: "生成AIを使った開発手法の進化は目を見張るものがあります。私自身は業務でAI駆動開発をすることは無いのですが、CursorやClineなどのニュースを見ない日はありません。" diff --git "a/source/_posts/2025/20250617a_\345\210\235\343\202\201\343\201\246\343\201\256\346\265\267\345\244\226\343\202\253\343\203\263\343\203\225\343\202\241\343\203\254\343\203\263\343\202\271\343\201\250KubeCon_Japan\345\217\202\345\212\240\343\203\254\343\203\235\343\203\274\343\203\210.md" "b/source/_posts/2025/20250617a_\345\210\235\343\202\201\343\201\246\343\201\256\346\265\267\345\244\226\343\202\253\343\203\263\343\203\225\343\202\241\343\203\254\343\203\263\343\202\271\343\201\250KubeCon_Japan\345\217\202\345\212\240\343\203\254\343\203\235\343\203\274\343\203\210.md" index 41708d1fbb51..95fe1c2f31b4 100644 --- "a/source/_posts/2025/20250617a_\345\210\235\343\202\201\343\201\246\343\201\256\346\265\267\345\244\226\343\202\253\343\203\263\343\203\225\343\202\241\343\203\254\343\203\263\343\202\271\343\201\250KubeCon_Japan\345\217\202\345\212\240\343\203\254\343\203\235\343\203\274\343\203\210.md" +++ "b/source/_posts/2025/20250617a_\345\210\235\343\202\201\343\201\246\343\201\256\346\265\267\345\244\226\343\202\253\343\203\263\343\203\225\343\202\241\343\203\254\343\203\263\343\202\271\343\201\250KubeCon_Japan\345\217\202\345\212\240\343\203\254\343\203\235\343\203\274\343\203\210.md" @@ -7,7 +7,7 @@ tag: - CloudNativeCon - 参加レポート category: - - Programming + - DevOps thumbnail: /images/2025/20250617a/thumbnail.jpg author: 伊藤太斉 lede: "このCNCF連載とタイミングを同じくして開催しているKubeCon + CloudNativeCon Japanに参加してきたので、1日目に私が回ったセッションや会場の雰囲気についてお伝えできればと思います。" diff --git "a/source/_posts/2025/20250725a_\343\200\220Python\343\200\221Github_Actions\343\201\247\345\210\251\347\224\250\343\201\247\343\201\215\343\202\213Gemini\343\202\222\345\210\251\347\224\250\343\201\227\343\201\237PR\343\203\254\343\203\223\343\203\245\343\203\274\343\202\271\343\202\257\343\203\252\343\203\227\343\203\210\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237\343\200\202.md" "b/source/_posts/2025/20250725a_\343\200\220Python\343\200\221Github_Actions\343\201\247\345\210\251\347\224\250\343\201\247\343\201\215\343\202\213Gemini\343\202\222\345\210\251\347\224\250\343\201\227\343\201\237PR\343\203\254\343\203\223\343\203\245\343\203\274\343\202\271\343\202\257\343\203\252\343\203\227\343\203\210\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237\343\200\202.md" index f6486487702e..65cba7acf09e 100644 --- "a/source/_posts/2025/20250725a_\343\200\220Python\343\200\221Github_Actions\343\201\247\345\210\251\347\224\250\343\201\247\343\201\215\343\202\213Gemini\343\202\222\345\210\251\347\224\250\343\201\227\343\201\237PR\343\203\254\343\203\223\343\203\245\343\203\274\343\202\271\343\202\257\343\203\252\343\203\227\343\203\210\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237\343\200\202.md" +++ "b/source/_posts/2025/20250725a_\343\200\220Python\343\200\221Github_Actions\343\201\247\345\210\251\347\224\250\343\201\247\343\201\215\343\202\213Gemini\343\202\222\345\210\251\347\224\250\343\201\227\343\201\237PR\343\203\254\343\203\223\343\203\245\343\203\274\343\202\271\343\202\257\343\203\252\343\203\227\343\203\210\343\202\222\344\275\234\343\201\243\343\201\246\343\201\277\343\201\237\343\200\202.md" @@ -8,7 +8,7 @@ tag: - Python - コードレビュー category: - - Programming + - DevOps thumbnail: /images/2025/20250725a/thumbnail.png author: 片岡久人 lede: "GitHub Actionsを利用して、CI/CDパイプライン上で実行可能なPRのAIレビュー用スクリプトを紹介します。" diff --git "a/source/_posts/2025/20250729a_\344\274\270\343\201\263\343\202\213\344\272\272\343\201\256\346\235\241\344\273\266\343\201\253\343\201\244\343\201\204\343\201\246Slack\343\201\247\350\251\261\343\201\227\343\201\237.md" "b/source/_posts/2025/20250729a_\344\274\270\343\201\263\343\202\213\344\272\272\343\201\256\346\235\241\344\273\266\343\201\253\343\201\244\343\201\204\343\201\246Slack\343\201\247\350\251\261\343\201\227\343\201\237.md" index 1dc5a8c3349e..035ba51e8233 100644 --- "a/source/_posts/2025/20250729a_\344\274\270\343\201\263\343\202\213\344\272\272\343\201\256\346\235\241\344\273\266\343\201\253\343\201\244\343\201\204\343\201\246Slack\343\201\247\350\251\261\343\201\227\343\201\237.md" +++ "b/source/_posts/2025/20250729a_\344\274\270\343\201\263\343\202\213\344\272\272\343\201\256\346\235\241\344\273\266\343\201\253\343\201\244\343\201\204\343\201\246Slack\343\201\247\350\251\261\343\201\227\343\201\237.md" @@ -10,7 +10,7 @@ tag: - 新人向け - マインドセット category: - - Culture + - Business thumbnail: /images/2025/20250729a/thumbnail.jpg author: 真野隼記 lede: "「伸びる人の条件ってなんだろう？」と考えだしたら止まらなかったので、会社Slackのスーパー雑談チャンネルで投げかけてみたところ、有益かつ面白いやり取りができたので議論をまとめました。" diff --git "a/source/_posts/2025/20250818a_I\357\274\217F\350\250\255\350\250\210\343\202\254\343\202\244\343\203\211\343\203\251\343\202\244\343\203\263\343\202\222\345\205\254\351\226\213\343\201\227\343\201\276\343\201\227\343\201\237.md" "b/source/_posts/2025/20250818a_I\357\274\217F\350\250\255\350\250\210\343\202\254\343\202\244\343\203\211\343\203\251\343\202\244\343\203\263\343\202\222\345\205\254\351\226\213\343\201\227\343\201\276\343\201\227\343\201\237.md" index e8f19e13cb5f..356fb7f83128 100644 --- "a/source/_posts/2025/20250818a_I\357\274\217F\350\250\255\350\250\210\343\202\254\343\202\244\343\203\211\343\203\251\343\202\244\343\203\263\343\202\222\345\205\254\351\226\213\343\201\227\343\201\276\343\201\227\343\201\237.md" +++ "b/source/_posts/2025/20250818a_I\357\274\217F\350\250\255\350\250\210\343\202\254\343\202\244\343\203\211\343\203\251\343\202\244\343\203\263\343\202\222\345\205\254\351\226\213\343\201\227\343\201\276\343\201\227\343\201\237.md" @@ -8,7 +8,7 @@ tag: - 設計 - ガイドライン category: - - Infrastructure + - Programming thumbnail: /images/2025/20250818a/thumbnail.jpg author: 山口真明 lede: "フューチャー社内の有志メンバーでI/F設計ガイドラインを作成し、公開しました。本ガイドラインは、クラウドネイティブな環境におけるモダンなシステム間連携の設計指針を提供することを目指しています。"