VisualStudioCodeでVMとファイルをSFTP同期

概要

  • VisualStudioCodeを使ってPHPをVMで開発する環境を整えたい

VisualStudioCodeの設定

  • 1.VSCodeにSFTP/FTPのプラグイン追加

  • 2.Shift + Comand + p を押し、SFTPで検索

    • 「SFTP:Config」をクリック

SFTPの設定ファイル

  • これだけの設定でいけました
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {
    "protocol": "sftp",
    "host": "192.168.33.10",
    "remotePath": "/home/vagrant/test",
    "username": "vagrant",
    "password": "pass",
    "uploadOnSave": true,
    "syncMode": "update",
    "downloadOnOpen": false
    }

参考

VisualStudioCodeからvagrantのVMに接続、編集

概要

  • VSCodeからvagrant,virtualbox上のソースを編集したい

  • まとめると

    • RemoteVSCodeというプラグインでVSCodeにリモートの設定をしてVMにssh接続

Vagrantの準備

  • vagrant をホストオンリー接続できるようにしておく

VSCodeの準備

  • 1.Remote VSCode を拡張機能としてインストール
  • 2.Command + , で User Settings を編集

    • 下記を{}の中に追加s
    • 1
      2
      3
      4
      5
      6
      //-------- Remote VSCode configuration --------
      // Port number to use for connection.
      "remote.port": 52698,

      // Launch the server on start up.
      "remote.onstartup": true
  • 3.F1キーを押す(macの場合、fn + F1)

    • 「Remote: Start server」を入力してサーバを起動
    • 左下に「Sarting serber」と表示される

ubuntuでの設定

  • 1.VSCodeのターミナルからssh接続

    • 1
      $ ssh -R 52698:127.0.0.1:52698 vagrant@192.168.33.10
  • 上記のコマンドの意味

    • $ ssh (SSH サーバのアドレス) -R (ローカルで待ち受けてるポート):(SSH サーバのアドレス):(SSH サーバで待ち受けるポート番号)
  • 2.rmateのインストール

    • 接続をリダイレクト先まで追い(L)、データを指定したパスに保存する(o)コマンド
    • すぐrmateコマンドを使えるようにPATHの通っているディレクトリを指定する
    • 1
      2
      3
      sudo curl -Lo /usr/local/bin/rmate https://raw.githubusercontent.com/textmate/rmate/master/bin/rmate

      sudo chmod a+x /usr/local/bin/rmate

rmateを使用して編集

  • 確認用にテキストファイルを作成

    • 1
      vi text.txt
  • 何か入力する

  • rmateでファイルを指定してVSCodeで開く

    • 1
      rmate test.txt
  • テキスト編集、保存

  • VM側でテキストを開いてみると編集内容が反映されている

参考

VM上のubuntu18.04でlaravel開発環境構築

概要

  • virtualbox上のubuntu18.04にlaravel開発環境を作る
  • hoomesteadというパッケージがあるらしいけどphp開発環境理解のためにも1から構築していこうと思います

準備

  • bento/ubuntu-18.04
  • virtualbox
  • vagrant

  • bento/ubuntu-18.04のvagrant boxでVM作成

  • Vagrantfileでprivate接続できるように修正
  • 1
    2
    /*以下の部分のコメントアウトを外す*/
    config.vm.network "private_network", ip: "192.168.33.10"

VM上のubuntu18.04

  • パッケージ更新
  • 1
    2
    $ suod apt update -y
    $ sudo apt upgrade -y

phpインストール

  • phpインストール
  • 1
    sudo apt install php7.0 -y

composerのインストール

  • 1
    curl -sS https://getcomposer.org/installer | php
  • curlしたディレクトリにcomposer.pharがあるのでパスが通っているディレクトリに移動させ、composerディレクトリに配置することで「composer」コマンドで動かせるようにする

  • 1
    sudo mv composer.phar /usr/local/bin/composer
  • 動くか確認

  • 1
    2
    $ composer -V
    $ Composer version 1.6.5 2018-05-04 11:44:59

laravelのインストール

  • composerでglobalにインストール
    • 「Changed current directory to /home/vagrant/.composer」 ← ここがcomposerのglobal require 時のディレクトリっぽい
  • 1
    composer global require "laravel/installer"
    • 怒られます
    • 1
      You can also run `php --ini` inside terminal to see which files are used by PHP in CLI mode.
  • 必要なモジュールをインストールする

  • 1
    sudo apt install curl php7.2-cli php7.2-zip php7.2-mbstring php7.2-xml
  • 再度 global require

  • インストールされたか見てみる

    • 1
      2
      $ ls /home/vagrant/.composer/vendor
      autoload.php bin composer guzzlehttp laravel psr symfony
    • インストールされてる。symfonyはどの段階で入ってるんでしょうか…(要調査)

laravelコマンドでプロジェクト作成

  • laravelがインストールされた場所にパスを通す
  • .bashrcを編集
  • 1
    2
    3
    4
    5
    $ vi ~/.bashrc

    /*ファイルの一番下に下記を追加(=の前後にスペースを空けるとエラーになる)*/
    /*rootユーザ以外の場合は$HOME/.config/composer/vendor/bin*/
    PATH=$PATH:$HOME/composer/vendor/bin
  • 変更を反映

  • 1
    $ source .bashrc
  • プロジェクト作成

    • 1
      $ laravel new test

laravelプロジェクトを起動してアクセス

失敗した例

  • 作成したプロジェクトディレクトリで描きコマンド実行
  • 1
    $ php artisan serve
    • ゲストOS(ubuntu)内で 127.0.0.1:8000 でプロジェクトが立ち上がる
    • ホスト側で プライベートアドレス:8000 でアクセスできるかと思ったらできない…

nginxで試してみる

  • nginxを起動するとプライベートアドレスでアクセスできる
  • artisan serve する前に何かが足りてない可能性

laravelをプライベートアドレスでアクセスできるようにする方法

次にやる

参考

Vagrant box作り方とVagrantfileの和訳

概要

  • 久々に使用したのでメモ
  • 環境
    • mac osx sierra

ubuntu18.04のvagrant box 追加

  • このセクションではネットから既存の vagrant box をインストールします
  • bento/ubuntu-18.04 Vagrant box
  • 1
    vagrant box add bento/ubuntu-18.04 https://app.vagrantup.com/bento/boxes/ubuntu-18.04
    • 複数のプロバイダでうごくよ、みたいなことを言われる
      • virtualboxいがいにもParallels DesktopというMAC用仮想化ソフトがあるらしい(今度触ってみる)
    • 1
      2
      3
      4
      5
      6
      This box can work with multiple providers! The providers that it
      can work with are listed below. Please review the list and choose
      the provider you will be working with.

      1) parallels
      2) virtualbox
    • VirtualBoxを使っている場合は「2」を入力してエンター、これでboxが追加される

ubuntu18.04のvagrant boxを作成

  • このセクションでは自前にダウンロードしてVirtualBoxで作っていたVMをvagrantbox化して見ます
  • Vagrant box 作成手順(CentOS 6.7) ←この記事の最後の方を参考にしました。特にここでやっているようなOSの最適化みたいなことはせずに取り敢えず書き出しました。
  • virtualboxで作成したvmの名前を指定すれば作成できるっぽい
  • 1
    vagrant package --base ubuntu18.04 --output ubuntu18.0
  • エラーになる(vargantのプラグインをアップデートしろ的な意味?)

    • 1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      The plugins failed to initialize correctly. This may be due to manual
      modifications made within the Vagrant home directory. Vagrant can
      attempt to automatically correct this issue by running:

      vagrant plugin repair

      If Vagrant was recently updated, this error may be due to incompatible
      versions of dependencies. To fix this problem please remove and re-install
      all plugins. Vagrant can attempt to do this automatically by running:

      vagrant plugin expunge --reinstall

      Or you may want to try updating the installed plugins to their latest
      versions:

      vagrant plugin update

      Error message given during initialization: Unable to resolve dependency: user requested 'facter (> 0)'
  • 指示通りコマンド入力

    • 1
      2
      3
      4
      5
      6
      7
      8
      1.
      $ vagrant plugin repair
      /* ↓成功 */
      Installed plugins successfully repaired!
      2.
      $ vagrant plugin expunge --reinstall
      3.
      $ vagrant plugin update
  • vagrantbox 書き出し

    • 1
      $ vagrant package --base ubuntu18.04 --output ubuntu18.0
  • 10分くらいまつ…

  • コマンド実行したディレクトリに指定した名前「ubuntu18.04」で作成されている
  • 自分で作成した vagrant box を追加

    • 1
      $ vagrant box add -name ubuntu18.04 ./ubuntu18.04
  • 追加は30秒ぐらいで終わる

    • 1
      box: Successfully added box 'ubuntu18.04' (v0) for 'virtualbox'!

追加したboxからvagrantfile作成

  • 追加されているboxをリスト表示して確認する

    • 1
      2
      3
      4
      5
      $ vagrant box list

      bento/ubuntu-18.04 (virtualbox, 201806.08.0)/*←bentoから落としてきたbox*/
      ubuntu16.04 (virtualbox, 0)/*←昔についかしてた16.04のbox*/
      ubuntu18.04 (virtualbox, 0)/*←自作box*/
  • bentoのboxからvagrantfileを作成

    • 1
      vagrant init bento/ubuntu-18.04
  • Vagrantifileが作成される

    • 以下コメントを和訳したVagrantfile
    • 1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      # -*- mode: ruby -*-
      # vi: set ft=ruby :

      # すべてのVagrant設定は以下で行う. Vagrant.configureの "2"
      # コンフィグレーションのバージョンを設定する(w古いスタイルは後方互換性)
      # やり方がわからない場合触らないこと
      Vagrant.configure("2") do |config|
      # 一般的な設定オプションについては、以下で説明しています
      # 完全なリファレンスについては、以下のオンラインドキュメントを参照してください
      # https://docs.vagrantup.com.

      # 全てのvagrantの開発環境には vagrant box が必要です
      # boxes at https://vagrantcloud.com/search.
      config.vm.box = "bento/ubuntu-18.04"

      # vagrant boxの更新を無効にしています。 If you disable this, then
      # ユーザが vagrant box outdated 実行時のみ更新がチェックされます
      # これはお勧めしません(trueにしとけということ?vagrant box outdatedをやめろということ?)
      # config.vm.box_check_update = false

      # ホストの8080ポートにゲストの80(ローカルホスト)をポートフォワーディングしてる設定
      # config.vm.network "forwarded_port", guest: 80, host: 8080

      # 127.0.0.1からのアクセスは無効にしている設定
      # config.vm.network "forwarded_port", guest: 80, host: 8080, host_ip: "127.0.0.1"

      # ホストからのみアクセスできるポートを設定
      # config.vm.network "private_network", ip: "192.168.33.10"

      # ブリッジネットワークする設定
      # ゲストは物理的に存在するデバイスとして表示される
      # config.vm.network "public_network"

      # 一つ目の引数のホストのフォルダを二つ目の引数のゲストのフォルダと共有する
      # config.vm.synced_folder "../data", "/vagrant_data"

      # プロバイダの固有のオプション(?)あとで調べます
      # Example for VirtualBox:
      #
      # config.vm.provider "virtualbox" do |vb|
      # # Display the VirtualBox GUI when booting the machine
      # vb.gui = true
      #
      # # Customize the amount of memory on the VM:
      # vb.memory = "1024"
      # end
      #
      # View the documentation for the provider you are using for more
      # information on available options.

      # シェルを実行できる
      # Puppet, Chef, Ansible, Salt, Docker も可能(?)
      # 詳細はドキュメントをみること
      # Dockerファイルの記述とかもできるということでしょうか
      # config.vm.provision "shell", inline: <<-SHELL
      # apt-get update
      # apt-get install -y apache2
      # SHELL
      end

追記

  • Docker Provisioner
  • 公式サイト見たらconfig.vm.provisionでDocker imageをbuildできるみたいです。docker
  • The Vagrant Docker provisioner can automatically install Docker, pull Docker containers, and configure certain containers to run on boot
    「自動的にDockerをインストールし、Dockerコンテナをプルし、起動時に実行する特定のコンテナを設定できます」
  • Dockerfileをかけるんじゃなくて、VMに自動でDocker環境を作って実行してくれるみたいです

VagrantでVMを起動、VMにアクセス

  • Vagrantfileのあるフォルダで以下のコマンド

    • 1
      $ vagrant up
  • その後ssh接続

    • 1
      2
      3
      4
      $ vagrant ssh

      /*アクセス成功*/
      vagrant@vagrant:~$

参考

bashが読み込む各ファイル

簡単な概要

  • bash
    • Unixシェルかつコマンド言語
  • Unixシェル
    • Unix系システムにおけるコマンドラインシェル
  • shell
    • OSのプログラムを実行するためのソフトウェア
  • コマンド言語
    • コンピュータの処理をコントロールするための言語

各.bash〜ファイルの順序

  • /etc/profile
    • 必須
    • 全ユーザーに適用
    • ユーザ単位で編集するものではない
  • ~/.bash_profile
    • 必須でない
    • ログイン時に実行
    • ユーザ単位で編集
  • ~/.bash_login
    • .bash_profile がない時に読み込まれる
    • ログイン時に実行
    • ユーザ単位で編集
  • ~/.profile
    • 必須でない
    • .bash_profile、.bash_login がない時に読み込まれる
    • ユーザ単位で編集
  • ~/.bashrc
    • 必須でない
    • bash を起動する時に実行される
  • ~/.bash_logout
    • 必須でない
    • ログアウト時に実行される

linuxコマンド

  • export

    • 環境変数を定義するコマンド
    • -n 指定した変数の削除
    • -p エクスポートされている環境変数のリスト表示
    • 1
      export PATH=~/hoge/hoge:$PATH
  • source

    • シェルの設定を反映させる
    • 1
      source ~/.bashrc

参考

yarnのglobalにパスを通すのが面倒くさかった

yarnのglobalにパスを通したい

  • yarn global add したmoduleがコマンドで呼べなかった
  • ついでに npm install -g でmoduleがインストールされるディレクトリも探す

globalディレクトリの場所

yarn

  • yarn global dir で出てくるパスに通せばいいと思ってたけど違った

    • 1
      2
      yarn global dir で出てくるパス
      /Users/ユーザ名/.config/yarn/global
  • yarn global dir で出てくるパス + /node_modules/.binが必要だった…

    • 1
      2
      yarn global dir で出てくるパス + /node_modules/.bin
      /Users/ユーザ名/.config/yarn/global/node_modules/.bin
  • 以下で解決した

  • 1
    export PATH=/Users/ユーザ名/.config/yarn/global/node_modules/.bin:$PATH

npm

  • 以下で出てくる
  • 1
    npm root -g
  • 以下にあった

  • 1
    /usr/local/lib/node_modules

参考にした記事

  • yarnを入れたら大変だった話
    • 上の記事曰く「中に.binってフォルダがあって、その中にシンボリックリンクが置いてある」
  • yarn公式サイトの解説
    • 「yarn global bin コマンドは、インストールした実行可能ファイルへのシンボリックリンクを Yarn が格納する場所を表示」
  • yarn global bin で出てくるパスのディレクトリを見にいってもシンボリックリンクらしきものは見当たらなかったんですが…

    • 1
      2
      yarn global bin で出てくるパス
      /usr/local/bin
  • とりあえず上のセクションの方法で解決したけどモヤみが深いので暇な時に調べようと思います。あとシェルをちゃんと勉強しようと思いました

人気PHPフレームワークlaravelのメリット・デメリットとざっくり概要

人気PHPフレームワークlaravelのメリット・デメリットとざっくり概要

  • 2018年現在phpフレームワークの中で最も人気のあるLaravelの概要とメリット・デメリットをユースケース等から調べました

ウェブ職人のためのPHPフレームワーク

  • laravel公式
  • 5.6ドキュメント
  • 5.7LTSドキュメント
  • wikipedia

  • MVCのWebアプリケーション開発用オープンソースフレームワーク

  • PHP製
    • 最新の5.6系の対応PHPはバージョン 7.1.3以上
  • マイクロソフトの.NETの開発に関わっていたTaylor Otwellが開発
  • 2011年6月 ~
  • MIT License
    • マサチューセッツ工科大学を起源とするソフトウェアライセンス
  • 『ナルニア国物語』に登場するナルニア国の王都、ケア・パラベルにちなむ
  • 2018年現在、もっとも検索されているPHPフレームワーク
  • Github、PHPフレームワークでスター数1位

ユースケースとメリット・デメリット

ユースケース

主な導入理由(メリット)

  • コミュニティが活発(2,4)
  • 設計思想がモダン(2)
  • 長期的に使われそう(2)
  • 多機能(2,3,4,5)
  • 少人数でスピードが出せる(2,3)
  • 多くの人に支持を得ている(1,2)
  • ドキュメントが充実している(4)

デメリット

  • Laravelの開発で感じたメリットとデメリットをまとめてみた
  • Laravelを使うべきか
  • 規約が少ない分利用者が気をつけなければいけない
  • Taylor Otwell氏の個人プロジェクトである
    • 進化が早すぎる
    • 企業が開発してるものの方が大規模開発等では採用されやすい?
  • 情報過多
  • 「便利」で高機能である代わりに、複雑
    • フレームワーク初心者にはオススメできない
    • 初学者がメインの機能以外(ElixirやHomestead)で苦労して、利用を諦めるケースがある
  • 実行スピードは他のフレームワークより遅い

所感

  • 機能や利便性を理由にあげている例が多く少人数で開発スピードが求められる場合には適しているらしい。その分利用者が気をつけなければいけないことも多く、初学者にはハードルになっているっぽい
  • 実際少人数の業務システム開発での導入が多い
  • 2011年に登場して2014年あたりからよく使われてるっぽい
    • 開発も活発で今後も使用される見込みが高い。その分使用しているバージョンが早くに保証されなくなるリスクもある?

次回

  • インストール方法、使用方法

その他参考

Redux基礎

redux基礎

  • 登場経緯 → SPAが複雑になってきてstate管理が辛くなってきた
  • state(状態)を管理するための手法(のフレームワーク)
  • Reduxは3原則に則って状態変化の流れを制限する
    • 1 Single source of truth
    • 2 State is read-only
    • 3 Mutations are written as pure functions

三原則

Single source of truth
  • 一つのソースが真実(直訳)
  • アプリの状態は一つのオブジェクトで作られ、一つのストアに保存
State is read only
  • 状態(STATE)の変更はACTIONを起こした時のみ
  • 変更は順番に行う
Mutations are written as pure functions
  • 変更を全てReducer(つまり純粋な関数)で書くこと

Action

  • イベントとそのイベントで利用するデータを定義
  • typeは必須プロパティ
    • Actionの中身(データ)はできるだけ小さい方が良い
    • データそのものでなくキーを持たせるなど
    • 1
      2
      3
      4
      5
      const ADD_TODO = 'ADD_TODO';
      {
      type: ADD_TODO,
      text: 5
      }

Action Creators

  • Actionを作ってreturnする関数
  • 1
    2
    3
    4
    5
    6
    addTodo = (text) => {
    return {
    type: ADD_TODO,
    text
    }
    }

Stateの型の設計方法

  • UIの状態とデータはできるだけ分ける
  • Todoアプリの場合、Stateで保持るもの
    • 表示、非表示するかどうか
    • todoリスト
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    {
    visibilityFilter: 'SHOW_ALL',
    todos: [
    {
    text: 'hoge',
    completed: true,
    },
    {
    text: 'fuga',
    completed: false,
    }
    ]
    }
  • アプリのStateはDBのように考える

  • できるだけネストせず分かりやすくして、オブジェクトにIDをkeyとしてもたせる
  • 他のエンティティ(テーブル、データのまとまり)からはkeyを指定してデータを参照

Reducer

  • 変更前の状態に対してアクションを起こして、変更後の状態を返す
  • 純粋関数
    • 引数を変更不可
    • APIやルーティングなど利用して副作用を起こさない
    • 純粋関数しか呼ばない
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    /*actionファイルで変数をexportして他ファイルでimportできるようにしておくっぽい*/
    import {
    ADD_TODO,
    TOGGLE_TODO,
    SET_VISIBILITY_FILTER,
    VIsibilityFilters,
    } from './actions';

    /*Stateの初期値を作成(Reduxが最初にStateをundefinedとしてReducerを呼ぶので)*/
    const initialState = {
    visibilityFIlter: VisibilityFilters.SHOW_ALL,
    todos: []
    }

    /*action creater*/
    todoApp = (state = initialState, actino) => {
    switch (action.type) {
    case SET_VISIBLITY_FILTER:
    /*新しいStateとしてオブジェクトの参照を切って作成*/
    return Object.assign({}, state, {
    visibilityFilter: action.filter
    }
    case ADD_TODO:
    return Object.assign({}, state, {
    /*既存の配列を全部展開して末尾に新しい要素を追加した配列*/
    todos: [
    ...state.todos,
    {
    text: action.text,
    completed: false
    }
    ]
    })
    case TOGGLE_TODO:
    return Object.assign({}, state, {
    todos: state.todos.map((todo, index) => {
    /*action.indexと同じindexのプロパティだけ参照切りしてcompletedの値を上書きしたプロパティに変更*/
    if (index === action.index) {
    return Object.assign({}, todo, {
    completed: !todo.completed
    })
    }
    return todo;
    })
    default:
    return state;
    }
    }
  • Object.assignの挙動

    • 列挙可能な値をターゲットプロパティにコピーする
    • 1
      2
      3
      4
      5
      // object1に追加される
      const object1 = { a: 1, b: 1 };
      Object.assign(object1,{ c: 3 });
      //ディープコピー(参照切り)される。同じプロパティ(キー)があれば上書きされる
      Object.assign({},object1,{ c: 4 });

Reducer Composition

  • 上の関数を各stateごとの関数に分割できる
  • 分割したものをreducer composition(reducer構成要素?合成?)という
  • 共通するオブジェクトを返すものは関数を分割して見やすく?する
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    //上記 action creater から分割したtodoを操作する関数
    todo = (state = [], action) {
    switch (action.type) {
    case ADD_TODO:
    return [
    ...state,
    {
    text: action.text,
    completed: false
    }
    ]
    case TOGGLE_TODO:
    return state.map((todo, index) => {
    if(index === action.index) {
    return Object.assign({}, todo, {
    completed: !todo.completed
    })
    }
    return state
    })
    default:
    return state
    }
    }

    //上記 action creater から分割したtodoを操作する関数
    visibilityFilter = (state = SHOW_ALL, action) => {
    switch(action.type) {
    case SET_VISIBILITY_FILTER:
    return action.filter;
    return state;
    }
    default:
    return state;
    }

    //action creater
    //stateの初期値は、各action composition(?)からreturnされるので空のオブジェクトでいい
    //新しいオブジェクトをreturnするので参照切りしなくていい
    todoApp = (state = {}, action) => {
    return {
    visiblityFilter: visibilityFilter(state.visibilityFilter, action)
    todos: todos(state.todos, action)
    }
    }
    • reduxモジュールにあるcombineReducers()を使用すると上記のtodoAppと同じ処理を実行できる
    • combineReducerのコード
      • 「Reducerをループさせながら各Reducerを実行した結果を集約」
    • 1
      2
      3
      4
      5
      6
      import { combineReducer } from 'redux';

      const todoApp = combineReducers({
      visibilityFilter,
      todos
      })

Store

  • Storeは常に一つ
  • アプリの状態を一つのオブジェクトとして保持、管理する
  • ActionとReducerを繋げる役割
  • getState()でstateを参照
  • dispatch()でstateの更新
  • subscribe(listener)でリスナを登録

    • 返される関数で登録解除
  • 作成方法

  • 1
    2
    3
    4
    import { createStore } from 'redux';
    import todoApp from './reducers';

    let store = createStore(todoApp)

参考

todo

SPA について改めてまとめる

はじめに

  • はっきり説明できるレベルで定義を理解しておこうと思った為概要をまとめる

目次

  • SPAとは
    • メリット
    • 課題
  • まとめ
  • 参考

SPAとは

  • single-page application
  • 単一のWebページのみから構成する
    • デスクトップアプリケーションのようなユーザ体験を提供
  • 必要なコード(HTML、JavaScript、CSS)の読み込みは
    1. 最初にまとめて行う
    2. ユーザの操作などに応じて動的にサーバと通信し、必要なものだけ読み込みを行う
      • データの取得方法としてはAjax、Websocketなどがある
  • JavaScriptでDOMを操作しページを切り替える

メリット

  • Webは、クロスプラットフォーム
  • デプロイが簡単

課題

  • ブラウザがもともと考慮していたステートレスなページ遷移モデルとは大きく異なる
    • HTTPがもともとステートレスな為?
    • AngularJS、Ember.js、Meteor.js、Vue.js、ReactなどのJavaScriptフレームワークはSPAの原則を採用
  • サーバが生成したHTMLがSPAの内容と大きく異なるとみなされると、サイトにペナルティが課せられる
    • wikiに書いてるレベルなのに初耳でした
  • ブラウザの「戻る」「進む」ボタンによるページの履歴ナビゲーションと相性が悪い
    • 従来のSPAにおける解決策
      • ブラウザのURLのフラグメント識別子(ハッシュ)を画面状態に応じて変更すること。はJavaScriptによって実現でき、URL履歴イベントをブラウザ内に構築。URLハッシュに含まれる情報から同じ画面状態を復元できる限り、期待される戻るボタンの動作は保持される
    • HTML5での解決
      • ブラウザの履歴操作の機能を提供する HTML5 History API が導入
        • ちょっと前の案件で使ったことありますが、履歴に任意のURLをjavascriptで追加すると言うものでした
        • HTMLのAPIについてそのうちまとめたいです
  • Google Analyticsなどの解析ツールは、最初のロードによって開始。ページの読み込みに依存
    • リソースの更新時にトラッカーを更新する関数を明示的に呼び出すことによって対処
    • HTML5 History APIを使うとSPAにページの読み込みイベントを追加でき、解析に有用
    • フレームワークによっては主要なアナリティクスサービスに対応するオープンソースの統合解析ツールを提供
    • この辺も初耳でした
  • 最初の読み込みの遅延
    • ビューをレンダリングする前にフレームワークとアプリケーションコードを読み込まなければならないため
    • キャッシングや遅延ロードモジュール
      • パフォーマンスと待ち時間の問題は、「いま払うか、あとで払うか」というトレードオフ
  • 中規模以上でSPAを用いた開発をするとなると、モジュール設計からかなりの注意を持って設計しなくてはいけないらしい

ネイティブアプリと比べて

  • 一般的にGoogle検索よりiTunesストアやAndroidアプリ検索したほうが検索数は少なく、よりユーザにリーチできる
  • モバイル上のブラウザで定期的にアクセスするページをブックマークしていたり
    定期的にアクセスしたりするユーザーは、アプリを日常的に使うシーケンスより
    圧倒的に少ない

まとめ

  • 最近ずっとPCで利用するWEBアプリ開発にしか携わっておらずSPAがそもそもスマホ用のアプリを開発する為という文脈で語られることを再認識しました。ネイティブアプリの概要も把握しておこうと思います。

参考

Typescript 概要

きっかけ

  • Node.js における設計ミス By Ryan Dahl←この翻訳・解説記事を読んでnode開発者が好きだと言うTypescriptに興味をもちました。逆になんで今まで触れてこなかったかと言うとaltJSの将来性があるのか、ちょっとよくわからずに食わず嫌いしてたからです。
  • もう一つの理由はjsメインで案件を探したときに、TypeScriptを使ってるところが多かったからです。静的型付けができるぐらいの知識しかなかったですが、それ以外のメリットもあってのことなんでしょうか。その辺も調べられたらと思います。

目次

  • Typescript概要
  • ユースケース
  • 参考サイトまとめ

Typescript概要

  • マイクロソフトによって開発されメンテナンスされているオープンソースの言語
    • マイクロソフトやその外部の顧客たちの間で、JavaScriptで大規模アプリケーション開発をする上での欠点を補うために作られた
    • 2012年10月に初めて外部に公開
    • ECMAScript言語標準が将来的にクラスベースオブジェクト指向をサポートする提案があることを踏まえ、その提案に基づく形で開発(静的型付けはTypescript独自)
  • Javascriptに省略可能な静的型付けクラスベースオブジェクト思考を加えたJavascriptのスーパーセット
    • スーパーセット: 部分集合:包含関係があること
  • クライアントサイドでもサーバサイドでも使える
  • 既存のJavaScriptプログラムは、全て有効なTypeScriptプログラムになる
    • jsのスーパーセットだから
  • 既存のJavaScriptライブラリに型情報を付与して利用可能

ユースケース

  • TypeScriptを使った方がいいケースとは?の簡単なまとめ+私見です
  • ソースコードが膨大である場合
    • 特にSPAの場合
    • 「誰かが変更したコードが他の人のコードを破損させてしまう可能性があるなら、何らかの安全機構を持つ方がいい」
    • 「ソースコードが巨大でなければ、型アノテーションを追加してコードを長くする意味はおそらくない」
    • 「コードサイズの増加はおよそ30パーセントほど」
  • 強い型付き言語のバックグラウンドを持つメンバが多い場合
  • Babelの代替(ES5以降のjsの代替?)
    • ESにない機能を使えるかららしい。
  • ライブラリあるいはフレームワークによる推進
    • Angular2など

使わない方がいい場合

  • 追加のトランスパイルにかかる負荷
    • 全てのブラウザがES6をサポートしたら…と言う事らしい
    • 私見:JSX等をコンパイルするときは特に問題にならないんじゃないでしょうか
  • パフォーマンス
    • ミリ秒が問題になる場合、トランスパイラが腕の良いプログラマの最適化レベルを上回ることはない
    • 私見:高速化が超必須な時と言う事でしょう
  • 迅速性(柔軟性?)
    • JSはより機敏で融通がきく。内容を簡単に変更することも可能
    • 例えるならTypeScriptはWindowsで、JavaScriptはLinuxのようなもの

まとめ

  • 型付けによるコードの壊れにくさ、バグの回避にメリットを感じることが多いようです。元々静的型付け言語のバックボーンがある人は触りやすいようです
  • マイクロソフトが開発しているというのも採用されやすさに繋がっていそう。サーバサイドで使用する場合はより静的型付けの重要性も増しそうです。次は実際の記述をやって行こうと思います

参考サイトまとめ