<html><head></head><body><h2 id="h6436701f4e">PIKIMARU BLOG</h2><p>このブログは基本的に以下のことを目的としています</p><ul><li>自身の勉強した事柄についてアウトプットや振り返りのため</li><li>自身のポートフォリオとして</li></ul><p><br>上記以外にも単純なブログとしても使用していこうかと思っています<br></p><h2 id="h0eb492e5c9">PIKIMARU BLOGはどのように作成しているか</h2><p>次に本ブログですが一から自分で作成しています<br>具体的には以下のものを使用して作成しています。</p><ul><li>Next.js</li><li>React(TypeScript)</li><li><span style="color:#374151">Tailwind CSS</span></li><li><span style="color:#374151">microCMS(API)</span></li></ul><p><br><span style="color:#374151">Reactフレームワークである</span>Next.jsを使用してスタイルは<span style="color:#374151">Tailwind CSSで対応してます。</span><br><span style="color:#374151">ブログについてはmicroCMSをAPIとして使用しています。</span><br><span style="color:#374151">そのためブログ記事自体はmicroCMS側で書いています。</span><br></p><h2 id="hc7c993c65a">これから</h2><p>普段はバックエンドで業務をしていてPHPを主に扱っているのですが、<br>フロントエンド特にReactに興味を持っていたので、今回ブログサイトを作成してみました<br>ただ、現状スマホサイズに対応できていない部分など多々あるためそちらの対応とコンテンツを増やしていければと思います。<br>あとは単純にブログ記事を増やしていこうかなと、、<br><br><br><br></p></body></html>

PIKIMARU BLOGの作成にあたって書いてます

PIKIMARU BLOGについて

<h2 id="h47d66d11b5">イベント</h2><p><a href="https://tebiki.connpass.com/event/279261/" target="_blank" rel="noopener noreferrer">『フロントエンド開発のためのセキュリティ入門』著者と考える～より安全なスクラムの対策と実践～</a><br></p><h2 id="h4ac34ea3e7">イベント概要</h2><blockquote><span style="color:#444444">『フロントエンド開発のためのセキュリティ入門』の著者である平野氏を特別ゲストにお迎えし、</span><br><span style="color:#444444">freee社とともに、より安全なスクラムの対策と実践についてトークセッションでお届けします！</span></blockquote><p><br></p><h2 id="hc009dc31ec">気になった内容まとめ</h2><h3 id="hb7cf071dba">セキュリティ担当者に対しての負荷の解決策</h3><ul><li>セキュリティ教育を実施して、リス機や脆弱性、対応方法に対する理解を深めていく</li><li>開発時に混在したバグに関するケーススタディやコードレビューの結果などについてチーム内共有を行う</li><li>セキュリティについての議論を書くフェーズで実施する<ul><li>要件の段階で事前にリスクの洗い出しを行い、成果物に脆弱性が含まれる可能性を最小限にする</li><li>脆弱性検証を実施するタイミングを事前に検討しておく</li></ul></li><li>セキュリティの失敗で個人を責めないようにする<ul><li>仲間に対するHRT（Humility：謙虚、 Respect：尊敬、 Trust：信頼）を大切に</li></ul></li></ul><p><br></p><h3 id="hbfe37de640">セキュリティ対策の実施</h3><p>リリース後の脆弱性については WAFで対応できるものや、アプリを直す必要があるものなど質（脆弱性の種類）によって優先度を変える<br>レベル設定をして対応スピードを決めていく（診断ツールで脆弱性が上がってくる）<br><br>スケールが小さい場合では１名指名して脆弱性の調査や分析を行ってもらい共有してもらい対応していくフローもある<br><br>設計段階では扱う情報をシナリオベースで洗い出して確認してセキュリティーを担保していく<br><br>スクラムチームでのセキュリティ担保について<br>スクラムチーム自体にセキュリティの職能は入れるべきだが、現実的には難しいので外部に委託している<br>ただ、最低限のセキュリティはチーム内で担保すべき<br></p><h2 id="h8968b28212">参加してみて</h2><p>チーム内でセキュリティーについての認識共有やどのレベル感でのセキュリティーを入れていくかのところから考えていくところの定義というのは難しいなと感じた<br>ただ、現状の規模やチームによってフロー確立されていてを共有認識で持っておけば脆弱性が上がっても対応は可能。<br><br><br><br><br><br></p>

エンジニア向けの勉強会やセミナーなどのイベント開催をしているconnpassで参加したイベントについて振り返り用ブログ

【connpass】フロントエンド開発のためのセキュリティ入門

<h2 id="h0118c3f969">この記事の目的</h2><ul><li>現在学習中のRailsについての理解とアウトプット、振り返り用</li><li>Railsのrefileで起きたエラーの解消について</li></ul><h2 id="h67d2b7be6b">バージョン</h2><pre><code>ruby 3.2.0
Rails 7.0.4.3</code></pre><h2 id="h77357d9b49">起きたエラーについて</h2><p>Railsのrefileを使用して画像投稿機能を作成している際に下記のエラーが発生しました。<br></p><pre><code>Refile.secret_key was not set.

Please add the following to your Refile configuration and restart your application:
Refile.secret_key = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'</code></pre><p><br><img src="https://images.microcms-assets.io/assets/30a2ff08ffb0461f8b48bb692f70d4f3/9ed6b286f3dc40148068ef3730aaa2b7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-04-10%2022.33.27.png" alt=""></p><h2 id="h9c1f22bd6d">原因</h2><p>refileのsecret_keyが登録されていないということみたいです<br></p><h2 id="hfe167e3710">解消方法</h2><ul><li>refileのsecret_keyを設定したあげる</li></ul><h3 id="hf1bd63baee">refileのsecret_keyを設定</h3><p><code>config/initializers/application_controller_renderer.rb</code>にエラー画面で出てきた<code>Refile.secret_key</code>を下記のように設定して下さい。<br>Rails7からは<code>config/initializers/</code>配下に<code>application_controller_renderer.rb</code>がデフォルトでないのでない場合は追加して下さい。追加後は<code>rails s</code>で再度サーバーを起動して下さい</p><pre><code>config/initializers/application_controller_renderer.rbRefile.secret_key = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'</code></pre><p>サーバーを起動後確認すると無事画像が更新できていました！！<br><img src="https://images.microcms-assets.io/assets/30a2ff08ffb0461f8b48bb692f70d4f3/57facbaec58b4c378b19f058ac74f3da/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-04-10%2022.43.27.png" alt=""></p><h2 id="h3de35099b3">参考</h2><p><a href="https://www.youtube.com/watch?v=uos2mowBrJA" target="_blank" rel="noopener noreferrer">【プログラミング入門】Ruby on Rails でウェブアプリを作ってみよう ~ PART 2（実装①）</a><br><a href="https://qiita.com/SoarTec-lab/items/ca1b760cd4a5b70cc8b0" target="_blank" rel="noopener noreferrer">rails 7.0では</a><a href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer"><code>config/initializers</code></a><a href="https://qiita.com/SoarTec-lab/items/ca1b760cd4a5b70cc8b0" target="_blank" rel="noopener noreferrer">配下のファイルが少なくなっている</a></p>

Railsのrefileを使用して画像投稿機能を作成していた際に、起きたエラー「Refile.secret_key was not set.」についてまとめています

【Rails】refileでのエラー解消（Refile.secret_key was not set.）

<h2 id="h0118c3f969">この記事の目的</h2><ul><li>現在学習中のRailsについての理解とアウトプット、振り返り用</li><li>Railsのrefileで起きたエラーの解消について</li></ul><h2 id="h67d2b7be6b">バージョン</h2><pre><code>ruby 3.2.0
Rails 7.0.4.3</code></pre><h2 id="h77357d9b49">起きたエラーについて</h2><p>Railsのrefileを使用して画像投稿機能を作成している際に下記のエラーが発生しました<br></p><pre><code>wrong number of arguments (given 3, expected 2; required keyword: object)</code></pre><p><img src="https://images.microcms-assets.io/assets/30a2ff08ffb0461f8b48bb692f70d4f3/6773df33c6f548e28e6e4d813b90f063/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-04-10%2022.51.58.png" alt=""><br></p><h2 id="h9c1f22bd6d">原因</h2><p>バージョンの違いみたいです<br></p><h2 id="hfe167e3710">解消方法</h2><ul><li>①バージョンを変更する</li><li>②<code>&nbsp;attachment_field</code>→<code>file_field</code>に変更</li></ul><h3 id="hc06bf45acd">①バージョンを変更する</h3><p>バージョンを変更する方法については、<a href="https://qiita.com/YUTOKUBO2001/items/dc8e776f7abd0ed37be6" target="_blank" rel="noopener noreferrer">Ruby on Railsのrefileでwrong number of argumentsが発生したときの対処</a>という記事がありましたのでそちらを参考にしてみて下さい<br></p><h3 id="h9017fa1f92">②<code>&nbsp;attachment_field</code>→<code>file_field</code>に変更</h3><p>こちらについては記載通りattachment_field<code>→</code>file_field`に変更することでエラーを解消できました<br></p><pre><code>edit.html.erb&lt;div class="field"&gt;
    &lt;%= f.label :profile_image, "プロフィール画像", class: "label has-text-warning" %&gt;
    &lt;%# &lt;%= f.attachment_field :profile_image, class: "input" %&gt; %&gt;
    &lt;%#  上記をしたの下記の記載に変更する %&gt;
    &lt;%= f.file_field :profile_image, class: "input"  %&gt;
&lt;/div&gt;</code></pre><p><a href="https://railsdoc.com/page/file_field" target="_blank" rel="noopener noreferrer">Railsドキュメント(file_field)はこちらから</a><br>こちらの変更をすることで下記のように表示できました！<br><img src="https://images.microcms-assets.io/assets/30a2ff08ffb0461f8b48bb692f70d4f3/1716b1bcbd4c4da3b152c1726c6b0c33/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-04-10%2022.16.24.png" alt=""></p><h2 id="h3de35099b3">参考</h2><p><a href="https://www.youtube.com/watch?v=uos2mowBrJA" target="_blank" rel="noopener noreferrer">【プログラミング入門】Ruby on Rails でウェブアプリを作ってみよう ~ PART 2（実装①）</a><br><a href="https://railsdoc.com/page/file_field" target="_blank" rel="noopener noreferrer">Railsドキュメント(file_field)</a></p>

Railsのrefileを使用して画像投稿機能を作成していた際に、起きたエラー「wrong number of arguments (given 3, expected 2; required keyword: object)」についてまとめています

【Rails】refileでのエラー解消（wrong number of arguments）

<h1 id="h03105b87d2">Recoilとは</h1><p>RecoilはFacebook社が作成した<strong>状態管理ライブラリ</strong>です。Context APIの成約を解決するために開発されたみたいです。<br>Reactにおける<strong>状態管理ライブラリ</strong>の一つ。代表的なものに「Redux」という状態管理ライブラリもある<br></p><h1 id="hcc498c111a">状態管理ライブラリとは</h1><p><img src="https://images.microcms-assets.io/assets/30a2ff08ffb0461f8b48bb692f70d4f3/986ae41aae024288b71702d5bc13646a/store.png" alt=""><br>通常だとpropsで渡していくバケツリレー方式だが、<br>状態管理（画像ではStore）を使用することで、バケツリレーを行わなくてもどこからでも値をStoreから参照できるようななります。</p><h3 id="h0383339df0">どんな時使用されるか</h3><p>例えばユーザがログインしているのかしていないのかの情報。</p><ul><li>ログインしていればページを見せる</li><li>ログインしていないのであればページを見せないログインページにリダイレクト</li><li>上記に関しては基本的にどのコンポーネントでも必要な情報になる。</li></ul><p>そのためこのようなものに関しては状態管理から参照してどこでも使用できるようにしておいた方が良い<br></p><h1 id="h00558bbc38">Reduxについて</h1><p>状態管理ライブラリのReduxについては簡単に言うと1つのstoreがあってそこから参照するパターンになります</p><ul><li>値を取り出すとき（参照するとき）にはuseSelectorを使用します</li><li>逆にコンポーネントから値の更新したいときはuseDispatchを使用します</li></ul><p><img src="https://images.microcms-assets.io/assets/30a2ff08ffb0461f8b48bb692f70d4f3/3d861e7bf0a64519bfe5bb730a71ec51/redux.png" alt=""><br></p><h1 id="h6ad9c6bc5e">Recoilについて</h1><p>状態管理ライブラリのRecoilについては簡単に言うとStoreをいくつも持つことができ、そこから参照するパターンになります。<br>Store一つ一つがatomと呼ばれています。Store同様一つのatomはどこでも参照することができます。</p><ul><li>Stateを参照する場合useRecoilStateを使用します</li><li>Stateの値だけを参照する場合useRecoilValueを使用します</li><li>Stateのset関数だけを使用する場合、useSetRecoilStateを使用します</li></ul><p><img src="https://images.microcms-assets.io/assets/30a2ff08ffb0461f8b48bb692f70d4f3/d94dc2541fd640ad9d2f37abff37b213/recoil.png" alt=""><br></p><h2 id="h3d4cbbc608">なぜ複数atomが必要なのか？</h2><p>atomが複数ある理由、つまりrcoilのメリットについてですが<br>まず一つのStoreから参照するReduxの場合、<br>空のオブジェクト渡し更新した場合、Storeから値を参照している他のコンポーネントでも空オブジェクトになってします。<br>つまり、すべて上書きされてしまうわけです。<br>もし間違って更新された場合にすべてページ見れなくなってしまったりするなんてことが起きてしまったります。<br>その点、Recoilの場合は複数に細分化しているため更新を分けることができる。<br></p><h1 id="h17c2aee1cb">Recoilまとめ</h1><ul><li>バケツリレー（親コンポーネントのStateを孫コンポーネントで扱いたい場合、親コンポーネント-&gt;子コンポーネント-&gt;孫コンポーネントの経由をする必要がある）をしなくて済む。</li><li>RecoilでState管理をする場合は、storeというディレクトリを切ってその中で管理していくのが一般的。</li><li>RecoilのStateを参照する場合、useRecoilStateを使用する（useStateと同じ感覚で使える）</li><li>RecoilのStateの値だけを参照する場合、useRecoilValueを使用する。</li><li>RecoilのStateのset関数だけを使用する場合、useSetRecoilStateを使用する。</li></ul><p><br></p>

React状態管理ライブラリの一つであるRecoilについてまとめています

React状態管理ライブラリRecoilとは

<h2 id="hdbf98b940f">前提条件</h2><p>Railsでプロジェクトが作成できていること<br>こちらについては<a href="https://qiita.com/pikimaru/items/e7e80c003d8e9729b4ea" target="_blank" rel="noopener noreferrer">Railsプロジェクト作成からMVCまで</a>で記載しています。<br></p><h2 id="h0fa3a1d80d">Gemfileにユーザー認証用のgem追加</h2><p>Gemfileの最後に以下を追加する<br>deviseとはrailsで作ったwebアプリケーションに簡単に認証機能を実装できるgemのことですlogin,logout機能のこと</p><pre><code>#　ユーザー認証システムを簡単に実装するためのGemです。
gem 'devise'
#　ファイルアップロードを簡単に実装するためのGem,Githubのリポジトリからインストールされる。
gem "refile", require: "refile/rails", github: 'manfe/refile'
#　ファイルを自動的にリサイズするために使用されるRefileのアドオンGem
gem "refile-mini_magick"
#　CSSフレームワークであるBulmaをRailsアプリケーションに統合するためのGem
gem "bulma-rails"</code></pre><p><br></p><h3 id="h3791522d14">bundle install</h3><pre><code>$ bundle install</code></pre><p>下記のように表示されればインストールできています<br></p><pre><code>[DEVISE] Please review the [changelog] and [upgrade guide] for more info on Hotwire / Turbo integration.

  [changelog] https://github.com/heartcombo/devise/blob/main/CHANGELOG.md
  [upgrade guide] https://github.com/heartcombo/devise/wiki/How-To:-Upgrade-to-Devise-4.9.0-%5BHotwire-Turbo-integration%5D</code></pre><h2 id="h2ae60fc72c">ログイン機能を追加していく</h2><p>こちらの<a href="https://github.com/heartcombo/devise" target="_blank" rel="noopener noreferrer">【GitHub】deviseについて</a>を参考にして作成していくのでこちらも参考にしてみて下さい<br></p><h3 id="hd8d793506b">インストール</h3><pre><code>$ rails generate devise:install</code></pre><p>インストールが完了すると下記のように４つほどセットアップして下さいというメッセージが返ってくるかと思いますので、<br>メッセージに沿ってセットアップを行なっていきます</p><pre><code>===============================================================================

Depending on your application's configuration some manual setup may be required:

  1. Ensure you have defined default url options in your environments files. Here
     is an example of default_url_options appropriate for a development environment
     in config/environments/development.rb:

       config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

     In production, :host should be set to the actual host of your application.

     * Required for all applications. *

  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:

       root to: "home#index"
     
     * Not required for API-only Applications *

  3. Ensure you have flash messages in app/views/layouts/application.html.erb.
     For example:

       &lt;p class="notice"&gt;&lt;%= notice %&gt;&lt;/p&gt;
       &lt;p class="alert"&gt;&lt;%= alert %&gt;&lt;/p&gt;

     * Not required for API-only Applications *

  4. You can copy Devise views (for customization) to your app by running:

       rails g devise:views
       
     * Not required *

===============================================================================</code></pre><p><br></p><h3 id="h760eae08c2">セットアップ①</h3><p>メッセージに記載されている下記の部分をコピーし<code>config/environments/development.rb</code>に貼り付けていきます<br></p><pre><code>config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }</code></pre><p>貼り付けるとこのような感じになるかと思います（貼り付けた部分だけ載せています）<br></p><pre><code>config/environments/development.rb  # Uncomment if you wish to allow Action Cable access from any origin.
  # config.action_cable.disable_request_forgery_protection = true
  config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
end</code></pre><h3 id="hb8b5e49a9b">セットアップ②</h3><p>メッセージに記載されている下記の部分をコピーし<code>config/routes.rb</code>に貼り付けていきます<br></p><pre><code> root to: "home#index"</code></pre><p>貼り付けるとこのような感じになるかと思います（コメントアウトは削除して問題ないです）<br></p><pre><code>config/routes.rbRails.application.routes.draw do
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Defines the root path route ("/")
  # root "articles#index"
  root to: "home#index"
end</code></pre><h3 id="hebf55725a6">セットアップ③</h3><p>フラッシュメッセージ（ログイン/ログアウト時にでるメッセージのこと）<br>メッセージに記載されている下記の部分をコピーし<code>app/views/layouts/application.html.erb</code>に貼り付けていきます</p><pre><code>&lt;p class="notice"&gt;&lt;%= notice %&gt;&lt;/p&gt;
&lt;p class="alert"&gt;&lt;%= alert %&gt;&lt;/p&gt;</code></pre><p>貼り付けるとこのような感じになるかと思います（コメントアウトは削除して問題ないです）<br></p><pre><code>app/views/layouts/application.html.erb&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;RailsRecipe&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
    &lt;%= csrf_meta_tags %&gt;
    &lt;%= csp_meta_tag %&gt;

    &lt;%= stylesheet_link_tag "application", "data-turbo-track": "reload" %&gt;
    &lt;%= javascript_importmap_tags %&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;p class="notice"&gt;&lt;%= notice %&gt;&lt;/p&gt;
    &lt;p class="alert"&gt;&lt;%= alert %&gt;&lt;/p&gt;
    &lt;%= yield %&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre><h3 id="h32b9e06708">セットアップ④</h3><p>メッセージに記載されている下記の部分をコピーしターミナルで実行していきます<br>これを行うとログイン画面をカスタマイズすることができるようになる</p><pre><code>$ rails g devise:views</code></pre><p>実行すると<code>app/views/devise</code>ディレクトリができているかと思います<br>ログイン画面は<code>app/views/devise/sessions/new.html.erb</code>になります<br>新規登録画面は<code>app/views/devise/registrations/new.html.erb</code>になります<br></p><h2 id="h1f7ca3c5c3">ユーザーモデルを作成</h2><pre><code>// MODEL部分はモデル名を入力
$ rails generate devise MODEL</code></pre><p>認証機能なのでユーザモデルを作成していきます<br></p><pre><code>$ rails generate devise user</code></pre><p>実行すると<code>db/migrate/20230405145005_devise_create_users.rb</code>のようなユーザテーブルを作成するためのマイグレーションファイルが作成されるかと思います。<br></p><h3 id="hb4b1910b9f">ユーザーテーブルの定義追加</h3><p>デフォルトだとemailとpasswordしかないので下記を追加していきます</p><pre><code>db/migrate/20230405145005_devise_create_users.rb      t.string :username
      t.text :profile
      t.string :profile_image_id</code></pre><p><br></p><h3 id="h6a9efeebd7">マイグレート実行</h3><p>ターミナルで下記コマンドを実行します</p><pre><code>$ rails db:migrate</code></pre><p>実行すると<code>db/schema.rb</code>に作成されたテーブルの情報ができます。<br>こちらに先ほど追加した<code>username</code>　<code>profile</code>　<code>profile_image_id</code>が記載されていれば問題ないです。</p><pre><code>db/schema.rbActiveRecord::Schema[7.0].define(version: 2023_04_05_145005) do
  create_table "users", force: :cascade do |t|
    t.string "email", default: "", null: false
    t.string "encrypted_password", default: "", null: false
    t.string "reset_password_token"
    t.datetime "reset_password_sent_at"
    t.datetime "remember_created_at"
    t.string "username"
    t.text "profile"
    t.string "profile_image_id"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.index ["email"], name: "index_users_on_email", unique: true
    t.index ["reset_password_token"], name: "index_users_on_reset_password_token", unique: true
  end</code></pre><h3 id="hf32c4bc539">アカウント登録画面の確認</h3><p><code>http://localhost:3000/users/sign_up</code>を開くと下記のようにでるかと思います（わかりやすいよう拡大しています）<br><br><img src="https://images.microcms-assets.io/assets/30a2ff08ffb0461f8b48bb692f70d4f3/65c2c536722f4a2eaac5918d9d7093e9/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-04-06%2023.32.32.png" alt=""><br>画像のようにデフォルトで「Eメール」と「パスワード」「パスワード確認」がある状態かと思います。<br><br>画面確認ができたので今回はここまでですが、認証画面のスタイルの変更等行うことで自分好みの認証画面にできるかと思うので<br>試してみて下さい<br><br><br></p>

Ruby on Railsにてユーザー認証を追加する方法についてまとめています

Rails ユーザー認証

<h1 id="h5502a032ec">laravelプロジェクト作成（docker）</h1><p>laravelのプロジェクト作成と基本的なところまでメモがてら記載しています。<br>新規プロジェクト作成時や最初どうやるんだっけって時に思い出し用<br></p><h1 id="hcd3ebce818">1. Laravelプロジェクトの作成</h1><p>プロジェクトを作成します。<code>my-app</code>の部分（プロジェクト名）はお好きにつけてください。<br></p><pre><code>curl -s "https://laravel.build/my-app" | bash</code></pre><h3 id="ha8dcbd8588">オプション sailコマンドのパスを通す</h3><p>もしsailコマンドのパスを通していない方は、通しておくことをおすすめします。<br></p><pre><code>alias sail="./vendor/bin/sail"</code></pre><h1 id="h8e5ba85732"><br>2. コンテナの立ち上げ</h1><p>プロジェクトディレクトリに移動し、sailコマンドでコンテナを立ち上げます。<br></p><pre><code>% cd my-app
% sail up -d</code></pre><p>コンテナ内で作業する方はsail shellで入ってphp artisanコマンドに置き換えて実行ください。<br><br></p><h1 id="hb6fb6fa6f9">データの準備 Modelの作成</h1><p>デフォルトで存在するUserと、ユーザーに紐付いたPostモデルを作成します。<br></p><pre><code>php artisan make:model モデルファイル名（Itemとか） -a</code></pre><p><code>-a</code>はモデル、ファクトリー、マイグレーション、シーダー、リクエスト、リソースコントローラ、ポリシー全て作成する<br>コントローラ：モデルをuseした状態かつCRUDメソッド記載された状態で作成される<br>モデル：DBのテーブルと接続するファイル<br>リクエスト：バリデーション関係のファイル保存時と更新時のファイルが作成される<br>ポリシー：アクセス権限の設定等できたりするファイル<br>■database<br>マイグレーション：テーブル定義ファイル<br>シーダー：データベースに初期データを登録するため<br>ファクトリー：ダミーデータを大量に作成するときのファイル<br></p><h1 id="h92ff3a9b71">マイグレーションファイルの編集</h1><h2 id="hcb5ddb9a86">①テーブル定義</h2><p>作成されたマイグレーションファイルにてテーブル定義を記載<br><a href="https://readouble.com/laravel/9.x/ja/migrations.html" target="_blank" rel="noopener noreferrer">laravel公式マイグレーション</a></p><pre><code>public function up()
    {
        Schema::create('テーブル名', function (Blueprint $table) {
            $table-&gt;id();
            $table-&gt;string('name');
            $table-&gt;string('memo')-&gt;nullable();
            $table-&gt;boolean('is_selling')-&gt;default(true);
            $table-&gt;timestamps();
        });
    }</code></pre><h2 id="ha55f6d6ce7">【補足】</h2><p>リレーションやテストデータ等を用意したい場合はファクトリとシーダーファイルの編集を行う<br><a href="https://qiita.com/garuda_td/items/946364da71fd66cc3a7b" target="_blank" rel="noopener noreferrer">参考サイト</a><br></p><h1 id="h2201b6ed1b">マイグレーション実行</h1><pre><code>php artisan migrate

//sailでマイグレート実行
sail artisan migrate
// sailコマンド使用できないとき（sailコマンドのパスを通す）
alias sail="./vendor/bin/sail"</code></pre><p><a href="https://qiita.com/garuda_td/items/946364da71fd66cc3a7b" target="_blank" rel="noopener noreferrer">laravelとsail1</a><br><a href="https://reffect.co.jp/laravel/laravel-sail#sail" target="_blank" rel="noopener noreferrer">laravelとsail2</a><br></p><h3 id="hd809507c87">【補足】マイグレーションファイルだけ作成したい場合は下記のコマンド</h3><pre><code>php artisan make:migration create_テーブル名_table</code></pre><h1 id="hf64c7c1253">ルーティング</h1><p>Laravelでは、以下のようにルーティングにRoute::resouceを指定することで、CRUDルーティングを一度に行うことができます。<br></p><pre><code>routes/web.phpuse App\Http\Controllers\ItemController;
Route::resource('items', ItemController::class)
    -&gt;middleware(['auth', 'verified']);</code></pre><h3 id="hcdf3fccd9e">ルーティング確認コマンド</h3><pre><code>php artisan route:list</code></pre><h2 id="h540adaa3a4">【補足】ルーティングを制限する場合</h2><p>使用しないメソッドをコントローラーで削除した際に、URLを直だたきされるとないと例外が出てしまうので以下のようにルーティングを制限します。<br>resourceを使ったときのルーティングを制限する方法は2つあります。<br>/routes/web.php</p><pre><code>// show、updateのルーティングを削除

// onlyを使う方法
Route::resource('items', 'ItemController', ['only' =&gt; ['index', 'create', 'edit', 'store', 'destroy']]);

// exceptを使う方法
Route::resource('items', 'ItemController', ['except' =&gt; ['show', 'update']]);</code></pre><p><br></p>

laravelとDockerを使用してプロジェクトを作成するとこをまでをまとめています

laravelプロジェクト作成（Docker）

<h2 id="h6436701f4e">PIKIMARU BLOG</h2><p>このブログは基本的に以下のことを目的としています</p><ul><li>自身の勉強した事柄についてアウトプットや振り返りのため</li><li>自身のポートフォリオとして</li></ul><p><br>上記以外にも単純なブログとしても使用していこうかと思っています<br></p><h2 id="h0eb492e5c9">PIKIMARU BLOGはどのように作成しているか</h2><p>次に本ブログですが一から自分で作成しています<br>具体的には以下のものを使用して作成しています。</p><ul><li>Next.js</li><li>React(TypeScript)</li><li><span style="color:#374151">Tailwind CSS</span></li><li><span style="color:#374151">microCMS(API)</span></li></ul><p><br><span style="color:#374151">Reactフレームワークである</span>Next.jsを使用してスタイルは<span style="color:#374151">Tailwind CSSで対応してます。</span><br><span style="color:#374151">ブログについてはmicroCMSをAPIとして使用しています。</span><br><span style="color:#374151">そのためブログ記事自体はmicroCMS側で書いています。</span><br></p><h2 id="hc7c993c65a">これから</h2><p>普段はバックエンドで業務をしていてPHPを主に扱っているのですが、<br>フロントエンド特にReactに興味を持っていたので、今回ブログサイトを作成してみました<br>ただ、現状スマホサイズに対応できていない部分など多々あるためそちらの対応とコンテンツを増やしていければと思います。<br>あとは単純にブログ記事を増やしていこうかなと、、<br><br><br><br></p>

<h1 id="h97290c8ef0">Inertiaとは</h1><p>Inertiaとは簡単に、サーバーサイド（バックエンド）とクライアントサイド（フロントエンド）をつなぐためのツールです。<br>今回でいうとクライアントサイド（Vue.js）とサーバーサイド（Laravel）に当たります。<br>公式でも下記のように記載しているように接着剤みたいなものだと考えるとわかりやすいです。</p><blockquote>Inertiaはフレームワークではありませんし、既存のサーバサイドやクライアントサイドのフレームワークと置き換わるものでもありません。むしろ、それらと一緒に動作するように設計されています。Inertiaは両者をつなぐ接着剤のようなものだと考えてください。</blockquote><p>ちなみにInertiaの読み方は「イナーシャ」というみたいです。<br>思いっきりイナーティアって読んでいました、、<br></p><h2 id="he9f523899d">Inertiaが対応しているもの</h2><pre><code>クライアントサイド
React
Vue
Svelte</code></pre><p><br></p><pre><code>サーバーサイド
Laravel
Rails</code></pre><h1 id="h236dbe1f04">Inertia使用するメリット</h1><h3 id="h679c687665">これまでのLaravelと同じ感覚でVueやReactなどのモダンフロントを使用することができる</h3><p>Laravelでは、コントローラーで処理を行い、これをビュー側（blade.php)に受け渡してページを表示したりします。<br>Vue.jsを使う場合にも、基本的には、同じような手順で処理を行えます。ただ、<code>Webアプリ全体で使える ルート設定が使えなかったり</code>と色々な不便があります。<br>Inertiaを使えば、Vue側でも、laravelのルート設定を使ったり、ヘッダを組み込んだり、ページネーションを簡単に搭載したりできます。<br></p><h1 id="habab553c56">Inertia使用した実装</h1><h2 id="hf64c7c1253">ルーティング</h2><pre><code>routes/web.phpRoute::resource('items', ItemController::class)
    -&gt;middleware(['auth', 'verified']);</code></pre><h2 id="h2171e4cd81">コントローラー</h2><pre><code>App\Http\Controllers\ItemController.php&lt;?php
namespace App\Http\Controllers;

use App\Http\Requests\StoreItemRequest;
use App\Http\Requests\UpdateItemRequest;
use App\Models\Item;
use Inertia\Inertia;

class ItemController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $items = Item::select('id', 'name', 'price', 'is_selling')-&gt;get();

        //Inertia::renderという関数は第一引数にコンポーネント、第二引数にプロパティ配列を渡します。
        //Inertia::renderを呼び出す事で、どのコンポーネントに対してどの変数をセットするかをここできめ、vueにも反映させることができます。
        return Inertia::render('Items/Index', [
            'items' =&gt; $items
        ]);
    }</code></pre><h2 id="he4e7932367">ビュー側</h2><p>resources/js/Pages/Items/index.vue</p><pre><code>&lt;script setup&gt;
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { Head, Link } from '@inertiajs/vue3';

defineProps({
    items: Array
})
&lt;/script&gt;

&lt;template&gt;
~~省略〜〜
&lt;tbody&gt;
   &lt;tr v-for="item in items" :key="item.id"&gt;
       &lt;td class="px-4 py-3"&gt;{{ item.id }}&lt;/td&gt;
       &lt;td class="px-4 py-3"&gt;{{ item.name }}&lt;/td&gt;
       &lt;td class="px-4 py-3"&gt;{{ item.price }}&lt;/td&gt;
       &lt;td class="px-4 py-3"&gt;{{ item.is_selling }}&lt;/td&gt;
   &lt;/tr&gt;
&lt;/tbody&gt;
~~省略〜〜
&lt;/template&gt;</code></pre><p><br></p>

laravelとvue.jsを使用してプロジェクトを作成した際に、使用していて便利だなと感じた  Inertiaについて振り返りも含めたメモとしてInertiaについて記載しています。

Inertiaとは?

<h2 id="h0118c3f969">この記事の目的</h2><ul><li>Reactの理解とアウトプット、振り返り用</li><li>Reactでよく使われている基本的な技術を言語化できるようする</li></ul><h2 id="h988a96138d">JSX記法のルール</h2><pre><code>// Reactコンポーネントを書く場合、お作法としてreactのインポートが必要（React17のアップデートでJSXを使用するだけの場合は記述不要になった）
import React from "react";
// htmlにコンポーネントを反映するために、react-domをインポートする
import ReactDom from "react-dom";

// Reactでは関数を使用して画面の要素であるコンポーネントを表現していけるので、アロー関数を書いていく
const App = () =&gt; {
 return (
  &lt;&gt; 
   &lt;h1&gt;ReactJSX記法のルール&lt;/h1&gt;
   &lt;p&gt;React学習中&lt;/p&gt;
  &lt;/&gt;
 );
};
// Appをコンポーネントとしてレンダリングする
// 第一引数にレンダリングしたいコンポーネント、第二引数に反映箇所を指定する
ReactDom.render(&lt;App /&gt;, document.getElementById("root"));</code></pre><h2 id="h12c21b5cb0">JSX記法のルールまとめ</h2><ul><li>jsxはjavascriptの中にHTMLを書いていく。</li><li>ファイル拡張子はjsxとする。</li><li>returnの内容が複数になる場合は（）で囲う必要がある。</li><li>returnしていく内容は1つのタグで囲わないとエラーになるので、フラグメント（&lt;&gt;&gt;）で囲ってあげる。</li></ul><h2 id="hf7acb1eae5">コンポーネント</h2><p>コンポーネント：Reactで画面に表示される部品のことで、表示に必要なデータや処理などを1つのオブジェクトにまとめたものです。画面に表示するための部品を作ることによって、いつでも簡単に組み込むことで部品を再利用することができます。<br></p><pre><code>import React from "react";
import ReactDom from "react-dom";

const App = () =&gt; {
  return (
    &lt;&gt; 
   　&lt;h1&gt;ReactJSX記法のルール&lt;/h1&gt;
   　&lt;p&gt;React学習中&lt;/p&gt;
    &lt;/&gt;
  );
};

// コンポーネントをエクスポートして、他のファイルでインポートできるようにする。
export default App;</code></pre><h1 id="he825b68ee2">コンポーネントまとめ</h1><ul><li>コンポーネントとは画面要素の1単位。大（1画面）から小（1つのテキストボックス）まで様々。</li><li>コンポーネント名は必ず先頭を大文字から始めるようにする。</li><li>コンポーネントをエクスポートして、他のファイルでインポートできるようにする。</li></ul><p><br></p><h2 id="h44e51f96ce">参考資料</h2><p><a href="https://ja.reactjs.org/docs/getting-started.html" target="_blank" rel="noopener noreferrer">React公式ドキュメント</a><br><a href="https://ja.reactjs.org/tutorial/tutorial.html" target="_blank" rel="noopener noreferrer">React公式チュートリアル</a><br><br><br><br></p>

Reactの基本であるJSX記法のルールとコンポーネントについてまとめています

【React】JSX記法のルールとコンポーネント

<h2 id="h0118c3f969">この記事の目的</h2><ul><li>Next.jsでブログを作成したときの備忘録</li><li>Next.js13のLinkコンポーネントについて</li><li>エラーについての備忘録</li></ul><p><br></p><h2 id="h9707d3a59a">概要</h2><ul><li>Linkコンポーネントについて</li><li>Next.js12と１３での書き方の違い</li><li>新規タブで開く際の書き方</li></ul><p><br></p><h2 id="h24a8fc2106">Linkコンポーネントについて</h2><p>Linkコンポーネントは画面遷移に使用するaタグのようなもの<br>下記のようにインポートしてから使用する</p><pre><code>tsx
import { ImTwitter } from "react-icons/im";
import Link from "next/link"</code></pre><h2 id="hbc130175ab"><br>Next.js12と１３での書き方の違い</h2><p>Next.js12と１３でLinkコンポーネント書き方が変わったのでそれについて記載。<br></p><h3 id="h4588d6ac92">Next.js12の場合</h3><pre><code>tsx
import Link from 'next/link'

// Next.js12まではaタグを常にネストする必要がある
&lt;Link href="https://twitter.com/piki_maru_ten"&gt;
     &lt;a&gt;&lt;ImTwitter /&gt;&lt;/a&gt;
&lt;/Link&gt;</code></pre><p><br></p><h3 id="hceaec7c993">Next.js13の場合</h3><pre><code>tsx
import { ImTwitter } from "react-icons/im";
import Link from 'next/link'

// Next.js13ではaタグを記載するとエラーになる
&lt;Link href="https://twitter.com/piki_maru_ten"&gt;
     &lt;ImTwitter /&gt;
&lt;/Link&gt;</code></pre><p><br>Next.js13ではaタグを記載すると下記のようなaタグにaタグをネストする書き方はダメ！というエラーが出ます<br><a style="color:#16a262" href="https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor" target="_blank" rel="noopener noreferrer">エラーにあるドキュメントはこちら</a><br><img src="https://images.microcms-assets.io/assets/30a2ff08ffb0461f8b48bb692f70d4f3/1473908045854555979d504db75a5a84/linkerror.png" alt=""><br><br></p><h2 id="h813ef15b41">新規タブで開く際の書き方</h2><p>aタグ必要ないのはわかったけど、新規タブで遷移させる時はどう書くのか気になったのでまとめました<br>Linkタグにそのままtargetとrel属性を追加すればいいだけでした</p><pre><code>tsx
import { ImTwitter } from "react-icons/im";
import Link from 'next/link'

// Linkタグにtargetとrel属性を追加
&lt;Link href="https://twitter.com/piki_maru_ten" target="_blank" rel="noopener noreferrer"&gt;
    &lt;ImTwitter /&gt;
&lt;/Link&gt;</code></pre><p><br></p>

Next.js13からLinkコンポーネントの記載方法が変更されたため、そちらについてまとめています

PIKIMARU BLOGについて

PIKIMARU BLOG

PIKIMARU BLOGはどのように作成しているか

これから

Related