改めてスコープを理解する


こんにちは櫻井です。ちょっと最近スコープの概念が迷走してきたので今日は復習です。
特に訳わからんくなっているのがfor文で宣言した「var i = 0」がどこからどこまで有効なのかところです。今日は基本的なスコープの考え方を復習しつつこの疑問を解決していこうと思います。

スコープとは

そもそもスコープとはなんなのか。この辺の理解が間違ってると他も全部間違ってくるのでここから振り返ります。
スコープとは変数や関数が使える範囲のことです。
使える範囲限定しなくてもどこからでも使えるようにしたほうが便利じゃんって思うかもしれませんが、そんなことをするとメモリをたくさん消費することになるのでダメです。

スコープの種類

スコープにはいくつか種類があるんですが大きく分けると二つに分類されます。グローバルスコープとローカルスコープです。

グローバルスコープ

グローバルスコープはどこからでも変数や関数が使えるスコープです。ここで定義された変数はどこでも使用できます。定義の仕方は関数などには入れずに変数を宣言するか、「var,let,const」などを使わずに定義するとグローバルスコープに定義できます。

    
      var globalScp_1 = 'global_1';
      function scpFunc() {
        globalScp_2 = 'global_2';
      }
    
  

ローカルスコープ

ローカルスコープはグローバルスコープ以外の全てのスコープがこれに分類されます。
ローカルスコープの中にはさらに関数スコープやブロックスコープがあります。ありはするんですが意味がほとんど一緒です。
ブロックスコープは{}で括られたエリア内で変数や関数が使えるスコープです。
関数スコープはその名の通り関数内で変数や関数が使えるスコープで、関数の引数も関数内の変数と同じ扱いになります。なので同じ関数スコープ内でしか扱えません。
どちらも{}で囲まれていて引数があるかどうかくらいしか違いはないです。基本的に{}の中で定義された変数や関数はそのスコープでしか使えないって解釈でいいと思います。

    
      function scpFunc(demo) {
        var functionScp = 'function';
        // この中だと使えるだとfunctionScpとdemoを使える
      }
      // ここはfunctionScpとdemoを使えない
    
  

この辺でスコープの復習は終わります。いよいよ本題です。

for文の()の中は引数?

スコープの復習をした感じだとfor文の()内で定義したものは引数扱いでfor文ないでしか使えないんじゃないかと予想を立てました。結果がわからないのでとりあえず実験です。
ちなみにMDNのサイトには「初期化式」と書いてありました。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Loops_and_iteration

まずはベースのfor文です。

    
      const target = document.getElementById('js-txt');
      for(var i = 0; i<10; i++) {
        target.innerText += `scope1:${i}\n`;
      }
    
  

実行すると

    
      scope1:0
      scope1:1
      scope1:2
      scope1:3
      scope1:4
      scope1:5
      scope1:6
      scope1:7
      scope1:8
      scope1:9
    
  

では、for文のなかにfor文を入れたらどうなるかみようと思います。

    
      for(var i = 0; i<10; i++) {
        target.innerText += `scope1:${i}\n`;
        for(var i = 0; i<10; i++) {
          target.innerText += `scope1_2:${i}\n`;
        }
      }
    
  

実行すると

    
      scope1:0
      scope1_2:0
      scope1_2:1
      scope1_2:2
      scope1_2:3
      scope1_2:4
      scope1_2:5
      scope1_2:6
      scope1_2:7
      scope1_2:8
      scope1_2:9
    
  

この結果はちょっと意外でした。scope1:0も0~9まで吐き出されるかと思ったんですが最初の一回で止まっちゃいましたね。でも冷静に考えたら当たり前でiはscope1_2の方で9まで上がっているのでscope1_2のfor文が終わったら必然的にscope1も終わってしまうって訳ですね。次はfor文の外に同じ初期化式のfor文をおいた場合をみていきたいと思います。

    
      const target = document.getElementById('js-txt');
      for(var i = 0; i<10; i++) {
        target.innerText += `scope1:${i}\n`;
      }
      for(var i = 0; i<10; i++) {
        target.innerText += `scope2:${i}\n`;
      }
    
  

実行すると

    
      scope1:0
      scope1:1
      scope1:2
      scope1:3
      scope1:4
      scope1:5
      scope1:6
      scope1:7
      scope1:8
      scope1:9
      scope2:0
      scope2:1
      scope2:2
      scope2:3
      scope2:4
      scope2:5
      scope2:6
      scope2:7
      scope2:8
      scope2:9
    
  

この結果からfor文は関数スコープと同じ扱いなんだなとわかります。
同じ扱いなのがわかったのはいいんですが、for文内でさらにfor文を回す時に初期化式なんてなんでもいいって時はとりあえずvar i = 0にしてたんですがfor文の中で再度for文書くときは名前を考えた方がいいのかもしれませんね。

まとめ

今回はスコープについて改めて調べ直しました。抜けていたの引数の扱いがどうなるかってところでした。スコープについて調べている過程でletとconstがie11でも使えるって記事を見つけたので今度letとconstで値の呼び出しにどんな違いが出てくるのか実験してみたいと思います。

決算APIの違いを比較してみた


こんにちは櫻井です。
以前ネットショップ開設サービスの違いを比較してみましたがその時、色々みていくうちにネットショップの流れが色々省略すると商品を登録してお客さんに商品が見えるようにする。次にお客さんがボタンを押して支払いができればネットショップの機能としては充分成り立つことに気づいたんです。
商品の登録機能はwordpressの記事投稿機能のようなものだと思えばなんとなくですが理解できます。
残る支払い機能が問題で、クレジット情報とかを扱わなければならないとなるとセキュリティ面も完璧に構築しなければいけません。これが完璧にできればいいんですがそんな簡単なわけもなく、サーバー側の言語となると一から勉強しなければならず腰が引けます。
どうにかならないかなと探していたときに見つけたのが決算APIでした。
決算APIを使えばセキュリティ面をAPIが担当してくれるます。これならなんとかなりそうだということで、今回は決算APIの違いを比較していこうと思います。

PayPal

https://www.paypal.com/jp/webapps/mpp/home
月間のペイパルによる売上高
30万円以下:3.6 % + 40 円 / 件
30万円超 100万円以下:3.4 % + 40 円 / 件
100万円超 1,000万円以下:3.2 % + 40 円 / 件
1,000万円超:2.9 % + 40 円 / 件

PayPalは決済手数料の仕組みが少し複雑です。売り上げが増えれば増えるほど手数料が下がるのはいいんですが一見ごとに40円は高いように感じます。
またPayPalは決済時にPayPalのページに一度飛ぶ必要があるみたいです。

Stripe

https://stripe.com/jp
手数料:3.6%

Stripeは一律で3.6%です。PayPalに比べると安いですね。デベロッパー・ファーストを謳っているのは開発者側としてはありがたいですね。ただ、返金時に決済手数料が一切戻ってこないみたいです。

PAY.JP

https://pay.jp/
ベーシックプラン
月額費用:0¥
visa / master:3.0%
jcb / american express / dinersclub /discover:3.6%

プロプラン
月額費用:10,000¥
visa / master:2.59%
cb / american express / dinersclub /discover:3.3%

PAY.JPはプランやクレジットカードの種類によって金額が変わってきます。APIのドキュメントが日本語で書かれているのでとっつきやすいのがいいですね。

Square

https://squareup.com/jp/ja
3.6%(Visa/MasterCard/American Expressのみ)

Squareは実店舗向けのクレジットの差込の機械も取り扱ってるみたいです。ただ、JCBがないんですよね。。個人的に楽天カードを主に使っているのでJCBがないのは困ります。JCBってシェア率低いんですかね?

まとめ

今回は決算APIを比較してみました。
個人的には色々調べている感じだとStripeの記事がやたらと多かったのでStripeかドキュメントが日本語のPAY.JPで初めての決算APIは扱ってみたいです。Squareはクレジットの差込の機械も取り扱ってるのでお客さんからしたらまとめて契約できるからいい気もします。

便利なEmmetの使い方


こんにちは。櫻井です。
今回はEmmetというHTMLとCSSの開発を手助けしてくれるとても便利なツールの使い方について実際にHTMLを構築をしながら説明しようと思います。最終的に以下のような簡単なheader構造をEmmetで構築することを目標にやっていきたいと思います。

  
    <header class="l-header">
      <h1 class="l-header_logo"><img src="./img/logo.png" alt="LOGO"></h1>
      <nav class="l-header_nav">
        <ul class="l-header_nav_item_wrapper">
          <li class="l-header_nav_item"><a href="">menu1</a></li>
          <li class="l-header_nav_item"><a href="">menu2</a></li>
          <li class="l-header_nav_item"><a href="">menu3</a></li>
        </ul>
      </nav>
    </header>
  

EmmetはCSSのセレクタと似たような構文を使ってHTMLを生成することができます。
例えばCSSで
div>pと記述した場合div要素の中のp要素にスタイルがあたりますよね。
Emmetの場合は
div>p
と記述してショートカットキーを押してHTMLを展開させた場合

  
    <div>
      <p></p>
    </div>
  

といった形になります。Emmetでは、div要素の中にp要素がある形でHTMLを生成してくれます。また、要素を<>で囲んだりする必要はありません。CSSも<>で囲まないしちょっと似てますよね。
では、例で出した「>」から紹介していきます。

子要素を作る>

>は例で挙げたように「div>p」という書き方をするんですが「>」は「左の要素(例だとdiv)の中に右の要素(例だとp)を作る」という処理をしてくれています。なので例えば
section>div>h2
これを展開した場合

  
    <section>
      <div>
        <h2></h2>
      </div>
    </section>
  

こんな感じになります。
これでもうheaderの中にh1を入れる構造はできますね。
header>h1
と記述するだけです。まだまだ完成は遠いですね。次はh1要素の兄弟要素になるnav要素を作りましょう。

兄弟要素を作る+

>を要素の間に入れた時は右のものを子要素にしましたが、+でつなげると兄弟要素になります。例えば
div+p
展開した場合は

  
    <div></div>
    <p></p>
  

このようになります。これでh1要素の兄弟要素のnav要素を入れられますね。この二つだけでもかなり完成形に近づいたんじゃないでしょうか?
header>h1+nav>ul>li>a
これをを展開すれば

  
    <header>
      <h1></h1>
      <nav>
        <ul>
          <li><a href=""></a></li>
        </ul>
      </nav>
    </header>
  

このようになります。かなり近づいてきましたね。Emmetを知らなかった方は記入量の少なさにおどいているんじゃないでしょうか?
しかしまだメニューの数が足りなかったり、ロゴを入れられてなかったりクラスがついていなかったりします。まずはh1要素にimg要素を入れるやり方から説明していきます。

親要素に戻る^

^は少しCSSのセレクタの書き方とは意味が変わってきます。左の要素の親要素の位置に戻ってくれます。説明がこれだけだとわかりにくいと思うのでもう少し掘り下げます。ここまでの説明だとdiv>pとした場合にはdivの兄弟要素をEmmetで記述することはできませんよね。^はこういったときにdiv要素に兄弟要素を作れるようにする処理をしてくれるんです。
例えば、div>p^ul>liと記述すればdivとulが兄弟要素になって以下のように展開されます。

  
    <div>
      <p></p>
    </div>
    <ul>
      <li></li>
    </ul>
  

これでh1要素の中にimg要素を入れられます。
header>h1>img^nav>ul>li>a
これを展開すれば

  
    <header>
      <h1><img src="" alt=""></h1>
      <nav>
        <ul>
          <li><a href=""></a></li>
        </ul>
      </nav>
    </header>
  

このように展開されます。次はnav要素の中のliを増やしていきましょう。

量産してくれる*

*は左の要素を*の右に書いた数字分だけ量産してくれます。
例えば、
ul>li*3
これを展開した場合

  
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  

このような形でli要素を3つ作ってくれます。
実はli要素を増やす方法として「li>a^li>a….」と記述して増やすことも可能ではあります。でもこんなことやっていたら面倒ですよね。なので*を使って量産しましょう。
header>h1>img^nav>ul>li*3>a
これを展開すれば

  
    <header>
      <h1><img src="" alt=""></h1>
      <nav>
        <ul>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
        </ul>
      </nav>
    </header>
  

このようになります。かなり近づいてきましたがクラスついてないしテキストが入ってないですね。次はクラスを付けていきましょう。ついでにIDの付け方も説明します。

クラスを付ける. IDを付ける#

クラスとIDはまんまCSSと同じでクラスの場合は要素の後に.クラス名、Idの場合は#ID名を付けるだけです。
例えば、div.containerを展開すれば

  
    <div class="container"></div>
  

となります。
これでさらに近づきますね。
header.l-header>h1.l-header_logo>img^nav.l-header_nav>ul.l-header_nav_item_wrapper>li.l-header_nav_item*3>a
これで展開すれば

  
    <header class="l-header">
      <h1 class="l-header_logo"><img src="" alt=""></h1>
      <nav class="l-header_nav">
        <ul class="l-header_nav_item_wrapper">
          <li class="l-header_nav_item"><a href=""></a></li>
          <li class="l-header_nav_item"><a href=""></a></li>
          <li class="l-header_nav_item"><a href=""></a></li>
        </ul>
      </nav>
    </header>
  

あとはテキストとimgのsrcとsltが入れられれば完成です。次はテキストの入れ方を説明します。

テキストを入れる{}

テキストを入れたい時は{}を使います。例えばp{テキスト}とすれば

<p>テキスト</p>

となります。この時に気をつけて欲しいのが{}の中で改行は使えないことです。改行を入れたい時は
を入れてください。
これでテキストが入りますね。header.l-header>h1.l-header_logo>img^nav.l-header_nav>ul.l-header_nav_item_wrapper>li.l-header_nav_item*3>a{menu}
これを展開すると

  
    <header class="l-header">
      <h1 class="l-header_logo"><img src="" alt=""></h1>
      <nav class="l-header_nav">
        <ul class="l-header_nav_item_wrapper">
          <li class="l-header_nav_item"><a href="">menu</a></li>
          <li class="l-header_nav_item"><a href="">menu</a></li>
          <li class="l-header_nav_item"><a href="">menu</a></li>
        </ul>
      </nav>
    </header>
  

これだとまだ数字のmenuの後ろに連番が入ってないですね。
次は連番の入れ方を説明します。

ナンバリングをしてくれる$

$はナンバリングをしてくれます。基本的に量産をしてくれる*と合わせて使うことで連番を入れてくれるのでそういう使い方をすることが多いのですが、必ずしも*と一緒に使わなければいけないわけではありません。
使い方はテキストやクラス名の後ろに$を付けるだけです。
一つだけ書くと1から始まり、二つ続けて書くと01から始まります。
例えばul>li.l-item$$*5を展開すると

  
    <ul>
      <li class="l-item01"></li>
      <li class="l-item02"></li>
      <li class="l-item03"></li>
      <li class="l-item04"></li>
      <li class="l-item05"></li>
    </ul>
  

このように展開されます。
これでテキストの横に連番を載せられます。
header.l-header>h1.l-header_logo>img^nav.l-header_nav>ul.l-header_nav_item_wrapper>li.l-header_nav_item*3>a{menu$}
このようにして展開すれば

  
    <header class="l-header">
      <h1 class="l-header_logo"><img src="" alt=""></h1>
      <nav class="l-header_nav">
        <ul class="l-header_nav_item_wrapper">
          <li class="l-header_nav_item"><a href="">menu1</a></li>
          <li class="l-header_nav_item"><a href="">menu2</a></li>
          <li class="l-header_nav_item"><a href="">menu3</a></li>
        </ul>
      </nav>
    </header>
  

次で最後です。画像のsrcとaltの入れ方を説明します。

クラスやID以外の属性を付けてくれる[]

srcやhref、jsで使うdata属性などを付けたい時は[]を使います。 使い方は{}と同じです。
例えばa[href=”https://knap.jp/”]を展開すると

  
    <a href="https://knap.jp/"></a>
  

このようになります。続けて書くこともできるので header.l-header>h1.l-header_logo>img[src=”./img/logo.png” alt=”LOGO”]^nav.l-header_nav>ul.l-header_nav_item_wrapper>li.l-header_nav_item*3>a{menu$}
こんな形で入れて展開すれば

  
    <header class="l-header">
      <h1 class="l-header_logo"><img src="./img/logo.png" alt="LOGO"></h1>
      <nav class="l-header_nav">
        <ul class="l-header_nav_item_wrapper">
          <li class="l-header_nav_item"><a href="">menu1</a></li>
          <li class="l-header_nav_item"><a href="">menu2</a></li>
          <li class="l-header_nav_item"><a href="">menu3</a></li>
        </ul>
      </nav>
    </header>
  

これで目標としていた形になりましたね。お疲れ様でした。

まとめ

Emmetがいかに便利か伝わりましたか?慣れるまでは少し難しいかもしれませんが少しずつでも使っていけば鎖状効率の違いに気付けると思います。
実はEmmetにはまだまだ実用的な機能が色々あります。()で囲むことでグループ化できたり、CSSでも使うことができます。
今回説明した内容だけでも十分扱えると思いますがもっと詳しく知りたい場合は英語になりますが以下の公式ドキュメントを読んでみてください。
https://docs.emmet.io/

エディタに入れてるプラフインの紹介


こんにちは。櫻井です。
今日は僕が普段使っているAtomというエディタに入れている便利なプラグインを紹介しようと思います。

japanese-menu

インストールするだけでAtomのメニューとかを日本語に翻訳してくれるものです。
これがないと何書いてあるかわからなくて困ります。

autoprefixer

cssのベンダープレフィックスと呼ばれる「-webkit-」とかを付けないとcssがちゃんと聞いてくれないものを補完してくれるプラグインです。gulpを使っている案件の時は不要ですが全ての案件でgulpを使っているわけではないのでそんな時は使います。
使い方は「⌘(command) + Shift + p」を押して出てくるダイアログに「Autoprefixer」と打つと出てくる「Autoprefixer: Prefix」をクリックするだけです。テストアップする直前に使ったりします。

atom-beautify

人によってもエディタによってもインデントの揃い方って変わってくるのでデータを引き継いだ時などに重宝してます。
使い方は「⌃(control) + ⌥(option) + b」または右クリックして出てくる「Beautify Editor contants」クリックすれば出来上がりです。

emmet

超大事なプラグインです。これが使えないと開発にかかる時間が1.5倍から2倍に膨れ上がるんじゃないかってくらい時短に協力してくれてるプラグインです。
例えば、「!」を入力してタブキーをクリックするだけでmeta付きのhtmlを展開してくれたりします。htmlの生成に特に使っているんですがemmetの便利な機能の紹介は後日したいと思います。

local-server-express

絶対に入れて置くことをお勧めするプラグインです。
案件によっては絶対パスで組まなければならないものもあると思いますが。このプラグインを入れておけばトップページになるファイル開いて「⌃(control) + ⌥(option) + ⌘(command) + s」でエディタが仮想サーバーを構築してくれます。

file-icons

ファイルの拡張子をみなくてもファイルの種類がわかる便利なやつです。なくても困らないと言えば困らないけど、あると便利な子。

highlight-selected

自分が選択したワードで付近にあるものをわかりやすく白い枠で囲ってくれるプラグインです。「⌘(command) + f」で検索すればわかることですが、検索するより早く知覚的に場所を教えてくれます。微妙なスペルミスを見つけるときとか、タブを跨いで教えてくれるので例えば、htmlだとクラス名が「message」というのがあったとしてcssの方が「massage」になっていたとしてcssの「massage」を選択すればhtmlの方は白い枠で囲まれないのでひっそりと控えめにスペルが間違っていることを教えてくれたりするいい子です。

indent-guide-improved

インデント位置をわかりやすく縦線を引いて教えてくれます。 インデントめちゃくちゃにならないように注意するのにちょうどいいです。

show-ideographic-space

日本語打ち込んで英語に戻してって 繰り返してると半角スペース打ったつもりが全角スペース打ってたってことあるじゃないですか。これそんな全角スペースを白い四角で囲ってくれるプラグインです。

platformio-ide-terminal

atom上でターミナルを扱わせてくれるプラグインです。このプラグインの特に気に入っているポイントとして開いたプロジェクトの位置までターミナルを移動してくれているところです。

pigments

複数の色を使っているときに間違えて別の色を修正してしまったりっていうのを防ぐのにちょうどいいプラグインです。

まとめ

今回はAtomのプラグインを紹介しました。最近はVSコードが主流になってきてるみたいで僕もいつか切り替えるかもしれません。ですがもしAtomを使ってみようと思ったらご紹介したプラグインを試してみてください。

配列のHOW TO


こんにちは。櫻井です。
今日はJSの配列の扱いについてお話ししたいと思います。
連想配列を扱えるようになると開発時にかなり時短になるんです。

See the Pen arrayDemo by knap_develp (@knap_develp) on CodePen.

例えばこんな感じで使います。
何をやっているのか説明すると。
まずdataItemに流し込むデータが入っています。
次にある変数allProduct、vegetableProduct、fruitProductにはそれぞれあとでJSで生成するhtmlを入れます。これらの変数はただ定義しただけだとあとで「+=」で足して行くときに「undefined」になってしまうのであえて「’’」にしておきます。

次はfor文です。for文を使ってdataItem内のデータを正確に特定していきます。for in文とか使えばもっと簡単にできるんでしょうがまずは基本のfor文です。JSを普段あまり触らない人からするとfor文を書くのは気が引けるかもしれません。
for文はまずカッコの中に何回周すのかを定義します。
for文の()の中を翻訳すると「iがdataItem.lengthより小さい間は{}の中の処理をして終わったらiに1を足すっていうのを繰り返してね。iがdataItem.lengthと同じかそれ以上になったら終わっていいよ。」って感じのことが書かれてます。
「let i =0」というのが始まりの数です。今回はiにしてますが定義する名前はなんでも構いません。翻訳した文章の主語になっているiはここで定義しています。
次の「i < dataItem.length」はdataItem.lengthが流し込むデータの数を表しています。「iがdataItem.lengthと同じかそれ以上になったら終わっていいよ。」っていういつまでやり続けるのか決めているのがこの部分です。
最後の「i++」は「終わったらiに1を足す」の部分です。{}の中が終わったらどうするのか決めているのがこの部分です。

ではfor文の中をみていきましょう。
はじめに定義したallProductの中にhtmlの構造を足しています。これはES6の書き方(IE11では使えないです。)なんですが足す内容を“で囲むと${}の中だけ変数が展開されるんです。今回は楽がしたいので楽なこの方法を選んでます。
例えば${dataItem[i].name}ですがこれはdataItemのi番目のnameの値を呼び出してます。
${dataItem.name}ではダメなんです。JSはdataItemの[]の中の{}を一つの塊として扱ってくれます。中のデータを参照するには[]の中の南蛮めのデータなのかを明記しなければいけなません。例えば、dataItemの[]の中の五番目のデータが欲しかったらJSは数字の始まりが1ではなく0からなのでdataItem[4]とすれば中のデータがもらえます。iにはfor文で周回させている数字が入ります。なのでdataItemの中の全部のデータを参照してくれるんです。
allProductのhtmlを入れる処理の後にはif文が現れました。
これは何をやっているのかというと「もしdataItemのi番目のcategoryが野菜だったら{}の処理をしてね。」っていう処理をしてます。中で行っている処理はallProductの時の処理同じでvegetableProductの中にhtmlの構造を足して行く処理です。
次に出てくるif文もやっていることは同じです。

説明は以上になりますがいかがでしょうか?出来そうな感じがしてくれてたらいいのですが。。
これと同じことをJSONを使ってできるとすごく便利になります。
実際、J.フロント建装様のときにはさらにこれに加えて検索機能をつけたりしました。
僕自身まだまだ完璧に使いこなせている気はしませんが割と開発に役立てることが出来ています。是非扱えるように練習してみてください。

人に伝える難しさ


こんにちは。櫻井です。
最近NuxtとかNextとかGatsbyとかいわゆる「静的サイトジェネレータ」に興味を持ってあれこれ調べてるんですが、どうもどの記事を読んでも専門用語が多すぎて何言ってるのかよくわからないんですよね。
一応知らない言葉は調べるんですがそれでも「で?だからこれはなんなの?」ってなっちゃうんです。

母から急にきた連絡

わからなすぎてちょっとご機嫌斜めのときに母から急にLINEがきたんです。普段は滅多に来ないので何かと思ったら一言目が

「Adobeクラウドファンディングって何?」

Adobeクラウドファンディング??Adobeクラウドならわかりますけど念のため聞いたら確かにAdobeクラウドファンディングだっていうんです。検索してもヒットしないしまさか新手の詐欺か何かと思って念のためそれがどうしたのか聞いたら

「よくわかんないけど弟が通ってる大学が提供してるとかなんとか」

なら弟に聞けや!ってなりましたがどうも弟は説明することを放棄したみたいで僕に聞いてきたみたいでした。
母が言っている「Adobeクラウドファンディング」は学生向けのAdobeクラウドのパッケージのことだと思ったんでそのURLを送ったんですが。何をするためのものか理解できてなかったみたいなので「Adobeだからクリエイティブ系のアプリのサブスクだと思うよ」って伝えたんです。そしたら
「カタカナ並べないで」

まさか理解されないと思ってなかったので驚きです。そりゃ弟も説明を放棄しますよ。
さてどうやって説明するか。別に「クリエイティブ」も「アプリ」も「サブスク」も専門用語ではないと思うんです。でも母からしたら専門用語なわけです。
どう噛み砕くか。
結果的に「Adobeはデザインとかプログラムとか映像とか創造的なものを作るためのアプリ制作してる会社でそれを月極で使わせてくれる会社だからそれ系のサービスだと思うよ。」
これで理解してくれました。よかった。本当によかった。これで理解してくれなかった放り投げようと思ってたのでよかったです。

小学生に説明するように

さて、長々とエピソード書きましたが、僕は「静的サイトジェネレータ」に興味を持って調べたわけです。読んでも理解できなかったのは母と同じように知らない言葉、理解できない言葉が多かったからです。では理解するにはどうすればいいのか。僕は母に説明するとき意識したのは「小学生にもわかるようにする」ということです。
つまりわからないならわからないことを小学生でもわかるレベルまで紐解いていけば理解できるわけです。
逆に人に説明するときは小学生にもわかるように説明すればいいんです。
でも、そんな簡単にできることでもないです。僕は母に説明するとき文章打つのに30分はかかりました。
説明する力、伝える力を身につけるにはどうすればいいのか。こればっかりはやっぱり実践あるのみかと思うんです。人に話たり、ブログを書いたり。そう!ブログです。
なんやかんやで毎日ブログを投稿して一週間以上が経過しました。文章を書く力、伝える力に少しは変化はあるでしょうか?まだまだ未熟ではありますが、これからも継続してブログを書いていけたらいいなと思います。

web開発でよく使うツール5選


こんにちは。櫻井です。
社内でどんなツールを使っているかって意外と共有されていなかったりってしませんか?
web開発に限らず意外と周りが知らない便利なツールを自分だけが使っていたり、逆に周りは使っているけど自分が知らないツールってあるかもしれません。
そんな訳で今回は桜井が開発時によく使うツールをご紹介します。

codic

https://codic.jp/

個人的に使う頻度が一番高いツールです。
calss名を英語にする時は必ずと言っていいくらい使います。

HTML5 入れ子チートシート

https://yoshikawaweb.com/element/

今でもたまに今でもたまに「liにdivって入れちゃダメだったよな?どうだっけ?」ってなる時あるんで迷ったら即座にこのサイトで確認です。

CSS三角形作成ツール

http://apps.eky.hk/css-triangle-generator/ja

cssで三角形作るのってどうもやり方忘れがちで(絶対これ使ってるからなんですが)毎回これで作ってコピペしてます。

Table Tag Generator

https://tabletag.net/ja/

テーブルを組み上げるのってかなり面倒なんで表組みがある時はほぼ毎回使ってます。何がいいって一番面倒なセルの接合した時のhtmlも吐き出してくれるところです。

Ultimate CSS Gradient Generator

https://www.colorzilla.com/gradient-editor/

photoshopのcssをコピーする機能使ってそのまま貼り付けてもあまりデザインと同じ感じにならないのでグラデーションがある時はここで調整してからコピペです。

まとめ

今回はこの5つを紹介させていただきました。
細かいのでいうと三角関数の計算してくれるものだったりとかbox-shadowのcssとかもあったりします。というか探してみると意外となんだってあったりします。
みなさん是非こういうツールあったらなっていうのがあったら探してみてください。そして教えてくれると嬉しいです。

KNAPのGit講座(4) ブランチモデル


第4回はブランチモデルについてです。
ブランチモデルというのはブランチをどうやって切るのかを予め決めておくルールのことです。
なぜそんなルールをわざわざ用意しなければならないのかというと複数人で作業している場合、何も決めずにブランチを切っていると「このブランチは何?なんのためにここで切ってるの?マージはされているの?」ってことになったりするからです。
という訳でルールを決めていこうと思います。
ブランチモデルには有名なものでgit-flowとGitHub Flowというのがあります。
KNAPではgit-flowを採用しようと思いますので今回はgit-flowについて説明します。

git-flowで作成する6つのブランチ

git-flowでは6つのブランチを使って作業を進めます。
それぞれ役割があるので一つずつ説明していきます。

masterブランチ

masterブランチは基本的に公開されたデータをマージするためのブランチとして使います。
つまり、すでに公開されているもので公開データが欲しい時はmasterブランチからデータをもらえば言い訳です。逆に開発中のデータはmasterブランチにあげてはいけないのがgit-flowのルールです。Gitを使い始めの方はmasterブランチにあげていた方も多いとは思いますがgit-flowを採用するのであればこれからはmasterブランチにあげないようにしましょう。

developブランチ

developブランチは開発を進めるためのブランチです。ただし、複数人で作業していく場合全員がdevelopブランチのデータを直接作業してコミットし始めたら大変なことになります。なのでdevelopブランチは作業を行なったファイルを一つにまとめるためのブランチとして使います。

featureブランチ

featureブランチはdevelopブランチと同様に開発を進めるためのブランチですがこちらは実際に作業を行うためのブランチです。featureブランチは複数個できることが考えられるブランチなのでブランチ名を記入する時は「feature/〇〇」といった形でブランチを作りましょう。〇〇には開発を行う箇所について単語にすると良いでしょう。例えば、コンタクトページを作成する場合は「feature/contact」といった感じです。

releaseブランチ

releaseブランチはその名の通りリリース、つまり公開するときに使うブランチです。
例えば、公開前に画像を圧縮したり、cssやjsのコメントを削除したりなどを行うときに使うと良いでしょう。

hotfixブランチ

公開が完了した後に「ここのテキストが間違ってました。直してください。」ってことたまにあると思うんです。そういう時はhotfixブランチの出番です。
そういった公開後の修正やcssの崩れ、jsのバグ修正などの際に使うのがこのブランチです。

supportブランチ

supportブランチは旧バージョンをサポートするためのブランチです。せっかくのgit-flowの最後のブランチですがあまり使う機会はないと思うのでこのブランチの説明はこれで終わりです。

最後に

Git講座は今回で一旦お開きです。
本当はスタッシュとかの機能についても説明したほうがいいんでしょうがひとまずこれでSourcetreeを使って充分にgitを使えるだろうと思うの頑張ってみてください。

KNAPのGit講座(3) ブランチ操作とマージ


第三回はブランチ操作とマージについてです。
これは複数の人と同時に並行して作業を行うときに必要なことです。

ブランチとは

ブランチとは、並行して作業を進めるためにコミットの流れを分岐させたものです。
最初にある大元のブランチをmasterブランチと呼びます。

マージとは

マージとは、複数のブランチやコミットを合体させることです。

ブランチの作成

ブランチはコミットが一つもない状態からいきなり作ることはできないのでまずはなんでもいいので一度コミットしてから行うようにしてください。
では、ブランチの作成方法について説明していきます。
1. ブランチをクリックします。
2. 「新規ブランチ」に新しく作成するブランチ名を入力してください。
3. 新しいブランチの起点となる位置を選択してください。現在作業しているところからでよければ「作業コピーの親」を洗濯してください。それ以外の場合は「指定のコミット」を選択してください。
4. 最後にブランチを作成をクリックしたらブランチの出来上がりです。

ブランチの切り替え

一人で作業していても現在作業している内容とは違う内容の作業を行わなければならないことってあると思います。
そんな時は一度現在作業している分をコミットした上でブランチを切り替えることで現在作業している内容はそのままに全く異なる作業を行うことができます。
1. サイドバーにあるブランチをホバーした時に表示される「表示」をクルックしてください。
2. 切り替えたいブランチをダブルクリックして左側に黒い丸がついたら切り替え完了です。

マージの仕方

ブランチを作成して複数人で作業を行なった後、今度はその作業分をマージすることによって一つにまとめる必要があります。
1. まずはブランチを切り替えるんですが作業を行なったブランチではなく一つにまとめる方のブランチを選択します。
2. 作業を行なったブランチまたはコミットの上で右クリック
3. 「〇〇(作業を行なったブランチまたはコミット名が入ります。)を〇〇(一つにまとめる方のブランチ名が入ります。)にマージ」をクリックしてください。下に「現在の変更を〇〇にリベース」と書いてあると思いますが、リベースは行わないように注意してください。
4. OKをクリックすればマージの完了です。

ブランチの削除

マージを行なったもののブランチをそのままにしておくと後々どのブランチをマージしてどのブランチがまだマージされていないのかわかりづらくなっていきます。
なのでマージを済ませたブランチは基本的に削除するようにしましょう。
1. ブランチをクリックしてください。
2. 削除をクリックしてください。
3. 削除するブランチにチェックを付けてください。
4. OKをクリックしたらブランチの削除の完了です。

KNAPのGit講座(2) コミットとプッシュ


第二回はコミットとプッシュについて説明します。
これはクローンしたあとファイルを追加したり、クローンしたファイルに変更した後にする必要のあることです。

コミットとは

コミットとは、ファイルを追加したり、変更したりした記録を一つのグループにしてリポジトリに登録(バージョン管理)しておくことです。コミットされた変更内容そのもののことも指します。
要するに「このファイルを追加して、あのファイルはここを変更したよ」っていうメモをとっておいてくれる便利な機能です。

プッシュとは

プッシュとは、ローカルリポジトリに登録されたコミットをリモートリポジトリにも反映させてあげることです。

コミットとプッシュの仕方

1. まずはファイルを追加したり、変更したら左上にあるコミットをクリックします。
2. コミットしたいファイルにチェックを付けます。
3. 何を追加したのか何を変更したのかがわかるようにコメントを入力します。(このテキストをコミットメッセージといいます。)※このコメントをちゃんと書かないと後々「あの頃のデータに戻したい」となったときに探すのが大変になります。
4. コミットした後すぐにプッシュしていい場合はコメント入力欄の下にある「コミットをただちに〇〇にプッシュする」にチェックを入れてください。※プッシュ後だとコミットメッセージが修正できなかったりするの気をつけてください。
5. 最後に右下にあるコミットをクリックしたらコミットの完了です。
6. 「コミットをただちに〇〇にプッシュする」にチェックを入れていなかった場合は右上のプッシュをクリックして出てきたダイアログの左下にあるOKをクリックすればプッシュ完了です。

コミットを取り消したい時(プッシュしている場合はNG)

コミットした後で「あのファイルをコミットするの忘れてた」ってことがあると思います。
別にそのファイルだけ再度コミットすればいい話しではあるんですが、そのファイルを含めて一つのコミットとしておきたい場合もあるはずです。
そんな時は一度コミットを取り消して再度コミットし直す必要があります。
ではコミットを取り消し方を説明していきます。(プッシュをすでにしてしまっている場合はこの方法は使えないので注意してください。)

1. まずは取り消したいコミットの一つ前のコミットの上で右クリック
2. 「〇〇をこのコミットまで戻す」をクリック
3. モードをsoftにする
4. OKをクリックしたらコミットの取り消しの完了です。

直前のコミットメッセージの修正(プッシュしている場合はNG)

「コミットメッセージに誤字が。。直したい。。」ってことがあると思います。そんな時はコミットしたすぐ後でならなおずことができます。こちらもプッシュしてしまっている場合は使えません。

1. まずはコミットをクリックします。
2. コミットオプションから「直前のコミットを上書き」をクリックします。
3. コミットメッセージを書き換えてコミットを押したら修正完了です。

プッシュを取り消したい時

ここまでの説明で一度プッシュすると修正できないように感じるかと思いますが一応プッシュしていても修正できないことはないです。プッシュしたこと自体をなかったことにすれば言い訳ですから。ただ、リモートリポジトリは自分以外にも作業を行っている人がいることが前提のリポジトリです。もし、プッシュしたデータを他の人がすでに取り込んでいてその後でプッシュしたことがなかったことになってしまった場合、データを取り込んでしまった人は取り込んだはずのデータが消えてしまって訳のわからないことになってしまいます。Gitはそういったことが起こらないようにプッシュを取り消した場合はプッシュを取り消したという履歴が残ります。photoshopのヒストリーでも取り消したりするとその履歴が残りますよね。そんな感じです。
ではやり方を説明していきたいと思います。

1. まずはプッシュを取り消したいコミットの一つ前のコミットの上で右クリック
2. コミット適用前に戻すをクリックします。
3. OKをクリックします。
4. コミットメッセージの前に「revert」というのがついていれば完了です。※この「revert」というのが取り消したという履歴です。

Scroll to top