JavaScript

最近、React＋TypeScriptの開発環境を作る場合、大抵はcreate-react-appを利用するケースが多いと思います。 実際、種々のベストプラクティスであったり、単純にアプリケーションを作る方にフォーカスする場合、create-react-appを利用するのがbetterです。ただ、色々な要因でejectせざるを得ない状況に追い込まれると、結構厳しいケースが多いです。実際公式でもejectは非推奨です。 そういうときに備えて（？）、０から環境を作ってみましょう。こういう経験をしておくと、ejectすること無くいろいろすることが出来ます。 <!–more–> 今回作っていって見る環境は、次のような環境です。 React + TypeScriptで書ける TypeScript内では、moduleは相対パスではなく、 @/hoge のようにしてアクセスできる TSXで書ける ESLintでlintできる prettierでformatting Jest＋enzymeでユニットテスト webpack-dev-serverでhot reloading Componentのreloadは色々問題もあるのでやりません Reactの導入 まず新しいpackageを作りましょう。ここでは react-handmade-sample という名前で作ります。 $ mkdir react-handmade-sample $ cd react-handmade-sample $ npm init 次に、React関連のパッケージをインストールします。styled-componentsは趣味なので、無くてもいいです。 $ npm install react react-dom styled-components Webpackの導入 Webpackは、現時点でデファクトbundlerです。非常に設定量が多いと思われがちですが、必要最小限であれば、意外と量は少ないです。とりあえず必要なので入れます。webpack-dev-serverもついでにいれます。 $ npm install webpack webpack-dev-server $ npm install html-webpack-plugin tsconfig-paths-webpack-plugin Webpackは、developmentの場合に使う基本設定と、production時に利用する設定の二通りを用意しますが、とりあえずはdevelopmentの設定だけ記述します。 // webpack.config.js const path = require('path'); module.exports = function(isProduction) { return { mode: "development", entry: path.resolve(__dirname, "./src/index.tsx"), // ファイルの出力設定 output: { // 出力ファイルのディレクトリ名 path: path.resolve(__dirname, 'dist'), // 出力ファイル名 filename: "index.js" }, module: { rules: [ ] }, resolve: { extensions: [".ts", ".tsx", ".js", ".json"], plugins: [ ] }, plugins: [ ] }; }; 空っぽに近いですが、とりあえず最小限です。 ...

タイトルの通り、CRA2 + TypeScriptのプロジェクトに、更にStorybookを追加してみました。 <!–more–> 前口上 いろいろ試すための個人プロジェクトを作って、色々なライブラリであったり、言語であったりを試しています。一応ツールとして利用したいと思って作っていはのですが、永遠に動くようにできないんじゃないかという懸念と戦いつつ実装しています。いつか日の目を見ることを祈りつつ・・・。 FrontendとしてはElectronで作っていて、Create React App + TypeScriptでGUIを作っています。今回、これにStorybookを追加することにしました。 Storybookとは Storybookの公式から、Storybookについてを引用します。 Storybook is a UI development environment and playground for UI components. The tool enables users to create components independently and showcase components interactively in an isolated development environment. https://storybook.js.org/basics/introduction/ Componentのカタログ（showcase）を作り、再利用を促しつつ、生きた例として提供する、という感じでしょうか。 なぜ追加するのか なんとなく＋気になるから。 ・・・いつもどおりの理由ですが、実際コンポーネントベースの開発をしていると、 基底となるコンポーネント が欲しくなります。これがないと、同じようなものが量産されるというのを実際に経験してます。また、実際に動くものがあると、話がしやすいとかの効果もあるようです。デザイナーと協業とかしたことないので、デザイナーから見ても嬉しいのか？というのは実感できませんが・・・。 ただ、いきなりプロジェクトに投入するのはどうなんだ？ということで、どうとでもなる個人プロジェクトで試してみようという次第です。 追加する 今回使うプロジェクトの前提は以下のとおりです。 create-react-appの2.1以降 create-react-app公式の方法でTypeScriptを導入している まずはStorybookを追加します。Storybook公式の手順は npm ですが、私は yarn を利用しているので、以下はyarn前提です。 $ yarn add -D @storybook/react # もしかしたら下のコマンドはいらないかもしれない $ npx -p @storybook/cli sb init # TypeScript向けのlibraryを追加します $ yarn add -D @types/storybook__react $ yarn add -D @storybook/addon-info @types/storybook__addon-info react-docgen-typescript-webpack-plugin $ mkdir .storybook さて、これで追加自体はできるんですが、これだけだと動かないようで、issueが立てられています。この中で示されている解決策を導入してみます。 .storybook/webpack.config.js として以下の内容を追加します。 ...

諸事情（主に会社の事情）で、AngularとState管理について評価する必要が出ました。ただ、今までそもそもAngularを触ったことがなかったため、Angular公式のTutorialをやることにしました。このTutorialが結構な分量なので、これにstate管理を追加すると丁度いいんでは？ということでやってみました。 <!–more–> Angular CLIのインストール まずはAngular CLIをインストールします。基本的にglobal installを推奨しているようですが、global installはめんどくさい時もあるので、今回はlocal installでなんとかならんかやってみます。 $ yarn add -D @angular/cli $ yarn ng new angular-tutorial --directory . --force $ yarn ng serve --open 一回CLIだけをaddしてから、無理やり上書きするというパワープレイでいけます。ここからは、Tutorialを普通に進めます。 Tutorialをやる（HTTP以外） Tutorialを進めていきます。集中してやれば、大体2〜3時間で終わるくらいのボリュームです。ただ、今回はstate managementをやるのが目的なので、HTTPが絡むような部分はstubにしておきます。 とりあえずTurorialが完了しただけの状態が以下のリポジトリです。masterブランチがその状態です。 https://github.com/derui/angular-tutorial-ngrx では、これにngrxを追加していってみましょう。 ngrxとは Angularを表す ng と、RxJSを表す rx がくっついているのでだいたい想像がつきますが、RxJSを前面に出したAngular用のstate management libraryです。公式ページでは次のように表現されています。 Store is RxJS powered state management for Angular applications, inspired by Redux. Store is a controlled state container designed to help write performant, consistent applications on top of Angular. ...