【 車輪の再発明 】　FirE♯39　

今日は1日、SVGアニメを実装しました。

【SVGアニメーション】

この青の線が、手書き風に動くアニメーションです

 line  animation　svg
============================================================================

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1475 630.67" class="svg-box">
    <image xlink:href="https://cdn.shopify.com/s/files/1/0555/8589/8696/files/base.svg?v=1619016485" width="100%" height="100%" mask="url(#clipMask)"></image>
       <mask id="clipMask" class="clipMask">
            <path class="cls-1 erwmWPlr_0 " d="M40.5,128.82a390.49,390.49,0,0,1,103-60c76.8-30,172-38.31,181.5-14.5,3.48,8.7-7.06,15.17-35.5,58.5-13.68,20.84-23.45,38.56-43,74-20,36.28-35.84,65-51,103-18.69,46.87-34.46,86.42-23.5,94.5,11.56,8.52,44.29-24.26,143.5-102.5,74.22-58.53,102-76.47,133.5-92.5,34.88-17.72,110.57-56.19,136.5-30.5,16.8,16.65,7.92,55.51,4.5,70.5a156.18,156.18,0,0,1-24,54s-50.21,73.28-101.5,166.5c-29.2,53.06-61.89,129.56-47.5,139.5,5,3.48,13.28-3,65.5-35.5,20.58-12.81,41.45-25.14,62-38,0,0,32.73-20.47,99-59,129.18-75.1,253.74-131.11,272.5-139.5,10.38-4.64,50.42-22.45,104-44,92.41-37.15,230.55-87.58,414.5-137.5"></path>
       </mask>
  </svg>

↑これが、イラストレーターで描いた線をsvg化したコードです。

  line  animation　css
==============================================================================*/

.svg-box{
 width:50%;
 position: absolute;
 top: 0%;
 right: 50%
}

.cls-1 {
 opacity:0;
}

.erwmWPlr_0{
 opacity:0;
}

.active{
 fill:none;
 stroke:#ffffff;
 stroke-linecap:round;
 stroke-miterlimit:10;
 stroke-width:120px;
 stroke-dasharray:0;
 opacity:1;
}


.active {
 stroke-dasharray:2766 2768;
 stroke-dashoffset:2767;
 animation:erwmWPlr_draw 1300ms ease-in-out 0ms forwards;
}

@keyframes erwmWPlr_draw{
 100%{
   stroke-dashoffset:0;
 }
}
@keyframes erwmWPlr_fade{
 0%{
   stroke-opacity:0;
 }

95.40229885057471%{
 stroke-opacity:0;
}

100%{
 stroke-opacity:0;
 }
}

↑これが、線の動きを制御するのCSSコードです。

 line  animation　JavaScript
===========================================================================

//----------line-anime-----------
$(window).on('scroll',function(){

 $(".cls-1").each(function(){
   var position = $(this).offset().top;
   var scroll = $(window).scrollTop();
   var windowHeight = $(window).height();
   if (scroll > position - windowHeight　+ 300){
     $(this).addClass('active');
   }
 });
 
});

↑これが、線が動き出すタイミングを制御するJavaScriptのコードです。

このように、意味がわかりませんね。
特に、JavaScriptは、何いうてるん？という印象でした。

しかし、
コードは書けば書くほど、読めば読むほど、コピペすればするほど、意味がわかってくるものです。

どうやったら、実装できるのかをとにかく調べて、考えて、組み合わせて、応用する。

これで、実装できるまで、試していけば、どんどんできていきます。

【暗記不要】

プログラミングや、マークアップを、勉強している人は最近増えてますよね。この勉強は、学校の勉強とは違うと思います。テストで点数を取るための勉強では意味がないわけです。基本のルールというのは、守らなければなりませんので、そこは、覚えるというか、慣れる必要があります。で、テストとは違って、わからなければ、調べればいいんです！　自分で調べて、掴みに行く学習にこそ、意味があると思います。ただただ与えらる学習だと、自分でやってみようとなった時に、キーボードに置いた指が動かないのです。何したらいいんやっけ！？ってなります。

【車輪の再発明】

わからないことを調べて、誰かのコードを、使わせていただくことは、なんかパクってるようで、意識高い人は許せないかもしれませんね、しかし、車輪の再発明っていう言葉があるように、すでに便利なものは、一から作ってたら時間の無駄です。仕組みの理解は必要だと思います。

この、車輪の再発明って言葉、料理で考えるとわかりやすいと思います。

一流のシェフが料理する時、材料となる、野菜、魚、肉は、種から育てるでしょうか？　海で釣り上げるでしょうか？　家畜を育てるでしょうか？

また、料理の道具。包丁、まな板、鍋、フライパンは、自分で作るでしょうか？

そんな物を１から作ってたら、その人の、料理の腕は、いつになったら披露できるのでしょうか。

コードを調べて、組み合わせて、応用するのは、料理のように、野菜と肉をフライパンで炒めて一つの料理にするようなものだと思います。

炒める時間や、具材の大きさ、調味料の加減、盛り付け方なんかは、どうやっても、個性が出る。コードの書き方にも、個性が出るし、汎用性の高い、美しいコードを書くには、経験が必要だと思います。

そんな感じで、一見、パクリと言われそうことも、視点を変えれば当たり前のこと。

ITの進化の加速の裏には、このような、車輪の再発明はするなという概念や、オープンソースという考えがあります。

僕は、マークアップはある程度、自分で考えて、書くことができますが、

本当の意味での、プログランミグ言語については、読めるけど、書けないて感じですね。

勉強の毎日です！

最後に、html、cssが書けるのを「プログラミング」って言う人がいますが、全然違います。これは、プログラムを書ける人に敬意を表する意味でも、分けて考えるべきですね！