- 2021.02.12
Reactで改行コード\nを改行させる方法
デフォルトでは、改行コード『 \n 』が改行されなかったので、解決した方法を共有します。 styleを使用 styleを指定して whiteSpace: ‘pre-line’ を設定します。 表示結果 あいうえおかきくけこ 無事改行されました。 splitでの使用方法。<div>バージョン 改行\nが一個のパターン 改行コード\nで文字列を分割することで改行を表 […]
JavaScript
1/3ページ
- 2021.01.28
Reactで時間を表示。momentで日付操作
JavaScriptの日付操作用ライブラリmomentの利用方法です。Reactでの時間表示にも使用できます。 install npmでのインストール方法 yarnでのインストール方法 基本的な使い方 日付の生成 フォーマットを使ってみる 文字列を日付に変更 Dateを日付に変更 加算(足し算) 日付の足し算です。‘years’ の部分は省略も可能です。減算のところは省略系 […]
- 2020.12.28
ReactPaginateを使ってページ移動
ページネーション。サイトで複数のページがあったら出てくるやつです。 ReactPaginateを使えば簡単にできました。 こういうのを作っていきたいと思います。 1からでも表示出来るよう、create-react-appも叩きます。ReactPaginate がすぐ使いたければコードの方へ飛んでください。 create-react-app 適当な場所にappフォルダを作成してcreate-reac […]
- 2020.12.26
React + Flask をExe化して動かしてみる
簡単なReact + Flask をExe化して動かしてみたいと思います。 コードの詳細が見たい方はこちらから見てください。Flask + React でHello World フォルダの階層はこんな感じです。 FrontendのReact側 こちらはjsファイルをbuildして、できたファイルをbackend側に埋め込んでいきます。 ターミナル操作でapp/frontend/src下に移動しまし […]
- 2020.12.22
【Vue.js】note風にtextボックスを増減させる
動き自体はかなりシンプルです。noteと動きは違いますがボタンを押下したら書き込めるテキストボックスを追加していきます。イメージはこんな感じです。 左側の＋で行の追加、ーでその行を削除します。 さっそくコードを確認しましょう。 結構短い行でできます。 簡単に説明すると、 ポイントは下記のindexです。 buttonが押下されると、indexを引数にしてtextListへ指定の場所(index)に […]
- 2020.12.15
【Vue.js】axiosで受け取ったjsonをChart.jsで表示する
前回書いたこの記事の続きとなります。 Vue.js フィルター機能実装 今回は簡単なチャートをChart.jsを使用して表示したいと思います。 前回作成したbook.htmlにリンクを張ってチャートを表示するページへ推移させようと思います。 私はこんな感じでリンクを張りました。bodyの中ならどこでもいいです。 ファイルがないとリンクがあっても飛べないので、book.htmlと同じ配下にchart […]
- 2020.12.13
Reactのinput入力をswitch文とsetStateを使い合わせて値を変更する
Reactを使うと必ずというほど使う、setState。これをinputで入力を受け付けた時に値を保持するために使用します。 入力された文字列をsetStaetで受け付けてあげましょう。 create-react-app コマンドを使用してReactを作ります。設定未だの方はこちらからご覧ください。 ファイル構成の確認とやることの確認 まずは今回作成するファイル階層を確認します。コマンドにて $ […]
- 2020.12.07
Vue.js フィルター機能実装
前回書いたこの記事よりスクレイピングしたデータを使用して、Vue.jsで表示してフィルター機能を実装していきたいと思います。 Pythonを利用してVueで表示したい方はこれらの記事を参照してみて下さい。 イメージはこんな感じです。ランキング部分をVue.jsで表示しています。 表示しているデータはPythonでエクセルから読み込んでjsonに変換しているだけです。絞り込み機能のフォーム部分でそれ […]
- 2020.11.28
Vue.jsからPythonにリクエストを飛ばしてエクセル書き込み
この記事からの続きとなります。まだご覧になっていない方はどうぞ。 エクセルに書き込むメソッドの作成 Vue側から飛ばすデータの内容は決まっているので(表示しているデータ)それを元にエクセルに書き込むメソッドを作成します。 main.pyと同じ配下にfunction.pyのファイルを作成します。下記書き込んでください。 足りないライブラリは各自pip installして下さい。 Vue側からリクエス […]
- 2020.11.14
Flask + React でHello World
PythonのFlaskとJavaScriptのReactを使ってHello Worldを出力させたいと思います。そしてメッセージを送って、出力させるところまで一気にやります。 簡単なサーバー側とフロント側での実装がこちらの記事でできるようになります。 create-react-app コマンドを使用してReactを作ります。設定未だの方はこちらからご覧ください。 まずは今回作成するファイル階層を […]
- 2020.11.12
PythonでVue.jsソート(昇順・降順)
この記事からの続きとなります。まだご覧になっていない方はどうぞ。 タイトルの通り昇順のソートを行います。 昇順 index.htmlを編集します。 まずは無駄なコードが多いためシンプルにします。 にアクセスして前回同様に表示されていればOKです。 次にソートメソッドを実装します。sort_key: ”の追加とcreatedの下にメソッドを実装します。 実装が終わったらテーブルの項目をク […]
- 2020.11.08
PythonでVue.jsを使う
この記事からの発展となります。まだご覧になっていない方は是非読んでみてください。 サンプルデータはscikit-learnから参考とさせていただきます。 まずは前回記事で作成したmain.pyを編集します。必要なライブラリをインポートしてメソッドを追記します。 今回はhead()縛りで5件のみの表示とします。index側はVue.jsを使用しますのでデータフレームから一行ずつ取り出してJSON形式 […]
- 2020.07.01
JavaScript基本文法(変数と宣言)
変数宣言として、const、let、var があります。 それぞれの変数宣言の違いについてみていきましょう。 const const は 再代入できない変数の宣言に使います。 再代入をする必要のない場合は const を使用します。 使い方 例 カンマ区切りで同時に複数の定義が可能。 こちらと同義です。 constは再代入はできません。以下はエラーが発生します。 let let は 値の再代入が可 […]
- 2020.06.28
React-Redex-Firebase掲示板の作成-6(Firebaseからデータ取得をして表示)
前回までにしたことでFirebaseにデータが登録出来ました。そのデータを表示させていきましょう。 編集ファイル src/store/reducers/rootReducer.js reduxのstateとFirebaseのデータを同期します。 src/components/dashboard/Dashboard.js firestoreのデータを表示するよう編集します。 src/componen […]
- 2020.06.28
React-Redex-Firebase掲示板の作成-5(Firebaseに登録)
前回までの新規作成が無事コンソールに表示されましたら、そちらの情報をFirebaseに登録してみたいと思います。 編集ファイル名 src/index.js Firebaseと繋ぐ設定をします。compose を使用してstoreにまとめます。 src/store/action/index.js 新規作成エラーの為の定数を追加します。 src/store/action/projectActions. […]
- 2020.06.23
React-Redex-Firebase掲示板の作成-4(ローカル新規作成)
前回までのRedex管理まで出来たら、新規作成を作っていきたいと思います。 編集ファイル名 src/index.js thunkはstoreのdispatchメソッドを受け取り、Actionオブジェクトの代わりに渡された非同期関数処理が完了した後に、通常の同期処理をディスパッチするために利用します。 src/store/actions/index.js 新規作成のための定数宣言。 src/stor […]
- 2020.06.22
【JavaScript】デバッグのやり方
動作確認レベルの簡単な説明になります。触っていけば慣れますので初学者の方は是非参考にしてみて下さい。 下記記事での番外編となっています。まだ読んでない方は是非読んでみて下さい。 プログラムを書いて実行していると、完璧にコードを書いたつもりでも、イメージ通りに動かないことがあります。 デバッグを行うことで効率よくエラーを探すことができます。プログラムを実行して「あれ？？」と思ったらデバッグすることを […]
- 2020.06.21
掲示板アプリの作成-3(Redux・Reducer 一覧表示)
前回で表示まではできたと思いますので、このデータをReduxで管理して、表示させたいと思います。 編集ファイル名 src/store/reducers/projectReducer.js まずはアクションに従って、状態を更新するReducerを作成します。今回はデモデータを持たせて、このデータを一覧に表示させたいと思います。 src/store/reducers/rootReducer.js Re […]
- 2020.06.21
掲示板アプリの作成-２(ローカル 一覧表示)
前回で前準備をしました。 まずはローカルで動くよう作っていきたいと思います。※classNameはMaterializedを使用するための名前です。 編集ファイル名 src/components/layout/Navbar.js 共通のレイアウトのナビゲーションバーを作成します。 src/App.js こちらをsrc/App.jsから呼び出してあげます。 yarn startのコマンドで動いている […]
- 2020.06.21
掲示板アプリの作成-１(下準備)
今回使用する技術・React・Redux・Firebase Firebaseの設定とReactプロジェクトの作成をしていきます。 Firabaseにてプロジェクトの作成 プロジェクトの作成方法は以下を参考にしてください。https://kazunaka.com/firebase-react-loginapp-1/ プロジェクトの名前を「bulletin-board」とします。アプリの名前を「bul […]