tanaka's Programming Memo

プログラミングについてのメモ。

Python3でpaizaの問題を解く時によく使う文法

プログラマーの転職や新卒を支援するサービス paiza で、スキルチェックをする時によく使う文法です。

pythonは普段は全く触っておらず初心者ですが、とにかく普段触っていないので忘れちゃうので。

(2017/1/9 配列の初期化とBoolean値を追加)

基本

変数定義

定義せず、いきなり使って大丈夫です。

a = 1
b = "こんにちは"

四則演算記号

  • 足し算 +
  • 引き算 -
  • 掛け算 *
  • 割り算 /
  • 剰余 %

省略記号

インクリメント(++)とデクリメント(--)はありません。以下の省略記法が使えます。

a += 1
a -= 10
a *= 2
a /= 3
a %= 2

コメント

# から行末までコメントです。

# 行末までコメント

''' から ''' までの間は複数行でコメントにできます。

'''
複数行
コメント
'''

Boolean値

Booleanは、 True と False


出力関連

変数などを出力

print(data)

数値を文字列化

print("1+1は"+str(2)+"です")
  • 出力例
1+1は2です

改行しないで出力

print()は通常、最後に改行を自動的に挿入します。コンマに続けてend=""とすると、単語の後につける文字を制御できます。""として空文字にすることで改行しなくなります。

print("改行", end="")
print("なし", end="")
  • 出力例
改行なし



入力関連

1行入力

input()

スペース区切りの文字列を配列に分解する

  • 入力例
0 1 2 3 4 5
  • コード
datas = input().split(' ')
print(datas)
  • 出力例
['0', '1', '2', '3', '4', '5']

文字列を数値に変換

int(文字列)

前述のdatasの例に以下を加えると、最初と2番目の要素を足します。

print(int(datas[0])+int(datas[1]))



繰り返し文

回数での繰り返し(for)

回数繰り返しはrange()を使って以下のようにします。

  • コード例
for i in range(10):
    print(str(i)+",", end="")
  • 出力例
0,1,2,3,4,5,6,7,8,9,

データでの繰り返し

inの後ろに配列を指定すれば、要素を1つずつ取り出して、それを制御変数に代入しながらループするので便利です(foreach)。

構文は以下の通りです。

for 制御変数 in 配列:
    繰り返しブロック
  • コード例
datas = ["こんにちは", "今日は", "よい天気です。"]

for data in datas:
    print(data)
  • 出力例
こんにちは
今日は
よい天気です。

条件での繰り返し(while)

構文は以下の通りです。

while 繰り返し条件:
    繰り返しブロック
  • コード例
sum = 1

while sum<10:
    print(sum, end=", ")
    sum+=sum
  • 出力例
1, 2, 4, 8, 



if文

基本文法は以下の通りです。elifやelseは省略できます。

if 条件式1:
    条件式1が成立した時の処理ブロック
elif 条件式2:
    ここまでの条件が不成立で、かつ、条件式2が成立した時の処理ブロック
elif 条件式3:
    ここまでの条件が不成立で、かつ、条件式3が成立した時の処理ブロック
else:
    ここまでのすべての条件が不成立だった時の処理ブロック



配列

定義の定義

  • コード例
a = []
b = [0, 1, 2, 3]
c = [[0,1], [2,3], [4,5]]
print(a)
print(b)
print(c)
  • 出力例
[]
[0, 1, 2, 3]
[[0, 1], [2, 3], [4, 5]]

配列の最後に要素を追加する

a = []
a.append(1)
a.append(2)
print(str(a[0])+","+str(a[1]))
  • 出力例
1,2

配列から要素を削除

pop()で最後尾の要素を削除、pop(インデックス)で指定のインデックスの要素を配列から削除します。pop()は、削除した要素を返します。

  • コード例
a = [0, 1, 2, 3]

# 最初の状態を表示
print(a)

# 最後の要素を取り出して削除
print(a.pop())
print(a)

# 最初([0])の要素を取り出して削除
print(a.pop(0))
print(a)
  • 出力例
[0, 1, 2, 3]
3
[0, 1, 2]
0
[1, 2]

連想配列

通常の配列は、通し番号になるので、 a["name"]="ぼく" のような代入はできません。その場合は、以下のようにします。

  • コード例
a = {"name": "ぼく", "sex": "男"}
print(a["name"])
print(a["sex"])
  • 出力例
ぼく
男

JavaScriptとは"の有無が異なるので注意です。

以下のように、配列と組み合わせることができます。

  • コード例
a = []
a.append({"name": "ぼく", "sex": "男"})
a.append({"name": "わたし", "sex": "女"})

print(a[0]["name"]+":"+a[0]["sex"])
print(a[1]["name"]+":"+a[1]["sex"])
  • 出力例
ぼく:男
わたし:女

指定の値で埋めた1次元配列を定義

基本文法は以下の通りです。

array = [埋めたい値]*行数
  • コード例
datas = [1]*10
print(datas)
  • 出力例
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

指定の値で埋めた2次元配列を定義

基本文法は以下の通りです。

array = [[埋めたい値]* 列数 for 制御変数 in range(行数)]
  • コード例
datas = [[10] * 3 for i in range(5)]
print(datas)
  • 出力例
[[10, 10, 10], [10, 10, 10], [10, 10, 10], [10, 10, 10], [10, 10, 10]]



関数

以下、基本文法です。returnは省略できます。

関数定義は、利用する前に書きます。

def 関数名(引数リスト):
    関数の処理
    return 戻り値
  • コード例
def add(a, b):
    return a+b

print(add(1,2))
  • 出力例
3



paizaのスキルチェックのコツ

スキルチェックの難点は、入力例が一通りしか用意されていない点です。それが成功しただけでは不安があります。自分でもテストデータを用意して、結果が正しくなるかをチェックしたいところです。

そのためには、最初に入力を全て済ませてから、処理を開始するような構造にするのがよいです。そうしておくことで、入力と処理の間に、テスト用のデータを代入することで、簡単にテストを実施することができるようになります。

# 入力ブロック
count = int(input().rstrip())
inputs = []
for i in range(count):
    inputs.append(input())

# テストデータを設定
count = 5
inputs = ["3", "4", "1", "5", "10"]


# 処理
sum = 0
for data in inputs:
    sum += int(data)

# 出力
print(sum)

このようにしておくことで、「テストデータを設定」の場所に、自分のテストデータを差し込んで、結果を確かめることができます(paiza.ioを使う方が楽かもですが)

iPhoneでUnityの実機テストをする

Xcode7から、無料でiPhoneiPadの実機上でテスト動作をさせることができるようになっていました。以下、最初に動かした時にやったことのメモです。


開発環境

  • mac book air + macOS 10.1
  • Unity5.5
  • Xcode8.2.1
  • iPhoneSEと付属のUSBケーブル



macXcodeiPhoneの実機動作を確認

まずは、Xcodeだけで実機で動くことを確認します。以下を参考にしました。
誰でも無料でiPhoneの実機を使ってiOSアプリ開発する方法 - Qiita

  • Xcodeを起動
  • [File]メニューから[New]>[Project]を選択
  • 画面上から、[iOS] > [Single View Application] を選択して[OK]を押す
  • 以下を設定
    • [Product Name]には[JikkiTest]など
    • [Team] は Apple ID でログインしたのち、どれでも良いのでチームを選択
    • [Next]を押す
  • プロジェクトフォルダーを作成したいフォルダーを選択して、Gitは不要なので、[Source Control]のチェックは外して、[Create]を押す

iPhoneをUSBで接続します。

  • iPhoneをUSBでmacに接続。実機やXcodeで許可を求められたら、許可する
  • Xcodeの左上の再生ボタンや停止ボタンの右にあるプロジェクト名の右の[iPhone7 Plus]などのシミュレーターが指定されている場所をクリックして、一番上の実機を選択
  • Development Targetを、実機のiOSのもの以下にする
  • GeneralパネルのSigning欄において、Apple IDでログイン
  • プロジェクトのGeneralのSigningのTeamが選択されていなかったら、どれでも良いので選択する。これで、プロファイルなどが生成される
  • タイトルバーに[Processing symbol files]が表示されていたら、作業が完了するまで待つ
  • 実行してビルド
  • キーチェーンの許可が指示されたら、「常に許可」などで許可する

最初はエラーが発生するので、以下でアプリの動作を許可します。

  • iPhoneの[設定]を開く
  • [一般]>[プロファイルとデバイス管理]を選択
  • [デベロッパAPP]でAppleIDでログインしたメールアドレスを選択
  • [<メールアドレス>を信頼]を押す
  • [信頼]を押す

iPhoneのロックを解除した状態で、Xcodeで実行します。以上で、アプリがインストールされて、実機でプログラムを動かせます。

ここで作成したのは、何もないアプリなので、真っ白な画面のアプリが起動すれば成功です。


Unityでビルド

以下を参考にしました。
[Unity] アプリをiPhone実機上でテストする | Unity 3DCG

  • Unityでプロジェクトを起動
  • [File]メニューから>[BuildSettings]を選択
  • [iOS]を選択して、[Switch Platform]を押す
  • [Player Settings]を押す
  • [Inspector]ビューで必要な項目を設定。最低限、Other SettingsのIdentificationのBundle Identifierを設定する
  • [Build & Run]でビルド
  • 指定した名前でフォルダーが作成されて、その中にXcodeのプロジェクトが生成される
  • Xcodeでプロジェクトが開く
  • プロジェクト(Unity-iPhone)をクリックして、設定を開く
  • Signing 欄で、 Teamをクリックして、一覧から何か選ぶ(Personal Teamなど)。ログインしていなかったら、ログインする
  • 実行ボタンを押す(警告はひとまず無視。未使用変数などは、あとでUnityに戻って消しておく)

一度、設定が終わったら、次からはUnityで[Build & Run]で、Xcodeへの読み込みとビルド、実機へのアップロードまでやってくれます。


Vue 2.1.7 にしたら webpack でエラーが発生した

Vueを2.1.7にバージョンアップしたら、以下のようなエラーが発生しました。

Error: ./resources/assets/js/components/Modal.vue
Module build failed: Error: 

Vue packages version mismatch:

- vue@2.1.7
- vue-template-compiler@2.1.6

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

vue-template-compiler のバージョンが不一致とのことです。 vue-loader の Ver10.0 以上を利用している場合は、 vue-template-compiler をアップデート。 vue-loader の Ver10.0 未満や vueify を使っている場合は、それらを再インストールして、 vue-template-compiler を最新版にするようにとのこと。

自分の環境では多分何も利用してなさそうだったので、単純に vue-template-compiler を以下でプロジェクトにインストールして解決しました。

npm install --save-dev vue-template-compiler

laravel-elixir-vue-2 あたりがバージョンアップしたら npm update だけで問題は発生しなくなるかもしれませんが、とりあえず現場での対処法でした。

GitHub Pagesがより簡単になった(2016/12/9)

github.com

丁度、学校で扱い始めたGitHub Pagesが便利になったと発表があったので上記を意訳。

GitHub Pagesが簡単になった:はじめの1,2,3

WebサイトやソフトウェアのドキュメントをGitHub Pagesで公開する手順が以下の3手に減りました。

  1. リポジトリを作成(あるいは、既存のリポジトリに移動)
  2. 他のファイルと同様に、Webインターフェースなどでマークダウンのファイルをコミット
  3. リポジトリのSettingsメニューから、GitHub Pagesを有効にする

これでWebサイトができます。 アカウント名.github.io/リポジトリ名 で、Webブラウザーからアクセスできます。公開のための手順が簡単になるとともに、GitHub上にあるマークダウンのファイルをWebページで表示できるようになりました。

  1. 全てのマークダウンファイルが、GitHub Pagesにより描画されるようになった。これにより、 YAML front matter(ファイルの上部に---で仕切って書くメタデータ)をファイルごとに追加する手間がなくなる
  2. index.md(あるいはindex.html)がトップにない場合は、README.mdを自動的にインデックスファイルとして利用するので、GitHub Pagesに見に行った時にページが非表示になる心配がなくなった
  3. サイトのconfig内でテーマを指定しなかった場合(あるいは、configファイルがない場合)、GitHub上にあるマークダウンファイルに最小限のデフォルトテーマを摘要する
  4. 与えられたファイルがlayoutを指定していない場合、そのコンテクストに基づいたものを設定する。例えば、自動的に page レイアウトを取得するか、page レイアウトが存在しない場合は、 default レイアウトが適用される
  5. ページタイトルが明示されていない場合で、ファイルが H1やH2、H3ではじまる場合、そのタイトルをページのタイトルとして、Webブラウザーのタブのような場所に表示する

これらの改良により、最初(であろうが100個目であろうが)のWebサイトを数クリックで簡単に公開できるようになります。また、ソフトウェアプロジェクトであれば、docsフォルダーなどにマークダウンファイルを追加すればいいのです。勿論、デフォルトテーマを独自のレイアウトやスタイルで上書きすることで、見た目や使い勝手をカスタマイズすることは引き続き可能です。

この変更により、既存のサイト構築に影響を及ぼすべきではありませんが、Jekyllユーザーに対して2つの問題(gotchas)を起こすかも知れません。

  1. 全てのページを反復処理するような場合、vendorの依存関係のREADMEなどがページに含まれる可能性がある。これらはconfigファイルのexcludeディレクティブで除外できる
  2. ページのレイアウトやタイトルを指定しなかった場合で、それらを設定する予定がない場合(スタイルが設定されていないコンテントを提供したい場合など)、レイアウトやタイトルには明示的に null を指定する必要がある

何らかの理由で今回の機能が不要な場合は、 .nojekyll ファイルをサイトのルートディレクトリに追加することで無効にできます。

GitHub Pagesのビルドプロセスは、確認やカスタマイズができます。今回の機能はオープンソースのJekyllプラグインである Jekyll Optional Front MatterJekyll README IndexJekyll Default Layout そして Jekyll Titles from Headings によって実装されています。

これらの変更は、多くの既存のサイトの構築には影響を与えないでしょう。これらの機能を安全に使い始めることができます。疑問があれば GitHub に連絡してください。

Laravel5.3とVue.jsを組み合わせたページをCodeceptionでテストする

LaravelのPHPのみのページのテストは、CodeceptionのFunctionalテストで問題なく動きますが、Vue.jsを利用したようなJavaScriptを使ったページは、Functionalテストでは完全にテストできないようです。そのような場合は、実際のWebブラウザー上でテストするAcceptanceテストを利用します。

Seleniumを利用したり、テスト環境を利用する方法で手間取ったので、動作に必要だった項目をまとめます。


PhpBrowserのテストの欠点

03-AcceptanceTests - Codeception - Documentationによると、以下のような欠点があります。

  • you can click only on links with valid urls or form submit buttons
    • クリックできるのは、有効なURLやフォームのSubmitボタンのみ
  • you can’t fill fields that are not inside a form
    • フォーム内のフィールドに入力することができない
  • you can’t work with JavaScript interactions: modal windows, datepickers, etc.
    • モーダルウィンドウやdate pickerをはじめとするJavaScriptの動作が利用できない

Vue.jsはJavaScriptですので、PhpBrowserによるテストはできません。WebDriverを使う必要があるということです。


CodeceptionとWebDriverの動作環境は別

Codeceptionのテストコードもサービスのサーバ側のPHPプログラムも同じPHPプログラムですが、Acceptanceテストではテストコードとサーバ側プログラムは動作環境が別になります。そのため、以下の2点に注意が必要です。

  • .env.testingファイルは、CodeceptionとWebDriverの双方に読み込ませる設定が必要
  • Acceptanceテストコードから、LaravelやSentinelのヘルパー関数を使ってWeb側のアプリの情報を読み取ることはできない

Functionalテストでは、テストと実行環境が同じなので上記のいずれも問題が起きません。Acceptanceテストでの注意点です。


.envと.env.testingの読み分け

Codeception用の設定

Acceptanceテスト用の設定は以下のようにします。Chromeでテストする例です。

  • tests/acceptance.suite.yml をエディターで開く
  • 以下の内容にする
class_name: AcceptanceTester
modules:
    enabled:
        - WebDriver:
            url: http://localhost:8000
            browser: chrome
        - Laravel5:
            environment_file: .env.testing
            part: ORM
            cleanup: false
        - \Helper\Acceptance

以上で、Acceptanceテストを実行すると、Chromeが起動して、 http://localhost:8000 をベースのURLとしてテストが始まります。テストコードからLaravelのfacadeやヘルパー関数が呼び出せます。

Webブラウザー側の設定

acceptance.suite.yml の設定は、Codeceptionで動作するテスト用のものであり、Webブラウザー側とは別です。Webブラウザー側でも .env.testing を読み込ませるには、以下でサービスを起動します。

php artisan serve --env=testing

--env=tesging オプションにより、 .env.testing を環境ファイルとして読み込むようになります(Configuration - Laravel - The PHP Framework For Web Artisans)。

以上で、テスト環境と実行環境のどちらも .env.testing を読み込むようになります。


データベースの初期化

Acceptanceテストでは、トランザクションがテスト側から管理できないため、テスト中に登録したデータの削除ができません(Codeception for Laravel)。そこで、実行前に tests/acceptance/TestCest.php などの _before メソッドで以下を実行して、データベースを初期化すると良いでしょう。

    public function _before(AcceptanceTester $I)
    {
        // データベースを削除
        Artisan::call('migrate:refresh');
    }



テスト時に必要な準備

テストを実行するには、以下を準備しておく必要があります。

  • Selenium Standalone Server のjarファイルをダウンロードして起動(PhatomJSでも良いようだが、うまく動かなかったのでSeleniumを利用)
    • http://www.seleniumhq.org/download/ から、最新の Selenium Standalone Server をダウンロード
    • 以下で起動(3.0.1の部分は、実際にダウンロードしたバージョン番号に置き換える)
java -jar selenium-server-standalone-3.0.1.jar
  • サービスを起動
php artisan serve --env=testing
  • データベースサーバーを起動。mysqlの場合は以下
sudo mysqld_safe

以上が完了したら、以下でテストを実行できる。

composer exec codecept run



Codeceptionで利用できるメソッド

WebDriverのものが利用できます。

WebDriver - Codeception - Documentation

特に、以下のものが有用です。

  • waitForText()
    • テキストが表示されるのを待つ
  • waitForElementVisible()
    • 要素が表示されるのを待つ
  • acceptPopup()
    • ポップアップのOKなどを押す
  • cancelPopup()
    • ポップアップをキャンセルする
  • seeInPopup()
    • ポップアップに指定の文字が表示されているかを確認
  • typeInPopup()
    • ポップアップに文字を入力



まとめ

  • JavaScriptのテストには、WebDriverを使ったAcceptanceテストが必要
  • 環境の設定は、Codeception用のものと、Webブラウザー用のものをそれぞれやる必要がある
  • データベースはリセットされないので、必要に応じて自分でクリアする
  • Acceptanceテストには、SeleniumかPhantomJSが必要(PhantomJSで日本語をチェックするには環境設定が必要かもしれない。Seleniumの方が簡単に動く)

おおよそ、以上で動くと思います。


参考URL

Laravel Elixirでwebpackを使ってCodeSplittingをする

Laravel5.3のElixirからwebpack 1.13.3でビルドして、JavaScriptのコードを分割をする手順です。ページごとに用意する Entry Chunk である「app.js」と「app2.js」をビルドすると同時に、どちらのJavaScriptファイルでも利用するコードを「common.js」という名前のファイルに書き出します。(Laravelがインストールするwebpackは、2.1.0以降の指定でした。2016/11/26追記)

前提

以下の環境での例です。

  • macOS Sierra
  • Laravel5.3
  • npm 3.10.8

プロジェクトの作成

  • 以下で、Laravelのプロジェクトを作成して、プロジェクトフォルダーに入る
laravel new laravel-code-splitting
cd laravel-code-splitting
  • 以下で、laravelのプロジェクトを起動する
php artisan serve

以上で、 http://localhost:8000 をWebブラウザーで開くと、Laravelと表示されるページが動きます。


コードの作成

app.jsはそのまま利用します。このコードは、Vueで example というタグを定義しています。ページ中にそのタグを書くと、メッセージが表示されます。

app2.js用には、 app2 というルートを定義して、app2.blade.php というテンプレートを用意します。app2.jsには、jQueryを使って本文に「app2.jsでここを書き換えました。」と表示するコードを作成します。

app.jsを動かす

wecomeページのテンプレートに example タグを追加します。

  • resources/views/welcome.blade.php をエディターで開く
  • 80行目付近の「<div class="content">」という行を探して、以下のようにid属性を追加する
            <div id="app" class="content">
  • 84行目付近(Laravelと表示しているdivブロックの下)に以下のコードを追加
                <example></example>
  • 最後から2行目の「</body>」の上に、以下のコードを追加
        <script type="text/javascript" src="./js/app.js"></script>

以上ができたら、上書き保存をして、 http://localhost:8000 をリロードします。先ほどのページに「Example Component」「I'm an example component!」と表示が追加されれば成功です。

app2.jsのコードを作成

app2.js用のコードを追加します。まずは、Webページの雛形を作成します。

  • resources/views/app2.blade.php ファイルを新規作成して、エディターで開く
  • 以下のコードを入力して保存
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel app2</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">

        <!-- Styles -->
        <link href="/css/app.css" rel="stylesheet">

    </head>
    <body>
        <div class="container">
            <h1 id="page-body" class="bg-info">
                app2.jsが未作成
            </h1>
        </div>
        <script type="text/javascript" src="./js/common.js"></script>
        <script type="text/javascript" src="./js/app2.js"></script>
    </body>
</html>

app2.jsを作成します。

  • resources/assets/js/app2.js ファイルを新規に作成して、エディターで開く
  • 以下のコードを入力して保存
require('./bootstrap');

$('#page-body').text("app2.jsでここを書き換えました。");

次に、ルートを作成します。

  • routes/web.php をエディターで開く
  • ファイルの最後に以下のコードを追加する
Route::get('/app2', function() {
    return view('app2');
});

以上ができたら、 http://localhost:8000/app2 にアクセスします。「app2.jsが未作成」と表示されればここまで成功です。


webpackの設定

app2.jsが正しく動作すると「app2.jsでここを書き換えました。」とページに表示されるはずです。現在動作しないのは、 public/js フォルダーに app2.js が存在しないからです。 app2.js をwebpackでビルドする設定を作成して、必要なファイルを生成します。

環境の構築

ビルドに利用するツール類をインストールします。

  • ターミナルでプロジェクトフォルダーに移動して、以下を実行
npm install

インストールが完了したら、ターミナルで以下を実行します。

gulp

これでデフォルトの設定でJavaScriptがビルドされます。ビルドされたJavaScriptファイルは public/js フォルダー内に生成されます。まだ初期設定のままなので、 app.js しか生成されません。webpackの設定ファイルを用意して、 app2.js が実行可能なEntry Chunkとしてビルドされるようにします。

設定ファイル webpack.config.js の作成

  • プロジェクトフォルダー直下に webpack.config.js というファイルを作成してエディターで開く
  • 以下のコードを入力して保存
var webpack = require('webpack');

module.exports = {
    entry: {
        app: './resources/assets/js/app',
        app2: './resources/assets/js/app2'
    },
    output: {
        filename: '[name].js'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: 'common'
        })
    ]
};

webpack.config.js というファイルに設定を書いておくと、 Elixir が自動的に読み込んで適用してくれます。

上記の設定は、実行するためのコードを持ったChunkである Entry Chunk として app.js と app2.js を作成して、両者に共通のコードは common.js にまとめるというものです。

ターミナルで以下を実行してビルドしてください。

gulp

http://localhost:8000/app2 をリロードすると、「app2.jsでここを書き換えました。」と表示されて、無事に app2.js が動作したことが確認できます。

http://localhost:8000 をリロードしてみてください。先ほどは正しく動作していたのに、 example タグのメッセージが消えてしまいました。これは、app2 との共通部分のコードが common.js に移動してしまったからです。以下の作業をして修正します。

  • resources/views/welcome.blade.php をエディターで開く
  • ファイルの下から3行目にある「<script type="text/」から始まる行の上に、以下の行を追加
        <script type="text/javascript" src="./js/common.js"></script>

以上で保存して、 http://localhost:8000 をリロードすると、正しく動作するようになります。


まとめ

Laravelでページの遷移をするサイトを作成する場合、ページごとに利用するJavaScriptを分けた方がコードが減って便利そうだったので、webpackの Multi Entry Chunk を試してみました。

Laravel5.3のElixirには、最初からwebpackのビルド環境が組み込まれていますので、 npm install で環境をインストールして、 webpack.config.js をプロジェクトフォルダー直下に作成して、設定を書けば webpack の各種機能を利用することができます。

設定ファイルに以下のプラグインの設定を追加したので、 app.js と app2.js の双方に出てくるコードを common.js に分離してくれて、コードの重複が減ります。これができるのが webpack の強みのようです。

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: 'common'
        })
    ]

JavaScript の読み込みは、まず common.js を読み込んでから、app.js か app2.js を呼び出します。

webpack.config.js が正しく設定できた後は、ターミナルで

gulp watch

を実行すると、コードが変更されるたびに自動的にビルドされるので便利です。


Windows7でComposer

WindowsでComposerを動かす時にやったことのメモです。

PHPのインストール

以下、c:\Tools\php フォルダーにインストールしたことを前提に書きます

  • c:\Tools\php\php.ini-development をコピーして、ファイル名を php.ini に変更
  • php.iniを、Noeditなどのテキストエディターで開く
  • 以下を検索して、行頭の「;」を削除する
    • extension_dir = "ext"
    • extension=php_curl.dll
    • extension=php_mbstring.dll
    • extension=php_openssl.dll

環境設定をします。

  • [スタートメニュー]>[コンピューター]を右クリックして、[プロパティー]を選択
  • [システムの詳細設定]を選択
  • [環境変数]を押す
  • [システム環境変数]欄から[Path]を探して、[編集]ボタンを押す
  • 行末に、phpをインストールしたフォルダーを追記する。[C:\Tools\php]にインストールした場合は以下を追加
;C:\Tools\php
  • [OK]でウィンドウを全て閉じる

opensslのインストール

環境設定をします。

  • [スタートメニュー]>[コンピューター]を右クリックして、[プロパティー]を選択
  • [システムの詳細設定]を選択
  • [環境変数]を押す
  • [システム環境変数]欄から[Path]を探して、[編集]ボタンを押す
  • 行末に、OpenSSLをインストールしたフォルダーを追記する。[C:\Tools\php]にインストールした場合は以下を追加
;C:\OpenSSL-Win32\bin
  • [OK]でウィンドウを全て閉じる

Composerのインストール

  • Composerから Composer-Setup.exe をダウンロード
  • ダウンロードしたインストーラーを実行して、インストールを完了させる


以上で、コマンドラインを起動して、 composer コマンドが利用できるようになります。