Reactでnpm startがうまくいかない時にやったこと

ReactとReduxでWebアプリを作るための前段階としてとりあえずこちらのチュートリアルをやってみようとしたのだが、途中でnpm startを実行したところエラーが出てにっちもさっちもいかない状況になってしまった。

こんな感じ。

package.jsonの中身を確認して、

“scripts”: {
“start”: “react-scripts start”,

が記述されていることも確認したし、ネットで調べて見つけたpackage-lock.jsonとnode_modulesを消してnpm installを再実行する方法を試してもうまくいかず、nodeとnpmを再インストールしてもダメで困り果てていたが、create-react-appを再インストールして見たら、なんとうまく行った!

チュートリアルをやってみて作ったTodoアプリおよびこれからやってみたいこと

Angular入門その1

JavaScriptのフレームワークの1つ、Angular。今の所は勉強中といったところですが、これから自己学習を兼ねて何回かに分けてAngularについて投稿していこうと思います。
使い方的にはVue.jsと似ているところもあるようですが、AngularはTypeScript(JavaScriptをわかりやすく改良したもので、これをコンパイルするとJavaScriptになる)を使うことが推奨されているので、それについても別途記事を書こうかと。ちなみに、もともとAngularJSと呼ばれていたものが、JavaScriptでなくTypeScriptが推奨されるようになってからJSが外れてAngularと呼ばれるようになったようです(なので、上でJavaScriptのフレームワークと書いていますが、フロントエンドのフレームワークといった方が正確なのかもしれないです)。
なお、Vue.jsの入門記事は その1 その2 その3 (近いうちにこちらに移転します)

1. 環境構築
Angularは、一般的には「Angular CLI」というコマンドラインツールを使って環境構築することが多いようです。流れとしては、ざっとこんな感じです。
i) Node.jsをインストール
とりあえず、Macなら

$ brew install nodebrew

でOK。Homebrewが入ってなければそれを入れるのが先だけど。
WindowsならNode.js公式ページからインストーラを落としてそれでインストールすればいいかと。

ii) TypeScriptをインストール

$ npm install -g typescript

Node.jsインストールでnpmも使えるようになっているはずなので、npmを使ってインストールします。もしかしたらsudoでやる必要があるかも。

iii) Angular CLIをインストール

$ npm install -g @angular/cli

こちらも、同様にnpmを使ってインストールします。これで、ngコマンドでAngularのコマンドラインツールを使えるようになります。

iv) プロジェクトを作成
例えば、AngularTest1という名前のプロジェクトを作成するとします。

$ ng new AngularTest1

これで、こんな感じのソースコードができます。
ここからさらに

$ ng serve --open

で、ローカルにサーバーが立ち上がり、こんな感じの画面が出てきます。

ただ、他のサイトとかだと
「Welcome to app!」
と出て、下に大きなAngularのアイコンが表示されてるのを見たけど、バージョンが違うのかな?もしくはどっかで操作を誤ったか(汗)

2.ソースの中身の簡単な解説

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>AngularTest1</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}
<h1>
  {{title}}
</h1>

一番上のindex.htmlにapp-rootというものがありますが、これはコンポーネントといって、Vue.jsでもありましたが、1つの部品のようなものにするものです。
main.tsでapp/app.module.tsが呼ばれ、app/app.module.tsでapp/app.component.tsが呼ばれ、app/app.component.tsで実際のコンポーネントを定義するという流れになります。
なので、app/app.component.tsのtitleを変えれば、表示される文字列も変わってくることになります。

ここまでざっと書いて見たけど、次回はもう少し詳しく説明しようと思います。

LaravelとVue.jsで多言語対応を行う

今回は、LaravelとVue.jsを用いたプロジェクトで多言語対応を行うやり方を紹介します。
まず、resources/langに対応する言語のjsonファイルを置きます。とりあえず、日本語と英語を想定してja.json,en.jsonとします。

ja.json

{
    "こんにちは" : "こんにちは",
    "ありがとう" : "ありがとう",
    "さようなら" : "さようなら"
}

en.json

{
    "こんにちは" : "Hello",
    "ありがとう" : "Thank you",
    "さようなら" : "Good bye"
}

次に、Laravelのbladeで表示する方法です。

index.blade.php

<span>
    {{ __("こんにちは") }}
</span>

<span>
    @lang("ありがとう")
</span>

1つ目の方法は__ヘルパ関数を使用する方法です。翻訳文字列のキーを翻訳したものに変換するヘルパ関数です(Laravel標準のヘルパ関数なのでbladeだけでなく、モデルやコントローラでも使えます)。これで変換した文字列をMustache記法でechoします。
もう1つの方法はbladeの@langディレクティブを用いる方法です。このように2通りの書き方ができますが、どちらかに統一したほうがわかりやすいかもです。

次に、Vue.jsでの多言語対応の方法です。
vue-i18nというVue.jsのプラグインを使います。vue-i18nについての詳しい説明はこことかここを読んで下さい。
まず、

npm install vue-i18n

でvue-i18nをインストールします。
次に、こんな感じでvue-i18nをjs側で読み込みます。

main.js

window.Vue = require('vue');

import VueI18n from 'vue-i18n';
Vue.use(VueI18n);

// 言語の設定
Vue.use(VueI18n);
const i18n = new VueI18n({
    locale: locale,
    messages: {
        ja : require('../../lang/ja.json'),
        en : require('../../lang/en.json')
    }
});

import MainComponent from './components/MainComponent.vue';

const app = new Vue({
    i18n: i18n,
    components: {
        MainComponent
    }
});

MainComponent.vue

<template>
<div id="main-component">
    <span>
        {{ $t("さようなら") }}
    </span>
</div>
</template>

これで、Vue.jsで多言語表示ができるようになります。

ただ、1つ問題がありまして、vue-i18nでは第一階層のデータしか読み込めないので、

ja.json

{
    "果物一覧" : {
        "りんご" : "りんご",
        "みかん" : "みかん",
        "バナナ" : "バナナ"
    }
}

en.json

{
    "果物一覧" : {
        "りんご" : "apple",
        "みかん" : "orange",
        "バナナ" : "banana"
    }
}

のようなデータがこのままでは読み込むことが出来ないのです。
その場合は以下のように一旦blade側で加工してからコンポーネントに渡します。

index.blade.php

<script>
    var fruits_list = JSON.parse('{!! json_encode((__("果物一覧"))) !!}');
</script>

<main-component></main-component>

main.js

window.Vue = require('vue');

import VueI18n from 'vue-i18n';
Vue.use(VueI18n);

// 言語の設定
Vue.use(VueI18n);
const i18n = new VueI18n({
    locale: locale,
    messages: {
        ja : require('../../lang/ja.json'),
        en : require('../../lang/en.json')
    }
});

import MainComponent from './components/MainComponent.vue';

const app = new Vue({
    i18n: i18n,
    components: {
        MainComponent
    },
    data: function() {
        return {
            fruits_list : fruits_list
        }
    }
});

MainComponent.vue

<template>
<div id="main-component">
    <span v-for="fluit in fruits_list">
        {{ fluit }}
    </span>
</div>
</template>

自分はこんな感じのやり方でやりました(もしかしたらもっといいやり方もあるかもしれないので、他にいいやり方があれば教えていただければと思います)。

また、今回は言語切替機能については触れませんでしたが。そのあたりについてはこちらが参考になりました。

Axiosのファイル送信でハマった話

今月こそはVuexについてまとめようと思っていたのですが、Vuexについてはじっくり余裕を持って書けるときに書きたいということで、今回はAxios(Ajaxリクエストを送るためのpromiseベースのHTTPクライアント)でファイル送信を行うときにハマった話を書こうと思います。

今回やろうとしたのは、画像ファイルとかも含む編集画面で、例えばVue.jsでモーダルの編集フォームを作って、PATCHメソッドでAjaxで編集内容を送信するというケースでした。
まず、下記がうまくいかないケースです。

let url = '/send';
let data = new FormData();
data.append("file", file);
$('.btn').not('.vue_disabled').prop('disabled', true);
let self = this;
axios({'patch', url, data})
    .then(function (response) {
        //正常処理
    })
    .catch(function (error) {
        //エラー処理
    });

そしたらフォームが空になっていました(大汗)。
何故うまくいかないかわかりますか?
正解はaxiosのメソッドにはgetとかpostとかはあってもpatchというメソッドは用意されていないのです。
PHPがPOSTメソッド以外ではapplication/x-www-form-urlencodedやmultipart/form-dataで渡されたパラメタの処理をしてくれない仕様だから
です。(2018/9/9 一部修正、こちら参照)なので、どうしてもpatchで送りたいときは、下記のようにします。

let url = '/send';
let data = new FormData();
data.append("file", file);
data.append('_method', 'PATCH');
$('.btn').not('.vue_disabled').prop('disabled', true);
let self = this;
axios({'post', url, data})
    .then(function (response) {
        //正常処理
    })
    .catch(function (error) {
        //エラー処理
    });

axiosのメソッドとしてはpostだけど、送る時のデータにpatchメソッドであるという情報を含めるのです。
これで一安心です。

ちなみに、今回のはなかなか気が付かず、かなり悩んだのですが、色々ググってこちらのページに行き着いてようやくわかったというものです。
Laracasts様に本当に感謝。