Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに エンジニアを目指し始めて初のポートフォリオサイトを作成しました。 背景としてはインターンを始めて実務につく機会をいただき、本格的な制作物を作れるようになってきたので、形に残したいと思いポートフォリオサイトを作成することを決意しました。 また今後お仕事を自分で獲得したいと考えており、そのために本格的に準備を進めたいと思いました。 まだまだ未熟ですが見て頂けると幸いです。 使用した技術 Next.js TypeScript tailwindcss microCMS AWS S3 AWS CloudFront GitHub Acti

Ballmer氏は2001年に、LinuxがMicrosoftの知的財産すべてを脅かす「ガン」だと発言しており、Microsoftの幹部らは2010年時点でも、オープンソースが依然として厄介な存在だと考えていた。 Hejlsberg氏は「Linuxは『Windows』にとって脅威だ（と捉えられていた）。しかし、今ではまったく逆の状況になっている」と述べた。 2014年にCEOの座を降りたBallmer氏はその後、自らの考えを改めている。また今日、CEOであるSatya Nadella氏の下でクラウドに注力しているMicrosoftは、オープンソースへの愛を示すとともに、オープンソースプロジェクトに対して無料アカウントをも提供するコードリポジトリーGitHubを傘下に収めている。 Microsoftの主なオープンソースプロジェクトには、人気のコードエディター「Visual Studio Co

はじめに 今まで作ったアプリケーションに今回は登録されているデータを条件によって検索できる機能を実装していきました。 今回作ったアプリケーション 一つの画面の中に条件フォームを作り、絞りこみボタンを押すとその条件に合致した情報を画面上に表示する機能です。 例えば以下の画像では「好きな住居形態」という項目で「森」を選んだ結果、合致するゴリラとhatakeyamaが画面に表示されました。 前回のページネーションがちゃんと作動しているのでページネーション番号もちゃんと表示されています。 また絞る条件は一項目ではなく複数項目選ぶことができます。 今回使用するコンポーネント 条件検索のロジックを持ったUserInfoFilterコンポーネントと条件検索で帰ってきた値を格納するUserInfoコンポーネントを今回使っていきます。 UserInfoFilter.tsx(条件検索するコンポーネント) im

$ npm init -y (出力は省略) $ npm install -D serverless (出力は省略。バージョン2.1.1のServerlessコマンドがインストールされました。) $ npx sls create -t aws-nodejs-typescript Serverless: Generating boilerplate... Serverless Error --------------------------------------- The file "package.json" already exists, and serverless will not overwrite it. Move the file and try again if you want serverless to write a new "package.json" Get Sup

TypeScriptは、Microsoftが開発したプログラミング言語の1つです。とはいえ、独自の言語というわけではなく、JavaScriptの「スーパーセット（上位互換）」という位置づけのプログラミング言語で、TypeScriptで作成したプログラムはJavaScriptに変換されてReactやVueなどのWeb開発や、React Native等のスマホアプリ開発、ElectronやNode.jsなどのデスクトップ開発など、幅広い分野で利用することができます。 本書では、そんなTypeScriptを基本から順を追ってしっかり紹介します。是非、TypeScriptに入門しましょう。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

「TypeScript」を題材に執筆した同人誌『型の強化書』をきっかけに、商業誌『実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義~』を執筆。他言語にはない斬新な型システムを活用し、技術課題解決に取り組んでいる。 『実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義~』：https://book.mynavi.jp/ec/products/detail/id=104703 世の中にはさまざまなプログラミング言語が存在します。そして、人によってはただならぬ愛着を持つ人も。そこで本企画では、このプログラミング言語にフォーカス。お気に入りのプログラミング言語のことをマニアックに語っていただくとともに、知識の獲得方法などについてお伺いします。第2回にご登場いただくのは、書籍『実践TypeScript ~ BFFとNext.js&Nuxt.jsの

この記事のソースコード: https://github.com/knjname/2020-09-03_growingtsd TypeScriptプロジェクトのコンパイルが終わらない！ こんにちは型に弱いマンです。 CIでTypeScriptプロジェクトのコンパイルが1時間たっても終わらなかったことはありませんか？ 私は何度かあります。 TypeScript的に行儀の良い(?)フレームワークを使っている方は、おそらくそういう現象に遭うことは少ないと思います。 行儀の悪い(?)フレームワークをハードに使っている方は、こういうことに遭う確率が高いと思います。 具体的にどういうフレームワークかというと、下記のようにコードで動的に型を紡ぎ出す系のフレームワークですね。 （mobx-state-tree なんかが該当します。） export type ItemDefinitions<D = {}> =

先日の v-tokyo #11 の懇親会で質問されたので、Native TSX Support される Vue 3 でなぜ tsc だけで TSX が動作しないのかを聞かれたのでメモとして残しておこうと思います。 ちなみに Vue 3.0 beta が出た頃に既に検証し終えているコードは以下にあります。 https://github.com/potato4d/vue-next-tsx-only-tsc TL;DR Vue 3 にて、render function の h 関数が分離された h 関数の分離に伴い、 API が React のに近いインターフェースとなった この2点によって tsc だけで Vue TSX が動くようになったが、 近いだけで微妙に違う仕様によって実用は難しい 具体的には children のとり方が VNode[] か ...VNode かの違いがある Vue

💡 4版から 5版への変更内容については以下の記事をご参照ください https://klemiwary.com/blog/riakuto-5ed-launch ―――― シリーズ累計 3.7 万部を突破、現場のエンジニアからもっとも支持されている React 教本、『りあクト！ TypeScript で始めるつらくない React 開発』の改訂第 5 版。全 3 部構成となっている第 1 部「言語・環境編」です。 最新の React 19 環境に対応。第 1 部の本書では、関数型で型安全な React プログラミングができるようになるための言語の基礎力を身につけていきます。もちろん JavaScript および TypeScript は 2025 年現在の最新の仕様をサポート。 「React の開発になぜ Node.js が必要なの？」「今どきの React エンジニアはどんなツールを使

はじめに Vue.js 製アプリケーションのレガシーコードベースにおいて、頻繁に課題となるのが mapGetters のような map ヘルパーのメソッドです。 これらはショートハンド的に使えて過去には便利なケースもありましたが、現在ではほとんど利用されることもなくなりました。 それもそのはず。現在のフロントエンド開発の主流となる言語は JavaScript ではなく TypeScript となっています。しかし、 map 系ヘルパーはその構造から任意の文字列を受け取った上でオブジェクトに影響を及ぼす形となっており、根本的に型システムとの相性が悪い存在です。 これを利用している限り、 Vue Component において map ヘルパーから this に生えたものは、型もつかなければそもそも this に生えていることすら TypeScript 側で検知できず、コンパイルエラーとなってし

こんにちは、SmartHR でフロントエンド開発を担当している @Tokky0425 です。 この記事では、私のプロダクトでの OpenAPI Generator を使ったフロントエンド開発の取り組みを紹介していきます。 目次 OpenAPI とは 「ラクラク分析レポート」の DX 上の課題 OpenAPI Generator とは 実際に generate してみる 生成ファイルを使ってみる 型情報を出力してみる 組み込み・運用の工夫 chokidar で監視する lint-staged に組み込む メリット・デメリット メリット デメリット まとめ OpenAPI とは OpenAPI とは、「REST API のドキュメントの記述形式を定めた仕様」のことを指しています。 簡単な例ですが、下記のような YAML ファイルがあるとします。 schema.yml paths: "/some

印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます Microsoftは米国時間8月20日、プログラミング言語「TypeScript」の最新版となる「TypeScript 4.0」を公開した。同言語は大規模な「JavaScript」ウェブアプリケーションの構築で高い人気を誇っている。 バージョン4.0は技術的に大きなマイルストーンとなるもので、多数の新機能が提供されている。TypeScriptの開発者で、MicrosoftのテクニカルフェローであるAnders Hejlsberg氏によると、これは2年前に「TypeScript 3.0」を公開して以来、同氏のチームが注力してきたことの集大成だという。 今回の変更には、同社の「Visual Studio Code」といったコードエディターと

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? TypeScript全然わかんない... という状態から、プロジェクトに導入できるまでになんとかなったので、 学習の参考になったものなどをまとめて学習ロードマップを作成いたしました。 私自身もまだまだのレベルですが、これからTypeScriptを勉強したい!という方の道しるべになれば幸いです Level 0: TypeScriptってなんぞや？ まず学習する前に、その対象がなんなのか、を見極める作業です。 TypeScriptは altJS の１つです。 JSは元々大規模なコードを組むには不向きな設計になっているので、 altJSという

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Migrating Large TypeScript Codebases To Project ReferencesUsing TypeScript enabled our ever-growing Admin teams to leverage TypeScript’s compiler to catch potential bugs and errors well before they ship. In 2017, we began migrating the merchant admin UI of Shopify from a traditional Ruby on Rails Embedded RuBy (ERB) based front-end to an entirely new codebase, TypeScript paired with React and Grap

このうち特に型による静的チェックは、TypeScriptに「Type」という名が冠されているように、TypeScriptの目玉機能です。型チェックはプログラムを実行せずとも、プログラムの欠陥に気づくことができます。バグは発見が遅れるほど修正コストが高くつきますが、TypeScriptではコーディング中に頻繁にチェックすることができ、バグ早期発見によって修正コストも抑えることができます。AirBnBによると、TypeScriptを使っていたらAirBnBの38%ものバグを未然に防げたと見る分析を発表しています。 また、型があることで、プログラムの可読性や理解しやすさが上がったり、エディターの補完機能を活かすことができ、コーディングの効率も良くなります。 TypeScriptは公式に「大規模なアプリケーション」が具体的にどれほどの規模なのかは名言していませんが、筆者の感覚からいうと、数百行規模