読者です 読者をやめる 読者になる 読者になる

初級ガイド

技術ブログ

備忘録 - 8パズル

8パズルを幅優先探索+メモ化で実装した。

幅優先探索

Queueを使って実装した。

いくつか種類があり、用途に応じて使い分ければ良さそう。実行速度や消費メモリの差は要調査。

addで入れてpollで引き出す。終了判定にpeekを使う。

メモ化

グローバル変数にハッシュマップを用意して探索空間の状態を保存する。
次の空間を探索する前にハッシュマップに保存されていないか確認して、すでに保存されていたらその探索を破棄する。

HashMap<String, String> map = new HashMap<String, String>();
ArrayList<Integer> array = new ArrayList<>();

//memo check
String s = array.toString();
if(map.containsKey(s))
 continue;

//memo resist
map.put(s,array.indexOf(9));

参考・その他

スライディングパズルはA*で解くのが一般的らしい。
他の工夫として、ゴールから逆順に辿る処理を通常の探索と交互に挟んでいくことで高速化できるとのこと。

15パズル - Wikipedia

メモ化 - Wikipedia

A* - Wikipedia

www.geocities.jp

デザインメモ - mdl / bootstrap

photoshopvip.net

getmdl.io

Firebase + webpack + Vue を使った開発デモ

中間報告(17/05/06)

フロント開発環境を整えようと奮闘しているところです。 来週もおおむねそのような活動をしていきます。

webpackメモ - 導入編1

近況

  • 様々な入門記事を試して様々なハマりを経験しました。
  • 下記はwebpack導入までの段階で参考になった記事です。

公式のデモプロジェクトを取りあえず動かすことができます。
公式Githubページからソースを引っ張っているため、バージョンの問題などでビルドエラーが出ることはありませんでした。


webpack + Vue開発環境の構造を簡潔に解説してあります。
公式のデモプロジェクトは上手く作られている反面、初見ではどのように動作しているか分かりづらかったため助かりました。


ホットリロードに関しては様々な記事があり、かなり混乱しました。
この記事を参考にしたときに上手く行きました。


最終的にやりたいことなのですが、この通りに作業したところエラーで詰まってしまったので後日リベンジします。


ホットリロードが作動しないとき

HMR / Hot Module Replacement:ブラウザのリロードをすること無くアプリケーションのJSを更新する開発ツール。ホットリロードのこと。

Vue.jsメモ - 入門編

インストール

> npm install -g vue

記事


Vuexによる開発デモです。大変参考になりました。

src/page1/Card.vue
src/page1/Search.vue
src/page1/TimeLine.vue

App.vue
import TimeLine from './components/page1/TimeLine'

となっているところ、記事中のディレクトリ構成に従えば

src/components/Card.vue
src/components/Search.vue
src/components/TimeLine.vue

App.vue
import TimeLine from './components/TimeLine'

になると思います。

また、ソースの最終行に空行が入っていないとエラー(Newline required at end of file but not found)を吐かれます。ESLintによるチェックが原因のようですがよく分かりません(下記記事参照)。最終行に空行を入れたらエラーは無くなりました。

最終的に下記のエラーが解決できずに詰まってしまいました。

ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Search.vue
Module not found: Error: Can't resolve '../../vuex/mutation-types' in 'C:\Users\cometqp\Desktop\gipfy-vue\src\components'
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Search.vue 5:0-67
 @ ./src/components/Search.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/TimeLine.vue
 @ ./src/components/TimeLine.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

webpack形式で整えられたデモをインストールする
> vue init webpack 任意のディレクトリ名

依存関係を良い感じにやってくれる
> npm install