nakauの技術ブログ 〜プログラミングを学ぶ〜

Ruby/Ruby on Rails/Javascript/jQuery/GitHub/AWS/Windows/Windowsバッチファイル/Powershell

rails - エラー解決："Your Yarn packages are out of date!"

はじめに

今回はエラー解決についての記事です。
記事作成用に新規アプリケーションを立ち上げ、いつも通り "rails s" をしたら……

エラー画面

=> Booting Puma
=> Rails 6.0.3.2 application starting in development 
=> Run `rails server --help` for more startup options
warning Integrity check: Top level patterns don't match                                                                                                                                 
error Integrity check failed                                                                                                                                                            
error Found 1 errors.                                                                                                                                                                   


========================================
  Your Yarn packages are out of date!
  Please run `yarn install --check-files` to update.
========================================


To disable this check, please change `check_yarn_integrity`
to `false` in your webpacker config file (config/webpacker.yml).


yarn check v1.22.4
info Visit https://yarnpkg.com/en/docs/cli/check for documentation about this command.


Exiting

解決方法

どうやら yarnのバージョンを確認してほしいらしい
以下のコマンドを実行し、yarnでバージョンアップを実施

$ yarn upgrade

アップグレード完了後、サーバー起動 f:id:nakau_tech:20200827224356p:plain

最後に

そして世界に平和が訪れたのであった。（実装がんばります）

Rails6 - jQuery導入方法

はじめに

今まではRails5系で開発をしていましたが、個人開発にあたり
新しいRails6を使ってみよう！と思い立ちました。

参考
Railsガイド Ruby on Rails 6.0 リリースノート

＞ WebpackerがRails 6のデフォルトJavaScriptコンパイラになる

今まではjQueryを使うのに "jquery-rails" のGemを追加して使用していましたが
これからはWebpackerを用いて使用するそうだ。

導入手順

1.　jquery インストール
$ yarn add jquery
2.　environment.jsに追記

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
# ---追記箇所--- #
const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery/src/jquery'
    })
) 
# ---ここまで--- #
module.exports = environment
3.　application.jsに追記

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
# ---追記箇所--- #
require('jquery')
4.　jQueryのフォルダ・ファイルの作成

ディレクトリ作成

app/javascript/jquery/
app/javascript/jquery/src/

jsファイル作成

app/javascript/jquery/src/jquery.js
app/javascript/jquery/src/hoge.js
5.　jquery.js にインポート記述

app/javascript/jquery/src/jquery.js

import "./hoge"
6.　hoge.js にJavascript記述

app/javascript/jquery/src/hoge.js

console.log('test');
7.　ブラウザで確認

ちゃんと読み込めていますね。 f:id:nakau_tech:20200825002721p:plain

8.　hoge.jsにjQueryで好きに実装！

jsのファイル名は言わずもがな hoge.js じゃなくて好きに名付けてください。 その際、jquery.js のimport を忘れずに。

最後に

私はRails6のjQuery導入でプチハマりしまして、Qiitaに↓を投稿しました。

qiita.com

もしエラーが起きた際は役に立つかもしれないので参考にどうぞ。

jQuery - マウスオーバーしたサムネイル画像をメイン画像に表示/切り替え

はじめに

先程、"jQuery - マウスオーバーしたサムネイル画像をメイン画像に表示/切り替え"という技術記事をQiitaに投稿しました。 qiita.com

この記事の中で一番の肝となる、jQueryの動作の流れをもう少し詳しくこちらの記事に書いていきます。
※コードの記述方法というよりも、動作のイメージを掴む目的の記事です。

実際の動作はこちら

f:id:nakau_tech:20200823003725g:plain

jQuery コード (Qiita記事より）

$(function(){
  // 最初の画像のみ半透明解除
  $(".thumbs__lists__item__image").first().css('opacity', '1'); // ①
  // マウスオーバーの処理
  $(".thumbs__lists__item__image").mouseover(function(e){       // ②
    let mainDataIndex = $(this).parent().attr('data-index')     // ③
    $(".thumbs__lists__item__image").each(function(){           // ④
      let subDataIndex = $(this).parent().attr('data-index');   // ⑤
      if (subDataIndex == mainDataIndex){                       // ⑥
        $(this).css('opacity', '1');
      } else {
        $(this).css('opacity', '0.5');
      };
    });
    $(".main__lists__image").each(function(index){              // ⑦
      if(index == mainDataIndex){                               // ⑧
        $(this).css('z-index', 99);
      } else {
        $(this).css('z-index', -1);
      };
    });
  });
});

HTML、CSSはQiita記事のほうに記載されていますのでご確認ください。

図で挙動を説明

ページ読み込み時

  // 最初の画像のみ半透明解除
  $(".thumbs__lists__item__image").first().css('opacity', '1'); // ①

f:id:nakau_tech:20200823001009p:plain

サムネ画像にマウスオーバー

 // マウスオーバーの処理
  $(".thumbs__lists__item__image").mouseover(function(e){       // ②
   let mainDataIndex = $(this).parent().attr('data-index')     // ③

f:id:nakau_tech:20200823001012p:plain

z-indexをコントロール

    $(".main__lists__image").each(function(index){              // ⑦
      if(index == mainDataIndex){                               // ⑧
        $(this).css('z-index', 99);
      } else {
        $(this).css('z-index', -1);
      };
    });

f:id:nakau_tech:20200823001016p:plain f:id:nakau_tech:20200823001030p:plain

マウスオーバーしたサムネ画像がメイン画像に表示された状態になる。

f:id:nakau_tech:20200823001034p:plain

サムネイル画像の半透明処理も同じロジックでopacityの値を変えれば 選択されている画像がわかりやすくなります。

そして、こうなる

f:id:nakau_tech:20200823003725g:plain

大切なこと

こうした細かい部分は、すぐにググってコピペしがちですが
自分の脳みそで考えて図で表現できるようになると、今後似たような場面で
実装がスムーズにできるようになると思う。

はじめてQiitaに記事を投稿して感じたこと

はじめに

先程、”BEMによるCSS設計”という技術記事をQiitaに投稿しました。 qiita.com

私にとってはじめてのQiita投稿だったので、そのとき感じたことや気づきを語っていこうと思います。

こんな記事でも、Qiitaに載せて良いのか…？

記事を書いていく中で私はずっとこんなことを思っていました。
「いつもお世話になっているQiitaの記事はわかりやすくてタメになる。
私みたいな初学者が作った記事なんてどうせ…」と。

苦戦しながらも一通り書き終えて、プレビューで見たら案の定、
わかりにくい。
自分で書いたはずの文章なのに、読み返してみると自分のイメージしていた完成図とズレているような違和感がある。
この瞬間、私は「やっぱりもう少し考えてからやろうかな」と投稿ボタンではなく下書きボタンを押そうとしていました。

今はとにかくアウトプットだ

少し凹みながら、チーム開発をしていたメンバーのLINEグループに
「いやぁ技術記事書いたりツイートしたりするの難しい…」
というと、メンバーの一人がこのような返信をくれました。

「（自分は）短い記事をたくさん書いて、このペースに慣れることから始める」

私はこの言葉を聞いて、「アウトプットはまず、質より量だ」という言葉を思い出しました。

何も書いてきていない私が、いきなり優れた技術記事を書けるわけがない。
今はとにかく量を意識し記事を投稿する習慣をつけ、その上で改善点を考えていこう
そう思い、投稿ボタンを押しました。

改めてアウトプットの重要性に気づく

こうして記事にまとめてみると、いかに自分の理解が浅かったか、まとめる能力が低いかを実感できる。
思考整理、復習、文章を書くトレーニング…　とにかく量をこなし、小さな経験を積み上げていくことが大切だと気が付きました。

最後に

自分のためにアウトプットを継続していこう。