サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
blog.andoshin11.me
こんにちは。DevOps芸人と化して久しいAndyです。 2020年の秋にTypeScript 4.1へTemplate Literal Typesが導入され、そのインパクトに俄かに一部の界隈がザワついたのは記憶に新しいかと思います。 今回は型プログラミングの可能性を大いに押し広げたTemplate Literal Typesを用いてSQL文を型レベルで解析し、その実行結果を型情報として導出するためのsqlptureというライブラリを作ったので紹介します。 Embedded content: https://github.com/andoshin11/sqlpture SQLの実行/検証対象はPostgreSQL v13です。 tl;dr SQL文を型レベルで解析・評価して返り値型を取得できるmini interpreterを作ったよ 型レベルのSQL validatorも作ってるよ 実際
お久しぶりです。Andyです。 2020年はしばらくステルス気味な生活が続いていたのですが、個人的には環境や意識の面で大きな変化があった一年でもありました。 せっかくなので年の瀬の備忘録の意味も兼ねて、つらつらと近況をまとめて行こうと思います。 活動サマリー(キャリア編) フリーランス 2020年前半は引き続きWebフロントエンドに特化したフリーランスとして、社員一桁名のところから数千人のところまで複数社の包括的な技術支援を行わせていただきました。 コンサルタント的にプロジェクトのリスクアセスメントや技術ロードマップの見直し、Webフロントエンド + インフラレイヤの基礎設計、技術勉強会等を通して多角的に「事業×エンジニアリング」に取り組ませていただく機会が多かったです。 技術職をやっているとどうしても特定の領域の局所最適に目がいってしまったり所謂「エンジニアとしての正しさ」みたいなエゴが
こんにちは。最後に仕事でVueを書いてからそろそろ半年が経とうとしているAndyです。 (最近はReact, Go, Terraformあたりを触ってます) さて近頃はα版のバージョンも12を数え、そろそろVue 3のβ版リリースも見えてきました。 自分は趣味のプロダクトも含めて4年ほどVueを利用していますが、コンパイラの機能が日に日に充実していくのを眺めるのはとても楽しいです。 今回はそんなVue 2から大幅に進化したvue-nextのエコシステムを踏まえて、改めてVue Templateの型チェックに挑んでいきたいと思います。 TL;DR 今まではVue Templateの型チェックがしんどかった Vue 3からコンパイラがsourcemapを吐いてくれるようになった TypeScript Compiler APIと組み合わせてTemplateの型チェックができるツールを作ったよ!
GitHub Actionsについて調べていたら、ひょんなことからworkflow commandsの存在とそれを使ってPull RequestのDiff Viewでメッセージが表示できることを知った。 (GitHub ActionsでESLintを動かした時にエラー表示してくれるアレ) 良い機会なのでTS Compiler APIの勉強も兼ねて型検査の結果をコード上に表示するためのGitHub Actionsを自作しようと思う。 できたもの Embedded content: https://github.com/marketplace/actions/typescript-error-reporter 使い方 お手持ちのGitHub Actions workflowに2行追加するだけ - name: TypeScript Error Reporter uses: andoshin11/
この記事はCamphor- Advent Calendar 2019 15日目の記事です。 Squelette: Yet another TS codegen ecosystem for Open API. Embedded content: https://github.com/andoshin11/squelette 本Advent Calendarへの参加も今年で4回を数えます。フロントエンドなAndyです。 ここ数年の間に加速度的にTypeScriptの利用機会が増え、Webブラウザで動くSingle Page Applicationの世界にも静的型付けの考え方が浸透してきました。 Redux, VuexのようなRepositoryレイヤーからUIコンポーネント内のビジネスロジック、ひいてはDOMにいたるまで一気通貫に型の恩恵を感じることのできる開発体験は、今後もしばらくメイントレ
本記事はPhotocreate Advent Calendar 2019 2日目の記事です。 フロントエンドなみなさんこんにちは。Andyです。 2019年3月より、業務委託という形式で株式会社Photocreateの運営するスクールフォト販売サイト「スナップスナップ」のリニューアルプロジェクトをお手伝いさせていただきました。 今回はその中でチームの仲間とチャレンジした課題についてご紹介したいと思います。 はじめに 昨今のフロントエンド界隈はエッジノードでのpre-renderingエコシステムが非常に充実してきました。ひと昔前のように「検索エンジン最適化(SEO)のためにはSSRがマスト!!」といった要件がSingle Page Application開発に求められることも減ってきた気がします。 とはいえ依然としてSSR機構を求められる案件も少なくなく、無垢な初心者が誤って迷い込もうもの
Webフロントエンドエンジニア2年生になりました。 この1年で本当に多種多様なフロントエンドエンジニアの方たちとお話する機会をいただき、その度に「フロントエンドの領域って様々な役割があるなー」と思わされる毎日です。 一方で、「フロントエンド開発」という単語が形骸化してきている感覚も抱いており、具体的には 「フロントエンドチームに入社してみたけれどスキルミスマッチで苦しんでいる」 「フロントエンドの業務に対してビジネス側や採用側の理解が得られない」 という話を目にする事も少なくありません。 今回はこれまで自分が出会ってきたり仕事でこなしてきたフロントエンド領域の業務について改めて整理する事で、 非フロントエンドエンジニアの方に少しでも興味を持ってもらう より実態に即したジョブロール細分化に向けた議論の下地を提供する フロントエンドエンジニア自身が得手不得手を踏まえたキャリア選択をできるよう、
Welcome to Shin Ando's (you may know me as Andy!) personal blog. I'm excited to share some parts of my daily life to all of you, my fellas.
先日開催されたVue FesおよびVueConf TOにて、Evanから正式にVue 3.0のいくつかの機能がアナウンスされました。 その中で特に興味を引いたのは公式なTSXのサポートアナウンスです。 Literal Templateを標準スタイルとしているが故に「Vueで型安全なアプリケーションは書けない」と長らく叫ばれていましたが、ようやくその汚名(?)も晴らせそうそうですね。 今回は@wonderful-panda氏の提供しているvue-tsx-supportを利用して、一足先に型安全なVueアプリケーションの世界を体験してみたいと思います。 Embedded content: https://github.com/wonderful-panda/vue-tsx-support vue create app 今回はGitHubのレポジトリ情報をGraphQLで取得するサンプルアプリケ
旧サイト(はてなブログ)からのパフォーマンスの伸びが顕著ですね。 Performanceは言わずもがなですが、はてなブログでPWA対応がほとんどされていないのが気になりました。Service Workerのような標準化しつつある仕様に追従できていないのは痛いところ。 Nuxt + Contentfulでやっていき 今回の実装にあたってはフレームワークに依存せずSPAを作成することも検討しましたが、SEOなどを考えるとSSRの仕組みが必須です。またSSRもスクラッチで組もうとすると中々ハードルが高く(Storeのハイドレーション、Render hooksのAPI設計等)、今回は業務でも利用した事のあるNuxt.jsを利用しました。 Embedded content: https://nuxtjs.org/ 詳細は後述しますが、Nuxt communityの提供しているModule群がものすご
この記事はCAMPHOR- Advent Calendar 2018 11日目の記事です。 このたびブログを新調しました。Nuxt + TypeScriptで作成したSingle Page ApplicationをGAEにホストして、Server Side Renderingも行っています。 ブログ移行の経緯や実装時のあれやこれやはまた明日別の記事でお話ししますが、その前段として本日はNuxt + TypeScriptのアプリケーションを作る時に自分がやったことを備忘録的に記録したいと思います。 また本記事で紹介しているソースコードはGitHubに公開しています↓↓ Embedded content: https://github.com/andoshin11/nuxt-typescript-example TypeScriptとは TypeScriptとはMicrosoftの主導で開発さ
このページを最初にブックマークしてみませんか?
『Shin Ando's Blog | Studio Andy』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く