計算をリアルタイム。

2024.02.27

Logging

おはようございます、vue3.jsの一貫として時給計算するちょっとしたWEBサービスを作ってみました。vue.jsを触っていてわかったことはリアルタイム反映みたいなものが簡単にできるところ。これは便利ですね。JQueryから皆さんが移行する意味がいまごろ分かりました。

これからはvue.jsやReact.jsなどを使用していきたいですね。因みに自分はバニラばかりでした、バニラの良い所は慣れているせいか書きやすいところにあります。vueやReactにもバニラが入っていても問題ないので、そういう意味では今までの事が活かせるかもなって思います。

最後にサービスのリンクを貼ってこの記事は〆とします。

https://zip358.com/tool/payroll-calculation/

明日へ続く。

タグ

jquery, react, React.js, vue, vue.js, vue3.js, Webサービス, サービス, ところ, バニラ, リアルタイム反映, リンク, 一貫, 問題, 意味, 時給, 最後, 皆さん, 自分, 良い所,

React.js実践入門を購入しましたので・・・。

2023.12.06

Logging

おはようございます、先日、React.js実践入門を購入しました。少しずつ 少しずつ慣れていこうと思っています。この本は結構分厚いのですが結構、ぎっしり文字だらけという訳でもないので良さげです、読みやすい感じが気に入って購入しました。まぁ仕組みを学びつつローカルで手を動かして身につけていこうと思っています。

この本はReact,jsとフレームワークのNext.jsことも書いているので、まさに実践入門です😄。

こんな本を購入せずにドキュメントを読めばよいのですけど、それ以上の技を知りたくて購入しました。分厚いけどおそらく来週の休みの日に読了したいと思っています。フロントエンドエンジニアさんならReact,jsは登竜門かと思います、知っていて当たり前のことなんでしょうけど中々、使用する機会がないのを言い訳にしていると、自分がレガシィになってしまいそうなので。

トイウコトデ、ぼちぼちとはじめていきます。

明日へ続く。

タグ

JS, Next.jsこと, react, React.js実践入門, トイウコトデ, ドキュメント, フレームワーク, フロントエンドエンジニアさん, レガシィ, 休み, 実践入門, 感じ, 技, 文字だらけ, 本, 機会, 登竜門, 良, 言い訳, 訳, 身,

JSのPromiseとawaitってこういう事なんだよね。理解した！！( ･ิω･ิ)

2022.04.29

Logging

おはよう御座います。

この頃、JSを使う機会が増えてきています。巷ではReact.jsなどやVue.jsなんかが人気ですよね。またnext.jsなんかも出来れば転職活動に有利です。でもそんなフレームワークを勉強するまえにJavaScriptの基礎が出来ていないといけないと思っています。ネイティブでゴリゴリ書ける人であれば、何処へ行ってもやってけると思っています。

"use strict";
const main = (a,b,c)=>{
    return new Promise ((resolve)=>{
        console.log(a,b,c);
        b++;
        resolve({a:a,b:b,c:c}); 
    });
}
(async()=>{
    await main("A1",1,"C1").then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c));
    // main("A1",1,"C1").then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c));
    console.log("fin");
})();

Promiseとawaitとかの使い方はこんな感じです😀、このコードでは重たい処理を書いているわけではないけど、非同期通信処理チェーンで繋ぐとどんな所で使えば良いのか分かるかなって思います。要するに順番に非同期通信処理をしたい時に役に立ちます。このソースコードの場合、awaitしなくても良いですがね・・・。awaitを付けると処理後に次のコードが処理されます。付けない場合は同時並行的に処理されます。

サンプルコードはこちらから閲覧ください（検証）ませ！！

タグ

１, async, await, console, const, gt, javascript, JS, log, main, new, NEXT, Promise, quo, quot, react, resolve, return, strict, use, vue, なん, なんか, ネイティブ, フレームワーク, まえ, 事, 人, 人気, 何処, 勉強, 基礎, 巷, 有利, 機会, 活動, 理解, 転職, 頃,

ReactNativeのボタンがiosとAndroidでは挙動が違うので代替。

2021.11.18

Logging

今日はReactNative（リアクトネイティブ）でアプリを制作しながら勉強している中で、ボタンを使ってみたら・・・iosとAndroidでは挙動というか見栄えが違うのですよ、ドキュメントにもそう書いていた?。なので、ボタンじゃなくてこちらを使用するほうが良さげです。

Color of the text (iOS), or background color of the button (Android).

こちら【TouchableOpacity】などを使用してボタンを作成しないといけないみたい。こちらで作るとios、Android同じ見栄え（デザイン）になります。作ってて思うことは師というかメンターがいればもっと効率的に開発できそうです。

師匠がほしい今日此頃・・・。

以上、現場からでした。

import React, { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";

const App = () => {
  const [count, setCount] = useState(0);
  const onPress = () => setCount(prevCount => prevCount + 1);

  return (
    <View style={styles.container}>
      <View style={styles.countContainer}>
        <Text>Count: {count}</Text>
      </View>
      <TouchableOpacity
        style={styles.button}
        onPress={onPress}
      >
        <Text>Press Here</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 10
  },
  button: {
    alignItems: "center",
    backgroundColor: "#DDDDDD",
    padding: 10
  },
  countContainer: {
    alignItems: "center",
    padding: 10
  }
});

export default App;

タグ

Android, background, button, color, from, import, iOS, of, OR, quot, react, ReactNative, Text, The, TouchableOpacity, useState, アプリ, こちら, こと, デザイン, ドキュメント, ネイティブ, ボタン, メンター, リアクト, 中, 今日, 今日此頃, 代替, 作成, 使用, 制作, 勉強, 師, 師匠, 挙動, 現場, 見栄え, 開発,

kotlinで開発したアプリを申請しました。予約投稿なので報告が遅れています。

2021.11.10

Logging

kotlinで開発したアプリを申請しました。予約投稿なので報告が遅れています。このアプリをiosに移植しようと思ったのですが、何やら面倒くさそうなので当分、アンドロイド端末でのアプリ開発をして、その後、Swift言語で開発しようかなと思っていたのが昨日までの自分の想い。今日いろいろと調べていたら、どうもクロスプラットフォーム開発するなら、フェイスブックが開発したReact Nativedeで開発したほうが良さげだと。学習コストはそれ程高くないような気がしてます。Expoなら尚更・・・！？

何ヶ月か前にクロスプラットフォーム開発が出来るFlutterに手を出していたのだけど一つアプリをリリースしてからは勉強していませんでした。今回、久しぶりにアプリを作ろうかと考えて手を動かして、何となく自分がアプリ開発で身につきやすいのは今まで使用した言語の延長線上にあるものかなと思い始めました。なのでReact Nativeで開発していきたいなと今は思っています（浮気性・・・?）。

そして何よりReact Nativeは機械学習の要素も取り入れることが出来たり、カメラや位置情報も取れデーターベースも使えるサンプルもネットに落ちているので何とかなりそうだということ。そして求人情報などにもReactを経験した人は重宝されるみたいなので勉強して損はないかなととも思っています（React Nativeを勉強すれば自ずとReactの勉強にもなるので一石二鳥かなと個人的には思っています）。

※浮気性になった理由はkotlinでアプリ開発していて三項演算子が使えないことを知り、気持ちが萎えた事が一番の理由でkotlin開発よりReact Nativeでアプリ開発しようという気持ちなったのです?。それぐらい三項演算子が使えないのは痛い。バージョンが上がれば使えるようになるかもしれないけれども・・・。

因みに海外ではFlutterの方が人気です、日本もそうなるかは未知数です。

タグ

Expo, flutter, iOS, Kotlin, Nativede, react, swift, アプリ, アンドロイド, いろいろ, クロス, コスト, フェイスブック, プラットフォーム, もの, リリース, 一つ, 久しぶり, 予約, 今回, 今日, 何ヶ月, 使用, 前, 勉強, 報告, 学習, 尚更, 延長, 後, 手, 投稿, 昨日, 気, 申請, 移植, 端末, 線上, 自分, 言語, 開発,

アロー演算子の数珠繋ぎの作り方?

2020.03.17

Logging

コロナウィルス対策の一環として東京都が“GitHub”に開設した新型コロナウイルス対策サイトがすごいと話題になっているらしいので自分も見てみました。ソースコードはVue.js,TypeScript,React.js,PHPなどなどいろいろな言語が使用されていました。PHPはLaravelの機能が使われてたりして、書き方が綺麗で勉強になるなぁと思ったわけです。参考になりますよね、きれいな書き方のコードを見るとやはり参考になります。

もともと、書き方が古いと自分は古い書き方に合わせます。特に上がプライドが高い人だと出る杭は打たれるみたいな状態になりますので要注意ですね…。そういう人が上にいると徐々にコードを書くのが面白くなくなります。そういうのは大いにあるなと思います。名も知らないひとのコード書きが自分の上司だったらなと思うときがあります。

そう愚痴ってもしょうが無い、その環境を選んだのは自分自身な訳ですからね。
ただ技術力を伸ばしたければやはり環境は大事、辞めたいなら辞めて自分の力を表現できる環境に身をおいた方が断然良い。

前置き長くなりました、、アロー演算子を数珠繋ぎする考え方はこんな感じです。考え方を知っとくと応用が出来るようになります、やはり基準を知るが大事かなといつも思います。

追記：これを応用するとこんな感じになります。追記のソースコードを記載しました（2021.07.05）

<?php
class testA{
    public $a = "";
    public function __construct($a)
    {
        $this->a = $a;
    }
    public function test1($a=""):string{
        return (string)$this->a." ".$a."<br>\n";
    }
    public function test2($a=""):string{
        return (string)$this->a." ".$a."<br>\n";
    }
}
class test{
    public function main($a="Hello"):object
    {
        $this->a = $a;
        return new testA($this->a);
    }
}
$test = new test();
print $test->main()->test1("PHP");
print $test->main("by")->test2("C");

<?php
    class test{
        function main(){
            return new class{
                function testA(){
                    return "testA";
                }
                function testB(){
                    return "testB";
                }
            };
        }
    }
    $test = new test();
    print $test->main()->testA();
    print $test->main()->testB();

タグ

github, JS, Laravel, php, react, TypeScript, vue, アロー, いろいろ, ウィルス, きれい, コード, コロナ, コロナウイルス, サイト, しょう, ソース, とき, ひと, プライド, もともと, わけ, 一環, 上, 上司, 人, 作り方, 使用, 勉強, 参考, 名, 対策, 技術力, 数珠繋ぎ, 新型, 書き方, 杭, 東京都, 機能, 注意, 演算子, 状態, 環, 環境, 綺麗, 自分, 自身, 言語, 訳, 話題, 開設,

vue.jsとreact.jsをお触りしているのですが?。

2020.02.13

Logging

vue.jsとreact.jsをお触りしてみて、どちらが難しいかといえばreact.jsかなと思いますが、すごく難しいわけでもない。vue.jsはjqueryがサクサク使えていて概念も大体把握していて、オリジナルプラグインも作れるよという方にはそれほど難しいとは感じないと思います。vue.jsの概念さえ理解できればあとは、vue.jsの仕様やドキュメントみれば、慣れれば使いこなす事は簡単だと思います。

react.jsは、JSXの事をちゃんと理解すれば使いこなす事はまぁ可能かなと思います。いま、web業界ではreact.jsとかゴニョゴニョ使える人が重宝されるみたいですよ。というか、もうjqueryとかオワコンと都会では業界人が言ってそうですね。ただ、そんな古いコードが田舎では動いてますし田舎の零細企業では、未だにIEの事をいう人がいる。そろそろIEの呪いから解き放たれたいですね…。マイクロソフトはいまの社長さんになってかなりマイクロソフト変わったのでWEB業界では、有り難い存在だと自分は勝手に思ってます。

タグ

IE, jquery, JS, JSX, react, vue, web, あと, いま, オリジナル, オワコン, かな, コード, ゴニョゴニョ, ドキュメント, どちら, プラグイン, マイクロソフト, わけ, 事, 人, 仕様, 企業, 可能, 呪い, 大体, 把握, 方, 業界, 業界人, 概念, 理解, 田舎, 社長, 簡単, 都会, 重宝, 零細,