crypto等)やnpmパッケージ利用しているJavaScriptのソースコードをbrowserifyでブラウザ上でも動くように変換し、あわせてReactも使ってWebアプリを作ってみました。ReactのJSXやES6の文法を一部使用しているため、browserifyのトランスフォームとしてbabelifyも利用しています。アプリの内容は、ユーザの入力した文字列に対してbase64等の変換やハッシュ化をリアルタイムでパイプライン的に適用できるというもので、npmパッケージには拙作のstring-codecを利用しています。アプリのソースはGitHubにあります。knjcode/react-string-codec-pipelineアプリ使用イメージここから動作するデモが見れます各ツールの用途browserifyNode.jsのコアモジュールやnpmパッケージを利用したJavaScriptのソースコードをブラウザ上でも動作するように変換するbabelifyECMAScript6(ES6)のコードをES5(いわゆる普通のJavaScript)のコードに変換する。ReactのJSXのコードを解釈してJavaScriptのコードに変換することもできるReactクライアントアプリのビューのライブラリとして利用uglify-jsJavaScriptのソースコードを実行可能な状態のまま圧縮するツール。browserifyで変換したコードはかなり大きくなるため圧縮してサイズを減らします動作の仕組みstring-codecを利用すると以下のように文字列を変換出来ます。'aGVsbG8='本アプリでは、Reactを使って、使用イメージにあるような連続した文字列の変換処理をReactのコンポーネントとして管理し、入力文字列の変化に応じてすべて再計算しています。Reactを使うと、このような動作を宣言的に記述することができ、パイプラインの途中のコンポーネントを削除するといった処理も複雑な状態遷移を考慮することなく実装することができます。画面上の各種変換ボタンは以下のように変換名が入った配列(ENC)に対してmap処理を使って生成しています。ボタンのonClick属性に、this.addAlgo.bind(null,algo,’encode’)とすることでaddAlgoメソッドを引数付きで呼び出しています。(<buttonkey={algo}style={style.item}onClick={this.addAlgo.bind(null,algo,'encode')}>{algo}</button>);})}ボタンクリック時に渡される変換内容を保持するユーザが各変換処理のボタンをクリックするたびに、以下のようにルートコンポーネント(AlgoList)のstateであるalgosに変換内容を追加していきます。codec:codec})});},baes64エンコードのボタンをクリックすると、AlgoListのaddAlgoメソッドに引数として、algoに’base64’、codecに’encode’を渡します。変換結果は入力文字列が変化する都度再計算します。/></li>);});this.state.valueがテキストボックスに入力されている文字列です。変換結果を格納する変数algosに、変換処理の配列this.state.algosからmapで取り出した内容に応じて文字列を変換し、変換結果表示用のAlgoコンポーネントを返します。変換処理が5個ある状態では、変数algosには5行分のAlgoコンポーネントが入ります。最後に、AlgoListコンポーネントのrenderメソッドにて、algos変数を渡して画面に表示します。style={style.list}>{algos}</ul></div>コンポーネントの削除処理1つ1つの変換処理の左側に表示される[x]ボタンをクリックするとコンポーネントを削除できますが、この部分の実装は親のコンポーネントから子のコンポーネントへ削除処理をpropsとして渡すことで実現しています。呼び出されて、子が削除されるという流れです。この程度の規模であれば管理できますが、これ以上に親子の階層が深くなったりコンポーネント間の関係が複雑になってくると管理しきれなくなるため、Flux等の発生したイベントを統一的にディスパッチするアーキテクチャを使っていくのがReactの流儀のようです。installで導入し、グローバルではなくローカルにインストールします。この状態だと、コマンドラインでbrowserifyと打っただけではのコマンド実行できませんが、package.jsonに定義したスクリプトをnpmのrunコマンドで実行することで、ローカルのnode_moduleディレクトリ内のパッケージを実行できます。bundle.jsと実行され、グローバル環境へツールをインストールすることなく各種ツール使った変換を実行できます。画面操作のgifアニメ化にはLICEcapというソフトを使いました。難しい設定もなく、シンプルで使いやすくてオススメです。記事を読むブラウザによる画像向き補正確認用ページ以下に表示されている画像の文字が左右逆だったり横倒しになっている場合、お使いのブラウザは画像をimgタグで表示する際に向きを補正しません。...記事を読むWordPressテーマSimplicityをアイキャッチ画像無しで使うSimplicityというシンプルで最近評判のWordPressテーマをブログに導入してみました。hubotから...記事を読むReactでストップウォッチを作ってみたReactで簡単なストップウォッチを作ってみました。一般的なストップウォッチの機能の他にラップ...記事を読むNode.jsでmecab-unidic-NEologdを使う最近、ボットに漢字を含む日本語の「読み」を解析させて遊んでいます。3をarm64で起動してdockerを利用する記事を読むhubotからRedisにアクセスするhubot経由でRedisへの簡易なアクセスを可能にするhubot-scriptを書きましたので、誰か使う人がいるかもと思いご紹介します。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。