ウェブカツ学習メモ gulpでv3からv4へ書き換えをやってみました

こんにちは。製造業の会社でWEBディレクターをしています。
ウェブカツを始めて1年が経ちました。他の生徒と比べれば、
かなり遅い進捗だとは思います。
勉強時間は合計で372.5h、日数は206日です。

今やっと….
javascript・jQuery部 上級
きました。javascript・jQuery部 上級。
正直今までのレッスンは十分に理解していないですし、
ポートフォリオもまだまだこれからです。
でもここまできました。

Lesson09「bacbone.jsの基本の機能と書き方〜ViewとModelの連携前編〜」
はまりました。さすが上級、いや上級じゃなくても
ずっとはまりっぱなしでしたけれどね。

レッスン動画を見て、コードを写しgulpを使う段階になりました。
javascript・jQuery部 中級でやったこともかなり忘れていて、
npm?、gulp?何が違うんだっけ?というレベルですが、
とりあえずpackage.jsonをディレクトリにコピーしてきて、
ターミナルを起動して、
npm install
うんうん、インストールできた。package.json便利です。そして、
gulp
これで環境構築完了〜となる予定だったのですが
ReferenceError: primordials is not defined

いやいや、レッスンで提供しているpackage.jsonと
gulpfile.jsなんだから、間違ってないでしょ。おかしいでしょ。
レッスンの質問欄を見た所、同じエラーが出ている方がいました。
先輩ありがとう。これで解決。

しかし、そうはいきませんでした。
質問に対する答えは、エラーの原因をおおまかに説明しつつ、
「上級まで来たのですから、自分で解決する努力をしましょう」
本当すみません。いつも楽をして解決しようとしていた自分が恥ずかしいです。
このあたりが他のプログラミングスクールと違うところだと思います。
解決方法を教えるのはきっと簡単だと思いますが、現場ではなんでも質問できるわけではありませんよね。エンジニアに限ったことではないですが、
ググれば分かることを人に聞いていたら「使えない」認定されます。

エラーの原因ですが、node.jsとgulpのバージョンの組み合わせがよくないということのようでした。解決の方針は2つです。

  1. gulpのバージョンを上げる
  2. node.jsのバージョンを下げる

1は最新のバージョンを使うやり方ですが、gulpfile.jsの書き換えが発生します。
大変な道ではあるのですが、こちらをチャレンジしてみることにしました。

「gulp4 gulp3 書き換え」などで検索をしました。
いろいろな記事がヒットして、それを参考に少しずつコードを修正していきます。
個人的には公式のドキュメント、以下URLあたりがお気に入りです。
https://gulpjs.com/docs/en/api/task
https://gulpjs.com/docs/en/api/watch
https://gulpjs.com/docs/en/api/dest
英語で分かりにくい部分が多いですが、なんといっても公式。
サンプルのコードは絶対に間違っていないという安心感があります。
個人の方の記事は日本語ですが、その方の環境、
その方のgulpfile.jsです。どの部分を参考にしたらよいのか、
公式の書き方と差異があるけれど間違いではないのか。そのあたりに不安を感じました。
間違える要素が少しでもあるものを参照するのは怖いです。

いくつもエラーが出て、エラーが出るたびに検索、修正を繰り返しました。
そして最後に残ったのが、
Received a non-Vinyl object in dest()
destにVinylじゃない形式のオブジェクトで受け取ったよ
という感じでしょうか…

これがなかなか解決しませんでした。
エラーメッセージで検索しても日本語の記事がなく、
英語のQ&Aのようなサイトだけです。
「Vinyl」「dest」このあたりのキーワードでも検索しました。
でも結局分からず。検索結果が、前に訪問したページばかりになってきました。
このあたりでだいたい4時間。Macたたきたくなります。

いったん休んで次の日、ふと想定する原因が間違っているのではと思いました。
今まではgulpのバージョンが上がる、だからgulpfile.jsの更新が必要。
という視野でしか調べていませんでした。なので、見ていたのは完成したサンプルコードがあるページばかりです。

一度訪問した以下URLのページで、気になる記述がありました。
https://github.com/gulpjs/vinyl-fs/issues/288
「vinyl-fs 3 is a major, breaking version.Plugins will need to be updated to use a version of Vinyl that supports isVinyl()」
今回のエラーと直接関係はないのですが、
「プラグインはisVinyl()をサポートしているバージョンにアップデートする必要があるよ」という感じでしょうか。
この一文を見て、
“vinyl-source-stream”: “^1.1.0”
これアップデートしてみるかと思いつきました。
最新バージョンの2.0.0にしたところ、無事bundle.jsに値が入りました。

長かった…途中諦めて質問欄に投稿しようかと思いましたが、なんとか自力で解決できました。エラー解消まではつらかったですが、明確な正解のないところからエラーを解消できたことは大きな自信になりました。
それから解決までに調べたページから
・npmってなに
・gulpってなに
・package.jsonってなに
・gulpfile.jsってなに
のような基本的なことが感覚的に理解できました。
もちろんレッスンでは聞いているのですが、やはり手を動かさないと
身になっていない表面的な知識なんですよね。

最後に修正したコードを載せておきます。今同じレッスンをやっているという方は、
見ない方がよいかもれしれないです。





























//gulpfile.js v4書き換え後
   //plug-in
   var { watch, task, src, dest, series } = require('gulp');
   var gulp = require('gulp');
   var browserify = require('browserify');
   var browserSync = require('browser-sync').create();
   var source = require('vinyl-source-stream');
// gulpタスクの作成
   task('build', function(){
     browserify({
       entries: ['src/app.js'] // ビルド元のファイルを指定
     }).bundle()
       .pipe(source('bundle.js')) // 出力ファイル名を指定
       .pipe(dest('dist/')); // 出力ディレクトリを指定
   });
task('browser-sync', function() {
     browserSync.init({
       server: {
         baseDir: "./", // 対象ディレクトリ
         index: "index.html" //indexファイル名
       }
     });
   });
task('bs-reload', function () {
     browserSync.reload();
   });
// Gulpを使ったファイルの監視
   task('default', series('build', 'browser-sync'), function(){
     watch('./src/.js', task('build'));     watch("./.html", task('bs-reload'));
     watch("./dist/*.+(js|css)", task('bs-reload'));
   });

長文読んでいただいてありがとうございました。

WEBディレクターをやっていて、ウェブカツやっててよかったこと その3

こんにちは。製造業の会社でWEBディレクターをしています。
1年以上かけて担当してきたサービスがいよいよ終盤に差し掛かっています。
システムインテグレーターに発注して、検証もいよいよ終盤。来月にはサービスの公開が控えています。

プログラミングとは関係なく、「エンジニアも金のことを気にしてよ」という記事です。
ウェブカツで「技術力だけあってもだめ」というのをよく見るので、書きました。

つい最近SEの方からこんなやりとりをしました。
SE: そういえば、「検収」って9月でしたよね〜
私 : すみません、こちらは10月と思っていましたが…
SE: そうだったんですか、あとで営業からも連絡しますね。

検収とは、WEBサービスが完成して、発注側がOK出すことですね。
作り手が完成と思っていても、発注側が認めないと検収があげられません。
そして、発注側がお金を支払うのは検収をあげた月を基準に決まります。
たとえば、9月検収、10月支払いという感じです。

私は相当焦りました。1年以上かけて進めてきたので、安い金額ではありません。
社内で案件の管理を行っており、検収時期を早めるということは少し面倒です。
それに9月も下旬に差し掛かっています。すぐに部長に相談しました。
案の定部長も渋い顔です。今までのやりとり、状況をもう少し確認することにしました。

そして営業の方に確認すると、
私: 検収時期、9月という認識でしょうか?
営業: それなんですが、すみません。弊社の事情で検収だけ9月にあげさせて
いただけないでしょうか。支払いは11月でかまいませんので。
私: そうだったんですか。それでしたら、社内でも対応できると思います。
(それ、早く言ってよ〜)

ウェブカツでの「技術力だけあってもだめ」というのを感じました。
金に関することなので、もっと丁寧に伝えてくれたら良いのになと感じました。
始めから営業の方の伝え方であれば、部長に相談する必要もありません。

この辺りの経理的な仕事は、決して難しくはないですが絶対にミスできません。
支払い時期の認識が違って放置したら、最悪支払い遅れになります。
個人的には大きな負担になっているので、なんとかスムーズに進めたいです。

最後まで読んでいただいてありがとうございました。

ウェブカツ学習メモ FLOCSSでSASSを整理して学んだこと

こんにちは。
ウェブカツで学びながら、WEBディレクターをしています。

ここのところ、以下レッスンの宿題にかかりきりであまり先に進めませんでした。
Lesson13|CSS設計〜ディレクトリルールまで決めたFLOCSS〜
宿題は、SASSのファイルをFLOCSSの規約に基づいて書き直すというものです。
今日ようやく形になったので、ブログを書きます。

<1>成果物はこちら
・実際のみため
https://htmlcssjavascript0716.com/01_flocss_exmple/

・SCSSの構成などを見るためのGitHub
https://github.com/khosokawa0716/flocss-example

<2>かかった時間
12時間

<3>学んだこと
・CSSを書き直すには、HTMLファイルのクラスとの紐付けを調査する必要がある
・CSSの正解は分かりづらい。HTMLのクラスと紐付けがなくても、
文法として正しければ成立してしまう。
・SASSでネストするときに、異なる階層に同じクラス名を使わない。
・分割したscssを統合するapp.scssの記述は、上から読み込まれる。
_var.scssを下に記述にするとコンパイルできない。
・jsのプレフィックスは必ず付けておく。
・style.scssからapp.scsslに変更する場合は、package.jsonのscriptの記述も修正する。
・GitHubへのアップロード方法

<4>感じたこと
12時間。まさか宿題に着手する前にこれだけの時間をかけるとは思いませんでした。
始める前は、1時間もかからないだろうとタカをくくっていました。
だってHTMLとCSSですよ。いくらウェブカツの上級コースと言ったって、
一応業務でHTMLとCSSは触っていますからね。
しかもたった1ページでしょ。それに1からコード書くわけではなくて、すでに出来ているのを
直すだけでしょう。完全になめてました。

ファイルを分けるところまでは良かったです。
ブログに記載がある通りに、ファイルを分割していきました。

つまづいたのは、containerの扱いです。まずクラスのままにしておくのか、
Idに変更するのか。まぁ大した問題ではないですよね。どちらからに決めればいいだけです。
ところがもとのコードを見ていると、、、、、
Container-titleが2つあります。containerの直下とcontainer-ornamentの中にも
Container-titleがあります。

この紐付けを確認するのに、かなり時間を使いました。
クラス名なんて、エディタで一括置換すればいいでしょと思っていましたが、
そういうわけにはいきません。スタイルがあたっているところを確認しながら、
一つずつ変更をしました。
それでもいったんコンパイルしてブラウザで確認すると、間違っているところがありました。
SASSの入れ子の構造はとても便利ですが、気をつけないと大きな不具合になりそうです。

個人的な好みですが、id(#{)はcssに使わない方がよいと思いました。
id=contactのところにcssが書かれていなかったので、うっかり消してしまいそうになりました。
Htmlのリンクとして使われていたんでした。

アウトプットが足りなくて、いろいろ調べながら修正したため時間がかかりました。
でもいいんです。こうやって宿題を与えられてアウトプットできたんですから。
GitHubにコードをあげたのも初めてです。

レッスンは進んでいないですが、たくさんの収穫がありました!

最後まで読んでいただいてありがとうございました。
GitHubのコードも読んで、コメントいただけるとうれしいです。↓もう一度PR
https://github.com/khosokawa0716/flocss-example

WEBディレクターをやっていて、ウェブカツやっててよかったこと その2

こんにちは。製造業の会社でWEBディレクターをしています。
1年以上かけて担当してきたサービスがいよいよ終盤に差し掛かっています。

システムインテグレーターに発注して、製造に半年かかったものを
社内メンバーで検証を行っています。
検証もいよいよ終盤。来月にはサービスの公開が控えています。

今までは、自分が指示したロジックのとおりにできているか、
自分の指示に漏れがないか、WEBサービスとして期待通りの動きをするか、
DBの値は間違っていないかなどを検証してきました。

大きな不具合もようやく潰せてきた今、ちょっとデザイン整えようかなと。

そもそも予算の関係でデザインは外注できず、WEBデザインを学んだことも
ない状態で自分がやることになりました。
AdobeXDとか使えたらかっこいいですが、Excelのオートシェイプで
ぺたぺた画面デザイン作っていました。

そんなインプットなので、ボタン1つとっても色がばらばらでした。
インプットがいい加減なのは仕方ないけれど、似た機能のボタンは
色を揃えてくれればいいのにな….

そういえば今朝勉強した ウェブカツの
「Lesson13|CSS設計〜ディレクトリルールまで決めたFLOCSS〜」
プロのエンジニアが書いたCSSなら分かりやすいに違いない。
どれ、ちょっと開発ツールで見てみよう!

……
……
……

なんじゃこりゃ〜〜
Bootstrap使っているけれど、CSSめちゃくちゃだ。
1つのボタンにborder-radiusが3箇所くらいついている!
htmlファイルのdivタグの中にstyle書いてあるで…..

ボタンの共通のデザインとして、border-radius:3px;をお願いしようと
していますがやめました。

おそらくプログラムの修正箇所は1箇所ではないでしょう。
こちらで検証するときに全画面のボタンを全部見なければいけないです。

最低限の修正をお願いするにとどめました。

知識がついて怖いこともありますね。読んでいただいてありがとうございました。

WEBディレクターをやっていて、ウェブカツやっててよかったこと その1

こんにちは。メーカーでWEBディレクターをやっています。
プログラムは1行も書かないのですが、社内SEの方や発注先のSEの方と
よくお話します。
ウェブカツをやっていて、よかったなと思ったことがあったので
ブログに残しておこうと思います。

この間javascript・jQuery部 中級でJSONを学びました。
写経しただけなので、まだまだ自分のものにはなっていません。
でも以下のような概念は記憶に残っていました。
・javascriptはブラウザ上の制御だけでなくサーバーとのやりとりもおこなう
・JSONは画面すべてを読み込むことなく、一部だけを更新できる

SEの方との会話
私:WEBサービスAの利用環境について確認させてください。
 javascriptは使っていますか?(ブラウザ上の設定でOFFにしても使えるのかどうか)
SE:使ってますね。
私:以前、計算はサーバー側で処理されるとお聞きしたので、Javaで
 書かれていると思ったのですが。
SE:確かに計算の処理は、サーバーで行われるんですが
 ボタンを押したらJSONで値を渡しているので、受け渡しには
 javascript使っているんですよ。

SEの方なら普通の会話だと思うのですが、つい最近JSONを学んだ
私としてはなんとなく意味が理解できるだけでとてもうれしかったです。

会社での役割を考えれば、そこまでの知識は必要ないのですが、
自分の担当しているサービスがどんな風に作られているのか分かると楽しいです。

ウェブカツ学習メモ Chromeのリロードが終わらない

【不具合現象】
最近順調にレッスンを進めていたのですが、このところ急にphpで作成したファイルが
正常に動かなくなりました。具体的には、以下のような現象です。
・MAMPをインストールして、ローカル環境下でphpファイルを表示させている
・リロードが終わらなくなるのは、DB接続時
・DBに接続しにいかない、たとえばオブジェクト指向部のサンプルコードは
問題なく動作する

【原因と対策】
Google Chromeの予測サービスが原因でした。これを停止させることで、
正常に動作します。以下の記事に手順が記載されています。
https://fukafuka295.jp/googlechrome_yomikomi/
試してみた② Chromeの予測サービスを停止させる

【解決までのプロセス】
この現象から以下の原因を推定しました。
・プログラムは今までと変えていない、かつエラーログも吐かれていないから
問題なし
・PCの環境、特にMAMPがあやしい

そして、「MAMP リロード 終わらない」などのキーワードで調べたり、
ウェブカツの今までの質問で同様の不具合がないか見ていきました。
しかし、解決せず・・・

php.iniの設定を変更するなどの記事が出て、その通りにしてみましたが無駄でした。
考えてみたら、今までそれで動いていましたものね。

みなさんお分かりになると思いますが、phpファイル動かないと学習進められないです。
しかも何のエラーもなし。
段々と原因調査もおっくうになってきていました。何日も進展なし。

数日休みました。気を取り直して2019/8/18。前日よく寝て、もう一回調査開始です。
とりあえずウェブカツのマイページにアクセスすると、あれ、リロード終わらない。
・・
・・
・・
今までローカル環境だけに発生する不具合が、実際のWEBページでも再現しています。
そうか、MAMPのせいじゃないかもしれない。
Safariでマイページにアクセスすると、正常に動作しています。
これは・・・Chromeのせいなのでは??
「Chrome リロード 終わらない」で検索したところ、上記記事がヒットしました。

対策の二つ目を実行したところ無事に動くようになりました。
プログラミング学習されている方が、こんなところで時間を費やさないように
祈っております。

【環境】

Google Chrome is up to dateVersion 76.0.3809.100 (Official Build) (64-bit)

MacBook Pro (15-inch, 2018)
2.9 GHz Intel Core i9
32 GB 2400 MHz DDR4

ウェブカツ学習メモ Lesson14「プロフィール編集機能を作ろう!」

ソースコードで実際に動くまで約10時間・・・
原因を調べて修正するのは大変でしたが、自分に力が付いてきているなと実感できました。
特に2番目の不具合を発見するのには苦労しましたが、修正後動くようになった時は狂喜しました。一人絶叫したくなりました。

1.年齢の半角数字のエラーメッセージ
対象
webservice_practice05
function.php

事象
年齢を未入力で送信すると、「MSG11:郵便番号の形式が違います」が
表示されました。

原因
Function validNumberを確認したところ、
MSG11が$err_msgに格納されています。

修正前のコード
define(‘MSG11’, ‘郵便番号の形式が違います’);
function validNumber($str, $key){
if(!preg_match(“/^[0-9]+$/”, $str)){
global $err_msg;
$err_msg[$key] = MSG11;
}

修正内容
・新しい定数MSG12を定義
・MSG11からMSG12へ変更

修正後のコード
define(‘MSG12′,’半角の数字のみご利用いただけます’);
function validNumber($str, $key){
if(!preg_match(“/^[0-9]+$/”, $str)){
global $err_msg;
$err_msg[$key] = MSG12;
}

2.不要なはずのバリデーションチェックが走ってしまう
対象
webservice_practice05
profEdit.php

事象
ファイルのコメントに「//DBの情報と入力情報が異なる場合にバリデーションを行う」と
あるにも関わらず、未入力のすべての項目に対してバリデーションチェックが走ってしまう

原因
DBにはNullが格納されている。一方で比較する変数は空文字のため、
型までの厳密な比較をおこなうと「更新された」と判定されてしまう
gettypeでDB値および変数の型を出力させると確認できる

修正前のコード
if($dbFormData[‘username’] !== $username){
validMaxLen($username, ‘username’);}

修正内容
・DB値がnullかつ入力値が空文字の場合には、バリデーションチェックが
走らないようにif文を変更
・上記のケースに該当したことが見えるように、関数debugでログを出力する
・記載しているコードは、usernameですが、tel,zip,addr,ageについても同様です。

修正後のコード
//username,tel,zip
if(empty($dbFormData[‘username’]) && $username===””){
debug(‘usernameはDB値が(nullや0)かつ入力値が空文字のためバリデーション不要’);
}elseif($dbFormData[‘username’] !== $username){
validMaxLen($username, ‘username’);}

まだ完全でないと思われるところ
Emptyは0や0.0を許容してしまうため、意図せずにバリデーションを回避してしまうかもしれない

3.更新した内容がDBに反映されない
対象
webservice_practice05
profEdit.php

事象
php.logには「クエリ成功」と出力されているにも関わらず、
更新内容がDBに反映されない

原因
DB、ageの型はint型のため、空文字を書きもうとすると反映できない
以下のようなSQL文をphpMyAdminから流すことで上記の理由が確認できる
UPDATE users SET username = ‘例’, tel = ”, zip = 0, addr = ”, age = ”, email = ‘XXXX@gmail.com’ WHERE id = X

修正前のコード
$age = $_POST[‘age’];

修正内容
zipと同じように空で送信されきてきた場合には0を入れる

修正後のコード
$age = (!empty($_POST[‘age’])) ? $_POST[‘age’] : 0;

まだ完全でないと思われるところ
DBに反映できない場合には、エラーにならないといけない

4.ageを未入力で登録したにも関わらず0が表示される
対象
webservice_practice05
profEdit.php

事象
「3.更新した内容がDBに反映されない」での修正をおこなった後、
画面上で年齢に0が入ってしまう

原因
LESSON動画でも解説していたとおり、DBに0が入っているため

修正前のコード
ブログの文章に入力できないため一部<>等削除しています
input type=”number” name=”age” value=”php echo getFormData(‘age’);”>

修正内容
DB値0のときには値を空白にする

修正後のコード

ブログの文章に入力できないため一部<>等削除しています

input type=”number” name=”age” value=”php
if( !empty(getFormData(‘age’)) ){
echo getFormData(‘age’); }else{
debug(‘ageはemptyでtrue判定されました’);}”

まだ完全でないと思われるところ
年齢0を登録する反映されていないように見えてしまう

備考
「value=」と「<?php」の間に改行やスペースを入れると、それ自体が値になってしまう