2024-03-17

vue.js導入 vue3

javascriptの勉強中並行してVue.jsの勉強をしたいので導入方法を残しておきます。

vue.jsとは

javascriptのフレームワークライブラリを追加することで、
webアプリケーションを開発することができる。
MVVM（Model-View-ViewModel）という設計手法がとられているのでプログラムの修正や追加がしやすい。

環境　Ver
仕様OS　 windows 11 pro
vue version @vue/cli 5.0.8
node version v21.7.1

Vue.jsだけインストールするのではなく
Node.js(npm)とvue.jsの２つをインストール

Node.jsのインストール
公式サイトのDLページに行き左側の推奨を押しDL
インストールする際Automatically install the necessary tools.・・・
にはチェックを入れなくて大丈夫です。

node --version
  v21.7.1
npm --version
  10.5.0

を打ち込みバージョンの確認を行い
インストールされているかチェックを行う。

vue.jsのインストール
コマンドプロンプトのホームディレクトリで

  npm install -g @vue/cli

インストール後

  vue --version

を入力してインストールができたかを確認。

vue.js新しいVue.jsプロジェクトを作成

  vue create practice

プロジェクト名はpracticeにして作成

  ? Please pick a preset: (Use arrow keys)
  > Default ([Vue 3] babel, eslint)
      Default ([Vue 2] babel, eslint)
     Manually select features

とでるが
上から　Vue3を使用するかVue2を使用するか手動で設定するかの選択。
今はVue2は使われていないそうなので上か下を選択。
ここでは上を選択。
プロジェクトが作成されたらcd practiceにで移動。
できなかったら下に自分が起こった、
エラー時の対応を書いてあります。
プロジェクトに移動出来たら。

   npm run serve

コマンドを打ち込み以下のように出れば起動成功

> test-vue@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...
 DONE  Compiled successfully in 9269ms                            

  App running at:
  - Local:   http://localhost:〇〇〇〇/
  - Network: http://〇〇〇〇/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

ブラウザでhttp://localhost:〇〇〇〇/と打ち込み

以下エラーについて

npm install -g @vue/cliができないときは管理者権限でないとできない場合もあるので

  sudo npm install -g @vue/cli

でインストールしてみる。

npmのバージョンが古い
コマンドプロンプトで

  npm install -g npm@latest

を打ち込む

createできないとき
Initializing git repository...
Installing CLI plugins. This might take a while...

00h00m00s 0/0: : ERROR Error: Command failed: yarn config get npmRegistryServer
ERROR: [Errno 2] No such file or directory: 'config'

Error: Command failed: yarn config get npmRegistryServer
ERROR: [Errno 2] No such file or directory: 'config'

自分はこのエラーが出ました。
yarnが取得できないパッケージマネージャーに問題があるよといっています。
実際ここでエラー通りに受け取ってしまいました。
私はubuntuを使っていますが
コマンドプロンプトで実行しましょう。
某プログラミングスクールに通っていて
何でもかんでもubuntuを使っていましたが
ネットにもある通り手順を踏まないといけませんね。

最後に購入した本を載せておきます。
2024年3月3日発売なのでvue3を新しく習おう
という方は参考までに
良い点

文字が大きいので初学者に優しい。
vue3対応
vue2移行者よりvue3でvueを初めて触れる人用
値段が良心的

悪い点

サンプルコードを書いてもどうなるのか実際に書いてみないとわからない（画像がない箇所がある）
ページ数が120

Vue.js 超入門 v3.4+: 最初に手にしてよかった本 (技術書)

作者:ちょいまる

Amazon

2024-03-17

ruby on railsの{"id"=>"sign_out"}エラー解消

ruby on railsでログアウト機能実装のエラー

見出しの通りrailsでwebアプリを実装中にログアウトボタンを押すとエラー画面が出てしまう問題に直面しました。
最初の投稿なので拙い点が多くあると思いますが今後のために残しておきます。

・実装環境

  def show
    if params[:q]&.dig(:product_name)
      squished_keywords =params[:q][:product_name].squish
      params[:q][:product_name_cont_any] = squished_keywords.split(" ")
    end
    @user = User.find(params[:id])
    @q = @user.items.ransack(params[:q])  
    @items = @q.result
  end

usercontrollerコード内の

@user = User.find(params[:id])

の部分でエラーが発生しタイトルのようなエラーがでてしまう。
これは
params[:id] はユーザーのIDを表しますが、この場合は 'sign_out' という値になっているため、ユーザーの検索に失敗しています。とのこと

解決方法

解決方法は何通りかあるので自分が試したもの、ネットで調べたものを残しておきます。
①ルーティングを設定

  devise_scope :user do 
　　get '/users/sign_out' => 'devise/sessions#destroy'
  end

②devise.rbを変えるconfig/initilizers/devise.rbの272行目あたり

   config.sign_out_via = deleteの
   delete→get

筆者は①の方法と合わせて
before_action :move_to_index,only:[:index]から
before_action :move_to_index,except: :indexに変更

onlyとexceptの違いは、どちらのアクションでbefore_actionコールバックが実行されるかにあります。onlyは指定されたアクションでのみ実行され、exceptは指定されたアクションを除いてすべてのアクションで実行されます。

こういった間違いもエラーを見て辿っていくことが大事だということがわかりました。

2024-03-08

エンジニアとしての一歩

未経験エンジニア志望の人が応募企業に好印象を持ってもらうために、ブログなどを始める人がいる。と言われるのを見たことがある。

自分も就職経験があるから何か常識的なことを発信していたりするのは、企業に好印象を与える、という打算で発信を始めることは悪いことではないと思う。

自分が知らないエラーには自分より先に行っている、自称初学者さんに助けられたことが何度もあった。自分で習った技術を発信するということは勇気がいることだし、間違いがないよう自分が理解できるように書いたことがさらに理解につながる。

自分はjavascriptの勉強を始めたが、本が古く今では使わないコードを使っていた。この状況で発信したらと思うとぞっとする。

これからは自分でならったことはなるべく文字に書き起こしてあっているか確認して発信していきたい。