第3弾Webアプリケーションの公開
おはようございます😊まおです！
今週は割り勘計算のWebアプリケーションを作って公開してみました。
今回の成果
◼︎割り勘計算
https://tonamao.github.io/WarikanCalculation/
今回もドットインストール先生の題材です🙋♀️
◼︎JavaScriptで割り勘電卓を作ろう
https://dotinstall.com/lessons/go_dutch_js_v3
◼︎オリジナリティ
もはや今回は、仕様だけ確認して、あとは自分の好きなように作ってみました！ｗ
だいたいの仕様しか確認していないので、何が本家と違うかもよくわかってません。ｗ
◼︎苦労したところ
- 入力値チェック！
入力する場所があれば必ずありますよね、入力値チェック。
チェックの仕様も含めて結構考えましたね～
今回対象となってくるのは、自由に入力できる「金額」「人数」の項目です。
期待値としては「半角数字」です。
「金額」項目に「半角数字」が入っていれば、次の「人数」項目の値をチェックするという仕様にしました。
「JavaScript」「入力値チェック」なんかで調べればいろいろと出てきますが...
そこで【isNaNを使う】でハマりましたね～...ｗ
isNaN関数
- isNaN() 関数は引数が NaN （非数）かどうかを判定
この説明で飛びつくとハマってしまいますね～ｗ
ふむ。
falseのときが、入力値OKってことになるんだな～
って気がしますが、要注意！
isNaN(NaN); // true isNaN(undefined); // true
うんうん
isNaN(31); // false
うんうん
isNaN("31"); // false: "31" は 31 に変換される
ほう...Stringは勝手に数値に変換してくれるのか～
isNaN(""); // false: 空文字列は 0 に変換される
...え！？
ブランク「""」はOKにしたくないです！！！
は～～～なかなか一筋縄ではいかないなあ。。。
RegExp(正規表現)オブジェクト
結局ですが、これを使いました。
var re = new RegExp(/^[0-9]+$/); return re.test(value); //0～9のみで構成されていればtrue、そうでなければfalseを返却
この/^[0-9]+$/ってところが正規表現になります。
わたしは、正規表現を完全マスターしてはないですが、
簡単なものならなんとかなるかなって感じです(^^;)
結局は正規表現になるのか～って気もしますが。。
それにもっと良いやり方はあるかもしれません。
はたまた、そもそもJavaScriptで入力値チェックでいいのか、とかね。
まあ今回の規模のものならこの程度かなというところでこれを使いました。
余談
そもそも割り勘計算というもの自体が奥が深いアプリのようでした！ｗ
割り勘といえば...支払いの時って
性別や年齢で金額違ったりするな～とか。
そんなことを思いつき、調べてみるとやっぱり！
いくつか割り勘計算のアプリが出てきました！！
やはりそこには、
男性は女性の何割増しにするか とか
先輩は何人いるか とか
幹事さんは減らす とか
そんな仕様が実装されてました。
なるほど、たしかにね～
ちょっと考えて思いついたようなことは全部実装されていた、というわけです。笑
誰が誰の何割増し とか、幹事さんに配慮したいとか、
実際使うためのものを作ろうと思うと、
その辺の考慮がなかなか複雑な仕様になりそうですよね！
割り勘アプリ、日本人の配慮や慣習を仕様に盛り込もうとすると
なかなか複雑だな～～～
第2弾Webアプリケーションの公開
おはようございます😊
まおです！
今回もともかくアウトプットするを実践していくために、Webアプリケーションを作って公開してみました🙋♀️
今回の成果
◼︎パスワードジェネレーター
https://tonamao.github.io/test.pw-generator/
今回もドットインストール先生に教わりました🙋♀️
◼︎JavaScriptでパスワードジェネレータを作ろう
https://dotinstall.com/lessons/pwd_generator_js_v3
◼︎オリジナリティ
- 文字の最大を32文字に(なんとなくw)
- 記号の説明をつけた
今回は本当に若干のオリジナリティです笑
Symbolsのチェックを入れるときに、何の記号だ？って単純に思ったので、チェックボタンで追加される記号を表示させてみました！
ちなみに、記号の種類ももとより増やしてます。
パスワード作る時って、記号の可・不可はサイトや使う記号によるのかなと思ったので、どんな記号が付与されるのか分かるように表示しました！
◼︎苦労したところ
- 記号文字のエスケープ！！！
単純に記号の種類を増やしたせいで、これ困りましたね～...笑
今回表示したい「!"#$%&'()*+,-./:;<=>?@[]^_`{|}~」の記号は、
ソースコードとして読み込まれてしまったりしてエラーになります。
var smbl = '!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~';
JavaScriptで単純にこんな感じで書いていると、例えば
「'」の記号に対しては、「表示させたい文字列」としてではなく
「文字列を囲むためのシングルクォーテーション」として読み込まれたりします。
今回はこの辺のことを考慮して、下記のように実装。
var smbl = '!"#$%&' + "'()*+,-./:;<=>?@[\]^_`{|}~";
「&」と「'」の間で文字列を区切ってます。
「"」を含む前半の文字列は、「'」で囲い、
「'」を含む後半の文字列は、「"」で囲うようにしました。
果たしてこれが最適解なのかはわかりませんが...笑
JavaScriptは「'」も「"」も使用可能なので、
記号として「'」を使いたいときは、「"」を文字列を囲うために使い、
記号として「"」を使いたいときは、「'」を使うようにしてみました。
次は何を作ろうかな～＾＾♪
Webアプリケーションを公開してみる
おはようございます😊
まおと申します。
以後、お見知り置きを！
初投稿🔰
そして初めて、開発したものを公開してみました！
なんやかんやと...
プログラミングできるようになりたい！
もっとソースコード書きたい！
なんか作れるようになりたい！
こんな話を上司にすると、
成長するためには仕事に求めるより
自分でなんか開発したほうがいいよ
ってみんな言うんですよ。
少なくとも私は4人ほどの先輩方に言われました...(^_^;)
なるほど、と思いつつも
まあなんやかんや
何もやらないまま1〜2年すぎるわけですが...←
今回は妥協に妥協を重ね、ようやく！
「それっぽいもの」を「それっぽく公開する」
まで辿り着きました👏笑
今回のコンセプト
ともかくアウトプットしてみる
なんやかんやで2年も過ぎるんだから...笑
小さくてもアウトプットすることを意識しました。
Webアプリケーションを作る
ドットインストール先生召喚！
■JavaScriptでおみくじを作ろう
■URL
https://dotinstall.com/lessons/omikuji_js_v3
とりあえず、そのままを実装し公開しました。
※と言いつつも、日々改良中...
改良の内容については、今後の記事に載せていこうかなと思います＾＾
公開する
GitHub召喚！
「Webアプリケーション」「公開」とかで検索すると、GitHubでできるよみたいなこと出てくると思います＾＾
「GitHub」「公開」とかで検索すると、GitHubでの公開方法とか出てくると思います＾＾
うん。笑
いや、でも実際ね、こんな感じでとりあえずパクる！真似をする！から始めればいいんだと思うんです。
そうしないと、2年過ぎますからね。笑
そんなこんなで...
無事、Webアプリケーションたるものを作って公開することができました！
■おみくじ
■URL
https://tonamao.github.io/test.first-omikuji/
ごく稀に「神吉」なんてのが出るようにもしてみました笑
（手書き感...）
ちなみにPC向けで、スマホ向けじゃないです。
ボタンクリックの動きの感じだけ
スマホだと微妙です...
今後も継続的に作っては公開していきたいと思います～＾＾♪
