はてなブックマーク

これまでの記事ではShopify自体の解説を中心にしていました。 ここからは、より開発者向けの内容を解説していきます。 また、解説の中で、「変数」「配列」「関数」などいわゆるプログラミング用語が出てきます。 なんとなくJavaScriptやjQueryを使ったことがある方なら普通に理解できると思いますが、これらについての詳しい解説は特にしないので、あらかじめご了承ください。 Shopifyの日本語の解説記事は環境構築などが中心で、Shopify独自のプログラミング言語「liquid」についての解説記事はほとんどありませんでした。 なので、Shopifyでサイトを開発したいけど難しい...liquidが全然分からない...という方のお役に立てれば幸いです。 ■バックナンバー #01 - ローカルで開発する環境を構築する手順 #02 - 無料テーマのディレクトリ構造の解説 #03 - 仕様や用

Vue.jsでアプリケーションを開発してビルドするには、 npm run build のようにビルドコマンドを実行するかと思います。 しかし、ビルドされたファイルを開いてみると、画面が真っ白で何も表示されないことが先日起きました。 今回はその時の対処法、試したことをまとめました。 ■ 環境 vue：3.9.2 npm：6.4.1 ビルドされたファイルが画面に何も表示されない理由 Vue.jsでの開発時、デフォルトの設定のままビルドを行うと、出力ファイルはドメイン直下に配置される想定でビルドされるらしく、jsなどのパスは下記のように出力されます。 /static/js/app.js この場合、ドメイン直下にファイルを配置すれば問題ないのですが、ドメイン直下以外のサブディレクトリに配置した場合、パスが通りません。 サブディレクトリに配置してもパスが通るようにするには、 ./static/js/

Microsoftが提供している無料のテキストエディター「Visual Studio Code（以下vscode）」をインストールしたら、最初に設定したいことをまとめました。 見た目の変更から、細かい設定まで解説しているので、最近vscodeをインストールされた方はぜひ参考にしてみて下さい。 画面の説明 画面左側に表示される内容は、サイドバーのどのアイコンを選択しているかによって変わります。 現在開いているフォルダ ファイルや単語の検索や置換 現在開いているフォルダがバージョン管理システム対象の場合、GUIで操作出来る コードのデバッグ（あまり使わない） 拡張機能の管理 また、上記画像の⑥の歯車のアイコンをクリックすると、VSCodeの様々な設定を変更することが出来ます。 エディタの見た目を変更する テーマの変更 VSCodeにはデフォルトでテーマがいくつか入っています。私は「Monoka

命名規則を一瞬で変更 - change-case https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case 様々な単語の命名規則を変更できる拡張機能です。 例えば、ベースの文字をfoo_barとすると、以下のように変更できます。 キャメルケース：fooBar ハイフンケース：foo-bar 大文字：FOO_BAR 区切り無し：foo bar この他にも10以上の変換方法が用意されています。 おすすめ設定 拡張機能をインストール後、キーボードショートカットを開きます。 extension.changeCase.commandsで検索をして、好きなキーバインド（ショートカットキー）を登録します。私はCommand + _にしています。 これで、単語を選択した状態で先程登録したキーバインドを実行すると、変換候補