投稿一覧

はじめに Webpack5が 2020/10/10にリリース された。 Webpackは中規模以上のweb軽開発ではデファクトスタンダードなんじゃないだろうか。 自分が関わっているほとんどすべてのフロントエンドではWebpackが使用されている。 慣れるまでは難しいが、学んだ内容を備忘録的にこのページにまとめる。 基本概念 Webpackとは基本的にはJavaScriptアプリケーション用の静的モジュールバンドラーです。 つまり、基準となるJSファイルを指定することで、それに紐づく依存関係モジュールを1つのファイルに結合してくれます。 これを理解するために基本コンセプトは以下です。 概念 意味 entry 依存関係の起点となるファイル。デフォルトで./src/index.js output 出力パスやファイル名。 loaders JSとJSONファイルだけ理解するWebpackに、変換可能なモジュールを追加します。主にtest(対象ファイルの識別)とuse(どのローダーを使用するか)の2つのプロパティを使って設定します。 plugins requireしてpluginsに追加することで、機能を追加できます。 mode developmentやproductionまたは独自の環境の最適化に使用できます。 entry / output [https://webpack.js.org/concepts/entry-points/](Entry Points) https://webpack.js.org/concepts/output/ 最も単純な例は以下のような設定です。 module.exports = { entry: './src/file.js', output: { filename: 'bundle.js', }, }; より複雑な設定では、複数ページのアプリケーション用にマルチエントリの設定や、ouputのファイル名やパス名を動的に変更することも可能です。 Loaders https://webpack.js.org/concepts/loaders/ 例として、以下のようにローダーを追加します。 npm install --save-dev css-loader ts-loader module.exports = { module: { rules: [ { test: /\....

はじめに バイオプと通常のFXとは全く異なるため、通常TradingViewではバイオプロジックの検証ができません。 ですが、指定した期間で強制決済した結果を集計することで、バイオプとしてのロジックを検証することができます。 今回は、テンプレートを見つけましたので確認していきます。 https://jp.tradingview.com/script/pvnR5RYJ-Binary-Options-Strategy-Template/ 解説 以下は終値が単純移動平均より上ならBUY、下ならSELLという単純なロジックだけでバイオプをした場合の検証です。 これを実際のロジックに置き換えて作る必要があります。 その前提で、このスクリプトを見ていきましょう。 //@version=4 strategy("Binary Options Strategy Template", overlay=true) // In this code we track the bar where a position was opened and close the position // aftera specified number of bars. The objective of this script is testing long/short signals // for knowing the amount of times it would turn a profit or not. // User input for amount of bars till close barsTillClose = input(5, minval=2, title="Amount of Bars Till Close Position") // SIMPLE ENTRY LOGIC (insert long/short signal here) sma = sma(close, 14) strategy....

はじめに TradingViewでBinaryOption用のインジケーターを研究中です。 今回は以下のインジケーターを見てみます。 https://jp.tradingview.com/script/s48QJlfi-Vdub-Binary-Options-SniperVX-v1/ PineScript //@version=4 study("Vdub Binary Options SniperVX v1", overlay=true, shorttitle="Vdub_SniperBX_v1") // //====================channel====================== len = input(8, minval=1) src = input(close, title="Source") out = sma(src, len) last8h = highest(close, 13) lastl8 = lowest(close, 13) bearish = cross(close,out) == 1 and close[1] > close bullish = cross(close,out) == 1 and close[1] < close channel2=input(false, title="Bar Channel On/Off") ul2=plot(channel2?last8h:last8h==nz(last8h[1])?last8h:na, color=color.black, linewidth=1, style=plot.style_linebr, title="Candle body resistance level top", offset=0) ll2=plot(channel2?lastl8:lastl8==nz(lastl8[1])?lastl8:na, color=color.black, linewidth=1, style=plot....

はじめに ZigZagのインジケーターを見つけたので、自分で作れるレベルまで理解を進めたいと思います。 PineScript //@version=3 study("ZigZag!",overlay=true) use_current_res=input(true,title="Use Current Resolution?") length = input(title="Length", type=integer, defval=10) phase = input(title="Phase", type=integer, defval=50) power = input(title="Power", type=integer, defval=2) line_widht = input(title="Line Width", type=integer, defval=1) do_col = input(true,title="color up and down moves?") //UseFixed = input(title="Use Fixed Timeframes?", type=bool, defval=false) htf = input(title="Higher Timeframe", defval="005", options=["M", "W", "3D", "D", "720", "360", "240", "180", "120", "060", "030", "015", "010", "005", "003", "001"]) o = security(tickerid, htf, open) h = security(tickerid, htf, high) l = security(tickerid, htf, low) c = security(tickerid, htf, close) src = use_current_res ?...

はじめに FirebaseでTODOアプリを作成します。 TODOアプリで一通りのFirebaseの機能を使ってみたいと思います。 今回はFirebaseの中で以下のサービスを利用します。 Authentication Cloud Firestore Hosting Yarn, Vue.js、Vue CLIを使用します。 Vue CLIは以下でグローバルにインストールしておいて下さい。 yarn global add @vue/cli firebaseのCLIは以下のコマンドでグローバルにインストールします。 yarn global add firebase-tools アプリ作成 以下のコマンドでプロジェクトを作成します。 オプションはお好みで選びます。 vue create {プロジェクト名} プロジェクト作成後直後の状態で起動してみましょう！ cd {プロジェクト名} yarn serve http://localhost:8080/ にアクセスすると初期状態のVueプロジェクトが確認できます。 Vue用マテリアルデザインフレームワークとしてVuetifyを追加する。 vue add vuetify 文法チェックをEslintにするのが好みです Component name "Home" hould always be multi-wordのようなエラーが出たらvue/multi-word-component-names': 0を.eslintrc.jsのrulesに追加する。 Firebaseプロジェクトを作成する Firebase にアクセスし、ログインします。 プロジェクトを追加をクリックし、名前を設定して、プロジェクトを作成します。 今回はこのプロジェクトでGoogleアナリティクスを有効にするをオフにしました。 使用する機能を全て有効化しておきます。 Authentication Hosting Cloud Firestore Authenticationは、Googleプロバイダを有効化しておきます。 Cloud Firestoreのロケーションはお好みですが、私はasia-northeast1（東京）にしました。 参考: リージョンとゾーン Firebaseをアプリに統合する firebaseをアプリに追加 yarn add -D firebase src/firebase....

はじめに Ionicとは、ハイブリッドアプリを作成するフレームワークです。 Ionicは元々Angularというフレームワークに依存していましたが、Vue.jsが使えるようになったので、実際に試してみようと思います。 アプリを作る IonicのCLIをインストール yarn global add @ionic/cli@latest global: local内でどこからでも参照できるようにします Ionic CLIの6.17.0がインストールされました。 以下のようなコマンドがあります。 completion ...................... (experimental) Enables tab-completion for Ionic CLI commands. config <subcommand> ............. Manage CLI and project config values (subcommands: get, set, unset) deploy <subcommand> ............. (paid) Appflow Deploy functionality (subcommands: manifest) docs ............................ Open the Ionic documentation website info ............................ Print project, system, and environment information init ............................ (beta) Initialize existing projects with Ionic login ....

はじめに 簡単なUIを持ったアプリをwebページが作成したかったので、expressでサクッと作ります。 nodeはインストール済み前提です。 $ node -v v15.4.0 作り方 express-generatorを使うことで、雛形を爆速で作成できます。 1. ディレクトリ作成 $ mkdir my-site $ cd my-site 2. generatorを追加 $ yarn init $ yarn add -D express-generator $ yarn install 3. 雛形を作成 今回はあえてcurrent directoryに作成します。 $ npx express -v jade -c sass --git -f ./ npxでnpmでインストールしたモジュールを使用できます。 -v: add view support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade) -c: add stylesheet support (less|stylus|compass|sass) (defaults to plain css) --git: add .gitignore -f: force on non-empty directory 作成後は以下のような構成になっており、package....