JavaScript– category –
-
Reactで改行コード\nを改行させる方法
デフォルトでは、改行コード『 \n 』が改行されなかったので、解決した方法を共有します。 【styleを使用】 styleを指定して whiteSpace: 'pre-line' を設定します。 const text = 'あいうえお\nかきくけこ'; return ( <div style={{whiteSpace... -
Reactで時間を表示。momentで日付操作
JavaScriptの日付操作用ライブラリmomentの利用方法です。Reactでの時間表示にも使用できます。 【install】 npmでのインストール方法 npm install moment --save yarnでのインストール方法 yarn add moment 【基本的な使い方】 日付の生成フォーマットを... -
ReactPaginateを使ってページ移動
ページネーション。サイトで複数のページがあったら出てくるやつです。ReactPaginateを使えば簡単にできました。 こういうのを作っていきたいと思います。 1からでも表示出来るよう、create-react-appも叩きます。ReactPaginate がすぐ使いたければコード... -
React + Flask をExe化して動かしてみる
簡単なReact + Flask をExe化して動かしてみたいと思います。 コードの詳細が見たい方はこちらから見てください。Flask + React でHello World フォルダの階層はこんな感じです。 app ├── backend └── main.py └── frontend ├── node_modules ├── package.... -
【Vue.js】note風にtextボックスを増減させる
動き自体はかなりシンプルです。noteと動きは違いますがボタンを押下したら書き込めるテキストボックスを追加していきます。イメージはこんな感じです。 左側の＋で行の追加、ーでその行を削除します。 さっそくコードを確認しましょう。 <!DOCTYPE htm... -
【Vue.js】axiosで受け取ったjsonをChart.jsで表示する
前回書いたこの記事の続きとなります。 Vue.js フィルター機能実装 今回は簡単なチャートをChart.jsを使用して表示したいと思います。 前回作成したbook.htmlにリンクを張ってチャートを表示するページへ推移させようと思います。 <body> <a href... -
Reactのinput入力をswitch文とsetStateを使い合わせて値を変更する
Reactを使うと必ずというほど使う、setState。これをinputで入力を受け付けた時に値を保持するために使用します。入力された文字列をsetStaetで受け付けてあげましょう。 create-react-app コマンドを使用してReactを作ります。設定未だの方はこちらからご... -
Vue.js フィルター機能実装
https://kazunaka.com/money-book/ 前回書いたこの記事よりスクレイピングしたデータを使用して、Vue.jsで表示してフィルター機能を実装していきたいと思います。 Pythonを利用してVueで表示したい方はこれらの記事を参照してみて下さい。 https://kazunak... -
Vue.jsからPythonにリクエストを飛ばしてエクセル書き込み
この記事からの続きとなります。まだご覧になっていない方はどうぞ。 https://kazunaka.com/python-flask-vue-sort-asc/ 【エクセルに書き込むメソッドの作成】 Vue側から飛ばすデータの内容は決まっているので(表示しているデータ)それを元にエクセルに書... -
Flask + React でHello World
PythonのFlaskとJavaScriptのReactを使ってHello Worldを出力させたいと思います。そしてメッセージを送って、出力させるところまで一気にやります。簡単なサーバー側とフロント側での実装がこちらの記事でできるようになります。create-react-app コマン... -
PythonでVue.jsソート(昇順・降順)
この記事からの続きとなります。まだご覧になっていない方はどうぞ。 https://kazunaka.com/python-flask-vue/ タイトルの通り昇順のソートを行います。 【昇順】 index.htmlを編集します。 まずは無駄なコードが多いためシンプルにします。 <div id=&q... -
PythonでVue.jsを使う
この記事からの発展となります。まだご覧になっていない方は是非読んでみてください。 https://kazunaka.com/python-flask-helloworld/ サンプルデータはscikit-learnから参考とさせていただきます。 まずは前回記事で作成したmain.pyを編集します。必要な... -
JavaScript基本文法(変数と宣言)
変数宣言として、const、let、var があります。それぞれの変数宣言の違いについてみていきましょう。 const const は 再代入できない変数の宣言に使います。再代入をする必要のない場合は const を使用します。使い方 const 変数名 = 初期値; 例 const con... -
React-Redex-Firebase掲示板の作成-6(Firebaseからデータ取得をして表示)
前回までにしたことでFirebaseにデータが登録出来ました。そのデータを表示させていきましょう。 【編集ファイル】 src/store/reducers/rootReducer.js reduxのstateとFirebaseのデータを同期します。 import projectReducer from './projectReducer'; imp... -
React-Redex-Firebase掲示板の作成-5(Firebaseに登録)
前回までの新規作成が無事コンソールに表示されましたら、そちらの情報をFirebaseに登録してみたいと思います。 【編集ファイル名】 src/index.js Firebaseと繋ぐ設定をします。compose を使用してstoreにまとめます。 import React from 'react'; import ... -
React-Redex-Firebase掲示板の作成-4(ローカル新規作成)
前回までのRedex管理まで出来たら、新規作成を作っていきたいと思います。 【編集ファイル名】 src/index.js thunkはstoreのdispatchメソッドを受け取り、Actionオブジェクトの代わりに渡された非同期関数処理が完了した後に、通常の同期処理をディスパッ... -
【JavaScript】デバッグのやり方
動作確認レベルの簡単な説明になります。触っていけば慣れますので初学者の方は是非参考にしてみて下さい。 下記記事での番外編となっています。まだ読んでない方は是非読んでみて下さい。 https://kazunaka.com/java-janken-3/ プログラムを書いて実行し... -
掲示板アプリの作成-3(Redux・Reducer 一覧表示)
前回で表示まではできたと思いますので、このデータをReduxで管理して、表示させたいと思います。 【編集ファイル名】 src/store/reducers/projectReducer.js まずはアクションに従って、状態を更新するReducerを作成します。今回はデモデータを持たせて、... -
掲示板アプリの作成-２(ローカル 一覧表示)
前回で前準備をしました。 まずはローカルで動くよう作っていきたいと思います。※classNameはMaterializedを使用するための名前です。 【編集ファイル名】 src/components/layout/Navbar.js 共通のレイアウトのナビゲーションバーを作成します。 import Re... -
掲示板アプリの作成-１(下準備)
今回使用する技術・React・Redux・FirebaseFirebaseの設定とReactプロジェクトの作成をしていきます。 Firabaseにてプロジェクトの作成 プロジェクトの作成方法は以下を参考にしてください。https://kazunaka.com/firebase-react-loginapp-1/プロジェクト...
