webstorm standard js成形

https://standardjs.com/webstorm.html

これの local install でeslint を入れるパターンで、エラーが出たら fix this file で直すのがいいと思われる。

さらに組み合わせで js の standard スタイルを webstorm のフォーマッティングに適応しておくと formatting で大体なおる。ただし大体しかなおらない。(例えば改行は消さないし、コンポーネントの後ろにはスペースが入ってしまう。これはeslintのほうでなおす。)

Git の使い方 2

Git Config

  • git config が git の設定ファイルに関するCLIコマンド
  • git config –list で現在の設定一覧を確認できる
  • .git/config が設定用ファイル
  • git config用のファイルは三箇所にある。階層の上から、system global local それぞれ –local とオプションを指定することで参照可能。
  • configファイルは、階層の一番深いところにある項目が有効になる。例えばGlobalとlocalに名前nameについての記述があれば、localが優先される
  • macであれば、localのconfigファイルを、$ open ./.git/configで開いて直接編集してもよい
  • $ git config –local user.name ローカルのユーザーネームを確認。なければスルーされる。
  • $ git config –local user.mail ローカルのEmailを確認
  • $ git config –local user.name nakanishi で、ローカルのユーザーネームを設定する。

commit 関係

  • git add ファイル名 でステージに上げる
  • git add –all(or -A) でだいたい全ての変更をステージにあげることができるようだ
  • git commit でコミット。
  • git commit -m “テキスト” で直接コミットメッセージを書くこともできる
  • git commit で開いた場合は、エディターのvimが開く。(macの初期設定の場合。エディターは変更可能)
  • http://archiva.jp/web/tool/vim_basic.html このあたりを参考にvimを扱う。
  • i でインサートモードになり、テキストを入力できる。
  • escキーを押して、モード選択に行き、:wqで保存して終了。:qで保存せずに終了。
  • が、面倒であればgit commit -a -m “メッセージ” で変更全てをコミット可能。

削除

  • git rm ファイル名は、ファイルを作業ディレクトリから削除し、削除したという情報をステージに上げる。
  • 単にステージングから下ろすだけで、ファイルを削除しない場合は、git rm –cached ファイル名 (これが特に便利なのは、.gitignore ファイルに書き足すのを忘れたために巨大なログファイルや大量の .a ファイルがステージされてしまったなどというときです。 とのこと)
  • すでにステージに上がっているファイルを作業ディレクトリからも削除するためにはgit rm -f 。(まだスナップショットに記録されていないファイルを誤って削除してしまうと Git で復旧することができなくなってしまうので、それを防ぐための安全装置です。とのこと)

ファイル名の変更

  • git mv 旧ファイル名 新ファイル名
  • これはmoveコマンド。移動用のコマンドだが、ファイル名を変えれば、ファイル名変更用に使える(UNIXコマンドも同様)

コミット履歴log関係

git log で履歴の表示。様々オプションあり。

$ git config --global alias.graph "log --graph --date-order --all --pretty=format:'%h %Cred%d %Cgreen%ad %Cblue%cn %Creset%s' --date=short"

これで git graph でうまいこと表示される。これはaliasを指定している。 git graph というコマンドで”log…”が実行されるように設定している。

ブランチ関係

  • git branch 現在のブランチ状況の確認。*がついているほうがHead。
  • git branch 新ブランチ名    新しいブランチを作成する。
  • git checkout ブランチ名 ブランチを移動する。

 

React入門メモ

前身:XHP→Facebookが開発。PHPのフレームワークをJSに移植したもの。そのため「毎回ページをレンダリングし直す 」という特徴がある。

MVCのうち、Vのみを担当する。

stateの変更→render関数→仮想ページ→最終的なDOMの更新

JSX

Reactのコンポーネント内でマークアップ言語を記述するためのシンタックス。最終的には完全なJSにトランスコンパイルされる。

利点はほとんどHTMLシンタックスと同じなので、他のUIやマークアップエンジニアが学習しやすく、プロジェクトのリソースを確保しやすい。

“React入門メモ” の続きを読む

picture要素、picturefillについて

<picture>
   <source media="(min-width: 600px)" srcset="images/demo-over600.png">
   <img src="images/demo-under600.png" alt="超え" />
</picture>

さしあたってこれでCDNは読み込める。

<script>
   // Picture element HTML5 shiv
   document.createElement( "picture" );
</script>
<script src="https://cdn.rawgit.com/scottjehl/picturefill/3.0.2/dist/picturefill.min.js" async></script>

browserifyでモジュールを合体させる場合には、大本となるapp.jsの冒頭で

import picturefill from "picturefill";
picturefill();

すればOK。読み込んだnpmを実行している。

キャプションをつける

<figure>
  <picture class="concept-image">
    <source media="(min-width: 600px)" srcset="img.jpg">
    <img src="smallimage.jpg" alt="" />
  </picture>
  <figcaption>caption</figcaption>
</figure>