皆さんは旅行に行った時このような経験はありませんか？
- 自分の時間や予算に合わせて予定を組むのが面倒臭い
- せっかく綿密に計画を立てたのに雨が降っておじゃんになってしまった
- 下調べが甘く、思わぬ出費で予算オーバーしてしまった etc.
こういった時に「他人の行程表を参考にしたい!!」という思いで作ったサービスが今回の"PLAN TO TRAVEL"です
- 旅先の行程表を他人と共有できる
- 旅行前に友達と予定を組む目的でも使える
- 天気や人数、移動手段などで絞り込み検索をして行程表を探すことができる
- 他人の行程表を丸々参考にできるので下調べが少なく済む！
- 余計な機能を加えず、シンプルで直感的操作が可能
- 「行程表の共有」に主軸を置いたサービス
- VSCode
- Google Chrome バージョン: 86.0.4240.111（Official Build） （x86_64）
- React
- バージョン: 16.13.1
- Laravel
- バージョン 7.28.3
- PHP
- バージョン: 7.3.11
- TypeScript
- SCSS
- Google Maps APIs
- Firebase Storage
スマートフォンサイズに対応
git clone [URL]cd [クローンしたディレクトリ名]git checkout develop- ∵ develop ブランチが最新のものが反映されているブランチになる
composer installnpm install- プロジェクトのディレクトリ直下に
.envファイルを作成
- DB 関連設定を自分の環境に合うように変更
- API の KEY を記述
MIX_GOOGLE_MAPS_APIMIX_WEATHER_API
php artisan serveでローカルホスト起動- 別のターミナルタブで
npm run watch起動
- react や typescript, sass の内容を js と css にコンパイルする
- ローカルホストを開く
- 検証を開いて画面サイズをスマートフォンのものにする
- 今回のサービスはスマホを想定して作っているため、スタイリングに関してはスマホ以外に対応してません
- 画面設計やスタイリングは iPhoneX を想定して行ったため、スマフォサイズなら一応レスポンシブで全て対応していますが、iPoneX(375*812)で閲覧することをおすすめします
laravel your php version does not satisfy that requirementというエラーが起きた場合、php のバージョンの差異によるものなので、php のバージョンを 7.3 以降のものにしてください。
| 種類 | 記法 | 複数 or 単数 | 例 |
|---|---|---|---|
| テーブル名 | スネークケース | 複数 | users_table |
| モデル名 | アッパーキャメル | 単数 | UserData |
| migration 名 | スネークケース | 単数 | xxx_crate_users_table ※ xxx には作成日時が自動で入る。 |
| seeder 名 | アッパーキャメル | －－－ | UsersTableSeeder |
| Controllers 名 | アッパーキャメル | －－－ | UserDataController |
| views 名 | スネークケース | －－－ | users_add |
| 種類 | 記法 | 例 |
|---|---|---|
| クラス名 | アッパーキャメル | UserData ItemList |
| メソッド名 | ローワーキャメル | userData itemList |
| 変数名 | スネークケース | $user_data $item_list |
| ディレクトリ名 | アッパーキャメル | UserData ItemList |
| ファイル名 | スネークケース | user_data item_list |
参考元: 【laravel】laravel の命名規則 - Qiita
拡張子が tsx のものやコンポーネントファイルに関してはアッパーキャメルを使う
- 例：UserData.js, PostForm.tsx
- class User extends React.Component {}
- const App: FC = () => {}
それ以外の通常の ts ファイルや js ファイルなどに関してはローワーキャメルを使う
- 例：userActions.ts, userReducer.ts, firebase.ts
- id はスネークケース
- 例: register_username, login_password
- BEM 設計を使うため、style 関連で id を使うことはほとんどない
- class は BEM 設計に則って記述
- 例: register-form__username,
ローワーキャメルを使う 例：const userData = "hoge" const createUser = () => { } const [state,setState] = useState("")
アッパーキャメルを使う 例:
interface Region {
latitude: number;
longitude: number;
latitudeDelta: number;
longitudeDelta: number;
}
type ItemList = {
leftIcon: JSX.Element;
rightIcon?: JSX.Element;
label: string;
navigation: () => void;
};
BEM 設計に従って記述する。