絞り込み

最新の投稿

NoImage Polygon
プログラミング

Nullはなぜ危険なのか

こんばんは、オキリョウです Kotlin 1.7.0がついにきましたね! https://blog.jetbrains.com/kotlin/2022/05/kotlin-1-7-0-beta/ みなさん期待を膨らませていることだと思います。 ところで、このバージョンの目玉として取り上げられているものの中に、max関数及びmin関数があります。 名前を見てわかる通り、これはリストの中の最大、最小の値を取ってくる関数になります。 こんな原始的な機能すらKotlinにはなかった・・・というわけではありません。 代わりにmaxOrNull、minOrNullという関数が存在します。 では何が違うのかというと、最大値及び最小値が存在しないときの挙動です。従来 -> nullを返す今回 -> エラーを投げるとなっています。 最近ではNullは敬遠されがちです。その流れを汲み取ってこの関数を実装したのでしょう。 ものすごく良さげな機能に見えますね。 でも、実は私、あまり良い気がしていません。 とりあえずNullは危険だ!という理由でより危険なこの関数を使う人がいるかも?と思っているからです。 そこで、なぜNullが危険と謳われているのかを解説していきたいと思います。 Nullの危険性Nullの危険性に触れてみるまず、以下のコードを見てみましょう。こちらはJavaのコードになっています。public static void main(String[] args) { Integer value = 5; System.out.println(value * value); }至って普通のコードですね。出力結果は以下のようになります。25 それではこのコードを少し編集してみましょう。public static void main(String[] args) { Integer value = null; System.out.println(value * value); }value変数に入れる値をnullにしてみました。この場合どのような挙動をすると思いますか? そもそも数値型にnullなんか入らなさそうだからコンパイルすら通らなさそうです。 実はこれ、コンパイルが通るんです。 ただ、実行しようとするとエラーを吐いて止まります。Exception in thread "main" java.lang.NullPointerException Nullの正体なぜ上記のような挙動をするのでしょうか? それはnullが何かを理解すればすぐにわかります。 nullは何もないことを表す番地へのポインタです。 先程の実行例を見てみましょう。Integer value = 5;これは、5という値がとあるアドレスに格納されていて、そのアドレスの番地をvalueが保存している・・・という構造になっています。 ではnullの場合はどうでしょう?Integer value = null;これは、何も意味がないというアドレス(通常は0アドレスとからしい)の番地をvalueが保存しています。 ここから、value自身は両者とも同じようにポインタを指していることがわかります。 問題は、そのポインタの先に値がある場合とない場合があるということです。 そのせいで、実行時ではないとエラーがわからないのです。 説明がややこしくてわからん!という人は以下のように考えましょう。 Integer型とは、暗黙的にInteger or null型になっていた これらはもちろん、他の型でも当てはまります。 例外として、プリミティブ型と呼ばれるポインタを使わない型にはnullは使えません。 何が恐ろしいかここまで色々話してきましたが、結局nullの何が恐ろしいのでしょうか? まとめると以下の通りです。実行するまでエラーが出ないため、本番環境で爆発する可能性があるnullを参照した場所でエラーが起きるため、どこでnullが代入されたか(すなわち原因)を特定するのは困難nullを使わないように制御する方法がないため、人力でnullチェックをする必要がある(人力なので忘れがち)これらのことから、エンジニア界隈ではnullを恐れる人が多発する事になりました。 このことから、nullを開発した張本人も後悔の念を表明しています。 https://www.infoq.com/presentations/Null-References-The-Billion-Dollar-Mistake-Tony-Hoare/ Nullの現在ここまででnullの恐ろしさを十分に理解できたのではないでしょうか? しかし、ここまで恐ろしいと言われているnullをそのまま放置する人類ではありません。 比較的最近作成された言語では十分な対策が取られています。 有名な言語としてKotlinが挙げられます。 ではどのような対策をしているのでしょうか? やっていることは単純です。null非許容型を用意したんです。 実際のコードを見てみましょうval value: Int = null // NGこのように、普通の型にはnullが入らないようにしました nullを使いたい場合は、下のように?をつけることで許容型にする必要がありますval value: Int? = null // OKまた、この?を外さない限り、Int型のメソッドは呼び出せません。 外すにはnullが変数の中に入っていないか(いわゆるnullチェック)をする必要があります。 こうすることで強制的にnullチェックをさせるようにしました。 これで Int = Int or nullみたいなことは無くなったわけです。 もちろん、nullチェックがしやすい構文も用意されており、nullとの付き合いが断然楽になりました。 まとめかつて、nullは非常に恐ろしいものでした。 最も簡単にエラーを引き起こしてしまいますし、かつ原因がわかりづらい。 しかし、現在ではコードによる強制チェックができるようになったため、このようなエラーは随分と減りました。 むしろ、確実にチェックしなくてはならない存在となったのです。 チェックしないとそもそも関数呼び出せないですからね。 そのため、現在のコード上でのnullは結構使いやすい存在になったと個人的には思っています。 かといって乱用するのもどうかとは思いますが・・・ 昔よりはnullを使うデメリットがガッツリ下がったと思ってください。 もちろん、Null非許容型が用意されていない言語の場合、nullは非常に危険です。 例えばJava, PHP等の古い言語、またモダン言語でも昔のDart等が挙げられます。 できる限り使わないようにするか、Option型の導入を検討しましょう。 それでは、お疲れ様でした! 補足冒頭で述べた「nullより例外の方が危険だ」という事について補足しておきます。 例外の何が恐ろしいのかというと、コンパイラによってチェックされない事です。 どこからでも好きに投げれて、try-catchを使ってチェックをしなくてもコードに怒られない・・・ そうですよね? ちょっと怖くないですか? 先程のnullで説明したことと同じような課題が出てきています。 このことから「近代のgoto文だ」と批判する人すらいるほどです。 私もこれには同感です。そこらでポンポンエラーを投げるくらいならnullで表現する方が安全だと思います。 大概のモダン言語上のnullであれば確実にチェックをする必要がありますので想像以上に安心して動かせます。 値が存在しなかったからnullを返すわけですし、結構自然な気もしますしね。 いや、nullじゃ表現力が足りない。型の堅牢さも足りていないから例外は必須だ!という人。良い着眼点です。 そんな人はぜひResult型について勉強してみてください。これを使えば完全に例外のない世界も実現可能です。

> 内容を見る

プログラミング Polygon
プログラミング

Ubuntuのテーマをカスタマイズする

こんにちは!小石こはです。 最近実機にUbuntuを入れる機会があり、せっかくなのでテーマを自分好みにいじってみました。 概要この記事では、Ubuntuのテーマをカスタマイズする方法を紹介します。 (Ubuntuの入れ方などは紹介しません。入れ方についてはこちらのページが参考になると思います。) パッケージのインストールまずはカスタマイズするために必要なパッケージをインストールします。sudo apt-get update sudo add-apt-repository universe sudo apt install gnome-tweak-tool sudo apt install gnome-tweaks gnome-shell-extensionsインストールが完了したら再起動します。 テーマとアイコンのダウンロード今回はテーマはこちら、 アイコンはこちらを使用します。 それぞれのページへ行ってダウンロードします。 テーマとアイコン用のフォルダを作成するhomeの下に新たに「.themes」と「.icons」というフォルダを作り、その中にダウンロードしてきたテーマとアイコンのフォルダを入れます。 Tweaksの設定先程のコマンドで、Tweaksというアプリケーションがインストールできています。 Tweaksを起動し、「拡張機能」の「User Themes」をONにします。 「外観」で、「アプリケーション」や「GNOME Shell」、「アイコン」や「壁紙」などを自由にいじります。 Dockを画面下部の中心に配置最後に、ドックを画面下部の中心に配置していきましょう。 「設定」を開き、「外観」で、「Dockを自動的に隠す」をONに、アイコンのサイズを適当にいじり、「表示位置」を「下」にします。 次に端末で以下のコマンドを打って更に細かくDockをカスタマイズします。gsettings set org.gnome.shell.extensions.dash-to-dock extend-height false gsettings set org.gnome.shell.extensions.dash-to-dock show-apps-at-top true 完成!以上で完成です。 うまく行けば以下のような画面にできていると思います。 見た目が変わっただけですが、なんだかテンションが上がるのでカスタマイズしてみるのもいいのではないでしょうか。

> 内容を見る

プログラミング Polygon
プログラミング

Nextjs+microCMSで10秒ごとに更新かつpropsを自動補完できるページの作り方

microCMSで、記事タイトル・スラッグ・サムネイル・本文を取得し、NextjsでISR(Incremental Static Rendering)します。その際、エディタでPropsを全部自動補完できるようにします。 環境VSCodeNode.js v16.14.0microCMS API v1microCMS側の仕様変更や画面デザインの変更があるかもしれないのでご注意ください。 Next.jsの準備npx create-next-app@latest --ts Googleのサジェストでcreate-nuxt-appばっかり出てきて困りますね。Next使いはこれぐらい検索しないので出ないんでしょう(偏見)。 {   "name": "nextjs-microcms-practice",   "private": true,   "scripts": {     "dev": "next dev",     "build": "next build",     "start": "next start",     "lint": "next lint"   },   "dependencies": {     "next": "12.0.10",     "react": "17.0.2",     "react-dom": "17.0.2"   },   "devDependencies": {     "@types/node": "17.0.17",     "@types/react": "17.0.39",     "eslint": "8.9.0",     "eslint-config-next": "12.0.10",     "typescript": "4.5.5"   } } ▲昔と違ってeslint-config-next が入っています。今回はこれ以上lintはいじりません。 microCMSでAPIを用意 /api/v1/article というルートのエンドポイントを作りました。 ブログ的なサイトを作るので、リスト形式にします。 以下のようにフィールドを設定してください。 title / タイトル / テキストフィールド / 必須slug / スラッグ / テキストフィールド / 必須 / ユニーク / 後述の正規表現を適用thumbnail / サムネイル / 画像 / 任意body / 本文 / リッチエディタ / 必須 スラッグの詳細設定コンテンツIDをスラッグとして使うことも可能ですが、非エンジニアに触らせるのは危険すぎるので、別でユニークなスラッグフィールドを作りましょう。 ユニークの設定は「詳細設定」のところにあります。 「特定のパターンのみ入力を許可する」をONにしてください。パターンは^[a-z0-9]+(?:-[a-z0-9]+)*$でフラッグはなしです。 article-1 はOKですが、-artielce-1 みたいな先頭のハイフンはNGで、article--1 みたいな2回スラッグもNG、article-1- みたいな末尾のスラッグもNGになります。 お前こんなのどこで見つけたんだよって感じですが、 https://ihateregex.io/expr/url-slug/ i Hate Regex(正規表現なんて大っ嫌い)という神サイトがあってですね、ここに詳細な解説と一緒に例が載っています。 適当なデータを作成 適当な記事を書いて公開してください。プレースホルダに『ポラーノの広場』を使うとなんかデザイナー感出る。フォントに詳しそう。 microCMSと接続するnpm i microcms-js-sdk ライブラリを追加。 APIキーをコピーします。 echo MICROCMS_SERVICE_DOMAIN=あなたのmicroCMSサービス名 >> .env.local echo MICROCMS_API_KEY=$(pbpaste) >> .env.local 環境変数を書き出し。Linuxだとpbpasteじゃなくてxclip -selection clipboard -o を使えばいいそうです(ソース) あと、クライアントサイドで使わないのでconfigで環境変数を登録する必要はありません。 mkdir lib && touch $_/microcms.ts microcms.ts を作ります。 import { createClient } from 'microcms-js-sdk' export const client = createClient({   serviceDomain: process.env.MICROCMS_SERVICE_DOMAIN!,   apiKey: process.env.MICROCMS_API_KEY!, }) これでデータ取得の用意が整いました。 で、ここでReact 18からSSRでもSuspenseが...とか語ってたらキリがないので、普通にSSRして、静的にページを書き出せる形で作ります。 (React世界にはいろいろなデータフェッチ方法があるよ!調べてみよう!) 型定義microcms-typescript っていうライブラリが新しいAPIに対応していなかったので、公式のSDKを使います。 API_NAME=article mkdir types && touch $_/article.ts API_NAME はあとでも使います。 import type { MicroCMSDate, MicroCMSImage, MicroCMSListResponse } from 'microcms-js-sdk' export type ArticleType = {   id: string   title: string   slug: string   thumbnail?: MicroCMSImage   body: string } & MicroCMSDate export type ArticleListType = MicroCMSListResponse<Article> MicroCMSListResponse でtotalCount などを付けます。それ以外の部分を自動で書いてくれるライブラリを見つけられませんでした。(aspidaでもここは手動) 記事コンポーネントを作るORGANISMS_DIR=./components/organisms mkdir -p $ORGANISMS_DIR && touch "_/$(echo "$API_NAME" | sed 's/.*/\u&/').tsx" Atomic Designガン無視で突然「Organisms(生体)」が登場しましたね。宇宙の 法則が 乱れる! あと、イキりすぎて全部コマンドで済ませようとしていますね、何をしているかというとcomponents/organisms/(API名の先頭だけ大文字).tsx ってファイルを作っているだけです。大文字にする方法は色々あるそうなんですが、bashのバージョン云々が面倒なので置換してしまいました。 import { ArticleType } from '../../types/article' export default function Article(props: ArticleType) {   return (     <article>       <h1>{props.title}</h1>       {props.thumbnail && <img src={props.thumbnail.url} alt={`${props.title}のサムネイル`} />}       <div dangerouslySetInnerHTML={{ __html: props.body }}></div>     </article>   ) } 記事コンポーネントです。Atomic Designガン無視で生体の中身を書いてしまいましたが、説明のためなので見逃してください。 記事一覧を作るtouch "$ORGANISMS_DIR/$(echo "$API_NAME" | sed 's/.*/\u&/')List.tsx" ArticleList.tsx を作ります。 import { ArticleListType } from '../../types/article' export default function ArticleList(props: ArticleListType) {   return (     <div>       <ul>         {props.contents?.map(           (p) =>             p && (               <li key={p?.id}>                 <a href={`/articles/${p.slug}`}>{p.title}</a>               </li>             )         )}       </ul>     </div>   ) } 最低限の記事リストです。 一覧ページを作成するそれではNext.jsの真骨頂、SSRにおける型の推測をお見せしましょう。 import type { InferGetStaticPropsType, NextPage } from 'next' import Head from 'next/head' import ArticleList from '../components/organisms/ArticleList' import { client } from '../lib/microcms' import { ArticleType } from '../types/article' export const getStaticProps = async () => { const articlesData = await client.getList<ArticleType>({ endpoint: 'article', queries: { limit: 10, orders: 'publishedAt', }, }) return { props: { articlesData: articlesData ?? null }, revalidate: 10, } } type Props = InferGetStaticPropsType<typeof getStaticProps> const Home: NextPage<Props> = (props) => { return ( <div> <Head> <title>記事は{props.articlesData.totalCount}あります</title> </Head> <main>{props.articlesData ? <ArticleList {...props.articlesData} /> : <div>記事を取得できませんでした。</div>}</main> </div> ) } export default Home InferGetStaticPropsType<typeof getStaticProps> で、getStaticProps の返り値の方をReactのchildren と混ぜます。 するとHome のpropsにprops.articlesData が追加され、サーバーサイドの型をわざわざコンポーネント用に再度書く必要がなくなります。 こんな感じにタイトルに反映されます。 また、revalidate: 10 でISRが有効になり、適切なデプロイ環境なら10秒ごとにデータのキャッシュが切れます(10秒ごとにサーバーが動くわけではない。ここ重要)。 記事単体ページを作るmkdir -p pages/${API_NAME}s && touch $_/\[slug\].tsx [slug].tsx はparams.slug を変数として取ります。 import type { GetStaticPaths, GetStaticPropsContext, InferGetStaticPropsType, NextPage } from 'next' import Head from 'next/head' import Article from '../../components/organisms/Article' import { client } from '../../lib/microcms' import { ArticleType } from '../../types/article' export const getStaticPaths: GetStaticPaths = async () => {   const allArticles = await client.getList<ArticleType>({     endpoint: 'article',     queries: {       limit: 10,       fields: ['slug'],     },   })   const paths = allArticles.contents.map((c) => {     return {       params: {         slug: c.slug,       },     }   })   return { paths, fallback: true } } export const getStaticProps = async ({ params }: GetStaticPropsContext) => {   const articlesMatched = await client.getList<ArticleType>({     endpoint: 'article',     queries: {       limit: 1,       filters: 'slug[equals]' + params?.slug,     },   })   if (articlesMatched.contents[0]) {     return {       props: { articleData: articlesMatched.contents[0] ?? null },       revalidate: 10,     }   }   return {     props: {       articleData: null,     },     notFound: true,     revalidate: 10,   } } type Props = InferGetStaticPropsType<typeof getStaticProps> const ArticlePage: NextPage<Props> = (props) => {   if (props.articleData) {     const { title } = props.articleData     return (       <div>         <Head>           <title>{title}</title>         </Head>         <main>           <Article {...props.articleData} />         </main>       </div>     )   }   return <div>記事を取得できませんでした。</div> } export default ArticlePage 長いので分けて説明。 getStaticPathsexport const getStaticPaths: GetStaticPaths = async () => {   const allArticles = await client.getList<ArticleType>({     endpoint: 'article',     queries: {       limit: 10,       fields: ['slug'],     },   })   const paths = allArticles.contents.map((c) => {     return {       params: {         slug: c.slug,       },     }   })   return { paths, fallback: true } } Next.jsのgetStaticPropsで、動的にURLを生成するための関数です。client.getList<ArticleType> で一覧からslugだけを取り出し、それらを[{params: slug: "スラッグ"}] といった配列に収めてpaths に返します。 fallback: true は、初回生成時にないページに訪れても、データを取得する設定です。正直ブログだと必要ないのですが、公開した記事を即見れるようにしたい場合に便利です。 getStaticPropsexport const getStaticProps = async ({ params }: GetStaticPropsContext) => {   const articlesMatched = await client.getList<ArticleType>({     endpoint: 'article',     queries: {       limit: 1,       filters: 'slug[equals]' + params?.slug,     },   })   if (articlesMatched.contents[0]) {     return {       props: { articleData: articlesMatched.contents[0] ?? null },       revalidate: 10,     }   }   return {     props: {       articleData: null,     },     notFound: true,     revalidate: 10,   } }microCMSには2022年2月13日現在ユニークなフィールドからコンテンツ1つを返すAPIが用意されていません。そのため、filters: 'slug[equals]' + params?.slug で絞り込んで長さ0~1の配列をもらい、記事の有無を見ています。Strapiとか使えば自前でAPI作れるから楽しいんですけど、microCMSでは2022年2月13日現在こうするしかありません。 あと、params.slugの型は本来string | string[] | undefined ですから、文字列じゃない可能性を考慮するべきですが、文字列とプラスして文字列にしてしまえばMicroCMSQueries.filters?: string | undefined とたまたま合致し、型チェックが通ります。 しかもURL構造上配列になりえない(クエリパラメータじゃないのでカンマ書いても配列にならない)ので、これで動作に支障はきたしません。 notFound: true を返せば404になります。もちろん404ページはカスタマイズ可能です。 ページコンポーネントtype Props = InferGetStaticPropsType<typeof getStaticProps> const ArticlePage: NextPage<Props> = (props) => {   if (props.articleData) {     const { title } = props.articleData     return (       <div>         <Head>           <title>{title}</title>         </Head>         <main>           <Article {...props.articleData} />         </main>       </div>     )   }   return <div>記事を取得できませんでした。</div> } export default ArticlePage titleだけはページで使いたいので取り出します。ページ以外でheadをいじるのは人間のやることではない。 画像をNext/Imageにする Do not use <img>. Use Image from 'next/image' instead. See: https://nextjs.org/docs/messages/no-img-elementnext/core-web-vitals っていうeslintプラグインが追加されていて、普通のimgタグだとwarnレベルの警告が出ます。このままでもビルドはできますが、練習がてらNext/Imageを使ってみましょう。 next.config.js  images: {     domains: ['images.microcms-assets.io'],   }, 以上の設定を加えてください。microCMS以外の画像を使う場合は、適宜追加してください。 mkdir ./components/atoms && touch $_/MicroCMSImage.tsx やっと原子を作ります。順番がおかしい。 MicroCMSImage.tsximport type { MicroCMSImage } from 'microcms-js-sdk' import Image from 'next/image' export default function MicroCMSImage(props: { image: MicroCMSImage; alt: string }) {   const { width, height, url } = props.image   return <Image width={width} height={height} src={url} alt={props.alt} /> } next/image用にコンポーネントを分けるのは、サイズの取得が面倒だからです。 Article.tsximport { ArticleType } from '../../types/article' import MicroCMSImage from '../atoms/MicroCMSImage' export default function Article(props: ArticleType) {   return (     <article>       <h1>{props.title}</h1>       {props.thumbnail && <MicroCMSImage image={props.thumbnail} alt={`${props.title}のサムネイル`} />}       <div dangerouslySetInnerHTML={{ __html: props.body }}></div>     </article>   ) } これで画像部分を最適化できました。 HTMLがすごいことになってたら成功です。 参考microCMS: https://dev.classmethod.jp/articles/remix-with-microcms/InferGetStaticPropsType: https://zenn.dev/catnose99/articles/7201a6c56d3c88

> 内容を見る

プログラミング Polygon
プログラミング

MacのChromeで学校用プロフィールのショートカットを作る

Chromeのプロフィール選択で、Windowsならデスクトップショートカットを作るボタンがあるんですけど、Macにはないので自作します。 時々プロフィール選べない問題 皆さんChromeで「前回開いていたページを開く」にしていますか?賛否あると思うんですが、基本的にはこれが一番便利だと思います。 もちろんこの場合、学校用プロフィールを作っておかないと事故ります。実際に事故ったわけじゃないですけど、俺は文化放送の超A&G+の再生ページが開いてしまうんじゃないかとヒヤヒヤしていました。まあさすが声優のラジオというか、いきなり音が出る仕様にはなってないですけどね。 つまり、「前回開いていたページを開く」人は、「起動時に(プロフィール選択を)表示する」にチェックを入れないとやばいです。 しかしですね、Macだけかもしれませんが、Chromeがプロフィール選択画面をすっ飛ばす謎の現象が多々発生するんですよ。 人がいっぱいの講義室でChromeを開くときに、プロフィールが選べないのはかなりまずいです。 講義室で開く用のショートカットを作る ということで、「最初から学校用のプロフィールが開くショートカット」を作ります。 https://superuser.com/questions/377186/how-do-i-start-chrome-using-a-specified-user-profile Super UserのLinuxオタクによると、Application Supportにプロフィールがおいてあるらしいですよ。それで--profile-directory を付ければいいらしいです。 デフォルトの写真を確認$ qlmanage -p ~/Library/Application\ Support/Google/Chrome/Default/Google\ Profile\ Picture.pngまずDefault のプロフィール写真を見ましょう。ほとんどの場合、個人用Googleアカウントの写真が出るはずです。この写真が学校用だったら次の手順は飛ばしてください。 余談ですがqlmanageで立ち上がるプレビューは「プレビュー.app」ではないのでcontrol+Cで死にます。ちょっと確認したいときはこっちを使いましょう。(参考) $ PROFILE_NAME=$(ls ~/Library/Application\ Support/Google/Chrome | grep ^Profile | head -n 1) $ echo $PROFILE_NAME # Profile 1複数のプロフィールを作ると、Application SupportにProfile nというディレクトリができます。Default以外は学校用プロフィールしか作ってない場合、Profile 1 が学校用になるはずです。 $ cat <<EOT > ~/Desktop/学校用Chrome.sh #!/bin/bash open -b com.google.Chrome -n --args --profile-directory="$PROFILE_NAME" EOT $ chmod +x ~/Desktop/学校用Chrome.shスクリプトを作ります。エディタ宗教戦争に「エディタを使わない」という手段で抵抗。あとmacでしか使わないからbashでいいでしょ別に。 -b でappファイルの名前でなくバンドル識別子を使います。こっちのほうが確実。あと-n でアプリを無理やり増やします。これを付けないとすでに起動してるときに動作しない。(参考) はいこれで学校用ショートカットができました。 ターミナル.appの挙動について 「正常に終了したら閉じる」を選んどけば、勝手にexit; が入って閉じられるようです。

> 内容を見る

プログラミング Polygon
プログラミング

4200000000Hzでゴリ押す!!!(2)

今回はアルゴリズムとCPUのパワーでパズルを全力で解きます。 Exponential Idle(Android版 / iOS版)というクリッカー系放置ゲーム中のミニゲームである、矢印パズルを攻略します。 こちらのnoteの記事にめっちゃ影響を受けて書くことにしました。 と言っても、初級と中級は私でも頑張れば解けたのと、上級も先行研究があるので、エキスパートに絞って話を進めていきます(まあ上級も同じプログラムをちょちょっといじれば簡単に解けますが)。訂正とお詫び前回のサムネイルの一部に「♪ラデツキー行進曲(1.5倍速)」とありましたが、正しくは1.543倍速です。謹んでお詫び申し上げます。ルール説明(エキスパート)図1:矢印パズル(エキスパート)のルール六角格子状に並べられたタイルをタップすると、そのタイルを含む周囲(最大)7個のタイルがそれぞれ時計回りに60°回転します。 それを繰り返してすべてのタイルの向きを上向きに揃える、というルールです。目標盤面を入力として受け取り、各タイルのタップ回数を出力する。基本の考え方1回タップすることに60°回転するので、6回同じ場所をタップすれば盤面の状態は変わらず、加法巡回群をなすような6元集合、$\mathbb{Z}/6\mathbb{Z}$ を持ってくる。解法案1参考文献[3]と同様に、$\mathbb{Z}/6\mathbb{Z}$ 上の37次の線形方程式を解くことに帰着させる方法です。が。 聡明な読者の方ならお気づきでしょう。$\mathbb{Z}/6\mathbb{Z}$ は体でしょうか。2,3,4は乗法逆元を持たないので体ではないですね。 すると線形方程式を解くときに除法が使えないということになり、掃き出し法は使えないことになります(ピボットを1にできないだけで掃き出せないわけではないだろうが、一般的なアルゴリズムをそのまま持ってくるのは厳しそう)。2掃き出しで解けない(難しい)と言っても、元は有限個しかないので $6^{37}=6.2 \times 10^{28}$ 通りすべてを試してしまえという考え方。猿。 いや無理やけど。もし1パターンを1nsで検証できたとしても6.2e19 s掛かります。実際は1パターンの検証で約7x37回の足し算をすることになるのでもっとかかります。 imos法で最適化すればどうにかなるようなレベルの話ではないです。やるだけ無駄。3大本命。DFSです。DFS自体は木の全探索なのですが、探索の必要がない部分を枝刈りすればだいぶ計算量が減ります。どれぐらい絞れるかは後述。 今回はこれを採用。プログラムこれが解を探索するプログラムです。 入力の数字は、ディスプレイモードを数字にして表示された数字ということになっています(内部的には-1して持っているが)。#include <iostream> #include <vector> #include <tuple> #include <algorithm> using index_t = std::tuple<int, int>; using board_t = std::vector<std::vector<int>>; const int mod = 6; const size_t board_row = 7, board_col = 7; void dfs(board_t &board, board_t &hands, index_t index); void flip_around(board_t &board, index_t index, int amount); index_t next(index_t index); bool is_in_board(index_t index); void print_board(const board_t board); const index_t end_index = next({ 6, 6 }); int main() {   board_t board(board_row, std::vector<int>(board_col));   board_t hands(board_row, std::vector<int>(board_col));   for (index_t i = { 0, 0 }; i != end_index; i = next(i)) {     const auto [r, c] = i;     std::cout << r << " " << c << ": " << std::flush;     std::cin >> board[r][c];     board[r][c]--;   }   dfs(board, hands, { 0, 0 });   return 0; } void dfs(board_t &board, board_t &hands, index_t index) {   if (index == end_index) {     print_board(hands);     exit(0);     return;   }   auto [r, c] = index;   // 右端辺での枝刈り   if (c == 6 && r > 3 && board[r - 1][c - 1] != board[r - 1][c]) {     return;   }   // 下端辺での枝刈り   if (r == 6 && c > 3 && board[r - 1][c - 1] != board[r][c - 1]) {     return;   }   // 上端、左端辺以外での枝刈り   if (r != 0 && c != 0) {     // 左上マスを0にするように動かす     const int hand = (mod - board[r - 1][c - 1]) % mod;     hands[r][c] = hand;     flip_around(board, index, hand);     dfs(board, hands, next(index));     flip_around(board, index, mod - hand);   } else {     for (int hand = 0; hand < mod; hand++) {       hands[r][c] = hand;       flip_around(board, index, hand);       dfs(board, hands, next(index));       flip_around(board, index, mod - hand);     }   } } void flip_around(board_t &board, index_t index, int amount) {   // 正体不明だがちゃんと最初だけ初期化処理が走る   static std::array<index_t, 7u> dpos{     dpos[0] = { -1, -1 },     dpos[1] = { -1, 0 },     dpos[2] = { 0, -1 },     dpos[3] = { 0, 0 },     dpos[4] = { 0, 1 },     dpos[5] = { 1, 0 },     dpos[6] = { 1, 1 }   };   const auto [r, c] = index;   for (const auto [dr, dc] : dpos) {     if (!is_in_board({ r + dr, c + dc })) continue;     board[r + dr][c + dc] += amount;     board[r + dr][c + dc] %= mod;   } } index_t next(index_t index) {   auto [r, c] = index;   if (c == 6 || c - r >= 3) {     r++;     c = std::max(r - 3, 0);   } else {     c++;   }   return { r, c }; } bool is_in_board(index_t index) {   auto [r, c] = index;   return std::abs(r - 3) <= 3 && std::abs(c - 3) <= 3 && std::abs(c - r) <= 3; } void print_board(const board_t board) {   for (size_t i = 0; i < board_row; i++) {     for (size_t j = 0; j < board_col; j++) {       if (is_in_board({ i, j })) {         std::cout << board[i][j] << " ";       } else {         std::cout << "  ";       }     }     std::cout << "\n";   }   std::cout << std::endl; } こんなに const とか & とか書くんだったら最初からRustでやればよかったなと若干の後悔。 ぼちぼち解説していきます。 まずここ。using index_t = std::tuple<int, int>; using board_t = std::vector<std::vector<int>>;index_t というエイリアスに std::tuple<int, int> を当てています。 index_t index = {row, column}; となっているならば、index は、row 行 column 列のパネルの位置を表します。 board_t には std::vector<std::vector<int>> を当てていますが、 board_t board(R, std::vector<int>(C)); としたならば、board は、R 行 C 列のパネルの二次元配列を表します。(入力と)パネルの現状態と出力する手数に使います。 図2:indexの指し方 次はここ。index_t next(index_t index) {   auto [r, c] = index;   if (c == 6 || c - r >= 3) {     r++;     c = std::max(r - 3, 0);   } else {     c++;   }   return { r, c }; }next関数はその名の通り、次に探索する(タップ回数を決定する)点を決定する関数で、DFSでの探索順に直接関わってきます。 定義はまあ見りゃわかりますね(ifの条件に c - r >= 3 とか書いてあるが、これは条件をいっぱい書きたくなかったからうまいこと纏めてあるだけ)。 2行目の auto [r, c] = index; ってのは構造化束縛というC++17以降で追加された機能です。分割代入だと思って大体問題ありません。 一応探索順を図に示しておくとこうです。図3:DFSの探索順この順序にしているのは、単純に分かりやすいという以外にもう一点理由があって、枝刈りがしやすいという点。 枝刈りの方法はdfs関数を見ればわかります。 void dfs(board_t &board, board_t &hands, index_t index) {   if (index == end_index) {     print_board(hands);     exit(0);     return;   }   auto [r, c] = index;   // 右端辺での枝刈り   if (c == 6 && r > 3 && board[r - 1][c - 1] != board[r - 1][c]) {     return;   }   // 下端辺での枝刈り   if (r == 6 && c > 3 && board[r - 1][c - 1] != board[r][c - 1]) {     return;   }   // 上端、左端辺以外での枝刈り   if (r != 0 && c != 0) {     // 左上マスを0にするように動かす     const int hand = (mod - board[r - 1][c - 1]) % mod;     hands[r][c] = hand;     flip_around(board, index, hand);     dfs(board, hands, next(index));     flip_around(board, index, mod - hand);   } else {     for (int hand = 0; hand < mod; hand++) {       hands[r][c] = hand;       flip_around(board, index, hand);       dfs(board, hands, next(index));       flip_around(board, index, mod - hand);     }   } }私もそこまでアホではないし、この関数は深い再帰を伴うので引数の大部分は参照で受けるようにしました。 部のC#erの皆さんが卒倒するかもしれませんが、vector<T>は値型です。というか、C/C++に値型・参照型という分け方はありません。 明示しない限り常にすべて値渡しになるので、ちゃんと参照渡しになるよう指定してやります。 さておき、枝刈りの話。これも図に示したほうが早いでしょう。図4:dfs関数の枝刈り図3に示した探索順から分かるように、27,32,36のノードでは、そのノードを操作した後は左上と真上の変化がないので、その2箇所の状態は必ず同じでなければならず、そうでなければ後退して探索し直すことになります。34,35,36でも左上と左下で同じことが起こります。 また図3から分かるように、ある時点で探索しているパネルの左上にパネルがあったとき、探索しているパネルを動かした後に再び左上のパネルが変わることはないので、左上は0にならなくてはなりません。よって左上のパネルを元にただ一通りに決まります。逆に言えば、0~5の中から自由に選べるのは左上にパネルが存在しない0,1,2,3,4,9,15のたった7個のパネルのタップ回数のみです。したがって、検証の必要なパターン数は $6^7 \approx 10^{5.45}$ 通りだけになります(ただし、関数呼び出し自体が重いことと、これらの点の不正性が分かるまでに再帰の深いところに潜ることがあるのでやはりある程度計算に時間はかかる)。 こんな感じで殆どの点で枝刈りが行えることがわかりますね。 if (index == end_index) {   print_board(hands);   exit(0);   return; }で、最後36番が終わればここの分岐にたどり着いて終わりです(なんでこの人exitとreturn両方書いてるんだろう)。 でも図4を見てもらえばわかりますが、36番ノードだけチェックが入ってないんですよね。 これでいいのかと言われれば良くて、解が存在するならば、36番ノードだけが非0であることはありません。 流石に解が存在しない問題は生成されないだろうということでここは一つ。 flip_around(board, index, hand); dfs(board, hands, next(index)); flip_around(board, index, mod - hand);ところでこの部分ですが、再帰DFSにおける常套手段です。 ある変換(ここではある1パネルをn回タップすること)が可逆であるならば、dfs呼び出しから帰ってきた後に逆変換(ここでは同じパネルを6-n回タップすること)を行えばうまいことDFSになります。是非覚えておいてください。 以上。閑話void flip_around(board_t &board, index_t index, int amount) {   // 正体不明だがちゃんと最初だけ初期化処理が走る   static std::array<index_t, 7u> dpos{     dpos[0] = { -1, -1 },     dpos[1] = { -1, 0 },     dpos[2] = { 0, -1 },     dpos[3] = { 0, 0 },     dpos[4] = { 0, 1 },     dpos[5] = { 1, 0 },     dpos[6] = { 1, 1 }   };   ... }この部分、何ですか。自分で書いたけどどういう理屈で初期化されているのかわかりません。C++プロの方、教えて下さい。 aggregateならメンバ名を指定して初期化する方法があるけど、その延長と考えていいんですかね。参考文献[1]Conic Games「Exponential Idle - Google Play のアプリ」<https://play.google.com/store/apps/details?id=com.conicgames.exponentialidle> [2]Gilles-Philippe Paille「「Exponential Idle」をApp Storeで」<https://apps.apple.com/jp/app/exponential-idle/id1538487382> [3]ちゃそ「Exponential Idle #2 矢印パズル攻略法(と二元体GF(2)上の線形方程式について)」<https://note.com/so_ra_64/n/n9c2eb6a5ef6f> [4]ますたー。/繰り上げP「焼き甜花ちゃんシリーズの作り方&素材」<https://www.nicovideo.jp/watch/sm37861810> [5]いもす研「いもす法」<https://imoz.jp/algorithms/imos_method.html>

> 内容を見る

プログラミング Polygon
プログラミング

【2022年度新入生向け】生協でWindows11のパソコンを買ったらやること

俺は今体調が悪くてこんな記事書いてる場合じゃないんですが、とんでもない事実に気づいたので急遽書きます。 https://www.microsoft.com/ja-jp/d/surface-pro-8/8qwcrtq8v8xg 生協がSurface Pro 8に切り替えた場合、Windows10を知らない世代が入学する可能性があるんですよ。 今販売している「Pro7」なら10ですけど、国内メーカーが既に「11プリインストール」機種を売ってるので、「最初から11」の学生が来てもおかしくない。 そこで、 「10を知らない世代が電算研に来た場合、最低限やっておいてほしいことのチュートリアル」を書きました。 1. ユーザーフォルダがメアドになってる?マイクロソフト(以下MS)は近年、「MSアカウントの~~強制的な~~OS紐づけ」を強行してきました。 そしてWindows11 Homeではついに、ライセンス認証の段階で機内モードをONにしない限り、強制的にサインインを要求されるというとんでもない仕様に変更されました。 (SurfaceはHomeライセンスですが、自作するならProのライセンスを買いましょう。) その結果、 「MS垢のメアドの@より前」が、そのまんまフォルダ名になるという仕様になっているそうです。俺はローカルアカウントで作ったので検証できてません。 これにより、「事故でフォルダ名を日本語にしてしまう」可能性はなくなりました。 しかしですね、 フォルダ名になる前提で、メアド決めましたか? メアドなんて「名前+誕生日」または「推しの名前+推しの誕生日」にしかしないと思うんですが。てか、岡大Gmailなら「ランダム」じゃん。理不尽すぎる。 https://pc-karuma.net/change-windows-11-user-folder-name/ ということで、恥ずかしいなと思ったらこちらの記事を参考に変えましょう。 2. 拡張子を表示 なぜ最初から表示しないのか? は置いといて、これだけはマジで表示しといてください。 なんだこれ太古のOffice2003か? リボンを廃止した結果がこれだよ!なんだこの多重階層メニューは。 3. タスクバー左に寄せて! これはもう人間関係の問題です。 先輩にパソコンを渡す場面を想像してみてください。 ここに隙間があると、この変化に適応するために余分なエネルギーを使うんですよ。 タスクバーを左クリック→「タスクバーの設定」→「タスクバーの動作」から、「左揃え」に変えてください。 4. カッコいいターミナルを最速で開く方法を覚えよう 単にターミナルって書くと語弊があるんですが、「Windows Terminal」が正式名称だと思います。「コマンドプロンプト」だのなんだのをタブでまとめてくれるやつです。 https://www.microsoft.com/ja-jp/p/windows-terminal/9n0dx20hk701 Windows10の時は自分で入れる必要があったんですけど、11なら同梱されてます。 管理者権限付きでターミナルを開く方法は、Win+X→A の順番でキーを押すだけです。めっちゃ使うので覚えときましょう。 5. wingetでChromeを入れよう winget を使えば、Edgeの嫌がらせスパム通知なしでGoogle Chromeを入れられます。 winget search chrome これで検索したらGoogle.Chrome があるはずです。 winget install Google.Chrome わーい! 6.GitHubアカウント作ろう もはや「最低限やっておいてほしい」というか「開発環境」の記事になってますね。 いつかたっぷり使ってもらう😈ので、作っといてください。 7. VSCode入れよう 「VSCode」を入れてください。 https://code.visualstudio.com/ 難しいこと考えずに入れちゃってください! 詳しくは説明しませんが、最低限やることがあります。 「設定の同期」で、「GitHubアカウント」を選んでサインインしましょう。設定や拡張機能が同期できます。 あと、こちらの拡張機能パックを入れておいてください。後述のWSLと連携できるようになります。 8. WSLを入れよう 情電数理系なら必須ですね。(これを書いている人は機械システム系です。←は?) 「WSLとは何ぞや」など、ここでは説明しないので、詳しい人に聞いてください。要するに現在の部長です!!! Win11なら楽になった Windows 10の場合、「バージョン古すぎてWSL使えん」→「逃げ続けていたWindows Updateを仕方なく受け入れる」→くっそ時間かかるという悪夢が発生するんですが、11は考えなくていいです。 仮想機能の有効化 Get-WindowsOptionalFeature -Online -FeatureName *plat* この結果、VirtualMachinePlatformがDisabledなら以下の手順を行ってください。 Enable-WindowsOptionalFeature -online -featurename VirtualMachinePlatform WSLのインストール wsl --install これだけでUbuntuが使えるようになります。(Ubuntu嫌いな部員はいない前提で書いている) カーネルのアップデート https://docs.microsoft.com/en-us/windows/wsl/install-manual#step-4---download-the-linux-kernel-update-package 俺の環境だとこれが必要でした。 ...以上です。詳しいことは部長に聞いてください。 参考 https://kb.seeck.jp/archives/16953

> 内容を見る

プログラミング Polygon
プログラミング

コンピュータ弱者、初めてのシェルスクリプト

恵まれたソフト(illustrator)で初めて作ったカスみたいなサムネそうだ、シェルスクリプト作ろう。きっかけはBlenderのアドオン開発環境を整えようとしたことであった。ただ普段の制作環境とアドオン開発環境を分けたかっただけなのだ。 しかし自分は数行のバッチファイルを書く数分をケチるために最終的に数時間を費やしてしまったのだ。Blenderの設定はどこにある?まず、基本的にWindowsにおいてBlenderの設定ファイルは初回起動時にC:\Users\(ユーザー名)\AppData\Roaming\Blender Foundation\Blender\(バージョン名)に作られる。 詳しい説明は省くが、そこからconfigdatafilescriptsへと派生する。そして次回起動時からそのフォルダにあるファイルの設定を元に新規ファイルが作られる。 今回大事なのはconfigとscriptsである。このフォルダにスタートアップファイル、プリファレンスファイル、プリファレンスでインストールしたアドオン等が含まれているのだ。 単にデスクトップにあるBlenderアイコンをダブルクリックするだけでは、この一つの設定しか使えない。つまり制作環境とアドオン開発環境を分けることができない。 何か方法がないか探してたところ、「環境設定を複数用意する方法・PC/バージョン間で設定を共有する方法【Blender】」という記事を見つけ、方法3.別設定で開く.batファイルを作るを参考にしてバッチファイルを作った。これで一件落着のはずであった。 だが、自分はこう思った。「新しい環境を作るのにいちいちフォルダを作ってちまちまとパスをコピーするのも面倒だし、プログラムを書いてコンピューターに作らせればいいじゃん」 そのせいで苦しむ羽目になったのである。とりあえず書いてみる恥ずかしながら今まで自分はコマンドプロンプトしか使ってなかったので、Windows PowerShellをちゃんと勉強したいという思いがあった(PowerShellのほうがいろいろ出来そうだし)。 そして以下のようなメモをとった。(実際は色々調べながら書いてるので、最初からガチガチに固めて書いたわけじゃない) これを元にPowerShellスクリプトを書いていく。ちなみに自分はVisual Studio Codeを使っている。 まず、スクリプトが引数を受け取るためにはParam() という関数を使えばいいらしいので、Param($name_pref, $name_bat, $version_blender)と書き、blender_add_env.ps1 として保存した。しかしながら、ここで「変数の型どうなってんねん」と感じたので、` $name_pref.Gettype() $name_bat.Gettype() $version_blender.Gettype()と追記し、ターミナルで.\blender_add_env hoge hogehoge 3.0 と実行すると、IsPublic IsSerial Name                                     BaseType -------- -------- ----                                     -------- True     True     String                                   System.Object True     True     String                                   System.Object True     True     Double                                   System.ValueTypeと表示される。$version_belnderがDouble型になってるのがどうも嫌だ。2.93などの中途半端な数字ならまだしも、Blenderのバージョンはもうすぐ3.0になる。このままだと3.0の0の部分は無視されてしまう。それに事故を防ぐために引数は全部String型で受け取りたい。なのでParam(     [string]$name_pref,     [string]$name_bat,     [string]$version_blender )と書き直した。ついでに(個人的に)見やすくした。受け取ったフォルダの名前で現在の階層に新たなフォルダを作る新しいフォルダに移動するconfigとscriptsのフォルダを作るは簡単なので、さっさと調べてNew-Item $name_pref -ItemType Directory Set-Location $name_pref New-Item config, scripts -ItemType Directoryと最初は書いた。しかし「いちいち移動するの無駄じゃん、一行でいけるやろ」と感じたので、New-Item $name_pref/config, $name_pref/scripts -ItemType Directoryと書き直し、さっきのコマンドを再び実行すると、 このように新しいフォルダーがきちんと得られたのでOKである。 次はconfigフォルダとscriptsフォルダの絶対パスを相対パスから得たい。これをするためにはConvert-Pathを使えばいいらしく、$path_config = Convert-Path "$($name_pref)/config" $path_scripts = Convert-Path "$($name_pref)/scripts" $path_config $path_scriptsと書いた。後半の2行は確認用である。例によってあのコマンドを実行すると、 となり、ちゃんと絶対パスが得られることがわかった。 とりあえず空のバッチファイルをNew-Item で作る。$bat_file = New-Item "$($name_bat).bat"そしてAdd-Contentでバッチファイルに追記していく。Add-Content $($bat_file) "set BLENDER_USER_CONFIG=$($path_config)" Add-Content $($bat_file) "set BLENDER_USER_SCRIPTS=$($path_scripts)" Add-Content $($bat_file) "cd C:\Program Files\Blender Foundation\Blender $($version_blender)" Add-Content $($bat_file) "blender.exe"これで終了である。(書くのが面倒くさくて後半投げやりになってしまった)完成だと思った?blender_add_env.ps1だと長ったらしいし文法的におかしい気がするのでaddbleenv.ps1に改名した。 中身はこんな感じである。Param(     [string]$name_pref,     [string]$name_bat,     [string]$version_blender ) New-Item $name_pref/config, $name_pref/scripts -ItemType Directory $path_config = Convert-Path "$($name_pref)/config" $path_scripts = Convert-Path "$($name_pref)/scripts" $bat_file = New-Item "$($name_bat).bat" Add-Content $($bat_file) "set BLENDER_USER_CONFIG=$($path_config)" Add-Content $($bat_file) "set BLENDER_USER_SCRIPTS=$($path_scripts)" Add-Content $($bat_file) "cd C:\Program Files\Blender Foundation\Blender $($version_blender)" Add-Content $($bat_file) "blender.exe"これでやっと終わりだと思った。現実はそうではなかった。 結論から言うと、さらにこのaddbleenv.ps1を実行するバッチファイルを作らなければならなかった。 というわけで、powershell C:\z_ps_script\addbleenv.ps1 %1 %2 %3という内容のaddbleenv.batを書いた。(説明すっとばしますごめんなさい) これをSystem32にぶち込み、エクスプローラーでaddbleenv hoge hogehoge 2.93と実行してみると ! !! !!! !!!! !!!!! で、出来てる~! ~完~ あとがきはじめてじぶんのためにプログラムをかけたのでうれしかったプログラムのかきかたぐだぐだてすともぐだぐだぶんしょうもぐだぐだよくかんがえたらがぞうむだなのある こーどぶろっくでかけやすいこうだるいこんなくだらないプログラムをかくのにふつかもかかったきちょうなさくひんせいさくじいかんをむだにしたけっかんはしらんおまけ

> 内容を見る

プログラミング Polygon
プログラミング

競プロ環境構築#3 Python編

Windowsの方はWSLを入れて読んでください。 Pythonはいいぞ。Pythonはクソ。私がPythonを始めようとしているすべての人(上級者とか逸般人とか言われる人を除く)に言っていることです。 Pythonをやりましょう。 プログラミング初心者が一番最初に触るのに適している言語はPython…そんなわけ無いですね。JavaScriptだと思います(個人の感想です)。 JavaScriptについては別の回でやります。 まあPython人気ですし。やりましょう。図1:Googleトレンド「プログラミング言語」関連トピックの人気順5位がPython(2021年6月28日現在)←執筆をサボってたのがバレちゃう! Pythonが初心者向けである理由ググれ。というのもなんなのでちょっとぐらい僕の見解を話します。動的型付け言語である言語の特性の話ですが、型を意識してプログラムを書くというのは知識なしでは難しいと思います。 単にモノを作りたい、というだけであれば別に静的型付けに拘る必要はないですし、余計な難点が取り払われると考えることができます。 本物の初心者はエラーログを読めないことが多い[独自研究]のでそっちのほうが楽です。実はそんなに新しくないPythonはここ数年で[いつ?]急速に流行りだした言語ではありますが、Python 2.0(廃止済み)が2000年に、Python 3.0が2008年にリリースされています。 …いや言うて新しいやん、Go,Rust,Kotlinあたりと同じぐらいの時期やん、と思われるかもしれません。 が、それは言語としての話であって処理系としての話でいうとPython 3がだいぶ早いです。Go 1は2012年3月28日、Rust 1.0.0は2015年5月16日、Kotlin 1.0.0は2016年2月15日です。 対してCPython v3.0は2008年12月4日です。 まあ大幅な仕様変更が有ったとは言え、随分前からv2.xの処理系は有ったわけですから当然っちゃ当然ですね。 余談ですが、今は見る影もないCPython v1.0.1は1994年2月16日にリリースされました。Gitが生まれたのが2005年といえば相当昔なのがわかると思います。 利用者が多いという点も、情報が多いことに寄与していると思われます。 公式リファレンスも充実しています(もっとも、競プロだから公式リファレンスと多少のモジュールだけ見てれば十分という話ですが)。 競プロにおいてPythonが微妙な点遅い最大の欠点と言っても過言ではない。そう、このCPythonというインタプリタは普通に使うと遅いです。 それはもうとにかく遅い。ABC182-E の言語別実行時間分布 Rust はっや pic.twitter.com/mh6aXMAxNo— scol (@scol_kp) November 9, 2020 上記tweetの一番右が多分CPython 3だと思いますが、AC者滅茶苦茶少ないですよね。なぜかと言えば普通に書くと遅いから。 Python 3自体の使用者はかなり多いのですが(C++に次いで2番目[要出典])、 ユーザーの大半はPyPyというCPythonとは別のインタプリタを使っています。 CPythonで動くコードをほとんどそのまんま動かせて、しかも早いのが素晴らしいところです。 AtCoderで未だにPyPy 7.3.0(Python 3.6)が使われているのが玉に瑕ですが、次の言語アップデートを気長に待ちましょう。Off-side Ruleサッカーの話ではなくて。ここでは、左端から離れる(off-side)規則のことです。インデントでブロックを表します。 対になる概念はCurly-bracket programming(中括弧でブロックを表す)。 Pythonという言語の設計思想は調べてもイマイチわかりませんが、 一つ言えそうなことは「プログラムが動くためには、美しく有るべき(SHOULD)。」ということです。動いてはならない(MUST NOT)、まで強くはないです。 ついでに、現在のPythonの言語仕様は PEP(Python Enhancement Proposal; Pythonをよりよくする提案)という提案を多数取り込むことで出来上がっています。 マージされたPEPの中でも最も有名なのはPEP8でしょう。 Pythonの生みの親であるGuido van Rossumを含む3人によって提案された、コードスタイルについての規則です。 その中では、インデントの推奨サイズ(半角スペース4個、2個でも8個でも、タブスペースでもない)や1行の推奨最大文字数まで指定されています。 それで、それの何が問題かと言えば、コードをコピペしたときにインデントが崩れたとして、それを自動で直すことができません。 コピペライブラリを貼り付ける場合にわざわざインデントを手動で直さなければならず、不便きわまりありません。 中括弧を使わなくともブロック末尾にendキーワードを置くRubyでは問題にならないのですが…… 本編お待たせしました。環境構築について話していきます。 例によって、#1 共通編を前提としますが、 使っているHeadless CMSサービスの都合上、<details> <summary>要素とかidによるページ内リンクが使えずごちゃごちゃしているので、 そのうち大幅改版してDockerfileでも作ることにします。乞うご期待。 正規表現でうまいこと置換すれば任意のHTML要素を置けるとかそういうことを言わない。 さて、Pythonの環境についてですが、一応CPythonとPyPy両方の説明をします。 速度的にはPyPyのほうが手抜きして高速化できるのですが、AtCoderのPyPyではNumPy等の便利なライブラリが使用できません。 CPythonで使えるライブラリはここのQiita記事に書いてありましたが、実際使えそうなのはNumPy、Numba、NetworkXぐらいでしょうか。SciPyも使える時があるのかな。 私は標準ライブラリしか使わないので基本PyPyです。PyPyUbuntuでPyPy3をインストールする方法は複数あります。aptを利用してUbuntu公式リポジトリのpypy3/focal 7.3.1+dfsg-4をインストールする公式で配布されているPyPy3 7.3.0のビルドをダウンロードするpypy.orgからPyPy3 7.3.0のソースをダウンロードしてビルドする手っ取り早い1と2の方法を紹介します(PyPyは公式でも自分でビルドすることは推奨されていないので)。方法1 apt install説明するまでもないような気がしますが。$ sudo apt install pypy3 $ pypy3 -Vはい。方法2 ビルド済みのPyPyをダウンロードこれもtarをダウンロードしてきて展開して適切な場所に配置するだけです。簡単ですね。$ sudo apt install wget $ cd /tmp $ wget https://downloads.python.org/pypy/pypy3.6-v7.3.0-linux64.tar.bz2 $ sudo tar vxjf pypy3.6-v7.3.0-linux64.tar.bz2 -C /usr/local/lib $ cd /usr/local/bin $ sudo ln -s ../lib/pypy3.6-v7.3.0-linux64/bin/pypy3 pypy3 $ pypy3 -VCPythonAtCoderで2021年11月現在採用されているCPythonのバージョンは3.8.2です。aptを利用してUbuntu公式リポジトリのpython3/focal,now 3.8.2-0ubuntu2をインストールするpython.orgからPython 3.8.2のソースをダウンロードしてビルドするとまあPyPyと概ね同じですが、Linux向けビルド済みパッケージを公式が配布していないので、 Ubuntuからの供給が絶たれれば自分でビルドする他なくなります。方法1 apt install$ sudo apt install python3 $ python3 -Vはい。方法2 ソースからビルドする時間がかかるのであんまりしたくありませんが、一応。$ cd /tmp $ sudo apt install wget xz-utils gcc make zlib1g-dev libssl-dev libbz2-dev libffi-dev $ wget https://www.python.org/ftp/python/3.8.2/Python-3.8.2.tar.xz $ tar vxJf Python-3.8.2.tar.xz $ ./configure --prefix="$HOME/.local" $ make $ make test $ sudo make install $ echo "PATH=$HOME/.local/bin:\$PATH" > ~/.bashrc && source ~/.bashrc $ python3 -VライブラリのインストールCPythonはいくつかライブラリが入っているという話をしたので、一応入れておきましょう。$ pip3 install networkx numba numpy scipy何も考えることはないですね。 こちらとしてはインストールに難儀しました。 ./configure時に--prefixオプションを指定しないと、make install時に/usr/local/binに書き込もうとするので権限がなく、sudo make installするとpip installがrootでしか使えませんでした。 また、libssl-devを入れないとそもそもpip installできないし、libbz2-devがないとNetworkXが、libffi-devがないとがNumbaとSciPyが使えませんでした。 これでお好きなようにPythonのコードを書くことができます。VSCodeの拡張機能PythonPylancepython-snippetsVisual Studio IntelliCodeあたりを入れとけばいいんじゃないですかね。知らんけど。

> 内容を見る

プログラミング Polygon
プログラミング

LaravelをCloud Runにデプロイして効率よくバックエンドを開発しよう!

何円ぐらいで済むの? 以下の手順で60.77時間、動かしてみました。リージョンは全て東京(asia-northeast1)です。 結果MySQL 実行: 97円MySQL ストレージ: 11円ストレージ(NA-APAC間の通信): 5円以上、113円でした。 一時間1.85円として計算すると、1ヶ月で1338円になります。 お詫びすいません、ケチれませんでした!!!!! ただ、GitHubからデプロイすることで効率の良い開発スケール他GCPサービスとの円滑な連携が可能になる点は見逃せません。余裕のある方は試してみてください。 下準備GCPのセットアップgcloud CLIをインストールしておく。環境によって手順が異なるので省略。 プロジェクトを作り、支払いアカウントを紐づける。 gcloud auth loginまずはログインする。 PROJECT_NAME=(表示上のプロジェクトネーム) PROJECT_ID=$(gcloud projects list --format 'value(projectId)' --filter name=$PROJECT_NAME) export PROJECT_ID gcloud config set project $PROJECT_ID gcloud services enable \     containerregistry.googleapis.com \     cloudresourcemanager.googleapis.com \     iam.googleapis.com「表示上のプロジェクトネーム」はGCPの画面に出ているプロジェクト名。プロジェクトをセットし、APIを有効化する。 Terraformのインストールいつか使うんだろうなーと思っていた。入れてなかったのでここで入れておく。 brew install tfenv tfenv install 0.12.6 tfenv use 0.12.6tfenvを使うのは、以下のテンプレートが0.12.6を想定していたから。随時変更しよう。 ステップ1. テンプレートを準備自分でやろうとしたがあまりにめんどくさかったので、以下のテンプレートを使う。 https://github.com/villers/laravel-cloud-run-sql これをフォークしよう。 クローンしてビルドgit clone git@github.com:あなたのユーザー名/laravel-cloud-run-sql.git cd laravel-cloud-run-sql docker-compose build euをasiaに東京で動かすので、レポジトリ内のeu.gcr.ioをasia.gcr.io に置換。 ローカルで試すdocker-compose up 起動の様子。なんでもDockerでやれば、なんかすごいことやってるみたいに見える。 docker-compose run --rm app php artisan migrate --seed マイグレーションする。 http://localhost:8080/ で動作確認しよう。 ステップ2. GCPにコンテナをアップするサービスアカウントを用意するサービスアカウントを作り、Owner権限を与える。キーをダウンロードしてterraform-key.json として保存し、環境変数に設定、サービスアカウントとして認証する。それらが以下のコマンドでできる。ありがとうgcloud CLI! gcloud iam service-accounts create deployer \     --display-name "Terraformのサービスアカウント" gcloud projects add-iam-policy-binding ${PROJECT_ID} \   --member serviceAccount:deployer@${PROJECT_ID}.iam.gserviceaccount.com \   --role roles/owner gcloud iam service-accounts keys create ~/terraform-key.json \   --iam-account deployer@${PROJECT_ID}.iam.gserviceaccount.com export GOOGLE_APPLICATION_CREDENTIALS=~/terraform-key.json gcloud auth activate-service-account --key-file=$GOOGLE_APPLICATION_CREDENTIALS ビルド(M1注意)export SERVICE_NAME=laravel-app-service docker build --platform linux/amd64 -f .cloud/docker/php/Dockerfile -t asia.gcr.io/${PROJECT_ID}/${SERVICE_NAME} . 上記コマンドでアジア用タグをつけたイメージをビルドする。間違ったタグをつけたりしたら、docker images からのdocker rmi [ID] で消せる。それか、Docker Desktopのイメージ画面を使う。 --platform linux/amd64 はM1用。ARMでビルドしてもデプロイで死ぬ。このせいで数時間が無駄になった。 レジストリにプッシュgcloud auth configure-docker docker push asia.gcr.io/${PROJECT_ID}/${SERVICE_NAME}コンテナレジストリにログインして、さっきのをプッシュする。 ステップ3. 自動でCloud SQLとLaravelをデプロイTerraform初期化cd .cloud/terraform terraform init ついに初回デプロイexport REGION=asia-northeast1 export INSTANCE_NAME=laravel-app-service terraform apply \   -var "region=${REGION}" \   -var "service=${SERVICE_NAME}" \   -var "project=${PROJECT_ID}" \   -var "instance_name=${INSTANCE_NAME}" Do you want to perform these actions?   Terraform will perform the actions described above.   Only 'yes' will be accepted to approve.   Enter a value: yesと打てば、Secret Managerでキーを作り`laravel`というサービスアカウントができCloud SQLにMySQLをセットアップCloud RunでLaravelをデプロイの4つが行われる。 Cloud SQLの部分でかなり時間がかかる。 Apply complete! Resources: 26 added, 0 changed, 0 destroyed. Outputs: result =     The laravel-app-service is now running at https://<ここにURL>     If you haven't deployed this service before, you will need to perform the initial database migrations:     cd ../..     gcloud builds submit --project <ここにプロジェクトID> --config .cloudbuild/build-migrate-deploy.yaml \         --substitutions _APP_ENV=dev,_APP_DEBUG=true,_REGION=asia-northeast1,_INSTANCE_NAME=laravel-app-service,_SERVICE=laravel-app-service     The username and password are stored in these secrets:     gcloud secrets versions access latest --secret DATABASE_URL     ✨ 終わるとこんなんが出てくる。 Cloud Runの画面でもURLが確認できる。マイグレーションは後でやる。 GitHubと連動してビルド・デプロイさせる実はTerraformを使うのは初回だけでいい。あとはCloud Buildを活用しよう。 ルートにcloudbuild.yaml を作る。 cloudbuild.yamlsteps:   - id: 'build_and_push'     name: 'gcr.io/kaniko-project/executor:latest'     args:       [         # https://github.com/GoogleContainerTools/kaniko/issues/1427         "--dockerfile=.cloud/docker/php/Dockerfile",         "--cache=true",         "--cache-ttl=6h",         "--destination=asia.gcr.io/${PROJECT_ID}/${_SERVICE}",       ]      - id: 'migrate'     name: 'gcr.io/google-appengine/exec-wrapper'     args: ['-i', 'asia.gcr.io/${PROJECT_ID}/${_SERVICE}',            '-s', '${PROJECT_ID}:${_REGION}:${_INSTANCE_NAME}',            '-e', 'PROJECT_ID=${PROJECT_ID}',            '-e', 'APP_ENV=${_APP_ENV}',            '-e', 'APP_DEBUG=${_APP_DEBUG}',            '--', 'php', 'artisan', 'migrate']   - id: 'deploy'     name: 'gcr.io/cloud-builders/gcloud'     args: ["run", "deploy", "${_SERVICE}",            "--platform", "managed",            "--region", "${_REGION}",            "--image", "asia.gcr.io/$PROJECT_ID/${_SERVICE}"] options:   substitutionOption: ALLOW_LOOSE substitutions:   _APP_ENV: prod   _APP_DEBUG: "false"   _SERVICE: laravel-app-service   _REGION: asia-northeast1   _INSTANCE_NAME: laravel-app-service ビルドのトリガー設定を変更(重要) 次に、Cloud Runのページを開く。 このボタンでビルドのトリガーを作れる。 GitHubのレポジトリと接続すればいいが、Dockerfile は間違いなので修正が必要。 「EDIT CONTINUOUS DEPLOYMENT」から設定を開き、LocationをRepository に変える。 Cloud Build configuration file (yaml or json) を選択する。/cloudbuild.yaml になっているか確認。ブランチ名を変えた場合は、適宜トリガーの設定も変える。 プッシュすればビルド、プッシュ、マイグレーション、デプロイがされる。こちらのリンクからビルド履歴が見れる。 初回は時間がかかるが... 2回目以降はKanikoがキャッシュを活用してくれる。大体二分で終わる。 え? FTPで差分をアップした方が早い? 確かにそうかもしれない。だが、全部自動化バージョンを戻せる環境を簡単に再現という点で明らかに効率がいい。積極的に活用していこう。

> 内容を見る