アルゴ式とは プログラミングを解くドリルが提供されているWEBサービスである。by yano 今回の問題 配列の全探索 1 Ryuji's answer JavaScript function main(input) { const args = input.split("\n"); const inputArray = args.map((n) => n.split(" ")); …

Prettier Prettierはフロントエンドのメジャーどころをほぼ網羅しているフォーマッタです。 TypeScript、HTML、CSS、Vue、Angular、GraphQL、CSS in JS の styled-components など コードフォーマッタとは インデントや改行などの記述スタイルのフォーマット…

問題 １以上の整数nが与えられたとき、１からnまでの整数の内 7で割り切れない数の合計を出力するプログラムを示してください。 例えばnが７の場合は1, 2, 3, 4, 6, 7の合計を出力する。 関数型プログラミングと手続型プログラミングの違い 関数型プログラミ…

依存パッケージをリストアップする npm info パッケージ名 peerDependenciesを実行すると、依存しているパッケージをリストアップできます。 以下の例では、styled-componentsの依存パッケージをリストアップしています。 ➜ frontend git:(feature/add_#403)…

RubyではRubocopなどを用いることでコードのバグの警告や自動整形を行うことが出来ます。対してJavaScriptではlinterやコードフォーマッタを使用します。 linterとは コードを静的解析してコンパイルではじかれない潜在的なバグを警告するものです。 放って…

復習 トランスパイル 一つのプログラミング言語で書かれたプログラムのソースコードを別のプログラミング言語と同等のソースコードを生成すること また、それを行うプログラムをトランスパイラといいます。 BabelはES2015以降のJavaScriptやJSXをトランスパ…

JSXの基本構文 JSX構文 <MyComponent foo="bar">baz</MyComponent> コンパイルされると 以下のReact.createElementの形式に変換されます。 React.createElement(component, props, ...children) React.createElement(MyComponent, { foo: 'bar' }, 'baz'); React.createElementの実行結果が以下の…

JSXの基本文法 tsconfig.jsonのjsxオプション reactに設定している場合 JSXの記述はReact.createElement(...) のように変換されます。 createElement メソッドの上位モジュールのReactをインポートする必要があります。 react-jsxにしている場合 TypeScript4…

なぜReactはテンプレートを使わないのか JSファースト(思想) ReactではJavaScriptで一貫してviewのレンダリングも行います。 JSXはオブジェクトを生成するためのJavaScriptの純粋な式であり、フレームワークから特別扱いされることはありません。 HTML テン…

JSXとは 名前の由来は『JavaScript』と『XML』の組み合わせです。 XMLライクな記述を出来るようにしたECMAScript2015を構文拡張したものです。 JSXは、コンパイル後にReact.createElementになります。 React.createElementを実行すると、ReactElementオブジ…

TypeScriptのコンパイルオプション tsconfig.json TypeScriptプロジェクトのコンパイラ設定を保存しておくためのファイルです。 コンパイルが実行される際、デフォルトではプロジェクトルート配下から順に探索し、最初に見つかったtsconfig.json ファイルが…

npmのパッケージに含まれている型定義ファイルをプロジェクトに関連付ける方法は大きく分けて２つあります。 １. JavaScriptファイルと同じ階層に同じ名前で.d.ts拡張子の型定義ファイルを置く 例を挙げる『ky』というライブラリは、パッケージ内で同じ階層…

JavaScript モジュールを TypeScript から読み込む npmのリポジトリで提供されている多くのパッケージは、TypeScriptで書かれているものでも、TypeScriptのままで配布されているものはあまりありません。 (理由は以下) JavaScript環境との相互運用が簡単であ…

TypeScriptのimport/export JavaScriptとほぼ同じで異なる点は２つあります。 TypeScriptのimportは拡張子を書くとエラーになる 同名の型を扱った場合の挙動 importで拡張子を書くとエラーになる理由 モジュールを解決する際に独自のルールで探索するからで…

復習 in演算子は、指定したオブジェクト上に指定したプロパティがあるかを判定できます。 "プロパティ名" in オブジェクト; // true or false 型アサーション 型を断定するものです。as 断定する型とします。 コンパイラによる型の解釈を変えているだけで、…

型ガード if文の条件式などで型を判定して、スコープ内で型を保証することを型ガードと言います。 typeofやinstanceofを用いて型ガードを行う例を紹介します。 typeofによる型ガード const foo: unknown = '1,2,3,4'; if (typeof foo === 'string') { consol…

型アサーションとは 開発者が型を断定することを、型アサーションと言います。型を断定することによって、コンパイラによる型チェックを強引に通すことができます。しかし、断定した型でコードが実行されるので、メソッドが呼び出せない等、予期せぬエラーが…

続: 組み込みユーティリティ型 NonNullableは型引数に渡した型からnull undefinedを取り除いてくれます。 NonNullable<T> type T1 = NonNullable<string | number | undefined>; type T2 = NonNullable<number[] | null | undefined>; const str:T1 = undefined; //compileerror! const arr:T2 = null; // compile error! R</number[]></string></t>…

テンプレートリテラル型 TypeScriptでは、テンプレートリテラルを型定義として扱うことが出来ます。 type DateFormat = `${number}-${number}-${number}`; const date1: DateFormat = '2020-12-05'; const date2: DateFormat = 'Dec.5,2020'; // compile err…

extends クラスやインターフェースの拡張に使われるextendsキーワードは型引数の表現にも使うことが出来ます。 const override = <T, U extends T>(obj1: T, obj2: U): T & U => ({ ...obj1, ...obj2, }); override({a: 1}, {a: 2, b: 8}); // { a: 2, b: 8 } override({a: 2</t,>…

keyof演算子 通常の式では使えず、型コンテキストのみで用いられる演算子です。オブジェクトの各キーを列挙した共用体型になります。 const permissions = { r: 0b0100, w: 0b010, x: 0b001, }; // typeof permissionsで、オブジェクトの型が取得できます。 …