はてなブックマーク

必要なもの SVG形式の画像データ 手順 SVG画像をエディターで開き、コードを全てコピー パーセントエンコーディング(変換ツール)してurlに指定 必要に応じて色や表示方法を調整 //fill='%23<カラーコード>'を追記して色を調整。 //%23 = # background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg class='drawer__icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Ctitle%3Eframe%3C/title%3E%3Cg%3E%3Cpath fill='%23008ed6' d='M22.31,14.15c-2.13-3.86-6.93-8.07-8-11.43S12.73-1.16,9,2.7A34.71

<template> <div> <p>{{ greet }}</p> </div> </template> <script> export default { props: { greet: { type: String, default: 'hogehoge' } } } </script> <template> <div> <h1>Hello from App.vue</h1> <Child greet='Hello with props'/> </div> </template> <script> import Child from './components/Child.vue' export default { components: { Child } } </script>

Gatsby.jsを使って、jsonファイルから複数のページを生成する方法をまとめます。 Gatsby、情報自体はそこそこ豊富なんですが、日本語の情報が少ないですね。。 記事データをまとめたjsonファイルを作成 [ { "slug": "how-to-use-gatsby", "title": "【Gatsby.js】「ここだけ押さえれば普通に使える」って知識をまとめてみた", "content": "Gatsby.jsでシンプルな静的サイトを作る際に必要な知識だけをまとめました。CMSとの連携等については今回は扱いません。本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト", "tags": ["React", "Gatsby"] }, { "slug": "learn-react", "title": "Reactの学習、今からやるならこうする", "conte

考慮すべきタイムゾーンは以下の4つ Rubyプロセス Time.now等に影響 config.time_zone Time.zone.now等に影響 config.active_record.default_timezone DBから受け取った時刻をどのタイムゾーンとして解釈するか DB SQL文のNOW()等に影響 Rubyプロセス 開発環境(Docker) DockerfileにENV TZ Asia/Tokyoを追加して対応 本番環境 環境変数にTZ = Asia/Tokyoをセットして対応 config.time_zone 共通

Brewfileを使うと、アプリのインストールがすごく楽になります。 超簡単で超便利なので超おすすめです。 欲しいアプリをファイルに定義して、コマンドを叩くだけでインストールされます。 gitなどコマンドラインで使うツール GoogleChromeなどインストーラーを使っていれるアプリ LINEなどAppStore経由でいれるアプリ 全てコマンド1つで揃います。 導入 Homebrewが入っていれば使えます。入っていない場合には以下のコマンドでインストール $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" cask_args appdir: "/Applications" brew 'git' tap 'heroku/brew' brew

Gatsby.jsでシンプルな静的サイトを作る際に必要な知識だけをまとめました。CMSとの連携等については今回は扱いません。 Gatsby.jsとは React製の静的サイトジェネレーターです。webサイトを作る時に使います。 Gatsby.jsのメリット 従来通りHTML/CSS(+Gulp, Webpack)でコーディングする方法と比較した場合の最大のメリットは表示速度がめっちゃ速いことです。びっくりするくらい速いです。 その他のメリットとしては JSXを使うので、HTMLの記法等にミスがあったときにすぐに気が付くことができる プラグインが豊富(Markdownファイルを読み込む、PWA対応、etc) ヘッドレスCMSとの相性が良い Gatsby Themeを使って、既存のデザインを流用することができる カスタマイズが前提ならthemeは使わない方が良さそう などがあります。 セットア

Reactの学習を初めて約2週間が経ちました。 Railsの時と違って「とりあえずこれをやっておけば良い」ってものが見当たらずなかなか大変でしたが、試行錯誤の上色々と見えてきたのでまとめていきます。 はじめに React普通にむずいです。 他の言語の経験が無い場合、VueやRailsなどから始めることをおすすめします。 学習前の知識レベル Railsエンジニア JavaScriptは簡単なDOM操作程度ならできる Vue.jsを20時間くらい勉強した(途中でReactがやりたくなった) Webpackで静的ページのコーディング環境を整えている 学習法見定める上での難点 Reactは過去数年で大きく進化しているので、今は主流ではなくなった書き方の記事、チュートリアルがたくさんある 公式チュートリアルもProgateも古い書き方 Railsチュートリアルのような絶対的な教材が存在しない 学習方

Visual Studio Code Remote Development VSCode Remote Containerは、VSCodeの拡張機能の1つです。 Dockerのコンテナ内でVSCodeを開き、開発することを可能にします。 使ってみてかなり良さげだった&当初はよく分からない部分も多かったので、2週間くらい使ってみて分かったことをまとめます。 そもそもDockerで開発環境を作るメリット 開発環境が簡単に作って壊せる 今どういう環境で開発しているのかファイルで確認でき、バージョン管理も容易 PCにRubyやらRubocopやら各種CLIやらをいれる必要がなくなる プロジェクトごとに言語等のバージョンを切り替える必要がなくなる VSCode Remote Containerを合わせて使うメリット 開発環境をDockerで作っていても、構文チェックや補完が効く ローカルで開発すると

$ rubocop Inspecting 67 files ........CCC...CC.C..........................................CC.C... 67 files inspected, 24 offenses detected inherit_from: .rubocop_todo.yml require: - rubocop-rails # 対象外 AllCops: Exclude: - "vendor/**/*" - "bin/**" - "db/schema.rb" - "node_modules/**/*" - "tmp/**/*" - "lib/**/*" DisplayCopNames: true TargetRubyVersion: 2.6 # trueかfalseを設定しないと警告が出る Style/HashEachMeth

$ docker container ls CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 7b6a79314721 sample-app_web "/bin/sh -c 'rm -f t…" 5 minutes ago Up 5 minutes 0.0.0.0:3000->3000/tcp sample-app_web_1 2ed21c2aac12 postgres "docker-entrypoint.s…" 5 minutes ago Up 5 minutes 0.0.0.0:5434->5432/tcp sample-app_db_1

TODOアプリにログイン機能を実装します。 ・【Rails】バリデーションを実装する ・【Rails】パーシャルを利用する Userモデルを作成 name、email、password_digestという属性を持つUserモデルを作成します。passwordではなく、必ずpassword_digestという属性を設定してください。