Laravel入門書は２日で半分進む。#phpcode

2022.12.24

Logging

おはようございます、今日はクリスマス・イブですね🎄。

Laravel入門書は２日で半分進みました、この記事がUPされている頃にはLaravel入門書は読了している頃だと思います。自分が持っているLaravel入門書はLaravel5.4対応なので正直な所、最新の入門書に切り替えた方が良いかも知れませんが、金銭的に苦しいので働きだしてから購入するべきか考えたいと思います。

入門書を隅から隅まで読んでも、使い倒せるそうにないのがちょっと不満ですね。この入門書は前半分はフロントエンドの人のために書かれているような気がします。なので、バックエンドエンジニアだけを担当するという方は、後半分から読んでいっても良いじゃないかなと思います。

中小企業で開発している人はフロントだけとかバックエンドだけとか考えずに、両方のことを行えるようにしといたら良いかもです。人手不足になったらフロントも手伝ってとなることが有るからです。

そういうことなので、全部理解するに越したことはないですね_(:3」∠)_。

タグ

Laravel5.4対応, Laravel入門書, イブ, クリスマス, バックエンド, バックエンドエンジニア, フロント, フロントエンド, 両方, 中小企業, 人手不足, 入門書, 全部, 前半分, 半分, 後半分, 所, 最新, 読, 隅,

JavaScriptでWebstorage使ってますか？🤔 #webstorage #javascript #cookie

2022.12.04

Logging

おはようございます。二日酔いです、遅めの更新🍃。

今日は今までフロントエンド側で使用していたcookieの処理コードをwebstorageに置き換えた理由と使い方のコードを記載します、JSでCookieを取り出すコードを書く場合、バニラコードで書くかライブラリを使用して書くかだと思います。自分は前者で、とにかくCookieで保存したものを取り出すのに無駄にコードを書いていましたので、そろそろコードを直そうと思ってwebstorageを採用しました。

webstorageを採用した理由は自分が保管するデータはそれ程、容量を食わないしローカル保存（ブラウザ側保存）で十分な情報だったのでwebstorageを採用しました。そして何より、もう殆どのブラウザで使用できるようになっただろうという考えの元、コードを改修しました。

今まで情報の呼び出しするのに数行書いていたものが、１行のコードで参照できるというのは本当に素晴らしいことです💯。

呼び出すコードはこちら

localStorage.getItem("bgcolor_code")

値を保存するコードはこちら

localStorage.setItem("bgcolor_code",color)

その他に削除やクリアするコードやSessionで保存するコード等も存在します、もし詳しく知りたい場合は上記のTwitterのリンクを辿ると情報にたどり着くはずです。

タグ

COOKIE, javascript, JS, webstorage, エンド, コード, データ, バニラ, ブラウザ, フロント, もの, ライブラリ, ローカル, 二日酔い, 今日, 使い方, 使用, 保存, 保管, 元, 処理, 前者, 場合, 容量, 情報, 採用, 改修, 更新, 殆ど, 無駄, 理由, 自分, 記載,

htmlとcssとjavascript-初学フロント側-No.１#code

2022.11.07

Logging

おはようございます。今年もあと２ヶ月もないわけですよね早いものですね😮

htmlとcssとjavascript-初学フロント側-No.１という動画をYOUTUBEにUPしたのが昨日の９時のこと。これで理解出来るか、どうか分からない。解説もない教えもない、唯コードを書いているところを見せてるだけです。ソースコードは下記のサイトから参照できますが、次の動画作成のためにデザインや処理が変わっていたり、動作しなくなってたりするので注意が必要です。

https://358tool.com/sample-site/

自分はHtmlやcssはあまり覚えていないのですが、分かるのはそれなりに基本ベースがあるからだと思ってます。今からHtmlやcssを学ぶ人は全部を覚えようとはせずに、手を動かしてコードを書くことから始めて下さい。そのうち基本ベースは身につくことになると思います。

因みに自分が書いているclassの名前付けなどの書き方は駄目な書き方ですので、そういう所、お仕事として書く場合は会社によってキマりなんかが有りますので、そういう事まで知りたい人はこちらの動画を参照ください。

https://www.youtube.com/watch?v=pDhmhB1qI-0

タグ

１, 2, 358, ９, cl, Code, com, css, html, https, javascript, no, sample-site, tool, UP, youtube, うち, コード, こと, これ, サイト, ソース, それなり, ため, デザイン, ところ, フロント, ベース, もの, 下記, 人, 今, 今年, 作成, 全部, 処理, 初学, 動作, 動画, 参照, 基本, 必要, 手, 昨日, 次, 注意, 理解, 自分, 解説, 身,

デモ５５ajax=jqueryを使わずに非同期通信するのが普通に。

2022.05.03

Logging

おはようございます。

祝日が始まりましたね、お休みの方も多いかと思います。

そんな中、連休からプログラミングの勉強を始めようと考えている方もいるかと思いましたので、フロントエンドエンジニアがバックエンドエンジニアとの連携で一番初めにぶち当たる壁である、非同期通信のコードを書きました。コードをコピペして階層など合わしてご自身の実行環境で実行してみてください。この頃ではフロントエンドエンジニアの方は非同期処理でコードを書いているので、非同期という言葉を聞くことも多くなったと思います。

非同期処理は処理の結果を待たずして次の処理を実行することです、非同期通信も同じです。バックエンド側に処理を問い合わせて処理の結果は待たずして行います。結果も順番に帰ってくる訳では無いのでフロント側で処理するときに注意も必要になります。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="api">非同期通信</button>
    <script>
        document.getElementById("api").addEventListener("click", api);

        function api() {
            let data = [];
            data.push({"name":"樹龍"});
            console.log(param(data));
            fetch("./api.php", {
                method: "POST",
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body:param(data)
            }).then(
                response => response.json()
            ).then(data => {
                console.log('data', data);
            }).catch(error => {
                console.log('error', error);
            });
        }
        function param(data){
            let str = [];
            for(key in data){
                for(keyname in data[key]){
                    str.push(keyname +"="+ encodeURIComponent(data[key][keyname]));
                }
            }
            return str.join("&");
        }
    </script>
</body>

</html>
<?php
$name = htmlspecialchars(strip_tags($_POST['name']));
$response['res'] = $name;
print json_encode($response);

タグ

55, ajax, DOCTYPE, gt, html, jquery, lang, lt, quot, エンジニア, エンド, お休み, コード, こと, コピペ, ご自身, デモ, とき, バック, プログラミング, フロント, 中, 処理, 勉強, 同期, 壁, 実行, 必要, 方, 普通, 次, 注意, 環境, 祝日, 結果, 言葉, 訳, 通信, 連休, 連携, 階層, 頃, 順番,

セレクトメニューの都道府県は毎回、作るよりストックしておくべし。

2021.12.13

Logging

駆け出しフロントエンドエンジニアさんや駆け出しコーダーさんの中にはお問い合わせなどで、都道府県を毎回、書いている人はいると思いますが、大体、同じことを何回もするのは無駄です。なので、自分専用の雛形を作っておくといいですよ。そうする事によって作業は結構、短縮されたりします。今回は自分がよく使う、セレクトメニューの都道府県をJSで都道府県リストを生成するように作りました。

都道府県生成

繰り返しになりますが、こんな感じに自分が使用するデータや独自の関数はストックしておくと作業効率は上がります、毎回調べてプログラミングやコードを書くのは仕事上では手間になるので辞めた方が良いです。

最後にJSコードとGitHubのリンクを貼っときますので、ご自由使用くださいませ。

https://github.com/zip358/select_jp_ken

let useKendata = [
    {'no':'01','name':'北海道'},
    {'no':'02','name':'青森県'},
    {'no':'03','name':'岩手県'},
    {'no':'04','name':'宮城県'},
    {'no':'05','name':'秋田県'},
    {'no':'06','name':'山形県'},
    {'no':'07','name':'福島県'},
    {'no':'08','name':'茨城県'},
    {'no':'09','name':'栃木県'},
    {'no':'10','name':'群馬県'},
    {'no':'11','name':'埼玉県'},
    {'no':'12','name':'千葉県'},
    {'no':'13','name':'東京都'},
    {'no':'14','name':'神奈川県'},
    {'no':'15','name':'新潟県'},
    {'no':'16','name':'富山県'},
    {'no':'17','name':'石川県'},
    {'no':'18','name':'福井県'},
    {'no':'19','name':'山梨県'},
    {'no':'20','name':'長野県'},
    {'no':'21','name':'岐阜県'},
    {'no':'22','name':'静岡県'},
    {'no':'23','name':'愛知県'},
    {'no':'24','name':'三重県'},
    {'no':'25','name':'滋賀県'},
    {'no':'26','name':'京都府'},
    {'no':'27','name':'大阪府'},
    {'no':'28','name':'兵庫県'},
    {'no':'29','name':'奈良県'},
    {'no':'30','name':'和歌山県'},
    {'no':'31','name':'鳥取県'},
    {'no':'32','name':'島根県'},
    {'no':'33','name':'岡山県'},
    {'no':'34','name':'広島県'},
    {'no':'35','name':'山口県'},
    {'no':'36','name':'徳島県'},
    {'no':'37','name':'香川県'},
    {'no':'38','name':'愛媛県'},
    {'no':'39','name':'高知県'},
    {'no':'40','name':'福岡県'},
    {'no':'41','name':'佐賀県'},
    {'no':'42','name':'長崎県'},
    {'no':'43','name':'熊本県'},
    {'no':'44','name':'大分県'},
    {'no':'45','name':'宮崎県'},
    {'no':'46','name':'鹿児島県'},
    {'no':'47','name':'沖縄県'},
];
document.getElementById("ken").insertAdjacentHTML('afterbegin',(function(ken){
    let str = '';
    for (const key in ken) {
        str+= '<option value=' + ken[key].no + '>' + ken[key].name +'</option>';
    }
    return str;
}(useKendata)));

タグ

01, 39, github, JS, let, name, no, useKendata, エンジニア, エンド, お問い合わせ, コーダー, コード, こと, ご自由, ストック, セレクト, データ, プログラミング, フロント, メニュー, リスト, リンク, 中, 事, 人, 今回, 仕事, 何回, 作業, 使用, 効率, 北海, 大体, 専用, 感じ, 手間, 方, 最後, 毎回, 無駄, 生成, 短縮, 自分, 都道府県, 関数, 雛形, 駆け出し,

T2のお問い合わせフォームフロント側が緩く完成、続きは今の所なしかな。

2021.10.26

Logging

朝起きは三文の徳ですが・・・。本当なのでしょうか、朝方からお問い合わせフォームのちょこちょこと残りを制作しておりました。

T2のお問い合わせフォームフロント側が緩く完成しました、パチパチ?。この雛形を元に制作してくださいと業者へ持っていくと値引きはしてくれるとは思います。即興ですが一応、汎用性がある作りにしています。

code{0} お問い合わせフォーム編-part1

フロント側は実はあまり得意ではないです、全然わからない訳ではないのですがこの頃、コードを書かなかったら抜け落ちている部分が結構あり反省しております?

code{0} お問い合わせフォーム編-part2

ソースコードはgithubに置いてありますのでご自由にご使用くださいませ。あまり労力とかかけていないのですが、pushしてもgithubのページに反映されないという事象が何度もありまして反映待ちで結構な時間を取られました。

https://github.com/zip358/T2_pg/tree/main/inquiry

タグ

2, am-BShXaVuI, com, github, https, push, watch, www, youtube, お問い合わせ, コード, ソース, フォーム, フロント, ページ, 三, 事象, 今, 何度, 作り, 使用, 元, 制作, 労力, 即興, 反映, 反省, 完成, 得意, 徳, 所, 時間, 朝方, 朝起き, 本当, 業者, 汎用性, 結構, 訳, 部分, 雛形, 頃,

しまぶーのIT大学は駆け出しIT屋さんには勉強になると思います。

2021.07.28

Logging

来月から派遣で働くかもしれません、どうなるのかは今の段階ではわからないですが来週にはその事が分かるかと思います。さて、しまぶーのIT大学はタイトルに書いた通り、駆け出しのIT屋さん、特にフロントエンドさんやコーダーさんなどには為になる話になっていると思います。

Chrome DevToolsの使い方を徹底解説！Chrome Developer Toolsを使いこなすと開発効率が上がる！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】

特に女性の方に受けそうな爽やか系イケメンなので良いかと・・・(*´ω｀*)。YOUTUBE登録者数はあともう少しで10万登録になるので分かりやすい解説だなと思った方は下記よりYOUTUBE登録をポッチりとしてみてください。尚、自分は紹介しても一銭もお金が発生することはありません?

https://www.youtube.com/channel/UCti6dG0zSAetLGGYcgNML4Q

タグ

10, IT, youtube, イケメン, エンド, お金, コーダー, こと, しま, タイトル, ぶー, フロント, ポッチ, 一銭, 万, 下記, 事, 今, 勉強, 大学, 女性, 屋, 方, 来月, 来週, 段階, 派遣, 為, 爽やか, 発生, 登録, 登録者, 紹介, 自分, 解説, 話, 通り, 駆け出し,

とにかくプロなフロントエンドエンジニア。

2020.11.16

Logging

下記の動画を見て頂ければ分かると思うのですが、フレームワークなどを使わずにベタでこれを作っているというのは、フロントエンドエンジニアとしてはプロ領域だと感じます。出来る人の違いはCSSをゴニョゴニョ使えるかにあるだろうなと、ここまでゴニョゴニョ使えたらフレームワークなんていらないよな。ちゃんとレスポンシブにもなっていて、感心してしまいます。ここまで出来ないとプロのフロントエンドエンジニアとは言えないのかは、わからないけど。でも見ていて爽快感がありますよね。

Responsive Login & Registration Form Using HTML & CSS & JS | Sliding Sign In & Sign Up Form

自分もゴニョゴニョとフロントエンドエンジニアの領域も侵食していかなければ、いけないなと何事も手を動かさないと覚えない。この頃のWEBは動的なデザインをCSSやJSを駆使して作られているので、そこんトコロを自分も勉強していけたらなと思います。バックエンドもフロントエンドも両方極めたいなと思えた動画だった。未だにWEBは奥が深いなと思うし、ソフトもアプリもそうなんだけどいろいろと頑張らないと思えてならない。

タグ

css, JS, web, アプリ, いろいろ, エンジニア, エンド, ここ, ゴニョゴニョ, これ, そこ, ソフト, デザイン, トコロ, バック, フレームワーク, プロ, フロント, ベタ, 下記, 両方, 人, 何事, 侵食, 勉強, 動画, 奥, 感心, 手, 爽快感, 自分, 違い, 頃, 領域, 駆使,

プログラム講師YOUTUBER、たにぐち まことさん。

2020.04.25

Logging

たにぐち まことさんという方がYOUTUBEでフロントエンドエンジニアやバックエンドエンジニアに対して有益な情報を公開しています。wordpressやvue.jsなどをわかりやすく解説しています。近々、kintoneの高知県講演（ライブ放送）で登壇される予定です。これからWEBのプログラマーやコーダーになりたい人は視聴して損はないと思います。自分が昔、HTMLなどを学んだときにはあまり本も買わずソースコード（HTMLコード）から勉強をしていましたが、いまはYOUTUBEという便利なツールがあるので、教育系YOUTUBERの動画を見て学習し手を動かして実践することにより短時間で学習することが出来ると思います。

Vue.js入門 #01： 一番最初のプログラム

自分がいまプログラミング初心者だったら、下記のようなプログラミング学習方法を取ると思います。YOUTUBEで教育系動画を視聴して動画で説明された物と同じ物を作成します。作成途中に分からない事があればググります、そして再度動画を観る。進まない時はSNSで質問をするなどを行いながら徐々に知識を身に着けていきます。知識がつくと基本を知ることが出来るので、次に違うプログラミング言語を学ぶ時の応用が付きます。尚、違う言語を学ぶときは以前まで使用していたプログラミング言語をいま勉強している言語で同じことを試してみるという事を行います。そうすることで比較的短時間で違う言語の勉強がスムーズになります。

理屈っぽい HTML5入門 #01：タグと HTML5と XHTMLの名残

最後にYOUTUBEチャンネル登録はこちら
たにぐち まことのともすたチャンネル
https://www.youtube.com/channel/UCphTq6mefx_15CjD35qgXgA

タグ

html, JS, kintone, vue, web, WordPress, youtube, YOUTUBER, いま, エンジニア, エンド, コーダー, コード, こと, これ, ソース, たにぐち, ツール, とき, バック, プログラマー, プログラミング, プログラム, フロント, まこと, ライブ, 下記, 予定, 事, 人, 作成, 便利, 公開, 初心者, 勉強, 動画, 学習, 実践, 情報, 手, 損, 放送, 教育, 方, 方法, 昔, 有益, 本, 物, 登壇, 短時間, 自分, 視聴, 解説, 説明, 講師, 講演, 途中, 高知県,

この頃、パソコンの処理能力が落ちてきている。

2015.07.12

Logging


この頃、パソコンの処理能力が落ちてきている。いま、メインで使っているパソコンは７年ぐらい前のパソコンです、自作なので騙し騙しつかっているのだけど、そろそろ処理落ちが目立ってきている。友人はこの夏、パソコンを購入するらしいが自分はそんな余裕が無いので当分、今のままで使おうと思っています。SSDを500GにCドライブを変えるとなんとか、今年は替えず（PC）に済むだろうと思っています。ちなみにSSDは容量を全域つかってしまうと処理落ち凄いらしいとパソコンショップの店員さんに聞いたことがある。この夏、Windows10がマイクロソフトから提供されますが、自分は今のところWindows7で現状維持です。
お金を持っている人は持っているだけど自分は預金も無いに等しい、それは仕事を転々としていたから次の仕事が決まるまでは今まで貯めていた貯金でやりくりして乗り切っていたわけで歳相応の預金というものは無い。たぶん今の歳なら三桁ぐらいの預金がある人が多い中で自分は全然持っていない人にあたる。仕事を転々するとやはり給料も上がらないとまぁ悪循環な感じです。それは言い訳で実は結構出費が多い自分、19歳ぐらいから働いていたわけですけど、親にお金を渡してあとは全額、使っていたという・・そんな生活をしていました( ﾟдﾟ )。ほんと、ここ二、三年まで、そんな生活でしたのでお金なんて持ってません。今も無いに等しい預金だけです。お金を貯めるという考え方はあるものの。お金を貯めたいだけどやはりいろいろとお金って必要です。市からは一年間のお給料に対してお金を払えてと言いますし・・・。年金のために毎月、お金を払えといいます。25年間、お金を納めないと年金もらえないってどういう事なのか未だに分からないのです。そんなコンナで車のフロントガラス（2本線シャーって）に今回、何だかわからないけど傷ついていたりして。またもや出費とかで最悪です。保険おりそうにないなという事で・・いったい幾らかかるのだろうか・・(;´д｀)ﾄﾎﾎ…。

タグ

2本線シャー, SSD, Windows10, お給料, お金, ところWindows7, パソコン, パソコンショップ, フロント, フロントガラス, マイクロソフト, 全域, 処理能力, 処理落ち, 出費, 年金, 店員, 歳相応, 等しい預金, 言い訳, 転々, 預金,