Rails slim におけるlink_toの使い方メモ

1行パターン

= link_to "表示する文字列", リンク先

コントローラのメソッドを呼ぶ場合

= link_to 表示する文字列, path名(引数),  method: :post

※ postで呼ぶ場合はmethod: :postをつける、つけないとGETで呼ばれる

= link_to 表示する文字列, { controller: 'コントローラ名', action: 'アクション名', 引数1: 値, 引数2: 値}, method: :post

例：
= link_to 表示する文字列, { controller: 'article', action: 'create', title: "aaa", author: "bbb" }, method: :post

例えば最終的に別URLのページへのリダイレクトをする場合

= link_to 表示する文字列, path名(引数),  method: :post, target: '_blank', rel: 'noopener noreferrer'

link_toの表示名が複雑な場合

link_toをブロックで書く

= link_to リンク先 do
  div
  |
  p 

コントローラーのアクションを呼びつつ、別タブで開くパターン

= link_to path名(引数),  data: { method: :post }, target: '_blank', rel: 'noopener noreferrer' do
  div
  |
  p

ブロックで書く場合のポイントは、

• link_toの第1引数がリンク先になること
• method: :postをつける場合はdata: {} の中に入れる必要があること
• do をつけること

Next.jsをAmplifyでホスティングしCloudFrontで特定のパスで呼ばれるようにしたが、cssやjsファイル、画像が見つからないと怒られた時の対応

最近仕事でNext.jsを使い始めたのですが、一番ハマったことなので記事にしておきます。

ネットで解決方法を探したのですが、やりたいことと一致する記事には会えなかったのでもしかしたら参考になるかもしれません。

まず結論

最終的に設定したこととしては、

画像

画像のurlを設定する際に、amplifyのURLが設定されるようにしてあげる

この記事が、コードも書いてあり参考になりました

maku.blog

cssやjsファイル

CloudFrontのビヘイビアで、パスパターンに/_next/*を設定しオリジンにはAmplifyのURLを設定してあげる

（今回これで解決はしましたが、割と無理矢理な気はしています。もし新たに別でNext.jsを立ち上げて同じようにCloudFrontのビヘイビアを設定した場合は詰むので、もしもっと良い方法がありましたら教えていただきたいです）

です。

試行錯誤の結果なので、cssやjsファイルの部分に関してはこれでいいのか微妙ですが、やったこととしては以上なので、覚えている範囲で試したことを次に書いていこうと思います。

起きた事象

まず起きた事象としては、

Next.jsをAmplifyでホスティングしCloudFrontで特定のパスで呼ばれるように設定しました。

実際にURLにアクセスしてみると、 CSSが効いておらず装飾されていない文字列が表示されていました。

また、画像も表示されていませんでした。

どんなエラーが出ている確認するためにDevToolsを見てみると、cssファイルとjsファイル、そして画像ファイルを見にいこうとして404を返しているという状態でした。

ただ、ローカルでは問題なく表示されているのと、Amplify側で確認した時も問題なかったので、ファイルが元々無いという問題ではないことは分かっている状態でした。

話は戻ってDevToolsで404が出ているファイルのパスを確認すると、ClourFrontで設定している飛び先のURL/画像のパスとなっており意図しないところのパスを見にいこうとしているのが原因のようでした。

正しくはAmplify側でビルドしてcssやjsファイルを出力するのでそのファイルを見に行って欲しかった（AmplifyのURL/画像のパスが正しいURL）

試したこと

assetPrefixを設定してあげる

Next.jsにはassetPrefixという設定があり、これをつけてあげることで/_next/以下のファイルの前にURLをつけてあげることができるものです。

このページの最後に書いてあるのですが、publicフォルダは対象外用のようで自分で実装してねと書いてあります。

nextjs.org

やりたかったこととしてはこれでできそうなので意気揚々と設定してみましたが、この方法では上手くいきませんでした。

これでできれば完璧だったのですが、、、

もしかしたらこの設定を使う際に設定しておくべきことが他にもあったのでは無いかと未だに少し思います。

basePathを設定してあげる

assetPrefixではダメでしたが、似たような設定にbasePathというのがあるので、これならと思い設定してみましたが、これもダメでした。

他にも

関係ないだろうとは思いつつ、rewritesという設定を使って別のパスに飛べるようにしたりCORSを設定してみたりしましたが、ダメでした。

また、最終手段として/_next/以下のファイルをS3に上げてそのURLを読んでみるという方法も考えていました。

AmplifyでビルドしたファイルがS3にあるはずなのですが、見た目上では分からないので確実に見に行けるようにS3に置けばいいのではと予想していました。

結局試すことはなかったですが。

再度結論

画像

画像のurlを設定する際に、amplifyのURLが設定されるようにしてあげる

この記事が、コードも書いてあり参考になりました

maku.blog

cssやjsファイル

CloudFrontのビヘイビアで、パスパターンに/_next/*を設定しオリジンにはAmplifyのURLを設定してあげる

（今回これで解決はしましたが、割と無理矢理な気はしています。もし新たに別でNext.jsを立ち上げて同じようにCloudFrontのビヘイビアを設定した場合は詰むので、もしもっと良い方法がありましたら教えていただきたいです）

JavaScriptで指定した回数で繰り返し処理する方法

JavaScriptで指定した回数で繰り返し処理する方法をいつも忘れてしまうので、備忘録用にメモ

countを使いたい場合
[...Array(指定した回数)].map((_, i) => 処理)

いらなければ、
[...Array(指定した回数)].map(() => 処理)

簡単に解説

指定した数の要素を持った配列を作成し、mapにより要素の数だけ繰り返しが行われます

ちなみに配列の要素は全て空です

なので、

[...Array(指定した回数)].map((i) => iを使った処理)

のように書くと、iはundefineと怒られます。

また、配列の中身を表示させようとすると

console.log([...Array(3)])

以下のように空のitemsですと言われます。

[ <3 empty items> ]

参考

qiita.com

Next.jsでImageコンポーネントを使用しようとして「'Image' を JSX コンポーネントとして使用することはできません。」と表示されたときの対処法

Next.jsではimgタグではなくImageコンポーネントを使用するように推奨されているようです。

推奨されているなら積極的に使おうと、imgタグで書いていた部分をImageに変更したらエラーが出ました。

その時の対処法になります。

対処法

対処法はシンプル Imageがimportされていないだけでしたので、importするだけです

import Image from "next/image"

nextjs.org

たまに、こういったちょっとした所で変にハマることあるよね。。

小石につまづいたみたいな感覚

Next.jsの立ち上げを仕事で行ったのでその時のメモ その2

前回

tchkmch.hatenablog.com

デフォルトブランチをdevelopに変更

mainブランチは本番環境用にしたいので、開発用をまとめるブランチとしてdevelopブランチを作成

また、developブランチをデフォルトのブランチに変更

GIthubのリポジトリページにおいて、Settings > General > Default Branch で 左右のマークからdevelopブランチを選択すればOK

mainブランチの保護

mainブランチが消されることを防ぐために保護の設定をします

GIthubのリポジトリページにおいて、Settings > Branches > Add rule

Brach name pattern に「main」と入力し、createボタンを押せば完了（いろんなチェックボックスがありますが、今回は保護したいだけなので無視でOK）

Amplifyで環境構築

前回無事立ち上がるところまでできたので、中身を作る前に先にデプロイ環境を作ってしまいます。

AWSのAmplifyを使って作成

今回Next.jsではISRというレンダリング方法で進めていく予定ですが、Amplifyで対応しているということでそれを期待して進めます。（ダメだったらSSGにしようかな）

aws.amazon.com

Amplify > 新しいアプリケーション > ウェブアプリケーションをホスト

今回はgithubなので、Githubを選択

あとは公式の手順に沿って進めていけばできました！（まだ初期画面なのでISRでできるかは不明ですが）

aws.amazon.com

下準備はできたので、次回からは本格的に作成スタート！

Next.jsの立ち上げを仕事で行ったのでその時のメモ その1

仕事でReactからNextへの移行を行なったので、その時のメモ

新たにリポジトリを作成して行いますが、基本的に移行なのでパッケージ等はできるだけ同じものを使う前提で進めていきました

Next.jsをインストール

Githubで既にリポジトリを作成済みで、ローカルにクローン済みの地点からスタート

まずは、Next.jsの立ち上げコマンドを実行

yarn create next-app --typescript

立ち上げ時の質問事項

What is your project named? … joins-public
Would you like to use ESLint? … No / Yes
Would you like to use Tailwind CSS? … No / Yes
Would you like to use `src/` directory? … No / Yes
Would you like to use App Router? (recommended) … No / Yes
Would you like to customize the default import alias? … No / Yes

質問に対する回答

What is your project named?

プロジェクト名を入力

Would you like to use ESLint?

ESLintが必要かどうか

コードをきれいに安全に保つためにも入れておくに越したことはない

ちなみにyes/noを入力するのではなく、⇦⇨で選択してEnterを押す形式

Would you like to use Tailwind CSS?

Tailwind CSSを使うかどうか

個人的には使いますが、今回の仕事ではSASSを使うので入れませんでした

Would you like to use src/ directory?

pagesディレクトリをsrc以下にするか選択

nextjs-ja-translation-docs.vercel.app

Would you like to use App Router? (recommended)

Next.js 13.4から新たに追加された「App Router」を使うかどうか

公式はこちらを使うように推奨しています

SSRを使うのならこちらにしても良いのかも

codezine.jp

Would you like to customize the default import alias?

importのパスをカスタマイズするかどうか

私はまだ使ったことがないが、大きなプロジェクトで階層が深くなってしまうと分かっているのなら使うのかな

初回に入るパッケージ

Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- eslint
- eslint-config-next

パッケージインストール後

リポジトリの下に新たにプロジェクトが作成されてしまったので、リポジトリ直下に移動

一度立ち上げてみる

$ yarn build
$ yarn start

無事、起動成功！

次回、デプロイ環境作成

tchkmch.hatenablog.com

Rubocopでselfを使って怒られた話

Rubocopで以下のメッセージで怒られた

Style/RedundantSelf: Redundant self detected.

調べるとselfを使う必要があるのはセッターメソッドだけのようだ

www.te-nu.com

仕事しながらRubyとRailsを習得したのでRubocopに教えてもらえて助かる