クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

TypeScript

【React】ピュアなTypeScriptモジュールを追加してみる(Reactとメタ言語の比較-6)

Reactの続きです。前回はstyled-componentsのcss helperでスタイルを継承し、CSS設定を完成させました。今回はTypeScript編。以前メタ言語スターターキットで作ったTypeScriptのモジュールをReact環境に追加してみます。処理の対象はReactの仮想DOMです。そ…

【React】JSONデータをJSXに読み込んで表示する(Reactとメタ言語の比較-3)

Reactの続きです。前回はreact-helmetでheadタグの中身を動的に打ち替えました。今回はHTMLのテキスト部分を外部JSONデータからJSXに読み込みます。インラインのタグを認識するためにdangerouslySetInnerHTMLを、JSX内でループするためにmap()を使いました。…

【React】react-helmetでheadタグの中身を動的に打ち替える(Reactとメタ言語の比較-2)

Reactの続きです。前回は以前作成したメタ言語スターターキットの内容を移植してHTML部分をコンポーネント化しました。今回はheadタグを動的に打ち替えたく、react-helmetを使ってみます。それではいきましょう!

【React】React + TypeScript + CSS in JSの開発環境を作る(Gitエラー対処も)

Reactの続きです。前回はReact + TypeScriptの開発環境を作りました。今回はここにさらにCSS in JSも追加してみます。TypeScript環境でCSS in JSを動かすには「@typesパッケージ」が必要なこともわかりました。また、Git設定でいろいろなエラーに遭遇したの…

【React】React + TypeScriptの開発環境を作る(デプロイまで)

Reactの続きです。前回までReactのいろいろなCSS環境を試しました。今回からはReactとTypeScriptの開発環境を作ります。Create React AppでのTypeScript導入方法があったのでトライ。GitHub Pagesのデプロイまでできました。それではいきましょう!

【メタ言語】フロントエンド開発スターターキットを作った(EJS、Sass(SCSS)、TypeScript)

メタ言語の続きです。前回はdelを使って破壊神になり、ファイルを削除しました。今回はこれまで作ってきたコードを元にフロントエンド開発スターターキットを作ります。メタ言語(EJS、Sass(SCSS)、TypeScript)のコンパイル&画像圧縮を行う環境です。それで…

【gulpfile.js】gulp.task()を関数化(←gulp4推奨)他、リファクタリング

メタ言語の続きです。前回はimageminを使ってメタ言語コンパイル環境で画像圧縮も実行しました。今回はgulpfile.jsの中のgulp.task()をgulp4で推奨されている関数の形に変更します。その他にもいくつかリファクタリングしました。それではいきましょう!

【TypeScript】外部のJSONファイルを型付で読み込む

メタ言語の続きです。前回はgulpでwebpackを起動してモジュールをバンドルしました。今回は、その中のデータ部分のモジュールを外部JSONファイルにして、それをTypeScriptで読み込みます。データに型も設定します。それではいきましょう!

【TypeScript】gulpでwebpackを起動できるようにする(モジュールも再分割)

メタ言語の続きです。前回はwebpackでTypeScriptのモジュールをバンドルしました。今回はwebpackとgulpを連携して、gulpで他のタスクと一緒にwebpackのバンドルも実行します。さらにフォルダの変更やモジュール再分割も試みました。それではいきましょう!

【TypeScript】モジュールファイルをwebpackでバンドルする

メタ言語の続きです。前回はモジュール分割したTypeScriptをgulpでコンパイルしました。モジュールは分割したままでインポート設定がCommonJSになりブラウザ上ではエラーになりました。今回はモジュールを1つのファイルにバンドルすべく、webpackを使ってコ…

【TypeScript】モジュール分割で起きたエラーを調べる(CommonJSが原因)

メタ言語の続きです。前回はTypeScriptをモジュール分割しました。EJSやSass(SCSS)と違ってモジュール部分のソースは含まれず、またエラーも起きてうまく動きません。今回はエラーについて掘り下げてみました。*1。それではいきましょう! *1:結論から言うと…

【TypeScript】おみくじJSをTypeScriptに移植:型付け→モジュール分割(エラーあり)

メタ言語の続きです。前回はfsモジュールを使ってEJSファイルでJSONファイルのデータを読み込みました。今回からはTypeScriptのモジュール分割編に入ります。以前作った「おみくじJS」をTypeScriptに移植し、モジュールファイルに分割してみます。それではい…

【gulp】メタ言語(EJS、Sass(SCSS)、TypeScript)を同時コンパイルする!

gulpの続きです。前回はSass(SCSS)とTypeScriptを同時にコンパイルする環境を作りました。今回はここにEJSを加えてメタ言語(HTMLテンプレートエンジン、AltCSS、AltJS)フルセットの同時コンパイル環境にてみます。それではいきましょう!

【gulp】Sass(SCSS)とTypeScriptを同時にコンパイルする環境を作る

gulpの続きです。gulpでメタ言語を同時にコンパイルしたい。前回はその準備編としてSass(SCSS)を「src」フォルダから「dest」フォルダにコンパイルするファイル構成にしました。今回はここに他のメタ言語のコンパイル設定も加えていきます。まずはAltJSのTyp…

【JS】TypeScriptをGulpでコンパイルしてみる

Gulpの続きです。前回はAltCSSのSass(SCSS)をコンパイルしました。今回はAltJSのTypeScriptをコンパイルします。それでは行きまっしょい!

【CoffeeScript, LiveScript, TypeScript, Babel】AltJS 事始め

ブログ名をこっそり変えました。イイダリョウです。 「イイダリョウが書くブログ(仮)」→「クモのようにコツコツと」 Codepen Settingの旅、第3回です。 第1回は「HTMLテンプレートエンジン」、第2回は「AltCSS」でした。 今回はこれまたアルトいいねの「Al…