コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

一行プログラミング

JavaScript ドットインストール
初心に戻って

僕が何もできない人というのはこのブログを読んでいる皆さんならご存じだと思います。とりあえずやってみたけど結果伴わずで何もできなかったという悲しい事実を積み重ねていることもご存じだと思います。

え？知らないですって!?
でしたら僕の過去記事をほんの500個ほど見てみてください。なんの成長もないことが感じ取れると思います。まあ、そういったわけですので僕はいつまで経っても同じことを繰り返すのです。てなわけで、プログラミングを始める人が利用するといわれるドットインストールを"また"やることにしました。

ドットインストールやることにした

さて、初心に戻ってドットインストールでJavaScriptをやることにしました。しかしながら、写経なり反復学習なりで同じことをやっていても成長というものは実感できないなと思いましたので「一行で書く」という縛りをもうけたいとおもいます。実際のところは即時関数使ってわけわかんないことやりたいなってなっただけです。

ちなみに即時関数はこんな感じです。

(()=>{ ここに処理 })();

矢印とか入っていて他のサイトと書き方違いますが動くのでこれでいいのだってことで。「ここに処理」のところになんか処理を書けば書いた瞬間に使えます。

JavaScriptについて 参考
JavaScript | MDN

やってみた

▼ JavaScriptとは何か
70億のデバイスで動くJavaよりも遥かに多くのデバイスで実行されているのではないかと訝しまれる言語です。詳細はこっちを見てね。
https://dotinstall.com/lessons/basic_javascript_v2

第一回目は概要なのでソースなしです。そんなわけで、第二回から記録をつけていきます。ソースに直書きで説明なしですがコメントからやっていることを感じ取ってください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p id="msg"></p>
    <button id="add">Click</button>
    <script>
      // #2 HelloWorld
      console.log("Hello World");

      // #3 変数 (var let const)
      let hello = (function(){console.log("Hello JavaScript");})();

      // #4 数値の代入
      ((x)=>{console.log(++x)})(5); // 6

      // #5 文字列
      console.log("Hello "+"JavaScript "+"World"); // HelloJavaScriptWorld

      // #6 条件分岐
      ((score)=>{if(score>=50){console.log("Good")}})(50); // Good

      // #7 三項演算子
      ((score)=>{score>60?console.log("Good"):console.log("Bad");})(50); // Bad
      
      // #8 switch文
      ((signal)=>{switch(signal){case "red": console.log("Stop"); break; default : console.log("Wrong"); break;}})("ed");

      // #9 whileループ
      ((i)=>{while(i<10){console.log("While:"+i++);}})(0); // 0~9

      // #10 forループ
      ((i)=>{for(i;i<10;i++){console.log("For:"+i)}})(0); // 0~9

      // #11 alert, confir, prompt
      ((message)=>{confirm(message);})("is delete?");

      // #12 関数
      (function(name){console.log("Hello "+name)})("Tom"); // Hello Tom

      // #13 ローカル変数
      (function(name){var msg=(function(){console.log("Hello "+name);})()})("Bob"); // msg is not defined

      // #14 即時関数
      ((msg)=>{console.log(msg)})("Hello!!"); // Hello!!

      // #15 タイマー処理 setInterval setTimeout
      ((i)=>{setTimeout(()=>{console.log(i++);},3000);})(0);

      // #16 配列
      ((score)=>{console.log(score[1][0]);})([[100,200,300],["A","B"]]); // A

      // #17 オブジェクト
      ((user)=>{console.log(user.email)})({email:"gmail",score:80}); // gmail

      // #18 メソッド
      ((user)=>{user.greet("Tom")})({greet:function(name){console.log("Hi "+name)}}); // Hi Tom

      // #19 Stringオブジェクト
      ((s)=>{console.log(s.length)})("String"); // 6

      // #20 Arrayオブジェクト
      ((arr)=>{console.log(arr.length)})([1,20,300]); // 3

      // #21 Math,Date オブジェクト
      ((rnd,d)=>{console.log(rnd*rnd*rnd+d)})((Math.ceil(Math.random()*10)),Date.now());

      // #22 DOM
      console.log(window.outerHeight);

      // #23 DOM操作
      ((e)=>{e.textContent = "Hello DOM.";})(document.getElementById("msg"));

      // #24 イベント
      document.getElementById("add").addEventListener('click',function(){window.alert("クリックされました")});
    </script>
</body>
</html>

はい、後半の処理がかなり苦しいけどこんな感じで一行縛りやり遂げました。HTMLタグ使ってDOMをいじっているところとか卑怯だけど、書いていると入れ子でこんなの書いているとわけわかんなくなるんですもの。なんか三項演算子が悪の文化と呼ばれているのが分かった気がした。

さて、肝心のやり遂げて何ができるようになったかですが今日も得るものなしってところです。悲しいなぁ……。

[トップへ]